qdintc/intc-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 登录界面，样式优化。

Browse Source
This commit is contained in:
tianyongbao
2026-01-08 11:49:20 +08:00
parent 1cdea9b920
commit cd43dc5a39
1 changed files with 195 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
src/views/login.vue
View File

@@ -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;
}
.userName {
margin-top: 0.17rem;
}
:deep(.el-input__prefix-inner),
:deep(.el-input__suffix) {
display: block;
}
: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;
box-shadow: none;
margin: 0 auto;
.el-input__inner {
margin-left: 10px;
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;
}
}
:deep(.el-checkbox__label) {
color: rgba(187, 187, 188, 1);
font-size: 0.16rem;
line-height: 0.22rem;
font-weight: 400;
font-family: 'PingFangSC-Regular', 'PingFang SC';
letter-spacing: 0.04rem;
.userName {
width: 20px;
height: 20px;
opacity: 0.6;
}
:deep(.el-form-item) {
margin-bottom: 0rem;
margin-bottom: 28px;
}
:deep(.el-input__prefix-inner),
:deep(.el-input__suffix) {
display: flex;
align-items: center;
}
:deep(.el-input__wrapper) {
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;
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 {
color: #333;
&::placeholder {
color: #999;
}
}
}
// 验证码样式
.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', sans-serif;
}
.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%;
}
}
}
}
}
}