refactor(login): ♻️ 优化登录页样式

This commit is contained in:
Ray.Hao
2025-09-25 16:33:13 +08:00
parent 65d2466abc
commit 3ddf428922
2 changed files with 11 additions and 10 deletions

View File

@@ -37,28 +37,29 @@
<!-- 验证码 -->
<el-form-item prop="captchaCode">
<div flex>
<div flex items-center gap-10px>
<el-input
v-model.trim="loginFormData.captchaCode"
:placeholder="t('login.captchaCode')"
clearable
class="flex-1"
@keyup.enter="handleLoginSubmit"
>
<template #prefix>
<div class="i-svg:captcha" />
</template>
</el-input>
<div cursor-pointer h="[40px]" w="[120px]" flex-center ml-10px @click="getCaptcha">
<el-icon v-if="codeLoading" class="is-loading"><Loading /></el-icon>
<div cursor-pointer h-40px w-120px flex-center @click="getCaptcha">
<el-icon v-if="codeLoading" class="is-loading" size="20"><Loading /></el-icon>
<img
v-else
object-cover
v-else-if="captchaBase64"
border-rd-4px
p-1px
object-cover
shadow="[0_0_0_1px_var(--el-border-color)_inset]"
:src="captchaBase64"
alt="code"
alt="captchaCode"
/>
<el-text v-else type="info" size="small">点击获取验证码</el-text>
</div>
</div>
</el-form-item>
@@ -228,7 +229,7 @@ function toOtherForm(type: "register" | "resetPwd") {
.divider-container {
display: flex;
align-items: center;
margin: 20px 0;
margin: 40px 0;
.divider-line {
flex: 1;

View File

@@ -16,7 +16,7 @@
<!-- 登录页主体 -->
<div flex-1 flex-center>
<div
class="p-4xl w-full h-auto sm:w-450px border-rd-10px sm:h-680px shadow-[var(--el-box-shadow-light)] backdrop-blur-3px"
class="p-4xl w-full h-auto sm:w-450px sm:h-700px shadow-[var(--el-box-shadow-light)] border-rd-2"
>
<div w-full flex flex-col items-center>
<!-- logo -->