refactor(login): 优化登录页面布局和功能

- 调整验证码重新发送和返回按钮的布局
- 添加返回按钮,提高用户操作便利性
- 优化代码结构,提高页面可维护性
This commit is contained in:
xingyy 2025-02-17 10:55:50 +08:00
parent df16ec5855
commit 71e7f4223a

View File

@ -176,18 +176,20 @@ const goLogin =async () => {
<div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div> <div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
</div> </div>
<van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" /> <van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" />
<div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'} text-14px`"> <div class="flex justify-between">
{{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span> <div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'} text-14px`">
</div> {{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span>
</div>
<div @click="goBack" class="text-#2B53AC text-14px">
{{ $t('login.back') }}
</div>
</div>
<div class="mt-[17px]"> <div class="mt-[17px]">
<van-button v-if="code.length === 6" type="primary" block :loading="loadingRef.loading2" :loading-text="$t('login.login')" style="height: 48px" @click="goLogin">{{ <van-button v-if="code.length === 6" type="primary" block :loading="loadingRef.loading2" :loading-text="$t('login.login')" style="height: 48px" @click="goLogin">{{
$t('login.login') $t('login.login')
}}</van-button> }}</van-button>
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('login.login') }}</van-button> <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('login.login') }}</van-button>
</div> </div>
<div class="mt-[17px]">
<van-button type="primary" @click="goBack" block style="height: 48px">{{ $t('login.back') }}</van-button>
</div>
</div> </div>
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>