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

<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-12">
      <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>