<script setup lang="ts">
import MainData from "../2_data/21_Main.vue";
import About from "../2_data/22_About.vue";
import gov from "../2_data/23_Gov.vue";
import officer from "../2_data/24_Officer.vue";
import employee from "../2_data/25_Employee.vue";
import calender from "../2_data/26_Calendar.vue";
import insignia from "../2_data/27_Insignia.vue";
</script>
<template>
  <div class="col-12 row">
    <div
      class="toptitle text-dark col-12 row items-center"
      style="padding-top: 40px"
    >
      คู่มือการใช้งานระบบข้อมูลหลัก
    </div>
    <div class="row col-12 q-gutter-xs">
      <div
        id="MainData"
        name="1"
        class="row col-12 information"
        style="padding-bottom: 60px"
      >
        <MainData />
      </div>
      <div
        id="About"
        name="2"
        class="row col-12 information"
        style="padding-bottom: 60px"
      >
        <About />
      </div>
      <div
        id="gov"
        name="3"
        class="row col-12 information"
        style="padding-bottom: 60px"
      >
        <gov />
      </div>
      <div
        id="officer"
        name="4"
        class="row col-12 information"
        style="padding-bottom: 60px"
      >
        <officer />
      </div>
      <div
        id="employee"
        name="5"
        class="row col-12 information"
        style="padding-bottom: 60px"
      >
        <employee />
      </div>
      <div
        id="calender"
        name="6"
        class="row col-12 information"
        style="padding-bottom: 60px"
      >
        <calender />
      </div>
      <div
        id="insignia"
        name="6"
        class="row col-12 information"
        style="padding-bottom: 60px"
      >
        <insignia />
      </div>
    </div>
  </div>
</template>

<style scoped></style>
