主页 / 问题 / 1071456
Accepted
Anton Bogomolov
Asked:2020-01-18 23:02:05 +0000 UTC2020-01-18 23:02:05 +0000 UTC

使用 Vuetify 背景将卡片拆分为 2 列

  • 772

如何使用 Vuetify 将卡片分成两列并为右侧提供 100% 高度的图像背景？

vuetify

1 个回答

  1. Best Answer

    作为一种选择：

    .img-rounded {
  border-radius: 0 5px 5px 0;
}

.f-height {
  height: 100%;
}
    <!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <v-row>
        <v-col cols="12">
          <v-container fluid>
            <v-card>
              <v-row no-gutters align="stretch" justify="center">
                <v-col cols="6" align="center" class="black--text pa-4">
                  <h1>Vuetify</h1>
                  <p>
                    Vuetify - это библиотека компонентов № 1 для Vue.js, которая активно развивается с 2016 года. Цель проекта - предоставить пользователям все, что необходимо для создания многофункциональных и привлекательных веб-приложений с использованием спецификации
                    Material Design.
                  </p>
                </v-col>
                <v-col cols="6" align="center">
                  <v-img class="img-rounded d-flex align-center pa-4 f-height" src="https://cdn.vuetifyjs.com/images/starter/vuetify-admin-dashboard-pro.jpg" gradient="to top right, rgba(100,115,201,.53), rgba(25,32,72,1)">
                    <div class="white--text">
                      <h1>Vuetify</h1>
                      <p>
                        Material Design Component Framework
                      </p>
                    </div>
                  </v-img>
                </v-col>
              </v-row>
            </v-card>

          </v-container>

        </v-col>
      </v-row>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>

    • 0

相关问题