feat(ui): 全局深色主题与登录注册页样式优化
- App 全局主题变量与 Element 组件暗色适配 - 首页、测试平台布局与主题切换 - 登录/注册页改版并支持明暗主题切换 - 用例列表等页面样式与主题保持一致 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
qiaoxinjiu
@@ -1,14 +1,24 @@
|
||||
<template>
|
||||
<div id="backgroud">
|
||||
<div id="backgroud" :class="themeClass">
|
||||
<button class="login-theme-switch" type="button" @click="toggleTheme">
|
||||
<i :class="themeIcon"></i>
|
||||
<span>{{ themeLabel }}</span>
|
||||
</button>
|
||||
<div class="login-hero">
|
||||
<div class="login-brand-mark">效</div>
|
||||
<h1>效能平台</h1>
|
||||
<p>统一管理测试协作、缺陷跟踪、用例周期与数据工具。</p>
|
||||
</div>
|
||||
<div class="content_right">
|
||||
<div class="login-body-title">
|
||||
<h2>登录</h2>
|
||||
<h2>欢迎登录</h2>
|
||||
<p>Quality Workspace</p>
|
||||
</div>
|
||||
<div class="messge">
|
||||
<span>{{ msg }}</span>
|
||||
</div>
|
||||
<div class="cr_top">
|
||||
<div class="ct_input" style="height: 60px;width: 254px">
|
||||
<div class="ct_input">
|
||||
<span class="ct-img-yhm"> </span>
|
||||
<input
|
||||
id="username"
|
||||
@@ -23,7 +33,7 @@
|
||||
placeholder="用户名"
|
||||
@keyup.enter="handleLogin">
|
||||
</div>
|
||||
<div class="ct_input" style="height:60px;width: 254px">
|
||||
<div class="ct_input">
|
||||
<span class="ct_img_mm"> </span>
|
||||
<input
|
||||
id="password"
|
||||
@@ -57,10 +67,34 @@ export default {
|
||||
return {
|
||||
msg: '',
|
||||
username: '',
|
||||
password: ''
|
||||
password: '',
|
||||
uiTheme: localStorage.getItem('uiTheme') || 'dark'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
themeClass() {
|
||||
return this.uiTheme === 'light' ? 'theme-login-light' : 'theme-login-dark'
|
||||
},
|
||||
themeLabel() {
|
||||
return this.uiTheme === 'light' ? '深色' : '浅色'
|
||||
},
|
||||
themeIcon() {
|
||||
return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.applyTheme()
|
||||
},
|
||||
methods: {
|
||||
applyTheme() {
|
||||
document.body.classList.remove('theme-dark', 'theme-light')
|
||||
document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
|
||||
},
|
||||
toggleTheme() {
|
||||
this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
|
||||
localStorage.setItem('uiTheme', this.uiTheme)
|
||||
this.applyTheme()
|
||||
},
|
||||
handleLogin() {
|
||||
if (!this.username || !this.password) {
|
||||
this.msg = 'username、password 为必传参数'
|
||||
@@ -126,67 +160,147 @@ export default {
|
||||
<style scoped>
|
||||
@import "../../assets/css/Form.css";
|
||||
|
||||
.content_right {
|
||||
padding: 20px 0;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border-radius: 3px;
|
||||
border-color: rgba(250, 255, 251, .8);
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, .1), 0 0 8px rgba(140, 141, 140, .6);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
outline: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
#backgroud {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 80px;
|
||||
background: radial-gradient(circle at 15% 18%, rgba(34, 211, 238, 0.22), transparent 26%), radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.24), transparent 30%), linear-gradient(135deg, #050914 0%, #08111f 46%, #0f172a 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-hero {
|
||||
width: 420px;
|
||||
color: #f8fbff;
|
||||
}
|
||||
|
||||
.login-brand-mark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
border-radius: 18px;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #06111f;
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
box-shadow: 0 0 34px rgba(56, 189, 248, 0.48), 0 22px 48px rgba(99, 102, 241, 0.28);
|
||||
}
|
||||
|
||||
.login-hero h1 {
|
||||
margin: 24px 0 14px;
|
||||
font-size: 42px;
|
||||
line-height: 1.15;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 0 26px rgba(103, 232, 249, 0.22);
|
||||
}
|
||||
|
||||
.login-hero p {
|
||||
margin: 0;
|
||||
color: #9fb8d4;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.login-theme-switch {
|
||||
position: fixed;
|
||||
right: 28px;
|
||||
top: 24px;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
color: #dbeafe;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.login-theme-switch:hover {
|
||||
background: rgba(14, 165, 233, 0.18);
|
||||
box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.content_right {
|
||||
padding: 34px 36px 30px;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
color: #dbeafe;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
box-shadow: 0 0 42px rgba(56, 189, 248, 0.12), 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
position: static;
|
||||
width: 330px;
|
||||
min-height: 340px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.login-body-title h2 {
|
||||
font-size: 26px;
|
||||
color: #e0f2fe;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.login-body-title p {
|
||||
color: #67e8f9;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
|
||||
.cr_top .ct_input {
|
||||
position: relative;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.account-oprate .regist-btn {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
color: #67e8f9;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.account-oprate .regist-btn:hover {
|
||||
color: #bae6fd;
|
||||
}
|
||||
|
||||
.messge {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
margin-top: 14px;
|
||||
height: 22px;
|
||||
text-align: left;
|
||||
padding-left: 24px;
|
||||
color: #D60909;
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.content_right .cr_top {
|
||||
position: relative;
|
||||
margin: 0 23px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content_right .input_text {
|
||||
margin-bottom: 18px;
|
||||
background: #fff;
|
||||
background: rgba(8, 18, 36, 0.86);
|
||||
}
|
||||
|
||||
.account-oprate {
|
||||
width: 252px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ct_img_mm,
|
||||
.ct-img-yhm {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 8px;
|
||||
top: 16px;
|
||||
left: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("https://t4.chei.com.cn/passport/images/login2014/icon_input.png");
|
||||
opacity: 0.82;
|
||||
filter: invert(78%) sepia(37%) saturate(773%) hue-rotate(153deg) brightness(103%) contrast(93%);
|
||||
}
|
||||
|
||||
.ct-img-yhm {
|
||||
@@ -195,39 +309,52 @@ export default {
|
||||
|
||||
.input_text {
|
||||
display: inline-block;
|
||||
width: 224px;
|
||||
height: 24px;
|
||||
padding: 8px 0 8px 28px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 14px 0 42px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
color: #e0f2fe;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
border-radius: 14px;
|
||||
vertical-align: middle;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.input_text:hover {
|
||||
border-color: rgba(82, 168, 236, .8);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 8px rgba(82, 168, 236, .6);
|
||||
.input_text::placeholder {
|
||||
color: #6f8baa;
|
||||
}
|
||||
|
||||
.input_text:hover,
|
||||
.input_text:focus {
|
||||
border-color: rgba(103, 232, 249, 0.72);
|
||||
background: rgba(8, 18, 36, 0.96);
|
||||
box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12), 0 0 20px rgba(56, 189, 248, 0.14);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn_login:hover {
|
||||
background-color: #3e82dc;
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 26px rgba(56, 189, 248, 0.32), 0 16px 30px rgba(79, 70, 229, 0.24);
|
||||
}
|
||||
|
||||
.btn_login {
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
width: 254px;
|
||||
height: 37px;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
border: 1px solid #4591f5;
|
||||
background-color: #4591f5;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 14px;
|
||||
color: #06111f;
|
||||
border: 1px solid rgba(103, 232, 249, 0.68);
|
||||
background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
|
||||
margin-bottom: 16px;
|
||||
-webkit-appearance: none;
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -273,4 +400,95 @@ ul {
|
||||
padding: 0;
|
||||
font-family: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.theme-login-light#backgroud {
|
||||
background: radial-gradient(circle at 15% 18%, rgba(59, 130, 246, 0.14), transparent 26%), radial-gradient(circle at 82% 22%, rgba(14, 165, 233, 0.12), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef4ff 48%, #eaf2ff 100%);
|
||||
}
|
||||
|
||||
.theme-login-light .login-theme-switch {
|
||||
color: #1d4ed8;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-color: #dbe5f3;
|
||||
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.theme-login-light .login-theme-switch:hover {
|
||||
background: #eaf2ff;
|
||||
box-shadow: 0 14px 26px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.theme-login-light .login-hero {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-login-light .login-brand-mark {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
|
||||
box-shadow: 0 18px 38px rgba(37, 99, 235, 0.24);
|
||||
}
|
||||
|
||||
.theme-login-light .login-hero h1 {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.theme-login-light .login-hero p {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.theme-login-light .content_right {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #334155;
|
||||
border-color: #dbe5f3;
|
||||
box-shadow: 0 24px 70px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.theme-login-light .login-body-title h2 {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.theme-login-light .login-body-title p,
|
||||
.theme-login-light .account-oprate .regist-btn {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.theme-login-light .account-oprate .regist-btn:hover {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.theme-login-light .content_right .input_text {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.theme-login-light .input_text {
|
||||
color: #0f172a;
|
||||
border-color: #d8e1ef;
|
||||
}
|
||||
|
||||
.theme-login-light .input_text::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.theme-login-light .input_text:hover,
|
||||
.theme-login-light .input_text:focus {
|
||||
border-color: #60a5fa;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.theme-login-light .ct_img_mm,
|
||||
.theme-login-light .ct-img-yhm {
|
||||
opacity: 0.72;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.theme-login-light .btn_login {
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
|
||||
}
|
||||
|
||||
.theme-login-light .btn_login:hover {
|
||||
background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
|
||||
box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user