<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 style="font-weight: bold; font-size: 15px; color: #00aa86">
        4.1 การเข้าสู่หน้าระบบทะเบียนประวัติ
        </div>


        <div class="col-12" style="margin-top: 20px; margin-left: 10px">
            - เมื่อต้องการดูข้อมูลประวัติของข้าราชการกรุงเทพมหานครให้ทำการคลิกแถบเมนู “ทะเบียนประวัติ” ทางด้านซ้ายของระบบ ดังรูป
        </div>

        <div class="col-12">
          <q-img
          src="@/assets/manual/04_regist/1_main/4-1.png"
            style="
              display: block;
              margin: 0 auto;
              border-radius: 20px;
              margin-top: 20px;
              width: 255px;
              height: 307.73px;


            "
          />
            <div class="text-center text-grey-6" style="margin-top: 20px">
                รูปภาพที่ 4 – 1 แสดงการเลือกแถบเมนู หน้าระบบทะเบียนประวัติ ของข้อมูลข้าราชการกรุงเทพฯ
            </div>
        </div>


        <div class="col-12">
            <div class="col-12">
                <p style="margin-top: 50px; margin-left: 10px">
                    - ระบบแสดงหน้าต่าง “ข้อมูลทะเบียนประวัติ” ดังรูป
                </p>
            </div>
        </div>

        <div class="col-12">
          <q-img
          src="@/assets/manual/04_regist/1_main/4-2.png"
            style="
              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">
                รูปภาพที่ 4 – 2 แสดงหน้าต่างข้อมูลทะเบียนประวัติ
            </div>


            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >
                หมายเลข 1 หัวข้อเมนูสำหรับเลือกหน่วยงานกรุงเทพฯ ที่ต้องการข้อมูลทะเบียนประวัติ <br>
                หมายเลข 2 ช่องสำหรับการเลือกประเภทข้อมูลลูกจ้างที่ต้องการข้อมูล <br>
                หมายเลข 3 ช่องสำหรับการกรอกจำนวนตัวเลขของเลขบัตรประจำตัวประชาชน <br>
                หมายเลข 4 ช่องสำหรับกรอก ชื่อ-นามสกุลของลูกจ้างที่ต้องการค้นหา <br>
                หมายเลข 5 ช่องสำหรับเลือกปีเกษียณที่ต้องการข้อมูล <br>
                หมายเลข 6 ช่องสำหรับเลือกหัวข้อคอลัมน์ที่ต้องการให้ตารางแสดงข้อมูลตามคอลัมน์ที่เลือก <br>
                หมายเลข 7 ช่องสำหรับเลือกหรือกรอกข้อมูลอายุราชการ <br>
                หมายเลข 8 ปุ่มสำหรับคลิกเพื่อแสดงข้อมูลผู้พ้นจากราชการ <br>
                หมายเลข 9 ปุ่มสำหรับแสดดงข้อมูลลูกจ้างที่ทดลองปฏิบัติหน้าที่ราชการ <br>
                หมายเลข 10 ปุ่มสำหรับคลิกค้นหาหลังจากทำการกรอกข้อมูล หรือเลือกประเภทข้อมูลที่ต้องการ <br>
                หมายเลข 11 ช่องสำหรับแสดงข้อมูลทะเบียนประวัติรายชื่อ

            </div>
        </div>


 
      </q-card>
    <!-- </div>
  </div> -->
</template>







