ปรับ style button / responsive

src/App.vue

@@ -111,6 +111,7 @@ export default {
       // location.reload();
       this.$store.commit("setUsername", "");
       this.$store.commit("setImg", "");
+      this.$store.commit("setCheckPage", "");
       this.$router.push("/");
     },
   },

src/components/HeaderHome.vue

@@ -24,7 +24,7 @@
               style="color: #0f470f"
               size="large"
               height="80"
-              to="/login"
+              @click="checkPage"
             >
               <span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
             </v-btn>
@@ -33,7 +33,11 @@
       </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-row
+        style="height: 100%; width: 90%"
+        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>
@@ -63,7 +67,7 @@
               ></v-img>
             </v-btn>
           </div>
-          <br>
+          <br />
         </v-col>
         <!-- <v-col cols="12" md="" class="mt-0 mt-md-10 mt-lg-10" >
           <v-btn
@@ -116,6 +120,12 @@ export default {
   computed: {
     ...mapGetters(["getUsername"]),
   },
+  methods: {
+    checkPage() {
+      this.$store.commit("setCheckPage", true);
+      this.$router.push("/login");
+    },
+  },
 };
 </script>
 <style>

src/store/index.js

@@ -3,15 +3,20 @@ import { createStore } from "vuex";
 export default createStore({
   state: {
     username:"",
-    img:""
+    img:"",
+    checkPage:""
   },
   getters: {
+   
     getUsername: (state) => {
       return state.username
     },
     getImg: (state) => {
       return state.img
     },
+    getCheckPage: (state) => {
+      return state.checkPage
+    },
   },
   mutations: {
     setUsername: (state, payload) => {
@@ -20,6 +25,9 @@ export default createStore({
     setImg: (state, payload) => {
       state.img = payload;
     },
+    setCheckPage: (state, payload) => {
+      state.checkPage = payload;
+    },
   },
   actions: {
     setLocalStorageValue(data) {

src/views/LoginForm.vue

@@ -80,7 +80,7 @@
         </v-form>
       </v-card>
     </div>
-    <div v-if="getUsername" class="text-normal text-center py-10">
+    <div v-if="getUsername&&getCheckPage" class="text-normal text-center py-10">
       <v-icon
         icon="mdi-alert-circle-outline"
         size="35"
@@ -89,7 +89,7 @@
       คุณเข้าสู่ระบบอยู่แล้ว
 
       <div class="mt-10">
-        <v-btn elevated color="#DD6C31" class="text-normal ma-6" height="85" to="/">
+        <v-btn elevated color="#DD6C31" class="text-normal ma-6" height="85" to="/" width="300">
           <span class="text-normal"> กลับหน้าหลัก</span>
 
           <v-img
@@ -102,9 +102,10 @@
         <v-btn
           elevated
           color="#DD6C31"
-          class="text-normal btn-w ma-6"
+          class="text-normal  ma-6"
           height="85"
           to="/search"
+          width="300"
         >
           <v-img
             :aspect-ratio="1"
@@ -123,7 +124,7 @@ import { mapGetters } from "vuex";
 import { client } from "@/utils/trpc";
 export default {
   computed: {
-    ...mapGetters(["getUsername", "getImg"]),
+    ...mapGetters(["getUsername", "getImg","getCheckPage"]),
   },
   data: () => ({
     form1: false,
@@ -149,12 +150,7 @@ export default {
           localStorage.setItem("img", data.image);
           this.$store.commit("setUsername", data.firstName);
           this.$store.commit("setImg", data.image);
-          //   this.$emitter.emit("loginUser", data.firstName );
-
           this.$router.push("/");
-
-          //   location.reload();
-          // this.$store.dispatch('setLocalStorageValue',data.firstName)
         })
         .catch((error) => {
           alert("ไม่สามารถโหลดข้อมูลได้");