sorvor-front/src/components/HeaderHome.vue

<template>
  <div>
    <div class="text-normal mb-5">
      <div class="d-block w-100 text-normal txt-black">
        <v-row align="center" justify="center">
          <v-col cols="auto" sm="12" md="" align="center">
            <v-img
              :aspect-ratio="1"
              src="../assets/logo-title.png"
              width="600"
              @click="$router.push('/')"
            ></v-img>
          </v-col>
          <v-col align-self="center" align="center">
            <div style="width: 90%">
              สว. ระบบใหม่ <b>“แบ่งกลุ่มอาชีพ”</b> และ
              <b>“เลือกกันเอง”</b>
              ศึกษาให้พร้อมแล้วมาร่วมเป็นส่วนหนึ่งของกระบวนการเลือก สว.
            </div>

            <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"
              style="color: #0f470f"
              size="large"
              height="80"
              @click="checkPage"
            >
              <span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
            </v-btn> -->
          </v-col>
        </v-row>
      </div>
    </div>
    <div style="position: relative" class="bg-curve" id="started">
      <v-row
        style="height: 100%; width: 90%"
        align="center"
        class="text-center ma-auto"
      >
        <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>
              สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
              โดยมีคุณสมบัติดังนี้
            </div>
            <div>เช็คคุณสมบัติกันเลย !</div>
            <!-- <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80"  to="/check">
        ตรวจสอบคุณสมบัติการเป็น  สว.
       </v-btn> -->
          </div>
          <div style="position: relative">
            <v-btn
              elevated
              color="#DD6C31"
              class="text-normal mt-5"
              height="85"
              to="/check"
            >
              <span class="text-normal"> ตรวจสอบคุณสมบัติการเป็น สว.</span>
              <v-img
                :aspect-ratio="1"
                src="../assets/Group 9.png"
                width="70"
                style="position: absolute; bottom: -27px; left: -30px"
              ></v-img>
            </v-btn>
          </div>
          <br />
        </v-col>
        <!-- <v-col cols="12" md="" class="mt-0 mt-md-10 mt-lg-10" >
          <v-btn
            elevated
            color="#DD6C31"
            class="text-normal"
            stacked
            height="110"
            to="/forms"
            :disabled="getUsername!==''||getUsername!==null||getUsername!==undefined"
          >
            <v-img
              :aspect-ratio="1"
              src="../assets/Group 23.png"
              width="80"
              style="position: absolute; bottom: -30px; right: 50"
            ></v-img>
            แสดงตนเป็นผู้สมัคร
          </v-btn>
        </v-col>

        <v-col cols="12" md="">
          <v-btn
            elevated
            color="#DD6C31"
            class="text-normal"
            stacked
            width="300"
            height="110"
            to="/search"
            :disabled="!getUsername"
          >
            <v-img
              :aspect-ratio="1"
              src="../assets/search.png"
              width="100"
              style="position: absolute; top: -40px; right: 0px"
            ></v-img>
            ค้นหาผู้สมัคร  สว.
          </v-btn>
        </v-col> -->
      </v-row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["getUsername"]),
  },
  data() {
    return {
      dialog: false,
    };
  },
  methods: {
    checkPage() {
      this.$store.commit("setCheckPage", true);
      this.$router.push("/login");
    },
  },
};
</script>
<style>
.text-normal .v-btn--size-large {
  --v-btn-height: 70px;
}
.v-btn {
  border-radius: 20px;
}
.text-normal .v-btn__content {
  font-size: 30px;
  font-weight: 400;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bg-curve {
  background-size: cover;
  padding-top: 50px;
  background-image: url("/src/assets/Path\ 14.png");
  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>