feat: switch to light green + deep purple theme, fix input colors
- 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
@@ -1,28 +1,30 @@
|
||||
:root {
|
||||
/* 主色调 */
|
||||
--gg-primary: #6366f1;
|
||||
--gg-primary-light: #818cf8;
|
||||
--gg-primary-dark: #4f46e5;
|
||||
--gg-accent: #a855f7;
|
||||
--gg-accent-light: #c084fc;
|
||||
/* 主色调：微绿 */
|
||||
--gg-primary: #059669;
|
||||
--gg-primary-light: #10b981;
|
||||
--gg-primary-dark: #047857;
|
||||
|
||||
/* 背景色 */
|
||||
--gg-bg: #0f172a;
|
||||
--gg-bg-card: #1e293b;
|
||||
--gg-bg-elevated: #334155;
|
||||
--gg-bg-hover: #334155;
|
||||
/* 辅助色：深紫 */
|
||||
--gg-accent: #7c3aed;
|
||||
--gg-accent-light: #8b5cf6;
|
||||
|
||||
/* 背景色（亮色） */
|
||||
--gg-bg: #f0fdf4;
|
||||
--gg-bg-card: #ffffff;
|
||||
--gg-bg-elevated: #f1f5f9;
|
||||
--gg-bg-hover: #e2e8f0;
|
||||
|
||||
/* 文字色 */
|
||||
--gg-text: #f1f5f9;
|
||||
--gg-text-secondary: #94a3b8;
|
||||
--gg-text-muted: #64748b;
|
||||
--gg-text: #1e293b;
|
||||
--gg-text-secondary: #475569;
|
||||
--gg-text-muted: #94a3b8;
|
||||
|
||||
/* 边框 */
|
||||
--gg-border: #334155;
|
||||
--gg-border-light: #475569;
|
||||
--gg-border: #e2e8f0;
|
||||
--gg-border-light: #cbd5e1;
|
||||
|
||||
/* 状态色 */
|
||||
--gg-success: #22c55e;
|
||||
--gg-success: #10b981;
|
||||
--gg-danger: #ef4444;
|
||||
--gg-warning: #f59e0b;
|
||||
--gg-info: #3b82f6;
|
||||
@@ -34,50 +36,51 @@
|
||||
--gg-radius-xl: 20px;
|
||||
|
||||
/* 阴影 */
|
||||
--gg-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
--gg-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
|
||||
--gg-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
--gg-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* 渐变 */
|
||||
--gg-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
|
||||
--gg-gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||||
--gg-gradient: linear-gradient(135deg, #059669 0%, #7c3aed 100%);
|
||||
--gg-gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
--gg-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
--gg-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
|
||||
/* ── Element Plus 覆盖 ── */
|
||||
--el-color-primary: #6366f1;
|
||||
--el-color-primary-light-3: #818cf8;
|
||||
--el-color-primary-light-5: #a5b4fc;
|
||||
--el-color-primary-light-7: #c7d2fe;
|
||||
--el-color-primary-light-9: #312e81;
|
||||
--el-color-primary-dark-2: #4f46e5;
|
||||
--el-color-primary: #059669;
|
||||
--el-color-primary-light-3: #10b981;
|
||||
--el-color-primary-light-5: #34d399;
|
||||
--el-color-primary-light-7: #6ee7b7;
|
||||
--el-color-primary-light-9: #ecfdf5;
|
||||
--el-color-primary-dark-2: #047857;
|
||||
|
||||
--el-color-success: #22c55e;
|
||||
--el-color-success: #10b981;
|
||||
--el-color-warning: #f59e0b;
|
||||
--el-color-danger: #ef4444;
|
||||
--el-color-info: #64748b;
|
||||
|
||||
--el-bg-color: #1e293b;
|
||||
--el-bg-color-page: #0f172a;
|
||||
--el-bg-color-overlay: #1e293b;
|
||||
--el-bg-color: #ffffff;
|
||||
--el-bg-color-page: #f0fdf4;
|
||||
--el-bg-color-overlay: #ffffff;
|
||||
|
||||
--el-text-color-primary: #f1f5f9;
|
||||
--el-text-color-regular: #e2e8f0;
|
||||
--el-text-color-secondary: #94a3b8;
|
||||
--el-text-color-placeholder: #64748b;
|
||||
--el-text-color-primary: #1e293b;
|
||||
--el-text-color-regular: #334155;
|
||||
--el-text-color-secondary: #64748b;
|
||||
--el-text-color-placeholder: #94a3b8;
|
||||
|
||||
--el-border-color: #334155;
|
||||
--el-border-color-light: #475569;
|
||||
--el-border-color-lighter: #334155;
|
||||
--el-border-color-extra-light: #1e293b;
|
||||
--el-border-color: #e2e8f0;
|
||||
--el-border-color-light: #f1f5f9;
|
||||
--el-border-color-lighter: #f8fafc;
|
||||
--el-border-color-extra-light: #f0fdf4;
|
||||
|
||||
--el-fill-color: #334155;
|
||||
--el-fill-color-light: #1e293b;
|
||||
--el-fill-color-lighter: #0f172a;
|
||||
--el-fill-color-extra-light: #1e293b;
|
||||
--el-fill-color-blank: #1e293b;
|
||||
--el-fill-color-dark: #475569;
|
||||
--el-fill-color: #f1f5f9;
|
||||
--el-fill-color-light: #f8fafc;
|
||||
--el-fill-color-lighter: #ffffff;
|
||||
--el-fill-color-extra-light: #f0fdf4;
|
||||
--el-fill-color-blank: #ffffff;
|
||||
--el-fill-color-dark: #e2e8f0;
|
||||
|
||||
--el-mask-color: rgba(0, 0, 0, 0.6);
|
||||
--el-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
--el-mask-color: rgba(0, 0, 0, 0.4);
|
||||
--el-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* ── 全局基础 ── */
|
||||
@@ -95,7 +98,7 @@ body {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--gg-primary-light);
|
||||
color: var(--gg-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -132,7 +135,7 @@ a:hover {
|
||||
|
||||
/* Input */
|
||||
.el-input__wrapper {
|
||||
background: var(--gg-bg) !important;
|
||||
background: #ffffff !important;
|
||||
box-shadow: 0 0 0 1px var(--gg-border) inset !important;
|
||||
border-radius: var(--gg-radius-sm) !important;
|
||||
}
|
||||
@@ -149,7 +152,7 @@ a:hover {
|
||||
color: var(--gg-text-muted) !important;
|
||||
}
|
||||
.el-textarea__inner {
|
||||
background: var(--gg-bg) !important;
|
||||
background: #ffffff !important;
|
||||
color: var(--gg-text) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
}
|
||||
@@ -160,6 +163,7 @@ a:hover {
|
||||
border-color: var(--gg-border) !important;
|
||||
border-radius: var(--gg-radius-md) !important;
|
||||
padding: 6px !important;
|
||||
box-shadow: var(--gg-shadow-lg) !important;
|
||||
}
|
||||
.el-dropdown-menu__item {
|
||||
color: var(--gg-text) !important;
|
||||
@@ -168,7 +172,7 @@ a:hover {
|
||||
}
|
||||
.el-dropdown-menu__item:hover {
|
||||
background: var(--gg-bg-hover) !important;
|
||||
color: var(--gg-primary-light) !important;
|
||||
color: var(--gg-primary) !important;
|
||||
}
|
||||
.el-dropdown-menu__item--divided::before {
|
||||
background: var(--gg-border) !important;
|
||||
@@ -190,7 +194,7 @@ a:hover {
|
||||
|
||||
/* Button */
|
||||
.el-button--primary {
|
||||
background: var(--gg-gradient) !important;
|
||||
background: var(--gg-gradient-green) !important;
|
||||
border: none !important;
|
||||
border-radius: var(--gg-radius-sm) !important;
|
||||
}
|
||||
@@ -198,14 +202,14 @@ a:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.el-button--default {
|
||||
background: var(--gg-bg-elevated) !important;
|
||||
background: var(--gg-bg-card) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
color: var(--gg-text) !important;
|
||||
border-radius: var(--gg-radius-sm) !important;
|
||||
}
|
||||
.el-button--default:hover {
|
||||
border-color: var(--gg-primary) !important;
|
||||
color: var(--gg-primary-light) !important;
|
||||
color: var(--gg-primary) !important;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
@@ -224,6 +228,7 @@ a:hover {
|
||||
background: var(--gg-bg-card) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
border-radius: var(--gg-radius-md) !important;
|
||||
box-shadow: var(--gg-shadow-lg) !important;
|
||||
}
|
||||
.el-message__content {
|
||||
color: var(--gg-text) !important;
|
||||
@@ -232,14 +237,14 @@ a:hover {
|
||||
/* Pagination */
|
||||
.el-pagination {
|
||||
--el-pagination-button-bg-color: var(--gg-bg-elevated);
|
||||
--el-pagination-hover-color: var(--gg-primary-light);
|
||||
--el-pagination-hover-color: var(--gg-primary);
|
||||
}
|
||||
.el-pager li {
|
||||
background: var(--gg-bg-elevated) !important;
|
||||
color: var(--gg-text-secondary) !important;
|
||||
}
|
||||
.el-pager li.is-active {
|
||||
background: var(--gg-gradient) !important;
|
||||
background: var(--gg-gradient-green) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
@@ -256,7 +261,7 @@ a:hover {
|
||||
background: var(--gg-bg-hover) !important;
|
||||
}
|
||||
.el-select-dropdown__item.selected {
|
||||
color: var(--gg-primary-light) !important;
|
||||
color: var(--gg-primary) !important;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
@@ -287,7 +292,7 @@ a:hover {
|
||||
|
||||
/* Loading */
|
||||
.el-loading-mask {
|
||||
background: rgba(15, 23, 42, 0.8) !important;
|
||||
background: rgba(240, 253, 244, 0.8) !important;
|
||||
}
|
||||
|
||||
/* ── 工具类 ── */
|
||||
@@ -296,7 +301,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.gg-glow {
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
|
||||
box-shadow: 0 0 20px rgba(5, 150, 105, 0.2);
|
||||
}
|
||||
|
||||
.gg-card {
|
||||
@@ -309,7 +314,7 @@ a:hover {
|
||||
|
||||
.gg-card:hover {
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
|
||||
box-shadow: 0 0 20px rgba(5, 150, 105, 0.1);
|
||||
}
|
||||
|
||||
.gg-text-gradient {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">➤</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user