sorvor-front/src/components/Section8Base.vue

<template>
  <div style="position: relative" class="text-normal pb-10">
    <!-- <v-img :aspect-ratio="1" src="../assets/greenimg.png" width="100%"></v-img> -->
    <div class="text-center txt-black py-10 ma-auto" style="width: 90%">
      <!-- <div class="text-title my-3">ขั้นตอนการเลือกสว.</div> -->
      <br />
      <v-row>
        <v-col cols="12" md="6">
          <div style="width: 90%; margin: auto">
            <div class="text-title">กลุ่มอาชีพผู้สมัครรับเลือกสว.</div>
            <br />
            <div>
              ทุกคนที่มีคุณสมบัติและไม่มีลักษนะต้องห้าม
              มีสิทธิสมัครรับเลือกเปนสว. ในกลุ่มใดกลุ่มหนึง ในกลุ่มอาชีพ 20
              กลุ่ม ดังนี้.
            </div>
          </div>
        </v-col>
        <v-col cols="12" md="6">
          <v-card
            class="text-sub mx-auto"
            color="#F4C03F"
            variant="elevated"
            style="width: 90%; margin: auto"
            rounded="xl"
            min-height="400"
          >
            <v-card-item>
              <div class="text-right text-sub2">{{ count + 1 }} / 4</div>
              <div
                class="py-20 text-left my-4"
                v-for="(item, k) in listItem()"
                :key="k"
              >
                <v-avatar color="white" size="small"
                  ><span style="font-size: 16px"> {{ item.idx }}</span>
                </v-avatar>
                {{ item.text }}
              </div>
            </v-card-item>
    
            <v-btn
            @click="count++"
            class=" pa-4 mb-5 mr-5 btn-phone"
            icon="mdi-skip-next"
            rounded="circle"
            size="xl"
            
            color="#4c884c"
          ></v-btn>
          </v-card>
         
          <!-- <v-btn
            @click="count++"
            style="top:-100px; right: 25px;"
            class="float-right pa-4 mb-5 mr-5 "
            icon="mdi-skip-next"
            rounded="circle"
            size="xl"
            
            color="#4c884c"
          ></v-btn> -->
        </v-col>
      </v-row>
    </div>
  </div>
</template>
<script>
export default {
  watch: {
    count(val) {
      if (val > 4) {
        this.count = 0;
      }
    },
  },
  methods: {
    listItem() {
      let cnt = this.count;
      if (cnt > 3) {
        this.count = 0;
      }
      let s = cnt * 5;
      let e = 5 * (cnt + 1);
      console.log("s", s, e);
      let item = this.items.slice(s, e);
      return item;
    },
  },
  data: () => ({
    count: 0,
    items: [
      { text: "กลุ่มบริหารราชการแผ่นดินและความมั่นคง", idx: 1 },
      { text: "กลุ่มกฎหมายกระบวนการยุติธรรม", idx: 2 },
      { text: "กลุ่มการศึกษา", idx: 3 },
      { text: "กลุ่มการสาธารณสุข", idx: 4 },
      { text: "กลุ่มอาชีพทำนา ปลูกพืชล้มลุก", idx: 5 },
      { text: "กลุ่มอาชีพทำสวน ป่าไม้ ปศุสัตว์ ประมง", idx: 6 },
      { text: "กลุ่มพนักงานหรือลูกจ้างของบุคคล(ไม่ใช่หน่วยงานรัฐ)", idx: 7 },
      {
        text: "กลุ่มผู้ประกอบอาชีพด้านสิ่งแวดล้อม ผังเมือง อสังหาริมทรัพย์และสาธารณูปโภค ทรัพยากรธรรมชาติ พลังงาน",
        idx: 8,
      },
      { text: "กลุ่มผู้ประกอบกิจการ หรือ SME", idx: 9 },
      { text: "กลุ่มผู้ประกอบกิจการอื่นนอกจากข้อ (9)", idx: 10 },
      { text: "กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว", idx: 11 },
      { text: "กลุ่มผู้ประกอบอุตสาหกรรม", idx: 12 },
      {
        text: "กลุมผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
        idx: 13,
      },
      { text: "กลุ่มสตรี", idx: 14 },
      {
        text: "กลุ่มผู้สูงอายุ คนพิการหรือทุพพลภาพ กลุ่มชาติพันธุ์ กลุ่มอัตลักษณ์อื่น",
        idx: 15,
      },
      { text: "กลุ่มศิลปะ วัฒนธรรม ดนตรี การแสดงและบันเทิง", idx: 16 },
      { text: "กลุ่มประชาสังคม องค์กรสาธารณประโยชน์", idx: 17 },
      { text: "กลุ่มนักกีฬา สื่อสารมวลชน ผู้สร้างสรรค์วรรณกรรม", idx: 18 },
      { text: "กลุ่มผู้ประกอบวิชาชีพ ผู้ประกอบอาชีพอิสระ", idx: 19 },
      { text: "กลุ่มอื่นๆ", idx: 20 },
      // { text: "Real-Time" },
      // { text: "Audience" },
    ],
  }),
};
</script>
<style>
.line-flag {
  border-left: 3px solid #37332f;
  padding-left: 20px;
}
.bg-darkgreen-full {
  background-color: #4c884c;
  height: auto;
}
</style>