用于用户配置文件的 Vuetify 自定义组件

Question

我想构建一个类似于 LinkedIn 用户个人资料的自定义个人资料组件。正如您所看到的，有一个 Card 元素，然后头像照片覆盖在它上面。我怎样才能构建这样一个组件？我是 Vuejs/Vuetify 的新手。我在网上查找了一些示例，但找不到任何可以解释我需要的内容。

我很欣赏您的代码片段或建议。

Answer 1

从他们的文档中，我只是采用了这个示例并对其进行了修改，但是您可能需要添加不同的样式类，因为我无法使其响应。

 <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, 0, 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>