Разделение v-карты на 3 части с разным процентом

Question

Я пытался разделить v-карту на 3 части.

Изображение предмета слева, название и детали в центре карточки.

И цена должна быть справа от карточки

Кроме того, она должна быть такой же, если и детали предмета тоже длинный или слишком короткий.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

                            <v-card ripple @click="menuItemClicked(item)" class="pa-0 ma-0">



                                <div class="d-flex flex-row pt-2 pb-2">

                                    <v-col cols="2">
                                        <v-avatar :size="menuPhotoSize">
                                            <v-img src="https://atlas-content-cdn.pixelsquid.com/stock-images/cardboard-box-2M7wzKF-600.jpg">
                                                <template v-slot:placeholder>
                                                    <v-row class="fill-height ma-0" align="center" justify="center">
                                                        <v-progress-circular indeterminate color="grey lighten-5">
                                                        </v-progress-circular>
                                                    </v-row>
                                                </template>

                                            </v-img>
                                        </v-avatar>
                                    </v-col>


                                    <div class="ma-0 pa-0 pl-2">
                                        <v-card-text>
                                            <v-row no-gutters>
                                                <v-col cols="12">
                                                    <h1 style="font-size: 1.25em" style="min-width: 100px; max-width: 100%;" class="pl-2 flex-grow-1 flex-shrink-0">
                                                        Item Name
                                                    </h1>
                                                </v-col>
                                                <v-col cols="10">
                                                    <p class="pl-2">
                                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                                    </p>
                                                </v-col>

                                            </v-row>
                                        </v-card-text>

                                    </div>

                                    <v-col cols="2">

                                        <h4 class="pt-2" style="font-size: 1.00em">$ 10</h4>


                                    </v-col>
                                </div>
                            </v-card>

Answer 1

Вы можете легко sh этого добиться, применив систему сетки vuetify. Вы можете любые другие небольшие изменения, которые вам нужны, например размер шрифта и стиль.

<v-card ripple class="pa-0 ma-0" width="400">
      <v-row>
        <v-col cols="3" align-self="center">
          <v-avatar>
            <v-img src="https://atlas-content-cdn.pixelsquid.com/stock-images/cardboard-box-2M7wzKF-600.jpg">
              <template v-slot:placeholder>
                <v-row class="fill-height ma-0" align="center" justify="center">
                  <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                </v-row>
              </template>
            </v-img>
          </v-avatar>
        </v-col>
        <v-col cols="6">
          <v-card-title class="justify-center">
            Item Name
          </v-card-title>
          <v-card-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          </v-card-text>
        </v-col>
        <v-col cols="3" align-self="center">
          <h4 class="pt-2" style="font-size: 1.00em">$ 10</h4>
        </v-col>
      </v-row>
    </v-card>