<template>
  <div style="position: relative" class="bg-green-full 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-timeline align="start" side="end" class="text-sub">
        <v-timeline-item fill-dot size="large" dot-color="white">
          <template v-slot:icon>
            <span style="color: #4c884c;">1</span>
          </template>
          <div class="d-flex">
            <div>กกต. ประกาศกำหนดวัน และเวลารับสมัคร</div>
          </div>
        </v-timeline-item>

        <v-timeline-item fill-dot size="large" dot-color="#4c884c">
            <template v-slot:icon>
            <span>2</span>
          </template>
          <div class="d-flex">
            <div>เปิดสมัครรับเลือก สว.โดยมี ระยะเวลารับสมัคร 5 - 7 วัน</div>
          </div>
        </v-timeline-item>

        <v-timeline-item fill-dot size="large" dot-color="white">
            <template v-slot:icon>
            <span  style="color: #4c884c;">3</span>
          </template>
          <div class="d-flex">
            <div>ประกาศบัญชี รายชื่อผู้สมัคร</div>
          </div>
        </v-timeline-item>

        <v-timeline-item fill-dot size="large" dot-color="#4c884c">
            <template v-slot:icon>
            <span>4</span>
          </template>
          <div class="d-flex">
            <div>เลือก สว. ระดับอำเภอ (ภายใน 20 วัน)</div>
          </div>
        </v-timeline-item>
        <v-timeline-item fill-dot size="large" dot-color="white">
            <template v-slot:icon>
            <span  style="color: #4c884c;">5</span>
          </template>
          <div class="d-flex">
            <div>เลือก สว. ระดับจังหวัด (+ 7 วัน )</div>
          </div>
        </v-timeline-item>

        <v-timeline-item fill-dot size="large" dot-color="#4c884c">
            <template v-slot:icon>
            <span>6</span>
          </template>
          <div class="d-flex">
            <div>เลือก สว.ระดับประเทศ (+ 10 วัน )</div>
          </div>
        </v-timeline-item>

        <v-timeline-item fill-dot size="large" dot-color="white">
            <template v-slot:icon>
            <span  style="color: #4c884c;" >7</span>
          </template>
          <div class="d-flex">
            <div>กกต. ประกาศผล การเลือก สว.</div>
          </div>
        </v-timeline-item>
      </v-timeline>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style>
.border-dot {
  border-right: 3px dashed #b2c573;
}
.bg-green-full {
  background-color: #b2c573;
  height: auto;
}
</style>
