html - 在 Vuetify 的卡片组件中设置 2 种背景颜色

Question

我需要创建具有以下设计的登录卡：

我想将卡片分成两半v-row和v-col组件，其中左栏应该是图像和其他东西的地方，右栏应该是表格。将卡片调整为移动版时，左栏应隐藏。隐藏列我修复为无显示，但我不知道如何设置每一半不同的颜色。

我对元素的背景颜色有想法v-col，但问题是卡片有圆角。任何想法？

我的不工作样本在这里

https://codepen.io/peter-peter-the-typescripter/pen/KKzZVrm

标签： htmlcsssassvuetify.js

Answer 1

尝试overflow: hidden;在元素上添加样式，<v-row/>使其方角（溢出卡片组件）将被隐藏。

<v-card class="mx-auto" color="#26c6da" dark max-width="800" rounded="xl">
  <v-row class="mx-0" style="overflow:hidden;"> <!-- Add `overflow: hidden;` here! -->

    <!-- I've also tweaked this first column -->
    <v-col cols="6" class="yellow">
      <div class="fill-height d-flex justify-center align-center">this should be different color</div>
    </v-col>

    <v-col cols="6">
      <!-- v-card-title and v-card-action -->
    </v-col>

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

这是一个示例演示。