|
|
@@ -1,14 +1,31 @@
|
|
|
<template>
|
|
|
<div class="login-page">
|
|
|
- <!-- 左侧品牌展示区 — 五行相生相克沙盘 -->
|
|
|
+ <!-- 左侧品牌展示区 — 浠艾福品牌故事 + 五维能量 -->
|
|
|
<div class="brand-panel">
|
|
|
<div class="brand-content">
|
|
|
|
|
|
- <!-- ===== 五维能量沙盘 · 相生相克图 ===== -->
|
|
|
+ <!-- ===== Logo + 品牌标识 ===== -->
|
|
|
+ <div class="brand-header">
|
|
|
+ <img src="/logo.png" alt="浠艾福" class="logo-img" />
|
|
|
+ <div class="brand-titles">
|
|
|
+ <span class="brand-cn">亿图腾<span class="brand-dot">·</span>浠艾福</span>
|
|
|
+ <span class="brand-en">Care Family</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ===== 核心主张 ===== -->
|
|
|
+ <div class="brand-mission">
|
|
|
+ <h1 class="mission-title">给全家的<span class="highlight">一站式幸福提案</span></h1>
|
|
|
+ <p class="mission-desc">
|
|
|
+ AI 智慧家庭成长平台 · 五维能量驱动全家持续成长
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ===== 五维能量沙盘 ===== -->
|
|
|
<div class="sand-table-wrap">
|
|
|
<svg class="sand-table-svg" viewBox="0 0 340 370" xmlns="http://www.w3.org/2000/svg">
|
|
|
<defs>
|
|
|
- <!-- 相生箭头（userSpaceOnUse 精确定位，箭头尖在圆边） -->
|
|
|
+ <!-- 相生箭头 -->
|
|
|
<marker id="arrowGen" markerWidth="52" markerHeight="10" refX="48" refY="5" orient="auto" markerUnits="userSpaceOnUse">
|
|
|
<polygon points="7,5 0,0 0,10" fill="#FFE066" />
|
|
|
</marker>
|
|
|
@@ -81,33 +98,22 @@
|
|
|
<circle cx="100" cy="280" r="2" fill="#FFE066" opacity="0.5" class="particle" />
|
|
|
<circle cx="69" cy="133" r="2" fill="#FFE066" opacity="0.5" class="particle" />
|
|
|
|
|
|
- <!-- ===== 相生环 ===== -->
|
|
|
- <!-- 土→金 -->
|
|
|
+ <!-- 相生环 -->
|
|
|
<path d="M 170,85 A 105,105 0 0,1 270,158" fill="none" stroke="#FFD700" stroke-width="2.5" stroke-opacity="0.8" class="arc-gen" marker-end="url(#arrowGen)" />
|
|
|
- <!-- 金→水 -->
|
|
|
<path d="M 270,158 A 105,105 0 0,1 232,275" fill="none" stroke="#FFD700" stroke-width="2.5" stroke-opacity="0.8" class="arc-gen" marker-end="url(#arrowGen)" />
|
|
|
- <!-- 水→木 -->
|
|
|
<path d="M 232,275 A 105,105 0 0,1 108,275" fill="none" stroke="#FFD700" stroke-width="2.5" stroke-opacity="0.8" class="arc-gen" marker-end="url(#arrowGen)" />
|
|
|
- <!-- 木→火 -->
|
|
|
<path d="M 108,275 A 105,105 0 0,1 70,158" fill="none" stroke="#FFD700" stroke-width="2.5" stroke-opacity="0.8" class="arc-gen" marker-end="url(#arrowGen)" />
|
|
|
- <!-- 火→土 -->
|
|
|
<path d="M 70,158 A 105,105 0 0,1 170,85" fill="none" stroke="#FFD700" stroke-width="2.5" stroke-opacity="0.8" class="arc-gen" marker-end="url(#arrowGen)" />
|
|
|
|
|
|
- <!-- ===== 相克线（内五角星） ===== -->
|
|
|
- <!-- 木克土 行→身（静态线，无脉冲闪烁） -->
|
|
|
+ <!-- 相克线 -->
|
|
|
<line x1="108" y1="275" x2="170" y2="85" stroke="#FF8A80" stroke-width="1.5" stroke-dasharray="6,6" stroke-opacity="0.45" class="line-ove-quiet" marker-end="url(#arrowOve)" />
|
|
|
- <!-- 土克水 身→富 -->
|
|
|
<line x1="170" y1="85" x2="232" y2="275" stroke="#FF8A80" stroke-width="2" stroke-dasharray="6,6" class="line-ove" marker-end="url(#arrowOve)" />
|
|
|
- <!-- 水克火 富→心 -->
|
|
|
<line x1="232" y1="275" x2="70" y2="158" stroke="#FF8A80" stroke-width="2" stroke-dasharray="6,6" class="line-ove" marker-end="url(#arrowOve)" />
|
|
|
- <!-- 火克金 心→智 -->
|
|
|
<line x1="70" y1="158" x2="270" y2="158" stroke="#FF8A80" stroke-width="2" stroke-dasharray="6,6" class="line-ove" marker-end="url(#arrowOve)" />
|
|
|
- <!-- 金克木 智→行 -->
|
|
|
<line x1="270" y1="158" x2="108" y2="275" stroke="#FF8A80" stroke-width="2" stroke-dasharray="6,6" class="line-ove" marker-end="url(#arrowOve)" />
|
|
|
|
|
|
- <!-- ===== 五维节点 ===== -->
|
|
|
-
|
|
|
- <!-- 身(土) — 上 -->
|
|
|
+ <!-- 五维节点 -->
|
|
|
+ <!-- 身(土) -->
|
|
|
<g class="node-group">
|
|
|
<circle cx="170" cy="85" r="34" fill="url(#gradEarth)" stroke="rgba(212,184,150,0.5)" stroke-width="2" filter="url(#glowNode)" />
|
|
|
<circle cx="170" cy="85" r="30" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
|
|
|
@@ -115,8 +121,7 @@
|
|
|
<text x="170" y="100" text-anchor="middle" fill="#fff" font-size="15" font-weight="600">身</text>
|
|
|
<text x="170" y="114" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="9">土</text>
|
|
|
</g>
|
|
|
-
|
|
|
- <!-- 智(金) — 右上 -->
|
|
|
+ <!-- 智(金) -->
|
|
|
<g class="node-group">
|
|
|
<circle cx="270" cy="158" r="34" fill="url(#gradMetal)" stroke="rgba(240,218,112,0.5)" stroke-width="2" filter="url(#glowNode)" />
|
|
|
<circle cx="270" cy="158" r="30" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
|
|
|
@@ -124,8 +129,7 @@
|
|
|
<text x="270" y="173" text-anchor="middle" fill="#fff" font-size="15" font-weight="600">智</text>
|
|
|
<text x="270" y="187" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="9">金</text>
|
|
|
</g>
|
|
|
-
|
|
|
- <!-- 富(水) — 右下 -->
|
|
|
+ <!-- 富(水) -->
|
|
|
<g class="node-group">
|
|
|
<circle cx="232" cy="275" r="34" fill="url(#gradWater)" stroke="rgba(143,197,232,0.5)" stroke-width="2" filter="url(#glowNode)" />
|
|
|
<circle cx="232" cy="275" r="30" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
|
|
|
@@ -133,8 +137,7 @@
|
|
|
<text x="232" y="290" text-anchor="middle" fill="#fff" font-size="15" font-weight="600">富</text>
|
|
|
<text x="232" y="304" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="9">水</text>
|
|
|
</g>
|
|
|
-
|
|
|
- <!-- 行(木) — 左下 -->
|
|
|
+ <!-- 行(木) -->
|
|
|
<g class="node-group">
|
|
|
<circle cx="108" cy="275" r="34" fill="url(#gradWood)" stroke="rgba(129,199,132,0.5)" stroke-width="2" filter="url(#glowNode)" />
|
|
|
<circle cx="108" cy="275" r="30" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
|
|
|
@@ -142,8 +145,7 @@
|
|
|
<text x="108" y="290" text-anchor="middle" fill="#fff" font-size="15" font-weight="600">行</text>
|
|
|
<text x="108" y="304" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="9">木</text>
|
|
|
</g>
|
|
|
-
|
|
|
- <!-- 心(火) — 左上 -->
|
|
|
+ <!-- 心(火) -->
|
|
|
<g class="node-group">
|
|
|
<circle cx="70" cy="158" r="34" fill="url(#gradFire)" stroke="rgba(255,171,145,0.5)" stroke-width="2" filter="url(#glowNode)" />
|
|
|
<circle cx="70" cy="158" r="30" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
|
|
|
@@ -152,13 +154,8 @@
|
|
|
<text x="70" y="187" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="9">火</text>
|
|
|
</g>
|
|
|
|
|
|
- <!-- 中心太极（替代原有五行文字） -->
|
|
|
- <svg x="130" y="150" width="80" height="80" viewBox="0 0 120 120" class="login-taiji">
|
|
|
- <circle cx="60" cy="60" r="56" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="1.2" />
|
|
|
- <path d="M60 4 A56 56 0 0 1 60 116 A28 28 0 0 0 60 60 A28 28 0 0 1 60 4" fill="rgba(255,255,255,0.15)" />
|
|
|
- <circle cx="60" cy="32" r="10" fill="rgba(255,255,255,0.6)" />
|
|
|
- <circle cx="60" cy="88" r="10" fill="rgba(255,255,255,0.15)" />
|
|
|
- </svg>
|
|
|
+ <!-- 中心文字 -->
|
|
|
+ <text x="170" y="188" text-anchor="middle" fill="rgba(255,255,255,0.07)" font-size="13" letter-spacing="5">五行 · 相生相克</text>
|
|
|
|
|
|
<!-- 图例 -->
|
|
|
<g transform="translate(170, 345)">
|
|
|
@@ -172,22 +169,49 @@
|
|
|
</svg>
|
|
|
</div>
|
|
|
|
|
|
- <!-- Logo + 品牌 -->
|
|
|
- <div class="brand-mid">
|
|
|
- <div class="brand-logo-row">
|
|
|
- <img src="/logo.png" alt="浠艾福" class="logo-img" />
|
|
|
- <span class="brand-name">浠艾福</span>
|
|
|
- <span class="brand-en">Care Family</span>
|
|
|
+ <!-- ===== 品牌价值 ===== -->
|
|
|
+ <div class="brand-values">
|
|
|
+ <div class="value-item">
|
|
|
+ <span class="value-icon">🌏</span>
|
|
|
+ <span class="value-label">身</span>
|
|
|
+ <span class="value-arrow">→</span>
|
|
|
+ <span class="value-icon">⚔️</span>
|
|
|
+ <span class="value-label">智</span>
|
|
|
+ <span class="value-arrow">→</span>
|
|
|
+ <span class="value-icon">💧</span>
|
|
|
+ <span class="value-label">富</span>
|
|
|
+ <span class="value-arrow">→</span>
|
|
|
+ <span class="value-icon">🌿</span>
|
|
|
+ <span class="value-label">行</span>
|
|
|
+ <span class="value-arrow">→</span>
|
|
|
+ <span class="value-icon">🔥</span>
|
|
|
+ <span class="value-label">心</span>
|
|
|
</div>
|
|
|
+ <p class="value-subtitle">相生相克 · 动态平衡 · 全家成长</p>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 底部 -->
|
|
|
- <div class="brand-bottom">
|
|
|
- <p class="tagline">给全家的一站式幸福提案</p>
|
|
|
+ <!-- ===== 数据 + 角色标签 ===== -->
|
|
|
+ <div class="brand-footer">
|
|
|
+ <div class="stats-row">
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-num">120,000+</span>
|
|
|
+ <span class="stat-label">家庭信赖</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-divider"></div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-num">1,000+</span>
|
|
|
+ <span class="stat-label">专业人员</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-divider"></div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-num">5</span>
|
|
|
+ <span class="stat-label">幸福维度</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="role-tags">
|
|
|
- <span class="role-tag" style="border-color:#5B9BD5">家长</span>
|
|
|
- <span class="role-tag" style="border-color:#F08A7A">服务商</span>
|
|
|
- <span class="role-tag" style="border-color:#4CAF50">运营</span>
|
|
|
+ <span class="role-tag" style="border-color:#5B9BD5;color:#8FC5E8">家庭客户</span>
|
|
|
+ <span class="role-tag" style="border-color:#F08A7A;color:#FFAB91">服务商</span>
|
|
|
+ <span class="role-tag" style="border-color:#4CAF50;color:#81C784">平台运营</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -198,11 +222,15 @@
|
|
|
<div class="form-panel">
|
|
|
<div class="form-card">
|
|
|
<div class="form-header">
|
|
|
- <div class="header-icon">
|
|
|
- <i class="el-icon-user"></i>
|
|
|
+ <div class="header-icon-wrap">
|
|
|
+ <svg viewBox="0 0 32 32" fill="none" width="28" height="28" class="header-svg">
|
|
|
+ <circle cx="16" cy="16" r="14" stroke="currentColor" stroke-width="1.8" fill="none" opacity="0.3"/>
|
|
|
+ <circle cx="16" cy="12" r="4" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
|
|
+ <path d="M8 26c0-5 3-8 8-8s8 3 8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none"/>
|
|
|
+ </svg>
|
|
|
</div>
|
|
|
- <h2 class="form-title">管理后台登录</h2>
|
|
|
- <p class="form-desc">请使用管理员或规划师账号登录</p>
|
|
|
+ <h2 class="form-title">管理后台</h2>
|
|
|
+ <p class="form-desc">管理员 / 规划师登录</p>
|
|
|
</div>
|
|
|
|
|
|
<el-form
|
|
|
@@ -215,7 +243,7 @@
|
|
|
<el-form-item prop="username">
|
|
|
<el-input
|
|
|
v-model="loginForm.username"
|
|
|
- placeholder="请输入用户名 / 手机号"
|
|
|
+ placeholder="用户名 / 手机号"
|
|
|
size="large"
|
|
|
:disabled="loading"
|
|
|
>
|
|
|
@@ -227,7 +255,7 @@
|
|
|
<el-input
|
|
|
v-model="loginForm.password"
|
|
|
type="password"
|
|
|
- placeholder="请输入密码"
|
|
|
+ placeholder="密码"
|
|
|
size="large"
|
|
|
:disabled="loading"
|
|
|
show-password
|
|
|
@@ -340,9 +368,9 @@ export default {
|
|
|
|
|
|
<style scoped>
|
|
|
/* ============================================================
|
|
|
- 登录页面 — 浠艾福 (Care Family)
|
|
|
- 品牌色: #5B9BD5 / #F08A7A
|
|
|
- 五维序: 身(土)→智(金)→富(水)→行(木)→心(火)
|
|
|
+ 登录页面 — 亿图腾 · 浠艾福 (Care Family)
|
|
|
+ 品牌色: #4A9BD7 · #F59E0B
|
|
|
+ 设计灵感: 企业官网 web/ 品牌体系
|
|
|
============================================================ */
|
|
|
|
|
|
.login-page {
|
|
|
@@ -350,8 +378,8 @@ export default {
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
overflow: hidden;
|
|
|
- font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
|
|
|
- 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
|
|
|
+ font-family: system-ui, -apple-system, BlinkMacSystemFont,
|
|
|
+ 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
|
|
|
}
|
|
|
|
|
|
/* ==================== 左侧品牌区 ==================== */
|
|
|
@@ -361,25 +389,119 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- background: linear-gradient(165deg, #3A7CC4 0%, #5B9BD5 30%, #6BA8DE 60%, #7BBDE0 100%);
|
|
|
+ background: linear-gradient(160deg,
|
|
|
+ #0A1F3A 0%,
|
|
|
+ #0F2F55 20%,
|
|
|
+ #1A4D7A 45%,
|
|
|
+ #2E6FA0 70%,
|
|
|
+ #4A9BD7 100%);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
+/* 背景纹理 — 抽象山水波纹 */
|
|
|
+.brand-panel::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0; left: 0; right: 0; bottom: 0;
|
|
|
+ background:
|
|
|
+ radial-gradient(ellipse 120% 50% at 10% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 70%),
|
|
|
+ radial-gradient(ellipse 80% 40% at 90% 80%, rgba(74, 155, 215, 0.06) 0%, transparent 70%),
|
|
|
+ radial-gradient(circle 60% 60% at 50% 100%, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 0;
|
|
|
+}
|
|
|
+
|
|
|
.brand-content {
|
|
|
position: relative;
|
|
|
- z-index: 2;
|
|
|
+ z-index: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- max-width: 480px;
|
|
|
+ max-width: 520px;
|
|
|
width: 100%;
|
|
|
- padding: 16px 40px;
|
|
|
+ padding: 24px 40px;
|
|
|
color: #fff;
|
|
|
min-height: 100vh;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
+/* -------- Logo + 品牌 -------- */
|
|
|
+.brand-header {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 14px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.logo-img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ display: block;
|
|
|
+ filter: brightness(1.1);
|
|
|
+}
|
|
|
+
|
|
|
+.brand-titles {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.brand-cn {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ line-height: 1.3;
|
|
|
+ background: linear-gradient(135deg, #FFE066 0%, #FFD700 50%, #FFE066 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+}
|
|
|
+
|
|
|
+.brand-dot {
|
|
|
+ margin: 0 2px;
|
|
|
+ opacity: 0.6;
|
|
|
+}
|
|
|
+
|
|
|
+.brand-en {
|
|
|
+ font-size: 11px;
|
|
|
+ opacity: 0.5;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ font-weight: 300;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+
|
|
|
+/* -------- 核心主张 -------- */
|
|
|
+.brand-mission {
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.mission-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ margin: 0 0 4px;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+
|
|
|
+.mission-title .highlight {
|
|
|
+ background: linear-gradient(135deg, #FFE066, #F59E0B);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+}
|
|
|
+
|
|
|
+.mission-desc {
|
|
|
+ font-size: 13px;
|
|
|
+ opacity: 0.55;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ margin: 0;
|
|
|
+ font-weight: 300;
|
|
|
+}
|
|
|
+
|
|
|
/* -------- 五维能量沙盘 -------- */
|
|
|
.sand-table-wrap {
|
|
|
flex: 1;
|
|
|
@@ -388,16 +510,17 @@ export default {
|
|
|
justify-content: center;
|
|
|
width: 100%;
|
|
|
min-height: 0;
|
|
|
+ margin: -8px 0;
|
|
|
}
|
|
|
|
|
|
.sand-table-svg {
|
|
|
width: 100%;
|
|
|
- max-width: 340px;
|
|
|
+ max-width: 320px;
|
|
|
height: auto;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
-/* ===== 相生环 · 连续流动 ===== */
|
|
|
+/* 相生环流动 */
|
|
|
.sand-table-svg .arc-gen {
|
|
|
stroke-dasharray: 10 8;
|
|
|
animation: flowArc 1.2s linear infinite;
|
|
|
@@ -413,17 +536,7 @@ export default {
|
|
|
100% { stroke-dashoffset: -18; }
|
|
|
}
|
|
|
|
|
|
-/* ===== 中心太极 · 缓慢旋转 ===== */
|
|
|
-.sand-table-svg .login-taiji {
|
|
|
- animation: taijiSpin 24s linear infinite;
|
|
|
- transform-origin: 170px 190px;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes taijiSpin {
|
|
|
- to { transform: rotate(360deg); }
|
|
|
-}
|
|
|
-
|
|
|
-/* ===== 相克线 · 脉冲 ===== */
|
|
|
+/* 相克线脉冲 */
|
|
|
.sand-table-svg .line-ove {
|
|
|
animation: pulseLine 2.2s ease-in-out infinite;
|
|
|
}
|
|
|
@@ -437,12 +550,11 @@ export default {
|
|
|
50% { stroke-opacity: 0.75; stroke-width: 2.5; }
|
|
|
}
|
|
|
|
|
|
-/* 木→土线（静态，无脉冲） */
|
|
|
.sand-table-svg .line-ove-quiet {
|
|
|
stroke-opacity: 0.35;
|
|
|
}
|
|
|
|
|
|
-/* ===== 节点呼吸 ===== */
|
|
|
+/* 节点呼吸 */
|
|
|
.sand-table-svg .node-group {
|
|
|
animation: nodeBreathe 3.2s ease-in-out infinite;
|
|
|
}
|
|
|
@@ -457,7 +569,7 @@ export default {
|
|
|
50% { opacity: 1; transform: scale(1.03); }
|
|
|
}
|
|
|
|
|
|
-/* ===== 轨道粒子公转 ===== */
|
|
|
+/* 轨道粒子公转 */
|
|
|
.sand-table-svg .particle {
|
|
|
animation: orbitParticle 8s linear infinite;
|
|
|
transform-origin: 170px 190px;
|
|
|
@@ -471,72 +583,111 @@ export default {
|
|
|
100% { opacity: 0; transform: rotate(360deg) translateX(132px) rotate(-360deg); }
|
|
|
}
|
|
|
|
|
|
-/* -------- Logo + 品牌 -------- */
|
|
|
-.brand-mid {
|
|
|
+/* -------- 品牌价值 -------- */
|
|
|
+.brand-values {
|
|
|
flex-shrink: 0;
|
|
|
- margin: 6px 0 10px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 2px 0 8px;
|
|
|
}
|
|
|
|
|
|
-.brand-logo-row {
|
|
|
- display: flex;
|
|
|
+.value-item {
|
|
|
+ display: inline-flex;
|
|
|
align-items: center;
|
|
|
+ gap: 2px;
|
|
|
+ flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
- gap: 10px;
|
|
|
}
|
|
|
|
|
|
-.logo-img {
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- display: block;
|
|
|
+.value-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
|
|
|
-.brand-name {
|
|
|
- font-size: 22px;
|
|
|
- font-weight: 700;
|
|
|
- letter-spacing: 3px;
|
|
|
- text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+.value-label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
|
|
|
-.brand-en {
|
|
|
+.value-arrow {
|
|
|
font-size: 11px;
|
|
|
- opacity: 0.6;
|
|
|
- letter-spacing: 2px;
|
|
|
+ opacity: 0.3;
|
|
|
+ margin: 0 6px;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.value-subtitle {
|
|
|
+ font-size: 11px;
|
|
|
+ opacity: 0.4;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ margin: 4px 0 0;
|
|
|
font-weight: 300;
|
|
|
- margin-left: -2px;
|
|
|
}
|
|
|
|
|
|
-/* -------- 底部 -------- */
|
|
|
-.brand-bottom {
|
|
|
+/* -------- 底部数据 + 角色 -------- */
|
|
|
+.brand-footer {
|
|
|
flex-shrink: 0;
|
|
|
- text-align: center;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
-.tagline {
|
|
|
- font-size: 13px;
|
|
|
- opacity: 0.65;
|
|
|
- letter-spacing: 2px;
|
|
|
- font-weight: 300;
|
|
|
- margin: 0 0 10px;
|
|
|
+.stats-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 0;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-num {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ background: linear-gradient(135deg, #FFE066, #F59E0B);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-label {
|
|
|
+ font-size: 10px;
|
|
|
+ opacity: 0.5;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ margin-top: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-divider {
|
|
|
+ width: 1px;
|
|
|
+ height: 28px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
}
|
|
|
|
|
|
.role-tags {
|
|
|
display: flex;
|
|
|
- gap: 8px;
|
|
|
+ gap: 10px;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.role-tag {
|
|
|
display: inline-block;
|
|
|
- padding: 2px 12px;
|
|
|
+ padding: 3px 14px;
|
|
|
font-size: 11px;
|
|
|
border: 1px solid;
|
|
|
border-radius: 20px;
|
|
|
- opacity: 0.45;
|
|
|
+ opacity: 0.5;
|
|
|
transition: opacity 0.3s;
|
|
|
+ letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
.role-tag:hover {
|
|
|
- opacity: 0.85;
|
|
|
+ opacity: 0.9;
|
|
|
}
|
|
|
|
|
|
/* ==================== 右侧表单区 ==================== */
|
|
|
@@ -545,7 +696,7 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- background: #F5F9FC;
|
|
|
+ background: #F5FAFE;
|
|
|
padding: 40px;
|
|
|
}
|
|
|
|
|
|
@@ -553,31 +704,39 @@ export default {
|
|
|
width: 100%;
|
|
|
max-width: 400px;
|
|
|
background: #fff;
|
|
|
- border-radius: 16px;
|
|
|
- padding: 40px 36px 32px;
|
|
|
- box-shadow: 0 8px 40px rgba(91, 155, 213, 0.08),
|
|
|
- 0 1px 4px rgba(0, 0, 0, 0.04);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 44px 40px 36px;
|
|
|
+ box-shadow:
|
|
|
+ 0 4px 24px rgba(74, 155, 215, 0.06),
|
|
|
+ 0 1px 4px rgba(0, 0, 0, 0.04);
|
|
|
+ transition: box-shadow 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.form-card:hover {
|
|
|
+ box-shadow:
|
|
|
+ 0 8px 40px rgba(74, 155, 215, 0.10),
|
|
|
+ 0 1px 4px rgba(0, 0, 0, 0.04);
|
|
|
}
|
|
|
|
|
|
.form-header {
|
|
|
text-align: center;
|
|
|
- margin-bottom: 32px;
|
|
|
+ margin-bottom: 36px;
|
|
|
}
|
|
|
|
|
|
-.header-icon {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
+.header-icon-wrap {
|
|
|
+ width: 52px;
|
|
|
+ height: 52px;
|
|
|
border-radius: 50%;
|
|
|
- background: linear-gradient(135deg, #D6EAF8, #8FC5E8);
|
|
|
+ background: linear-gradient(135deg, #E8F4FA 0%, #D6EAF8 100%);
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-bottom: 16px;
|
|
|
+ color: #3A7CC4;
|
|
|
}
|
|
|
|
|
|
-.header-icon i {
|
|
|
- font-size: 24px;
|
|
|
- color: #3A7CC4;
|
|
|
+.header-icon-wrap .header-svg {
|
|
|
+ display: block;
|
|
|
}
|
|
|
|
|
|
.form-title {
|
|
|
@@ -585,12 +744,14 @@ export default {
|
|
|
font-weight: 600;
|
|
|
color: #1E293B;
|
|
|
margin: 0 0 6px;
|
|
|
+ letter-spacing: 2px;
|
|
|
}
|
|
|
|
|
|
.form-desc {
|
|
|
font-size: 13px;
|
|
|
color: #94A3B8;
|
|
|
margin: 0;
|
|
|
+ letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
.login-form {
|
|
|
@@ -606,12 +767,13 @@ export default {
|
|
|
transition: all 0.25s;
|
|
|
font-size: 14px;
|
|
|
padding-left: 42px;
|
|
|
+ font-family: inherit;
|
|
|
}
|
|
|
|
|
|
.login-form >>> .el-input__inner:focus {
|
|
|
- border-color: #5B9BD5;
|
|
|
+ border-color: #4A9BD7;
|
|
|
background: #fff;
|
|
|
- box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.1);
|
|
|
+ box-shadow: 0 0 0 3px rgba(74, 155, 215, 0.10);
|
|
|
}
|
|
|
|
|
|
.login-form >>> .el-input__inner:hover {
|
|
|
@@ -633,7 +795,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.login-form >>> .el-input.is-focused .input-icon {
|
|
|
- color: #5B9BD5;
|
|
|
+ color: #4A9BD7;
|
|
|
}
|
|
|
|
|
|
.login-form >>> .el-form-item {
|
|
|
@@ -651,14 +813,15 @@ export default {
|
|
|
font-weight: 500;
|
|
|
letter-spacing: 6px;
|
|
|
border-radius: 10px;
|
|
|
- background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
|
|
|
+ background: linear-gradient(135deg, #4A9BD7, #3A7CC4);
|
|
|
border: none;
|
|
|
transition: all 0.3s;
|
|
|
+ font-family: inherit;
|
|
|
}
|
|
|
|
|
|
.login-btn:hover {
|
|
|
- background: linear-gradient(135deg, #6BA8DE, #4A86CE);
|
|
|
- box-shadow: 0 4px 16px rgba(91, 155, 213, 0.35);
|
|
|
+ background: linear-gradient(135deg, #5BABE8, #4A86CE);
|
|
|
+ box-shadow: 0 4px 16px rgba(74, 155, 215, 0.35);
|
|
|
transform: translateY(-1px);
|
|
|
}
|
|
|
|
|
|
@@ -673,12 +836,13 @@ export default {
|
|
|
|
|
|
.form-footer {
|
|
|
text-align: center;
|
|
|
- margin-top: 12px;
|
|
|
+ margin-top: 8px;
|
|
|
}
|
|
|
|
|
|
.copyright {
|
|
|
font-size: 12px;
|
|
|
- color: #C0C4CC;
|
|
|
+ color: #B2BEC3;
|
|
|
+ letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
/* ==================== 响应式 ==================== */
|
|
|
@@ -686,11 +850,14 @@ export default {
|
|
|
.brand-panel { display: none; }
|
|
|
.form-panel {
|
|
|
flex: 1;
|
|
|
- padding: 20px;
|
|
|
- background: linear-gradient(160deg, #3A7CC4, #6BA8DE);
|
|
|
+ padding: 24px;
|
|
|
+ background: linear-gradient(160deg, #0A1F3A, #1A4D7A);
|
|
|
}
|
|
|
.form-card {
|
|
|
- box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
|
|
|
+ box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+ .form-card:hover {
|
|
|
+ box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
User