update new desige

src/views/LoginForm.vue

@@ -13,14 +13,16 @@
         width="250"
       ></v-img>
       <v-card
-        class="mx-auto pa-12 pb-8"
+        class="mx-auto pa-4 pb-8 pt-8"
         elevation="8"
         max-width="600"
         rounded="lg"
       >
         <v-form fast-fail @submit.prevent v-model="form1">
-          <div class="text-subtitle-1 text-medium-emphasis">ID card number</div>
-
+          <!-- <div class="text-subtitle-1 text-medium-emphasis">ID card number</div> -->
+          <div class="text-medium-emphasis text-subtitle" style="font-size: 18px">
+            เลขบัตรประชาชน 13 หลัก เช่น 1234567890123
+          </div>
           <v-text-field
             density="compact"
             placeholder="เลขประจำตัว 13 หลัก"
@@ -29,6 +31,8 @@
             color="#4c884c"
             v-model="payload.cid"
             :rules="rules.id"
+            type="number"
+            hide-spin-buttons
           ></v-text-field>
           <!--   
         <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
@@ -42,10 +46,12 @@
           >
             Forgot login password?</a>
         </div> -->
-
+          <div class="text-medium-emphasis text-subtitle" style="font-size: 18px">
+           เบอร์โทรศัพท์ 10 หลัก เช่น 0812345678
+          </div>
           <v-text-field
             :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
-            :type="visible ? 'text' : 'password'"
+            :type="visible ? 'number' : 'password'"
             density="compact"
             placeholder="เบอร์โทรศัพท์"
             prepend-inner-icon="mdi-lock-outline"
@@ -54,6 +60,7 @@
             v-model="payload.phone"
             :rules="rules.tel"
             color="#4c884c"
+            hide-spin-buttons
           ></v-text-field>
 
           <!-- <v-card
@@ -80,7 +87,10 @@
         </v-form>
       </v-card>
     </div>
-    <div v-if="getUsername&&getCheckPage" 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 +99,14 @@
       คุณเข้าสู่ระบบอยู่แล้ว
 
       <div class="mt-10">
-        <v-btn elevated color="#DD6C31" class="text-normal ma-6" height="85" to="/" width="300">
+        <v-btn
+          elevated
+          color="#DD6C31"
+          class="text-normal ma-6"
+          height="85"
+          to="/"
+          width="300"
+        >
           <span class="text-normal"> กลับหน้าหลัก</span>
 
           <v-img
@@ -102,7 +119,7 @@
         <v-btn
           elevated
           color="#DD6C31"
-          class="text-normal  ma-6"
+          class="text-normal ma-6"
           height="85"
           to="/search"
           width="300"
@@ -124,7 +141,7 @@ import { mapGetters } from "vuex";
 import { client } from "@/utils/trpc";
 export default {
   computed: {
-    ...mapGetters(["getUsername", "getImg","getCheckPage"]),
+    ...mapGetters(["getUsername", "getImg", "getCheckPage"]),
   },
   data: () => ({
     form1: false,
@@ -134,10 +151,12 @@ export default {
       tel: [
         (v) =>
           // (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
-          /^([0-9]{10})$/.test(v) || "Invalid phone number",
+          /^([0-9]{10})$/.test(v) || "เบอร์โทรไม่ถูกต้อง",
       ],
       id: [
-        (v) => (parseInt(v) == v && v.length == 13) || "Invalid ID card number",
+        (v) =>
+          (parseInt(v) == v && v.length == 13) ||
+          "หมายเลขบัตรประชาชนไม่ถูกต้อง",
       ],
     },
   }),