duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(login): adjust code field and button layout

Browse Source 
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
This commit is contained in:
DEV_DSW
2026-06-02 17:18:31 +08:00
parent ebd7c2bf2a
commit db499933e5
1 changed files with 47 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/login/index.vue
View File

@@ -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')"
:placeholder="t('common.login.placeholders.code')" autocomplete="one-time-code">
<van-field v-model="code" class="login-code-field" type="digit" clearable maxlength="8"
: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
class="flex-1 px-[12px] overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<div class="flex-1 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();
return haystack.includes(q);
if (isDialQuery) {
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;