style(login): adjust code field and button layout

add custom class to the verification code input field, update scoped styles to align elements and standardize sizing and padding for a consistent polished appearance

src/pages/login/index.vue

@@ -16,8 +16,9 @@
           <van-field v-model="phone" type="tel" clearable :label="t('common.login.fields.phone')"
             :placeholder="t('common.login.placeholders.phone')" autocomplete="tel" />
 
-          <van-field v-model="code" type="digit" clearable maxlength="8" :label="t('common.login.fields.code')"
+          <van-field v-model="code" class="login-code-field" type="digit" clearable maxlength="8"
-            :placeholder="t('common.login.placeholders.code')" autocomplete="one-time-code">
+            :label="t('common.login.fields.code')" :placeholder="t('common.login.placeholders.code')"
+            autocomplete="one-time-code">
             <template #button>
               <van-button class="rounded-full" size="small" @click="handleSendCode">
                 {{ t('common.login.actions.sendCode') }}
@@ -58,8 +59,7 @@
       <div class="border-b border-[#E5E5E5]">
         <van-search v-model="countrySearch" :placeholder="t('common.login.placeholders.selectCountry')" shape="round" />
       </div>
-      <div
+      <div class="flex-1 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
-        class="flex-1 px-[12px] overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
         <van-cell v-for="item in filteredCountries" :key="`${item.iso2}-${item.dialCode}`" :value="item.dialCode"
           @click="handleSelectCountry(item)">
           <template #title>
@@ -128,9 +128,22 @@ const filteredCountries = computed(() => {
   if (!q) {
     return COUNTRY_CALLING_CODES;
   }
+
+  const dialQuery = q.startsWith("+") ? q.slice(1) : q;
+  const isDialQuery = /^\d+$/.test(dialQuery);
+
   return COUNTRY_CALLING_CODES.filter((item) => {
-    const haystack = `${item.name} ${item.iso2} ${item.dialCode}`.toLowerCase();
+    if (isDialQuery) {
-    return haystack.includes(q);
+      const dialCode = item.dialCode.replace("+", "");
+      return dialCode.startsWith(dialQuery);
+    }
+
+    const nameTokens = item.name
+      .toLowerCase()
+      .replace(/[^a-z\s]/g, " ")
+      .split(/\s+/)
+      .filter(Boolean);
+    return nameTokens.some((token) => token.startsWith(q));
   });
 });
 
@@ -323,11 +336,38 @@ onMounted(() => {
 </script>
 
 <style scoped>
+:deep(.login-code-field .van-field__body) {
+  align-items: center;
+}
+
+:deep(.login-code-field .van-field__control) {
+  height: 32px;
+  line-height: 32px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+:deep(.login-code-field .van-field__button) {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.login-code-field .van-button--small) {
+  height: 32px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+:deep(.country-search.van-search) {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 :deep(.van-button) {
   border-radius: 50px !important;
 }
 
-:deep(.van-cell) {
+:deep(section .van-cell) {
   padding-left: 0;
   padding-right: 0;