PlacementDetail page.(Layout)

src/modules/05_placement/components/PlacementDetail.vue

@@ -1,5 +1,95 @@
-<script setup lang="ts"></script>
+<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>
-  <h1>test</h1>
+  <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"></style>
+
+<style lang="scss">
+.cardNum {
+  border-radius: 5px;
+  /* border-left: 3px solid #016987 !important; */
+  padding-left: 8px;
+}
+</style>