登录优化
This commit is contained in:
@@ -1,46 +1,35 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<!-- 多层背景系统 -->
|
<!-- 简约背景 -->
|
||||||
<div class="bg-layer-1"></div>
|
<div class="bg-gradient"></div>
|
||||||
<div class="bg-grid"></div>
|
<div class="bg-pattern"></div>
|
||||||
<div class="bg-blobs">
|
|
||||||
<div class="blob blob-1"></div>
|
|
||||||
<div class="blob blob-2"></div>
|
|
||||||
<div class="blob blob-3"></div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-particles"></div>
|
|
||||||
|
|
||||||
<div class="login-content">
|
<div class="login-content">
|
||||||
<!-- 左侧品牌区 -->
|
<!-- 左侧品牌区 -->
|
||||||
<div class="brand-panel">
|
<div class="brand-panel">
|
||||||
<!-- 扫描线 -->
|
|
||||||
<div class="scan-line"></div>
|
|
||||||
<div class="brand-inner">
|
<div class="brand-inner">
|
||||||
<div class="brand-icon">
|
<div class="brand-icon">
|
||||||
<svg width="80" height="80" viewBox="0 0 80 80">
|
<div class="icon-wrapper">
|
||||||
<defs>
|
<svg width="48" height="48" viewBox="0 0 48 48">
|
||||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
<path d="M 24 8 L 24 24 L 36 24" stroke="#3B82F6" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
|
<circle cx="24" cy="24" r="16" fill="none" stroke="#3B82F6" stroke-width="2"/>
|
||||||
<stop offset="100%" style="stop-color:#60A5FA;stop-opacity:1" />
|
<circle cx="24" cy="24" r="3" fill="#3B82F6"/>
|
||||||
</linearGradient>
|
</svg>
|
||||||
</defs>
|
</div>
|
||||||
<circle cx="40" cy="40" r="35" fill="none" stroke="url(#grad1)" stroke-width="2" opacity="0.6"/>
|
|
||||||
<path d="M 40 20 L 40 40 L 55 40" stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.8"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
<h1 class="brand-title">金牌内容大师</h1>
|
<h1 class="brand-title">金牌内容大师</h1>
|
||||||
<p class="brand-subtitle">AI赋能 · 智创未来</p>
|
<p class="brand-subtitle">AI赋能创作，智启未来</p>
|
||||||
<div class="brand-features">
|
<div class="brand-features">
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<span class="feature-icon">✦</span>
|
<div class="feature-dot"></div>
|
||||||
<span>智能创作</span>
|
<span>智能创作</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<span class="feature-icon">✦</span>
|
<div class="feature-dot"></div>
|
||||||
<span>数字人技术</span>
|
<span>数字人技术</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<span class="feature-icon">✦</span>
|
<div class="feature-dot"></div>
|
||||||
<span>内容分析</span>
|
<span>内容分析</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -50,11 +39,9 @@
|
|||||||
<!-- 右侧登录区 -->
|
<!-- 右侧登录区 -->
|
||||||
<div class="login-panel">
|
<div class="login-panel">
|
||||||
<div class="login-card">
|
<div class="login-card">
|
||||||
<!-- 光线扫过效果 -->
|
|
||||||
<div class="card-shine"></div>
|
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h2 class="login-title">欢迎登录</h2>
|
<h2 class="login-title">欢迎回来</h2>
|
||||||
<p class="login-subtitle">进入您的创作空间</p>
|
<p class="login-subtitle">登录您的账户</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a-form
|
<a-form
|
||||||
@@ -280,10 +267,27 @@ onBeforeUnmount(() => {
|
|||||||
/* ========== 容器与布局 ========== */
|
/* ========== 容器与布局 ========== */
|
||||||
.login-container {
|
.login-container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #0f0f1e 50%, #0a0a0a 100%);
|
background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
animation: fadeIn 0.8s ease-out;
|
}
|
||||||
|
|
||||||
|
/* 简约渐变背景 */
|
||||||
|
.bg-gradient {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 80% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 微妙图案背景 */
|
||||||
|
.bg-pattern {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image: radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.03) 1px, transparent 0);
|
||||||
|
background-size: 24px 24px;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 主内容区 */
|
/* 主内容区 */
|
||||||
@@ -294,291 +298,94 @@ onBeforeUnmount(() => {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 背景层系统 ========== */
|
|
||||||
/* 第1层：基础渐变 - 已在container中实现 */
|
|
||||||
|
|
||||||
/* 第2层：动态网格 */
|
|
||||||
.bg-grid {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background-image:
|
|
||||||
linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
|
|
||||||
linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
|
|
||||||
background-size: 50px 50px;
|
|
||||||
animation: gridMove 20s linear infinite;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gridMove {
|
|
||||||
0% { background-position: 0 0; }
|
|
||||||
100% { background-position: 50px 50px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 第3层：装饰光斑 (Blob) */
|
|
||||||
.bg-blobs {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(80px);
|
|
||||||
opacity: 0.15;
|
|
||||||
animation: blobPulse 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-1 {
|
|
||||||
width: 500px;
|
|
||||||
height: 500px;
|
|
||||||
background: radial-gradient(circle, #3B82F6 0%, transparent 70%);
|
|
||||||
top: -10%;
|
|
||||||
left: -10%;
|
|
||||||
animation-delay: 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-2 {
|
|
||||||
width: 400px;
|
|
||||||
height: 400px;
|
|
||||||
background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
|
|
||||||
bottom: -15%;
|
|
||||||
right: -10%;
|
|
||||||
animation-delay: 2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-3 {
|
|
||||||
width: 350px;
|
|
||||||
height: 350px;
|
|
||||||
background: radial-gradient(circle, #06B6D4 0%, transparent 70%);
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
animation-delay: 4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes blobPulse {
|
|
||||||
0%, 100% {
|
|
||||||
transform: scale(1) translateY(0);
|
|
||||||
opacity: 0.15;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.1) translateY(-20px);
|
|
||||||
opacity: 0.25;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 第4层：粒子效果 */
|
|
||||||
.bg-particles {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-particles::before,
|
|
||||||
.bg-particles::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: rgba(59, 130, 246, 0.6);
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow:
|
|
||||||
100px 200px 0 rgba(59, 130, 246, 0.4),
|
|
||||||
300px 400px 0 rgba(139, 92, 246, 0.4),
|
|
||||||
500px 100px 0 rgba(6, 182, 212, 0.3),
|
|
||||||
700px 500px 0 rgba(59, 130, 246, 0.5),
|
|
||||||
200px 600px 0 rgba(139, 92, 246, 0.3),
|
|
||||||
900px 300px 0 rgba(6, 182, 212, 0.4),
|
|
||||||
400px 50px 0 rgba(59, 130, 246, 0.3),
|
|
||||||
600px 700px 0 rgba(139, 92, 246, 0.5),
|
|
||||||
800px 150px 0 rgba(6, 182, 212, 0.3),
|
|
||||||
150px 450px 0 rgba(59, 130, 246, 0.4),
|
|
||||||
950px 600px 0 rgba(139, 92, 246, 0.3),
|
|
||||||
350px 250px 0 rgba(6, 182, 212, 0.5),
|
|
||||||
550px 550px 0 rgba(59, 130, 246, 0.3),
|
|
||||||
750px 50px 0 rgba(139, 92, 246, 0.4),
|
|
||||||
250px 350px 0 rgba(6, 182, 212, 0.3);
|
|
||||||
animation: particleFloat 15s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-particles::after {
|
|
||||||
animation-delay: 7.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes particleFloat {
|
|
||||||
0% {
|
|
||||||
transform: translateY(0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
10% { opacity: 0.6; }
|
|
||||||
90% { opacity: 0.6; }
|
|
||||||
100% {
|
|
||||||
transform: translateY(-100vh);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 左侧品牌区 ========== */
|
/* ========== 左侧品牌区 ========== */
|
||||||
.brand-panel {
|
.brand-panel {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background:
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(99, 102, 241, 0.02) 100%);
|
||||||
radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
|
|
||||||
radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
|
|
||||||
linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f1e 100%);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 60px;
|
padding: 60px;
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 扫描线 */
|
|
||||||
.scan-line {
|
|
||||||
position: absolute;
|
|
||||||
top: -100%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background: linear-gradient(90deg,
|
|
||||||
transparent,
|
|
||||||
rgba(6, 182, 212, 0.8),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
animation: scanLine 4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scanLine {
|
|
||||||
0% { top: -100%; }
|
|
||||||
100% { top: 200%; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-inner {
|
.brand-inner {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 400px;
|
max-width: 420px;
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 品牌图标 */
|
/* 品牌图标 */
|
||||||
.brand-icon {
|
.brand-icon {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 32px;
|
||||||
filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.4));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-icon svg {
|
.icon-wrapper {
|
||||||
animation: iconRotate 20s linear infinite;
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||||
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes iconRotate {
|
.icon-wrapper:hover {
|
||||||
0% { transform: rotate(0deg); }
|
transform: translateY(-2px);
|
||||||
100% { transform: rotate(360deg); }
|
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
|
||||||
}
|
|
||||||
|
|
||||||
.brand-icon svg path,
|
|
||||||
.brand-icon svg circle {
|
|
||||||
animation: pathPulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pathPulse {
|
|
||||||
0%, 100% {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 品牌标题 */
|
/* 品牌标题 */
|
||||||
.brand-title {
|
.brand-title {
|
||||||
font-size: 48px;
|
font-size: 42px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
background: linear-gradient(
|
color: #1e293b;
|
||||||
135deg,
|
margin-bottom: 12px;
|
||||||
#3B82F6 0%,
|
letter-spacing: -0.5px;
|
||||||
#8B5CF6 25%,
|
|
||||||
#06B6D4 50%,
|
|
||||||
#3B82F6 75%,
|
|
||||||
#8B5CF6 100%
|
|
||||||
);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
animation: gradientFlow 4s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradientFlow {
|
|
||||||
0% { background-position: 0% 50%; }
|
|
||||||
100% { background-position: 200% 50%; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-subtitle {
|
.brand-subtitle {
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
color: #06B6D4;
|
color: #64748b;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 48px;
|
||||||
opacity: 0.9;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 特性列表 */
|
/* 特性列表 */
|
||||||
.brand-features {
|
.brand-features {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-item {
|
.feature-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
color: #a0a0a0;
|
color: #475569;
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
position: relative;
|
padding: 8px 0;
|
||||||
padding-left: 35px;
|
transition: all 0.2s ease;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 2px;
|
|
||||||
background: linear-gradient(90deg, #3B82F6, #06B6D4);
|
|
||||||
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item:hover::before {
|
|
||||||
width: 25px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-item:hover {
|
.feature-item:hover {
|
||||||
transform: translateX(10px);
|
|
||||||
color: #60A5FA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-icon {
|
|
||||||
color: #3B82F6;
|
color: #3B82F6;
|
||||||
font-size: 20px;
|
transform: translateX(4px);
|
||||||
display: inline-block;
|
|
||||||
animation: iconBounce 2s ease-in-out infinite;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes iconBounce {
|
.feature-dot {
|
||||||
0%, 100% { transform: translateY(0); }
|
width: 8px;
|
||||||
50% { transform: translateY(-5px); }
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-item:hover .feature-icon {
|
.feature-item:hover .feature-dot {
|
||||||
transform: scale(1.2) rotate(10deg) translateY(-5px);
|
opacity: 1;
|
||||||
filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6));
|
transform: scale(1.2);
|
||||||
animation: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 右侧登录区 ========== */
|
/* ========== 右侧登录区 ========== */
|
||||||
@@ -588,159 +395,83 @@ onBeforeUnmount(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 60px 80px;
|
padding: 60px 80px;
|
||||||
background: transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 登录卡片 */
|
/* 登录卡片 */
|
||||||
.login-card {
|
.login-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 420px;
|
max-width: 440px;
|
||||||
background: rgba(18, 18, 38, 0.92);
|
background: rgba(255, 255, 255, 0.95);
|
||||||
-webkit-backdrop-filter: blur(25px);
|
backdrop-filter: blur(20px);
|
||||||
backdrop-filter: blur(25px);
|
border-radius: 24px;
|
||||||
border-radius: 20px;
|
padding: 48px 40px;
|
||||||
padding: 40px 32px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 12px 40px rgba(0, 0, 0, 0.5),
|
0 8px 32px rgba(15, 23, 42, 0.08),
|
||||||
0 0 0 1px rgba(59, 130, 246, 0.1),
|
0 2px 8px rgba(15, 23, 42, 0.04);
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
border: 1px solid rgba(59, 130, 246, 0.08);
|
||||||
animation: scaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 渐变边框 */
|
|
||||||
.login-card::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: -1px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 1px;
|
|
||||||
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #06B6D4 100%);
|
|
||||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
||||||
-webkit-mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
opacity: 0.6;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 光线扫过 */
|
|
||||||
.card-shine {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg,
|
|
||||||
transparent,
|
|
||||||
rgba(59, 130, 246, 0.1),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
animation: cardShine 3s ease-in-out infinite;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes cardShine {
|
|
||||||
0% { left: -100%; }
|
|
||||||
100% { left: 100%; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes cardFloat {
|
|
||||||
0%, 100% { transform: translateY(0); }
|
|
||||||
50% { transform: translateY(-10px); }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片标题区 */
|
/* 卡片标题区 */
|
||||||
.card-header {
|
.card-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
animation: fadeInUp 0.6s ease-out 0.6s backwards;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-title {
|
.login-title {
|
||||||
font-size: 32px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
|
color: #1e293b;
|
||||||
-webkit-background-clip: text;
|
margin-bottom: 8px;
|
||||||
-webkit-text-fill-color: transparent;
|
letter-spacing: -0.3px;
|
||||||
background-clip: text;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-subtitle {
|
.login-subtitle {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #60A5FA;
|
color: #64748b;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
opacity: 0.9;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 输入框样式 ========== */
|
/* ========== 输入框样式 ========== */
|
||||||
:deep(.ant-form-item:nth-child(1)) {
|
|
||||||
animation: fadeInUp 0.6s ease-out 0.7s backwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-form-item:nth-child(2)) {
|
|
||||||
animation: fadeInUp 0.6s ease-out 0.8s backwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-form-item:nth-child(3)) {
|
|
||||||
animation: fadeInUp 0.6s ease-out 0.9s backwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-input-affix-wrapper) {
|
:deep(.ant-input-affix-wrapper) {
|
||||||
border-radius: 12px !important;
|
border-radius: 12px !important;
|
||||||
background: rgba(15, 15, 30, 0.5) !important;
|
background: #f8fafc !important;
|
||||||
border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
|
border: 1.5px solid #e2e8f0 !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
transition: all 0.2s ease !important;
|
||||||
position: relative;
|
height: 48px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-input-affix-wrapper:hover) {
|
:deep(.ant-input-affix-wrapper:hover) {
|
||||||
border-color: rgba(59, 130, 246, 0.4) !important;
|
border-color: #3B82F6 !important;
|
||||||
|
background: #ffffff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-input-affix-wrapper-focused) {
|
:deep(.ant-input-affix-wrapper-focused) {
|
||||||
border-color: rgba(59, 130, 246, 0.6) !important;
|
border-color: #3B82F6 !important;
|
||||||
background: rgba(15, 15, 30, 0.95) !important;
|
background: #ffffff !important;
|
||||||
transform: translateY(-2px);
|
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
|
||||||
box-shadow:
|
|
||||||
0 8px 24px rgba(59, 130, 246, 0.2),
|
|
||||||
0 0 0 1px rgba(59, 130, 246, 0.4) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 聚焦光晕 */
|
|
||||||
:deep(.ant-input-affix-wrapper-focused)::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: -2px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: linear-gradient(135deg, #3B82F6, #8B5CF6, #06B6D4);
|
|
||||||
opacity: 0.4;
|
|
||||||
z-index: -1;
|
|
||||||
filter: blur(8px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-input) {
|
:deep(.ant-input) {
|
||||||
color: #fff;
|
color: #1e293b !important;
|
||||||
font-size: 15px;
|
font-size: 15px !important;
|
||||||
border: none !important;
|
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-input::placeholder) {
|
:deep(.ant-input::placeholder) {
|
||||||
color: rgba(160, 160, 160, 0.65);
|
color: #94a3b8 !important;
|
||||||
font-size: 14px;
|
font-size: 14px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-input-prefix) {
|
:deep(.ant-input-prefix) {
|
||||||
color: rgba(59, 130, 246, 0.7);
|
color: #94a3b8 !important;
|
||||||
|
margin-right: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-form-item-label > label) {
|
:deep(.ant-form-item-label > label) {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #e0e0e0;
|
color: #334155;
|
||||||
letter-spacing: 0.2px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-input-affix-wrapper:focus-within) {
|
:deep(.ant-input-affix-wrapper:focus-within) {
|
||||||
@@ -749,14 +480,14 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
/* 表单验证错误状态 */
|
/* 表单验证错误状态 */
|
||||||
:deep(.ant-form-item-has-error .ant-input-affix-wrapper) {
|
:deep(.ant-form-item-has-error .ant-input-affix-wrapper) {
|
||||||
border-color: rgba(255, 77, 79, 0.5) !important;
|
border-color: #ef4444 !important;
|
||||||
animation: shake 0.5s;
|
background: #ffffff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shake {
|
:deep(.ant-form-item-explain-error) {
|
||||||
0%, 100% { transform: translateX(0); }
|
color: #ef4444;
|
||||||
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
|
font-size: 13px;
|
||||||
20%, 40%, 60%, 80% { transform: translateX(5px); }
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 验证码输入 ========== */
|
/* ========== 验证码输入 ========== */
|
||||||
@@ -769,31 +500,31 @@ onBeforeUnmount(() => {
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(96, 165, 250, 0.15) 100%);
|
background: #f1f5f9;
|
||||||
border: 1px solid rgba(59, 130, 246, 0.25);
|
border: 1px solid #e2e8f0;
|
||||||
color: #3B82F6;
|
color: #3B82F6;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
height: 48px;
|
||||||
position: relative;
|
padding: 0 20px;
|
||||||
overflow: hidden;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-code-btn:hover:not(:disabled) {
|
.send-code-btn:hover:not(:disabled) {
|
||||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
|
background: #3B82F6;
|
||||||
border-color: rgba(59, 130, 246, 0.6);
|
border-color: #3B82F6;
|
||||||
color: #60A5FA;
|
color: #ffffff;
|
||||||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-code-btn:active:not(:disabled) {
|
.send-code-btn:active:not(:disabled) {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-code-btn:disabled {
|
.send-code-btn:disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
background: #f1f5f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 登录按钮 ========== */
|
/* ========== 登录按钮 ========== */
|
||||||
@@ -802,38 +533,21 @@ onBeforeUnmount(() => {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
|
background: #3B82F6;
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
|
||||||
position: relative;
|
transition: all 0.2s ease;
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 光线扫过 */
|
|
||||||
.login-btn::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
||||||
transition: left 0.6s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn:hover::before {
|
|
||||||
left: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-btn:hover {
|
.login-btn:hover {
|
||||||
background: linear-gradient(135deg, #FF6A30 0%, #3B82F6 100%);
|
background: #2563eb;
|
||||||
box-shadow: 0 6px 30px rgba(255, 106, 48, 0.35);
|
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-btn:active {
|
.login-btn:active {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
|
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 波纹效果 */
|
/* 波纹效果 */
|
||||||
@@ -858,89 +572,31 @@ onBeforeUnmount(() => {
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 入场动画 ========== */
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInLeft {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-50px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scaleIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.9);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 响应式适配 ========== */
|
/* ========== 响应式适配 ========== */
|
||||||
/* 大屏保持左右分栏 */
|
/* 大屏保持左右分栏 */
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
.brand-title {
|
.brand-title {
|
||||||
font-size: 40px;
|
font-size: 36px;
|
||||||
}
|
|
||||||
|
|
||||||
.brand-subtitle {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 平板横屏优化 */
|
/* 平板横屏优化 */
|
||||||
@media (max-width: 992px) and (min-width: 769px) {
|
@media (max-width: 992px) and (min-width: 769px) {
|
||||||
.brand-panel {
|
.brand-panel {
|
||||||
min-height: 140px;
|
padding: 40px 20px;
|
||||||
padding: 25px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-icon svg {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-title {
|
.brand-title {
|
||||||
font-size: 28px;
|
font-size: 32px;
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-subtitle {
|
.brand-subtitle {
|
||||||
font-size: 14px;
|
font-size: 15px;
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item {
|
|
||||||
font-size: 13px;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card {
|
.login-card {
|
||||||
padding: 28px 24px;
|
padding: 36px 32px;
|
||||||
max-width: 360px;
|
max-width: 400px;
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -951,120 +607,85 @@ onBeforeUnmount(() => {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端减少动画复杂度 */
|
/* 移动端隐藏背景图案 */
|
||||||
.bg-grid {
|
.bg-pattern {
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-particles,
|
|
||||||
.blob {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-panel {
|
.brand-panel {
|
||||||
padding: 20px 15px;
|
padding: 32px 20px;
|
||||||
min-height: 100px;
|
|
||||||
flex: none;
|
flex: none;
|
||||||
}
|
min-height: 160px;
|
||||||
|
|
||||||
.brand-inner {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-icon svg {
|
|
||||||
width: 45px;
|
|
||||||
height: 45px;
|
|
||||||
animation: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-title {
|
.brand-title {
|
||||||
font-size: 24px;
|
font-size: 28px;
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-subtitle {
|
.brand-subtitle {
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 32px;
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item {
|
|
||||||
font-size: 12px;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item:nth-child(n+2) {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-panel {
|
.login-panel {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
padding: 24px 20px 40px;
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 20px 15px 40px;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card {
|
.login-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 380px;
|
max-width: 420px;
|
||||||
padding: 32px 28px;
|
padding: 36px 32px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: rgba(18, 18, 38, 0.92);
|
|
||||||
backdrop-filter: blur(32px);
|
|
||||||
border-radius: 18px;
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
||||||
box-shadow:
|
|
||||||
0 10px 36px rgba(0, 0, 0, 0.55),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
||||||
animation: scaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-title {
|
.login-title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-subtitle {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 小屏手机优化 */
|
/* 小屏手机优化 */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.brand-panel {
|
.brand-panel {
|
||||||
min-height: 80px;
|
padding: 24px 16px;
|
||||||
padding: 15px 10px;
|
min-height: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-icon svg {
|
.brand-icon {
|
||||||
width: 40px;
|
margin-bottom: 24px;
|
||||||
height: 40px;
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-title {
|
.brand-title {
|
||||||
font-size: 20px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-subtitle {
|
.brand-subtitle {
|
||||||
display: none;
|
font-size: 13px;
|
||||||
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-item:nth-child(1) {
|
.brand-features {
|
||||||
display: none;
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-item {
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-panel {
|
.login-panel {
|
||||||
padding: 15px 10px 30px;
|
padding: 20px 16px 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card {
|
.login-card {
|
||||||
padding: 28px 20px;
|
padding: 32px 24px;
|
||||||
border-radius: 16px;
|
max-width: 100%;
|
||||||
max-width: 92%;
|
border-radius: 20px;
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-title {
|
.login-title {
|
||||||
@@ -1085,15 +706,4 @@ onBeforeUnmount(() => {
|
|||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 减弱动画（用户偏好设置） */
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
animation-duration: 0.01ms !important;
|
|
||||||
animation-iteration-count: 1 !important;
|
|
||||||
transition-duration: 0.01ms !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user