sorvor-front/src/components/Section6Base.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>
      <v-row class="text-left">
        <v-col cols="12" md="6">
          <v-row align="center"
      justify="center" >
            <v-col cols="12" >
              <!-- <v-icon icon="mdi-flag-triangle"  color="#F4C03F"></v-icon> -->
              <div class="line-flag">
                <div class="text-subtitle">
                  ประกาศให้มีการเลือกสว.
                  <v-icon size="50" color="#F4C03F">mdi-menu-left</v-icon>
                  <v-avatar color="#F4C03F"> 1</v-avatar>
                </div>
                <div class="text-sub2">
                  ภายใน 5 วันนับตั้งแต่วันที่พระราชกฤษฎีกาให้มีการเลือกสว.
                  ใช้บังคับ ให้กกต.ประกาศกำหนดวันเลือกอระดับอำเภอ ระดับจังหวัด
                  ระดับประเทศ
                </div>
                <!-- <br> -->
              </div>
            </v-col>
            <!-- ------------------------------- -->
            <v-col  cols="12" md="5">
              <div
                style="
                  background-color: white;
                  border-radius: 20px;
                  padding: 20px;
                  text-align: center;
                "
              >
                <div class="text-sub3">
                  ผู้สมัครรับเลือกฯ เลือกกันเองในกลุ่ม
                </div>

                <div class="text-sub3 text-red">
                  เลือกสมัครได้ 1 กลุ่มอาชีพ และ 1 อำเภอเท่านั้น
                </div>
              </div>
            </v-col>
            <v-col cols="12" md="7">
              <div>
                <div class="text-subtitle">
                  การสมัครรับเลือกสว.
                  <v-icon size="50" color="#37332F">mdi-menu-left</v-icon>
                  <v-avatar color="#37332F"> 2</v-avatar>
                </div>
                <div class="text-sub2">
                  รับสมัครไม่เกิน 15 วันนับแต่วันที่พระราชกฤษฎีกาให้มี
                  การเลือกสว.ใช้บังคับ และกำหนดวันรับสมัครไม่น้อยกว่า 5 วัน
                  แต่ต้องไม่เกิน 7 วัน
                </div>
              </div>
            </v-col>
            <!-- ------------------------------- -->
            <v-col  cols="12" md="5">
              <div
                style="
                  background-color: white;
                  border-radius: 20px;
                  padding: 20px;
                  text-align: center;
                "
              >
                <div class="text-sub3">
                  ผู้สมัครรับเลือกฯ เลือกกันเองในกลุ่ม
                </div>

                <div class="text-sub3 text-red">
                  เลือกตนเองได้ แต่จะลงคะแนน ให้บุคคลใดเกิน 1 คะแนนไม่ได้
                </div>

                <div class="text-sub3 mt-3">
                  ผู้สมัครรับเลือกฯ เลือกผู้สมัคร กลุ่มอื่นที่อยู่ในสายเดียวกัน
                </div>

                <div class="text-sub3 text-red">
                  กลุ่มละ 1 คน แต่จะเลือกกลุ่ม เดียวกันหรือเลือกตนเองไม่ได้
                </div>
              </div>
            </v-col>
            <v-col  cols="12" md="7">
              <div>
                <div class="text-subtitle">
                  <v-icon size="50" color="#B2C573">mdi-menu-right</v-icon>
                  <v-avatar color="#B2C573" class="mr-2"> 3</v-avatar>
                  การเลือกสว. ระดับอำเภอ
                </div>

                <div class="text-sub2">
                  <div style="color: #4c884c; font-weight: 500">
                    การเลือกรอบที่ 1 เลือกกลุ่มบุคคลในกลุ่มเดียวกัน
                  </div>
                  ผู้ได้คะแนนสูงสุดลำดับที่ 1-5
                  เป็นผู้ได้รับเลือกขั้นต้นของกลุ่มนั้น และเข้าไปเลือกรอบ 2
                  ต่อไป
                </div>
<br>
                <div class="text-sub2">
                  <div style="color: #4c884c; font-weight: 500">
                    การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                  </div>
                  ผู้ได้คะแนนสูงสุดลำดับ 3 ลำดับแรก ของแต่ละกลุ่ม
                  เป็นผู้ได้รับเลือกระดับอำเภอ สำหรับกลุ่มนั้น
                </div>
              </div>
            </v-col>
          </v-row>
        </v-col>
        <!-- ------------------------------------------------------------------------------------------------------------------------------- -->
        <v-col>
          <v-row>
            <v-col  cols="12" md="7">
              <div>
                <div class="text-subtitle">
                  การเลือกสว. ระดับจังหวัด
                  <v-icon size="50" color="#dd6c31">mdi-menu-left</v-icon>
                  <v-avatar color="#dd6c31"> 4</v-avatar>
                </div>
                <div class="text-sub2">
                  <div style="color: #dd6c31; font-weight: 500">
                    การเลือกรอบที่ 1 เลือกกลุ่มบุคคลในกลุ่มเดียวกัน
                  </div>
                  ผู้ได้คะแนนสูงสุดลำดับที่ 1-5
                  เป็นผู้ได้รับเลือกขั้นต้นของกลุ่มนั้น และเข้าไปเลือกรอบ 2
                  ต่อไป
                </div>
                <div class="text-sub2">
                  <div style="color: #dd6c31; font-weight: 500">
                    การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                  </div>
                  ผู้ได้คะแนนสูงสุดลำดับ 2 ลำดับแรก ของแต่ละกลุ่ม
                  เป็นผู้ได้รับเลือกระดับจังหวัด สำหรับกลุ่มนั้น
                </div>
              </div>
            </v-col>
            <v-col  cols="12" md="5">
              <div
                style="
                  background-color: white;
                  border-radius: 20px;
                  padding: 20px;
                  text-align: center;
                "
              >
                <div class="text-sub3">
                  ผู้สมัครรับเลือกฯ เลือกกันเองในกลุ่ม
                </div>
                <div class="text-sub3 text-red">
                  เลือกตนเองได้ แต่จะลงคะแนน ให้บุคคลใดเกิน 1 คะแนนไม่ได้
                </div>

                <div class="text-sub3 mt-3">
                  ผู้สมัครรับเลือกฯ เลือกผู้สมัคร กลุ่มอื่นที่อยู่ในสายเดียวกัน
                </div>
                <div class="text-sub3 text-red">
                  กลุ่มละ 1 คน แต่จะเลือกกลุ่ม เดียวกันหรือเลือกตนเองไม่ได้
                </div>
              </div>
            </v-col>
          </v-row>
          <v-row>
            <v-col  cols="12" md="7">
              <div>
                <div class="text-subtitle">การเลือกสว. ระดับประเทศ    
                  <v-icon size="50" color="#1b76ba">mdi-menu-left</v-icon>
                  <v-avatar color="#1b76ba"> 5</v-avatar></div>
                <div class="text-sub2">
                  <div style="color: #1b76ba; font-weight: 500">
                    การเลือกรอบที่ 1 เลือกกลุ่มบุคคลในกลุ่มเดียวกัน
                  </div>
                  ผู้ได้คะแนนสูงสุดลำดับที่ 1-40
                  เป็นผู้ได้รับเลือกขั้นต้นของกลุ่มนั้น และเข้าไปเลือกรอบ 2
                  ต่อไป
                </div>
                <br>
                <div class="text-sub2">
                  <div style="color: #1b76ba; font-weight: 500">
                    การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                  </div>
                  ผู้ได้คะแนนสูงสุดลำดับ 1-10 เป็นสว. และ ลำดับที่ 11-15
                  อยู่ในบัญชีสำรองของกลุ่มนั้น
                </div>
              </div>
            </v-col>
            <v-col  cols="12" md="5">
              <div
                style="
                  background-color: white;
                  border-radius: 20px;
                  padding: 20px;
                  text-align: center;
                "
              >
                <div class="text-sub3">
                  ผู้สมัครรับเลือกฯ เลือกกันเอง ในกลุ่มได้ไม่เกิน 10 คน
                </div>
                <div class="text-sub3 text-red">
                  เลือกตนเองก็ได้ แต่จะลงคะแนน ให้บุคคลใดเกิน 1 คะแนนไม่ได้
                </div>

                <div class="text-sub3 mt-3">
                  ผู้สมัครรับเลือกฯ เลือกผู้สมัคร กลุ่มอื่นที่อยู่ในสายเดียวกัน
                </div>
                <div class="text-sub3 text-red">
                  <div><b>กลุ่มละไม่เกิน 5 คน</b></div>
                  แต่จะเลือกกลุ่มเดียวกัน หรือเลือกตนเองไม่ได้
                </div>
              </div>
            </v-col>
            <v-col cols="12">
              <div class="text-subtitle">ประกาศผลเลือกสว. <v-icon size="50" color="#4C884C">mdi-menu-left</v-icon>
                  <v-avatar color="#4C884C"> 6</v-avatar></div>
              <div class="text-sub2">
                เมื่อกกต. ได้รับรายงานจากผู้อำนวยการการเลือกระดับประเทศแล้ว
                รอไว้อย่างน้อยไม่เกิน 5 วัน เมื่อพ้นเวลาดังกล่าวแล้ว ถ้า กกต.
                เห็นว่าการเลือกเป็นไปโดยถูกต้องสุจริต และเที่ยงธรรม
                ให้ประกาศผลการเลือกในราชกิจจานุเบกษา
              </div>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style>
.line-flag{
  border-left: 3px solid #37332F;
padding-left: 20px;
}
.bg-darkgreen-full {
  background-color: #4c884c;
  height: auto;
}
</style>