问题描述
我想构建一个看起来像LinkedIn用户个人资料的自定义个人资料组件。如您所见,有一个Card元素,然后头像照片覆盖了它。如何构建这样的组件?我是Vuejs / Vuetify的新手。我在网上寻找了一些示例,但找不到任何能说明我需要的内容。
感谢您的代码段或建议。
解决方法
从他们的文档中,我仅以this为例并对其进行了修改,但是您可能需要添加不同的样式类,因为我无法使其响应。
<template>
<v-card class="mx-auto" max-width="434" tile>
<v-img height="100%" src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"></v-img>
<v-col>
<v-avatar size="100" style="position:absolute; top: 130px">
<v-img src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"></v-img>
</v-avatar>
</v-col>
<v-list-item color="rgba(0,.4)">
<v-list-item-content>
<v-list-item-title class="title">Marcus Obrien</v-list-item-title>
<v-list-item-subtitle>Network Engineer</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-card>
</template>
,
我刚刚尝试过。我想你可以做更多的连击。 Preview Image
<template>
<v-card class="mx-auto" max-width="1000" tile>
<v-img height="200" src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"></v-img>
<v-row style="margin:2.5%;position:absolute; top: 130px">
<v-list-item>
<v-list-item-avatar size="100">
<img
src="https://www.w3schools.com/howto/img_avatar.png"
alt="John"
>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="title" style="margin-top:20px;">Injamamul Haque Sonet</v-list-item-title>
<v-list-item-subtitle>Software Engineer | dokanee</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-row>
</v-card>
</template>