fix: 登录界面，样式优化。
This commit is contained in:
tianyongbao
@@ -24,7 +24,7 @@
|
||||
<template #suffix> <img class="userName" src="../assets/images/showPass.png" @click="handleIconClick" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaEnabled">
|
||||
<el-form-item prop="code" v-if="captchaEnabled" style="position: relative; padding-right: 120px">
|
||||
<el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" @keyup.enter="handleLogin">
|
||||
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
@@ -38,10 +38,11 @@
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
<div v-if="register">
|
||||
<router-link class="link-type" style="font-size: 20px; font-weight: 400" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div v-if="register" class="register-link">
|
||||
<span class="register-text">还没有账号？</span>
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -185,60 +186,207 @@ getCookie()
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
padding: 3rem 1rem;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 0.4rem;
|
||||
font-family: PingFangSC-Heavy, PingFang SC;
|
||||
font-size: 32px;
|
||||
font-family: 'PingFangSC-Heavy', 'PingFang SC', sans-serif;
|
||||
font-weight: 800;
|
||||
color: #202224;
|
||||
line-height: 0.56rem;
|
||||
letter-spacing: 0.1rem;
|
||||
margin-bottom: 0.51rem;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 50px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #667eea, #764ba2);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.userName {
|
||||
margin-top: 0.17rem;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
:deep(.el-input__prefix-inner),
|
||||
:deep(.el-input__suffix) {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 4.1rem;
|
||||
height: 0.6356rem;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC';
|
||||
border-bottom: solid 0.01rem rgba(216, 216, 216, 1);
|
||||
font-size: 0.18rem;
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e8e8e8;
|
||||
background: #fafafa;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-size: 15px;
|
||||
box-shadow: none;
|
||||
margin: 0 auto;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 18px;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
border-color: #667eea;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
margin-left: 10px;
|
||||
color: #333;
|
||||
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
:deep(.el-checkbox__label) {
|
||||
color: rgba(187, 187, 188, 1);
|
||||
font-size: 0.16rem;
|
||||
line-height: 0.22rem;
|
||||
}
|
||||
|
||||
// 验证码样式
|
||||
.login-code {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 120px;
|
||||
height: 52px;
|
||||
|
||||
.login-code-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid #e8e8e8;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-checkbox) {
|
||||
.el-checkbox__label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC';
|
||||
letter-spacing: 0.04rem;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 0rem;
|
||||
|
||||
.el-checkbox__inner {
|
||||
border-radius: 4px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
&::after {
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-checked .el-checkbox__inner {
|
||||
background: #667eea;
|
||||
border-color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mb-60 {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
margin: 0 auto;
|
||||
width: 4.16rem;
|
||||
height: 0.6rem;
|
||||
background: #333fff;
|
||||
border-radius: 0.05rem;
|
||||
font-size: 0.18rem;
|
||||
font-family: 'PingFang-SC-Medium', 'PingFang-SC';
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-family: 'PingFang-SC-Medium', 'PingFang-SC', sans-serif;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 0.25rem;
|
||||
letter-spacing: 2px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.35);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.register-link {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
|
||||
.register-text {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.link-type {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
padding-bottom: 2px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #667eea, #764ba2);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #764ba2;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user