refactor: 登录方式切换改为顶部 Tab 左右选择
All checks were successful
continuous-integration/drone/push Build is passing

- 密码登录/验证码登录从底部按钮移到表单顶部
- 与邮箱/手机 Tab 统一风格(胶囊式)
- 删除底部 pass-btn 按钮
- login-type-tabs 深灰底+蓝色高亮
This commit is contained in:
yiqiu
2026-03-19 19:17:40 +08:00
parent d7993cfb37
commit 6610ff4623
2 changed files with 31 additions and 22 deletions

View File

@@ -81,6 +81,11 @@
{{ lang.login_phone }}
</div>
</div>
<!-- 登录方式切换 Tab -->
<div class="login-type-tabs" v-if="isShowChangeTpyeBtn && !isShowQrCode">
<div class="login-type-tab" :class="isPassOrCode ? 'active' : null" @click="isPassOrCode ? null : changeLoginType()">密码登录</div>
<div class="login-type-tab" :class="!isPassOrCode ? 'active' : null" @click="!isPassOrCode ? null : changeLoginType()">验证码登录</div>
</div>
<div class="form-main">
<template v-if="!isShowQrCode">
<div class="form-item">
@@ -161,14 +166,6 @@
<div class="form-item" v-if="!isShowQrCode">
<el-button type="primary" :loading="loginLoading" class="login-btn" @click="doLogin">{{ lang.login }}
</el-button>
<!-- 登录方式切换 -->
<template v-if="isShowChangeTpyeBtn">
<el-button v-if="isPassOrCode " class="pass-btn"
@click="changeLoginType">{{ lang.login_code_login }}
</el-button>
<el-button v-else class="pass-btn" @click="changeLoginType">{{ lang.login_pass_login }}
</el-button>
</template>
</div>
<!-- 三方登录 -->
<template v-if="commonData.oauth && commonData.oauth?.length > 0">