congsh/gamegroup2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: switch to light green + deep purple theme, fix input colors

Browse Source 
- Primary: emerald green (#059669), accent: deep purple (#7c3aed)
- Light backgrounds: #f0fdf4 page, #ffffff cards
- Login/Register: light gradient bg, white card, Element Plus inputs
- NotFound: matching light theme
- All pages follow via CSS variables

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
congsh
2026-04-17 18:07:14 +08:00
parent 6895fd05be
commit c5d5484f9e
5 changed files with 100 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Layout.vue
+3 -3
View File
@@ -214,8 +214,8 @@ function goHome() {
}
.nav-item--active {
background: rgba(99, 102, 241, 0.15);
color: var(--gg-primary-light);
background: rgba(5, 150, 105, 0.1);
color: var(--gg-primary);
}
.nav-icon {
@@ -295,7 +295,7 @@ function goHome() {
}
.group-item--active {
background: rgba(99, 102, 241, 0.15);
background: rgba(5, 150, 105, 0.1);
border-left: 3px solid var(--gg-primary);
}
frontend/src/views/Login.vue
+12 -80
View File
@@ -40,10 +40,6 @@ function goToRegister() {
<template>
<div class="login-page">
<!-- CSS 星星背景 -->
<div class="stars" aria-hidden="true"></div>
<div class="stars stars--sm" aria-hidden="true"></div>
<div class="login-card">
<div class="card-header">
<h1 class="brand">
@@ -55,7 +51,7 @@ function goToRegister() {
<form class="login-form" @submit.prevent="handleLogin">
<div class="form-group">
<label for="email">邮箱</label>
<input
<el-input
id="email"
v-model="email"
type="email"
@@ -89,70 +85,26 @@ function goToRegister() {
</template>
<style scoped>
/* ── 深空背景 ── */
.login-page {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 24px;
background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
overflow: hidden;
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 30%, #f5f3ff 100%);
}
/* ── CSS 星星 ── */
.stars {
position: fixed;
inset: 0;
background-image:
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
animation: twinkle 4s ease-in-out infinite alternate;
pointer-events: none;
}
.stars--sm {
background-image:
radial-gradient(0.8px 0.8px at 5% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 20% 10%, rgba(255,255,255,0.3) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 45% 70%, rgba(255,255,255,0.35) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 60% 25%, rgba(255,255,255,0.3) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 78% 85%, rgba(255,255,255,0.4) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 95% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 35% 95%, rgba(255,255,255,0.35) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 65% 5%, rgba(255,255,255,0.3) 50%, transparent 100%);
animation: twinkle 6s ease-in-out 1s infinite alternate;
}
@keyframes twinkle {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
/* ── 毛玻璃卡片 ── */
/* ── 卡片 ── */
.login-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
padding: 48px 40px 40px;
background: rgba(30, 41, 59, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(99, 102, 241, 0.2);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--gg-border);
border-radius: var(--gg-radius-xl);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 40px rgba(5, 150, 105, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* ── 头部品牌 ── */
@@ -202,26 +154,6 @@ function goToRegister() {
letter-spacing: 0.02em;
}
.form-group input {
padding: 12px 16px;
background: var(--gg-bg);
border: 1px solid var(--gg-border);
border-radius: var(--gg-radius-sm);
color: var(--gg-text);
font-size: 14px;
transition: border-color 0.25s, box-shadow 0.25s;
}
.form-group input::placeholder {
color: var(--gg-text-muted);
}
.form-group input:focus {
outline: none;
border-color: var(--gg-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
/* ── 提交按钮 ── */
.submit-btn {
position: relative;
@@ -229,7 +161,7 @@ function goToRegister() {
margin-top: 4px;
border: none;
border-radius: var(--gg-radius-sm);
background: var(--gg-gradient);
background: var(--gg-gradient-green);
color: #fff;
font-size: 16px;
font-weight: 600;
@@ -238,7 +170,7 @@ function goToRegister() {
}
.submit-btn:hover:not(:disabled) {
box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
transform: translateY(-1px);
}
@@ -276,7 +208,7 @@ function goToRegister() {
}
.footer-links a {
color: var(--gg-primary-light);
color: var(--gg-accent);
cursor: pointer;
font-weight: 500;
margin-left: 4px;
@@ -284,6 +216,6 @@ function goToRegister() {
}
.footer-links a:hover {
color: var(--gg-accent-light);
color: var(--gg-primary);
}
</style>
frontend/src/views/NotFound.vue
+7 -57
View File
@@ -11,67 +11,32 @@ function goHome() {
<template>
<div class="not-found">
<!-- CSS 星星背景 -->
<div class="stars" aria-hidden="true"></div>
<div class="content">
<div class="error-code">404</div>
<h1 class="error-title">迷失在星域之中</h1>
<p class="error-desc">你访问的页面已消失在浩瀚宇宙中，或许它从未存在过。</p>
<h1 class="error-title">页面走丢了</h1>
<p class="error-desc">你访问的页面不存在，可能已被移动或删除。</p>
<button class="home-btn" @click="goHome">
<span class="btn-icon">&#10148;</span>
返回基地
返回首页
</button>
</div>
</div>
</template>
<style scoped>
/* ── 深空背景 ── */
.not-found {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 24px;
background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
overflow: hidden;
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 30%, #f5f3ff 100%);
}
/* ── CSS 星星 ── */
.stars {
position: fixed;
inset: 0;
background-image:
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
animation: twinkle 4s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes twinkle {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
/* ── 内容区 ── */
.content {
position: relative;
z-index: 1;
text-align: center;
max-width: 480px;
}
/* ── 404 数字 ── */
.error-code {
font-size: 140px;
font-weight: 900;
@@ -81,18 +46,10 @@ function goHome() {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none;
filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.35));
animation: pulse-glow 3s ease-in-out infinite alternate;
filter: drop-shadow(0 0 30px rgba(5, 150, 105, 0.2));
user-select: none;
}
@keyframes pulse-glow {
0% { filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.25)); }
100% { filter: drop-shadow(0 0 50px rgba(168, 85, 247, 0.4)); }
}
/* ── 标题 ── */
.error-title {
font-size: 28px;
font-weight: 700;
@@ -100,7 +57,6 @@ function goHome() {
margin: 0 0 12px;
}
/* ── 描述文字 ── */
.error-desc {
font-size: 15px;
color: var(--gg-text-secondary);
@@ -108,7 +64,6 @@ function goHome() {
line-height: 1.6;
}
/* ── 返回按钮 ── */
.home-btn {
display: inline-flex;
align-items: center;
@@ -116,7 +71,7 @@ function goHome() {
padding: 14px 36px;
border: none;
border-radius: var(--gg-radius-sm);
background: var(--gg-gradient);
background: var(--gg-gradient-green);
color: #fff;
font-size: 15px;
font-weight: 600;
@@ -125,16 +80,11 @@ function goHome() {
}
.home-btn:hover {
box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
transform: translateY(-1px);
}
.home-btn:active {
transform: translateY(0);
}
.btn-icon {
font-size: 16px;
display: inline-flex;
}
</style>
frontend/src/views/Register.vue
+13 -82
View File
@@ -56,10 +56,6 @@ function goToLogin() {
<template>
<div class="register-page">
<!-- CSS 星星背景 -->
<div class="stars" aria-hidden="true"></div>
<div class="stars stars--sm" aria-hidden="true"></div>
<div class="register-card">
<div class="card-header">
<h1 class="brand">
@@ -71,10 +67,9 @@ function goToLogin() {
<form class="register-form" @submit.prevent="handleRegister">
<div class="form-group">
<label for="username">用户名</label>
<input
<el-input
id="username"
v-model="username"
type="text"
placeholder="请输入用户名"
required
/>
@@ -82,7 +77,7 @@ function goToLogin() {
<div class="form-group">
<label for="email">邮箱</label>
<input
<el-input
id="email"
v-model="email"
type="email"
@@ -126,70 +121,26 @@ function goToLogin() {
</template>
<style scoped>
/* ── 深空背景 ── */
.register-page {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 24px;
background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
overflow: hidden;
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 30%, #f5f3ff 100%);
}
/* ── CSS 星星 ── */
.stars {
position: fixed;
inset: 0;
background-image:
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
animation: twinkle 4s ease-in-out infinite alternate;
pointer-events: none;
}
.stars--sm {
background-image:
radial-gradient(0.8px 0.8px at 5% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 20% 10%, rgba(255,255,255,0.3) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 45% 70%, rgba(255,255,255,0.35) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 60% 25%, rgba(255,255,255,0.3) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 78% 85%, rgba(255,255,255,0.4) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 95% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 35% 95%, rgba(255,255,255,0.35) 50%, transparent 100%),
radial-gradient(0.8px 0.8px at 65% 5%, rgba(255,255,255,0.3) 50%, transparent 100%);
animation: twinkle 6s ease-in-out 1s infinite alternate;
}
@keyframes twinkle {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
/* ── 毛玻璃卡片 ── */
/* ── 卡片 ── */
.register-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
padding: 44px 40px 40px;
background: rgba(30, 41, 59, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(99, 102, 241, 0.2);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--gg-border);
border-radius: var(--gg-radius-xl);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 40px rgba(5, 150, 105, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* ── 头部品牌 ── */
@@ -239,26 +190,6 @@ function goToLogin() {
letter-spacing: 0.02em;
}
.form-group input {
padding: 12px 16px;
background: var(--gg-bg);
border: 1px solid var(--gg-border);
border-radius: var(--gg-radius-sm);
color: var(--gg-text);
font-size: 14px;
transition: border-color 0.25s, box-shadow 0.25s;
}
.form-group input::placeholder {
color: var(--gg-text-muted);
}
.form-group input:focus {
outline: none;
border-color: var(--gg-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
/* ── 提交按钮 ── */
.submit-btn {
position: relative;
@@ -266,7 +197,7 @@ function goToLogin() {
margin-top: 4px;
border: none;
border-radius: var(--gg-radius-sm);
background: var(--gg-gradient);
background: var(--gg-gradient-green);
color: #fff;
font-size: 16px;
font-weight: 600;
@@ -275,7 +206,7 @@ function goToLogin() {
}
.submit-btn:hover:not(:disabled) {
box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
transform: translateY(-1px);
}
@@ -313,7 +244,7 @@ function goToLogin() {
}
.footer-links a {
color: var(--gg-primary-light);
color: var(--gg-accent);
cursor: pointer;
font-weight: 500;
margin-left: 4px;
@@ -321,6 +252,6 @@ function goToLogin() {
}
.footer-links a:hover {
color: var(--gg-accent-light);
color: var(--gg-primary);
}
</style>