jws-frontend/src/components/UsersDetailCardComponent.vue

<script setup lang="ts">
import AppBox from './app/AppBox.vue';

withDefaults(
  defineProps<{
    dark?: boolean;
    width?: string;
    color: 'purple' | 'green';
  }>(),
  {
    width: '300px',
    deletable: false,
    color: 'green',
  },
);
</script>

<template>
  <div class="container">
    <div style="aspect-ratio: 9/16" class="flip">
      <AppBox
        style="padding: 0"
        :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color}`"
        class="surface-1 front"
        bordered
      >
        <div class="row justify-center">
          <q-card-section class="q-pt-xl img">
            <q-avatar size="100px">
              <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
            </q-avatar>
          </q-card-section>
        </div>
        <div class="box-title">
          <div class="rounded title">นิติบุคคล</div>
        </div>
        <q-card-section class="no-padding">
          <div class="column items-center justify-center">
            <div class="row">นางสาวสุดใจ แสนดี</div>
            <div class="row q-mb-md">HQ0001</div>
          </div>
        </q-card-section>

        <div>
          <q-scroll-area
            class="front-scroll"
            style="border-radius: 0px 0px 12px 12px"
          >
            <q-card-section v-for="v in [1, 2]" :key="v" class="overflow">
              <div class="color-front-text">ชื่อ บริษัท/นิติบุคคล ภาษาไทย</div>
              <div>บริษัทเฟรปเป้</div>
            </q-card-section>
          </q-scroll-area>
        </div>
      </AppBox>

      <AppBox
        style="padding: 0"
        class="back"
        :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color}`"
        bordered
      >
        <div
          class="row q-pl-md q-pb-md items-center"
          :class="{
            'surface-1': !$q.dark.isActive,
            'surface-2': $q.dark.isActive,
          }"
          style="border-radius: 12px 12px 0px 0px"
        >
          <q-card-section class="q-pt-xl img">
            <q-avatar size="50px">
              <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
            </q-avatar>
          </q-card-section>

          <div class="col-7 q-pl-md">
            <div class="row">นางสาวสุขใจ แสนดี</div>
            <div class="row">HQ0001</div>
          </div>
        </div>

        <q-scroll-area
          class="back-scroll"
          :class="{
            'surface-1': $q.dark.isActive,
            'surface-2': !$q.dark.isActive,
          }"
        >
          <q-card-section class="q-pa-md">
            <div
              v-for="v in [1, 2]"
              :key="v"
              class="bordered row q-pa-sm q-mb-sm rounded bg-color-text-1"
            >
              <div class="col-2 flex flex-center">{{ v }}</div>
              <div class="col-10 rounded q-pa-sm bg-color-text-2">HQ0001</div>
            </div>
          </q-card-section>
        </q-scroll-area>
      </AppBox>
    </div>
  </div>
</template>

<style scoped>
.color-front-text {
  color: var(--color-front-title);
}

.container {
  width: 300px;
  height: 500px;
}

.flip {
  cursor: pointer;
  width: 100%;
  position: relative;
  transition: transform 0.4s;
  transform-style: preserve-3d;

  &:hover {
    transform: rotateY(180deg);
  }
}

.front,
.back {
  width: 100%;
  height: min-content;
  position: absolute;
  backface-visibility: hidden;
}

.front,
.back {
  --_color: var(--teal-6);
  --_color-dark: var(--_color);
  --_bg-front-scroll: hsla(var(--_color) / 0.05);
  --_bg-back-detail-1: white;
  --_bg-back-detail-2: hsla(var(--_color) / 0.05) !important;

  .img {
    background: hsl(var(--_color)) !important;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
  }

  .title {
    width: 50%;
    height: 25px;
    background: hsl(var(--_color)) !important;
    position: relative;
    bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }

  .front-scroll {
    border-radius: 0px 0px 5px 5px;
    background: var(--_bg-front-scroll) !important;
    height: 254px;
    max-width: 300px;
  }

  .back-scroll {
    height: 370px;
    max-width: 300px;

    border-radius: 0px 0px 15px 15px;

    .bg-color-text-1 {
      background: var(--_bg-back-detail-1);
    }
    .bg-color-text-2 {
      background: var(--_bg-back-detail-2) !important;
    }
  }

  &.dark {
    color: hsl(--_color-dark) !important;
    background-color: transparent !important;

    --_bg-back-avatar: var(--gray-11) !important;
    --_bg-back-detail-1: var(--gray-9) !important;
    --_bg-front-scroll: var(--gray-11);
    --_bg-back-detail-2: hsla(var(--_color) / 0.1) !important;
  }
  &.color__purple {
    --_color: var(--purple-11-hsl);
  }

  &.color__green {
    --_color: var(--green-9-hsl);
  }
}

.back {
  background: #f5f5f5;
  transform: rotateY(180deg);
}

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

.box-title {
  display: flex;
  justify-content: center;
}
</style>