Блог

Мне нужно создать регистрационную карточку со следующим дизайном:

Я хочу разделить карточку пополам на v-row и v-col компоненты, где в левом столбце должно быть место для изображения и прочего, а в правом столбце — для формы. При изменении размера карты до мобильной версии левый столбец должен скрываться. Скрытие столбца я исправляю с помощью display none, но я не знаю, как установить для каждой половины другой цвет.

У меня была идея добавить цвет фона к v-col элементу, но проблема в том, что у карточки закругленные углы. Есть какие-нибудь идеи?

Мой нерабочий образец находится здесь

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

Попробуйте добавить 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>
  

Вот пример демонстрации.