Пользовательский компонент Vuetify для профиля пользователя

Я хочу создать настраиваемый компонент профиля, похожий на профиль пользователя LinkedIn. Как видите, есть элемент Card, на который накладывается фотография аватара. Как я могу построить такой компонент? Я новичок в Vuejs / Vuetify. Я поискал несколько примеров в Интернете, но не смог найти ничего, что объясняло бы то, что мне нужно.

Фотография пользователя накладывается на фоновую карточку

Я ценю ваш фрагмент кода или предложение.


vue.js vuetify.js uicomponents
person AlexCon    schedule 03.09.2020    source источник
comment
Я бы посоветовал разобраться в реквизитах, слотах и ​​шаблоне .vue, чтобы понять, как vue работает как компонент. OpenClassroom - хорошее место, чтобы узнать все о Vue.   -  person SC Kim    schedule 03.09.2020
comment
Спасибо, я буду. также любой пример кода, на который вы можете указать мне по этому вопросу?   -  person AlexCon    schedule 03.09.2020

Ответы (2)


arrow_upward
3
arrow_downward

Из их документации я просто взял этот пример и изменил его, но вы можете нужно добавить разные классы для стилизации, так как я не мог сделать его отзывчивым.

 <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>
person Héctor Lazarín    schedule 03.09.2020

arrow_upward
0
arrow_downward

Я просто попробовал. Я думаю, ты сможешь приготовить еще тесто. Изображение для предварительного просмотра

<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>
person IH Sonnet    schedule 06.10.2020