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

Question

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

感谢您的代码片段或建议。

Answer 1

根据他们的文档，我只是采用 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, 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>

Answer 2

我刚刚试过了。我认为你可以做更多的击球手。 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>

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

Vuetify custom component for user profile

uicomponents

vue.js

vuetify.js