hrms-mgt/src/modules/05_placement/components/PlacementDetail.vue

<script setup lang="ts">
import { reactive } from "vue";

import { defineAsyncComponent } from "@vue/runtime-core";

const itemTop = reactive([
  {
    id: 1,
    num: 7,
    title: "จำนวนทั้งหมด",
    color: "#016987",
  },
  {
    id: 2,
    num: 3,
    title: "ยังไม่บรรจุ",
    color: "#02A998",
  },
  {
    id: 3,
    num: 3,
    title: "เตรียมบรรจุ",
    color: "#2EA0FF",
  },
  {
    id: 4,
    num: 3,
    title: "บรรจุเเล้ว",
    color: "#4154B3",
  },
  {
    id: 5,
    num: 3,
    title: "สละสิทธิ์",
    color: "#FF5C5F",
  },
]);
const AddTablePosition = defineAsyncComponent(
  () => import("@/modules/05_placement/components/PlacementTable.vue")
);
</script>

<template>
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
    <div class="q-py-md row col-12 no-wrap">
      <hr
        class="q-separator q-separator--vertical gt-sm"
        aria-orientation="vertical"
        style="width: 2px"
      />

      <div class="col-12 row bg-white">
        <div class="fit q-pa-md">
          <div class="row col-12 q-col-gutter-md fit">
            <div
              class=""
              v-for="item in itemTop"
              :key="item.id"
              style="width: 15%"
            >
              <div
                class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm"
              >
                <div class="col-12 row items-center q-pa-sm">
                  <div
                    class="col-12 text-h5 text-weight-bold"
                    :style="{ color: item.color }"
                  >
                    {{ item.num }}
                  </div>
                  <div class="col-12 text-dark ellipsis">
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
    <div>
      <AddTablePosition class="q-pa-none" />
    </div>
  </q-card>
</template>

<style lang="scss">
.cardNum {
  border-radius: 5px;
  /* border-left: 3px solid #016987 !important; */
  padding-left: 8px;
}
</style>