ThbTech/BodyBalanceEvaluation
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改登录注册忘记密码样式

Browse Source
This commit is contained in:
limengnan 2025-12-08 14:04:03 +08:00
parent a30f5e3ac2
commit ed72ce3cd1
1 changed files with 54 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/src/renderer/src/views/Login.vue
View File

@ -5,7 +5,12 @@
<div class="login-content">
<!-- 系统标题 -->
<div style="margin-right: 150px;">
<h1 class="system-login-title">欢迎登录</h1>
<h1 class="system-login-title">
<span v-if="!isRegisterMode && !isForgotPasswordMode">欢迎登录</span>
<span v-if="isRegisterMode && !isForgotPasswordMode">注册</span>
<span v-if="isForgotPasswordMode">找回密码</span>
</h1>
<h1 class="system-title">平衡体态检测系统</h1>
<!-- 登录页面 -->
@ -67,9 +72,7 @@
</el-form>
</el-card>
<!-- 注册页面 -->
<el-card v-if="isRegisterMode && !isForgotPasswordMode" class="register-card">
<div class="card-header">注册</div>
<el-card v-if="isRegisterMode && !isForgotPasswordMode" class="register-card">
<div class="register-form">
<div class="form-item">
<div class="input-wrapper">
@ -146,8 +149,6 @@
</el-card>
<!-- 忘记密码页面 -->
<el-card v-if="isForgotPasswordMode" class="forgot-password-card">
<div class="card-header">找回密码</div>
<!-- 未显示密码时的输入表单 -->
<div v-if="!showRetrievedPassword" class="forgot-password-form">
<div class="form-item">
@ -229,7 +230,7 @@ import { getBackendUrl,systemAPI } from '../services/api.js'
const BACKEND_URL = getBackendUrl()
const router = useRouter()
const authStore = useAuthStore()
const loginTitle =ref('欢迎登录')
// 页面状态控制
const isRegisterMode = ref(false)
const isForgotPasswordMode = ref(false)
@ -706,13 +707,14 @@ const copyPassword = async () => {
/* 注册卡片 */
.register-card {
width: 482px;
background-color: #1D1C21;
background-color: transparent;
box-sizing: border-box;
border-width: 3px;
border-style: solid;
border-color: #1D1C21;
border-color: transparent;
border-radius: 5px;
padding: 30px 25px !important;
padding: 0px 0px !important;
box-shadow: 0 0 0 transparent;
}
/* 卡片头部标题 */
@ -918,20 +920,13 @@ const copyPassword = async () => {
border-color: #999;
}
.confirm-btn {
background-color: #266fff ;
border-color: #266fff ;
color: #fff;
font-weight: 500;
}
.confirm-btn:hover {
transform: translateY(-1px);
}
/* 注册表单样式 */
.register-form {
padding: 20px 0;
padding: 0px 0;
}
.form-item {
@ -942,21 +937,22 @@ const copyPassword = async () => {
position: relative;
display: flex;
align-items: center;
background: transparent;
color: #fff;
font-size: 16px;
height: 49px;
height: 60px;
background-color: rgba(255, 255, 255, 0.1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: transparent;
border-radius: 3px;
/* background-color: #004080;
border-radius: 6px; */
border: 1px solid rgb(67, 67, 67);
padding: 0 15px;
transition: all 0.2s ease;
}
.input-wrapper:focus-within {
border-color: #cccccc;
box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
border-color: rgba(11, 148, 213, 1);
}
.input-icon {
@ -971,7 +967,7 @@ const copyPassword = async () => {
border: none;
outline: none;
color: #fff;
font-size: 14px;
font-size: 16px;
padding: 12px 0;
}
@ -1012,9 +1008,15 @@ const copyPassword = async () => {
}
.back-btn {
background-color: transparent;
border-color: #266fff;
color: #266fff;
border-color: #597194;
background-color: #597194;
border-radius: 4px;
color: rgba(255, 255, 255, 0.6);
font-family: 'Noto Sans SC';
font-weight: 400;
font-style: normal;
font-size: 20px;
color: #FFFFFF;
}
.back-btn:hover {
@ -1024,9 +1026,13 @@ const copyPassword = async () => {
}
.submit-btn {
background-color: #266fff;
border-color: #266fff;
color: #fff;
background-color: rgba(11, 148, 213, 1);
border-color: rgba(11, 148, 213, 1) !important;
font-family: 'Noto Sans SC';
font-weight: 400;
font-style: normal;
font-size: 20px;
color: #FFFFFF;
}
.submit-btn:hover {
@ -1036,17 +1042,18 @@ const copyPassword = async () => {
/* 忘记密码页面样式 */
.forgot-password-card {
width: 482px;
background-color: #1D1C21;
background-color: transparent;
box-sizing: border-box;
border-width: 3px;
border-style: solid;
border-color: #1D1C21;
border-color: transparent;
border-radius: 5px;
padding: 30px 25px !important;
box-shadow: 0 0 0 transparent;
padding: 0px 0px !important;
}
.forgot-password-form {
padding: 20px 0;
padding: 0px 0px;
}
.forgot-input {
@ -1127,10 +1134,13 @@ const copyPassword = async () => {
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid;
background-color: #266fff;
border-color: #266fff;
color: #fff;
background-color: rgba(11, 148, 213, 1);
border-color: rgba(11, 148, 213, 1) !important;
font-family: 'Noto Sans SC';
font-weight: 400;
font-style: normal;
font-size: 20px;
color: #FFFFFF;
}
.confirm-btn:hover {
transform: translateY(-1px);
@ -1140,7 +1150,7 @@ const copyPassword = async () => {
display: flex;
align-items: center;
width: 450px;
height: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0.1);
box-sizing: border-box;
border-width: 1px;
@ -1148,6 +1158,9 @@ const copyPassword = async () => {
border-color: transparent;
border-radius: 3px;
}
.input-box:focus-within {
border-color: rgba(11, 148, 213, 1);
}
</style>
<style>