修改登录注册忘记密码样式
This commit is contained in:
parent
a30f5e3ac2
commit
ed72ce3cd1
@ -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>
|
||||
|
||||
<!-- 登录页面 -->
|
||||
@ -68,8 +73,6 @@
|
||||
</el-card>
|
||||
<!-- 注册页面 -->
|
||||
<el-card v-if="isRegisterMode && !isForgotPasswordMode" class="register-card">
|
||||
<div class="card-header">注册</div>
|
||||
|
||||
<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);
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user