ปรับ UI / ปรับคำถามใหม่

src/components/HeaderHome.vue

@@ -17,7 +17,36 @@
               <b>“เลือกกันเอง”</b>
               ศึกษาให้พร้อมแล้วมาร่วมเป็นส่วนหนึ่งของกระบวนการเลือก สว.
             </div>
-            <v-btn
+
+            <div class="text-center pa-4">
+              <v-btn
+                @click="dialog = true"
+                elevated
+                color="#B2C573"
+                class="mt-4 text-normal"
+                style="color: #0f470f"
+                size="large"
+                height="80"
+              >
+                <span class="text-normal"> ขั้นตอนการใช้งานระบบ</span>
+              </v-btn>
+
+              <v-dialog v-model="dialog" width="100%">
+                <v-card width="100%">
+                  <v-img src="../assets/order.png" width="100%"> </v-img>
+                  <template v-slot:actions>
+                    <v-btn
+                      size="large"
+                      class="ms-auto text-subtitle"
+                      text="ปิด"
+                      @click="dialog = false"
+                    ></v-btn>
+                  </template>
+                </v-card>
+              </v-dialog>
+            </div>
+
+            <!-- <v-btn
               elevated
               color="#B2C573"
               class="mt-4 text-normal"
@@ -27,7 +56,7 @@
               @click="checkPage"
             >
               <span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
-            </v-btn>
+            </v-btn> -->
           </v-col>
         </v-row>
       </div>
@@ -38,9 +67,21 @@
         align="center"
         class="text-center ma-auto"
       >
-        <v-col cols="12" md="" class="text-normal mb-10">
-          <div class="text-center text-white py-5">
-            <div class="text-title my-3">ใครสมัคร สว.ได้บ้าง</div>
+        <v-col cols="12" md="" class="text-normal mt-5">
+          <div class="text-center text-white pt-2">
+            <div
+              class="text-subtitle mx-10 text-center mt-10 box-order mx-auto my-5"
+              style="color: #ffffff"
+              v-if="
+                getUsername == '' ||
+                getUsername == null ||
+                getUsername == undefined
+              "
+            >
+              ขั้นตอนที่
+              <v-avatar color="#DD6C31" class="text-subtitle">1</v-avatar>
+            </div>
+            <div class="text-title m-3">ใครสมัคร สว.ได้บ้าง</div>
             <div>
               สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
               โดยมีคุณสมบัติดังนี้
@@ -48,13 +89,13 @@
             <div>เช็คคุณสมบัติกันเลย !</div>
             <!-- <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80"  to="/check">
         ตรวจสอบคุณสมบัติการเป็น  สว.
-      </v-btn> -->
+       </v-btn> -->
           </div>
           <div style="position: relative">
             <v-btn
               elevated
               color="#DD6C31"
-              class="text-normal"
+              class="text-normal mt-5"
               height="85"
               to="/check"
             >
@@ -120,6 +161,11 @@ export default {
   computed: {
     ...mapGetters(["getUsername"]),
   },
+  data() {
+    return {
+      dialog: false,
+    };
+  },
   methods: {
     checkPage() {
       this.$store.commit("setCheckPage", true);
@@ -147,10 +193,18 @@ export default {
   transform: translate(-50%, -50%);
 }
 .bg-curve {
-  padding-top: 90px;
+  background-size: cover;
+  padding-top: 50px;
   background-image: url("/src/assets/Path\ 14.png");
-  height: 465px;
+  height: 580px;
   background-position: center top;
   /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }
+.box-order {
+  margin: auto;
+  outline: 2px solid;
+  border-radius: 25px;
+  width: fit-content;
+  padding: 7px 10px;
+}
 </style>