เพิ่มโค้ดคู่มือ

src/modules/01_manual/components/2_data/21_Main.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rightDrawerOpen = ref(false);
+const text = ref("");
+</script>
+
+<template>
+  <div class="row col-12">
+    <div class="col-9">
+      <div class="toptitle text-dark col-12 row items-center">
+        คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
+      </div>
+
+      <q-card
+        flat
+        bordered
+        class="col-12 q-pa-md"
+        style="
+          background-color: #ecebeb;
+          border-radius: 8px 8px 0px 0px;
+          padding: 10px 16px 10px 16px;
+        "
+      >
+        <div class="custom-topic text-dark">
+          <div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
+        </div>
+      </q-card>
+
+      <q-card
+        flat
+        bordered
+        class="col-12 q-pa-md"
+        style="border-radius: 0px 0px 8px 8px"
+      >
+        <div class="col-12" style="margin-top: 20px; margin-left: 10px">
+          - เมื่อเข้าสู่ระบบทรัพยากรบุคคล
+          ปรากฏหน้าจอหน้าแรกของระบบทรัพยาการบุคคล ให้กดเลือกแถบเมนู “ข้อมูลหลัก”
+          ดังรูปภาพ
+        </div>
+
+        <div class="col-12">
+          <q-img
+            src="@/assets/manual/02_data/1_main/2-1.png"
+            style="
+              display: block;
+              margin: 0 auto;
+              border-radius: 20px;
+              margin-top: 20px;
+              width: 255px;
+              height: 495px;
+            "
+          />
+
+          <div class="text-center text-grey-6" style="margin-top: 20px">
+            รูปภาพที่ 2 - 1 เมนูข้อมูลหลัก
+          </div>
+        </div>
+
+
+
+        <div
+          class="col-12 "
+          style="margin-top: 50px; margin-left: 10px; align-items: center"
+        >
+          - เมื่อกดเลือกเมนู “ข้อมูลหลัก” ระบบปรากฏหน้าจัดการข้อมูลหลักดังรูปภาพ
+        </div>
+          <q-img
+            src="@/assets/manual/02_data/1_main/2-2.png"
+            style="
+              max-width: 100%;
+              display: block;
+              margin: 0 auto;
+              border-radius: 20px;
+              margin-top: 20px;
+              border: 1px solid #97b2de;
+            "
+          />
+ 
+          <div class="text-center text-grey-6" style="margin-top: 20px">
+            รูปภาพที่ 2 - 2 หน้าจัดการข้อมูลหลัก
+        </div>
+
+        <div
+            style="
+                margin-top: 20px;
+                padding: 10px;
+                background-color: #f3f3f3;
+                font-size: 14px;
+                color: #000000;
+                border-radius: 5px;
+                margin-left: 0px;
+                "
+                >
+                จากรูปที่ 2 - 2 แต่ละหมายเลขมีรายละเอียด ดังนี้ <br>
+                <div style="margin-left: 50px;">
+                    หมายเลข 1 แถบเมนูหลักในหน้าจัดการข้อมูลหลัก <br>
+                    หมายเลข 2 สรุปจำนวนข้อมูล <br>
+                    หมายเลข 3 แถบเมนูย่อยของแต่ละเมนูหลัก <br>
+                    หมายเลข 4 แถบเมนูเพิ่ม ลบหรือแก้ไขข้อมูล <br>
+                    หมายเลข 5 รายละเอียดของเมนูย่อย <br>
+                    หมายเลข 6 ดูประวัติแก้ไข <br>
+                    หมายเลข 7 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
+                    หมายเลข 8 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน <br>
+                </div>
+        </div>
+
+
+
+        <div
+          class="col-12 "
+          style="margin-top: 50px; margin-left: 10px; align-items: center"
+        >
+           - เมื่อกดไอคอน
+           <q-icon name="mdi-pin" style="margin: 0 5px; color: #000000;"/>
+           แถบเมนูจัดการข้อมูลหลักและสรุปจำนวนข้อมูลจะถูกซ่อนดังรูปภาพ และเมื่อกดไอคอน
+           <q-icon name="mdi-pin" style="margin: 0 5px; color: #000000; transform: rotate(90deg);"/>
+           แถบเมนูจัดการข้อมูลหลักและสรุปจำนวนข้อมูลจะกลับมาแสดงเหมือนเดิม ดังรูปภาพที่ 2 – 2 ที่หมายเลข1 และ หมายเลข2
+          </div>
+
+          <q-img
+            src="@/assets/manual/02_data/1_main/2-3.png"
+            style="
+              max-width: 100%;
+              display: block;
+              margin: 0 auto;
+              border-radius: 20px;
+              margin-top: 20px;
+              border: 1px solid #97b2de;
+            "
+          />
+          <div class="text-center text-grey-6" style="margin-top: 20px">
+            รูปภาพที่ 2 - 3 ซ่อนแถบเมนูและสรุปจำนวนข้อมูล
+        </div>
+
+
+
+      </q-card>
+    </div>
+  </div>
+</template>
+