|
|
@@ -0,0 +1,564 @@
|
|
|
+# Login 左侧品牌区重新设计 实施计划
|
|
|
+
|
|
|
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
+
|
|
|
+**Goal:** 将 cfc-web 登录页左侧品牌区从五行沙盘 SVG 重构为五维能量轮盘动画，使用五维品牌色系
|
|
|
+
|
|
|
+**Architecture:** 单文件修改（`Login.vue`），只改 template 和 scoped style，不涉及 script。保留右侧表单区域不变。
|
|
|
+
|
|
|
+**Tech Stack:** Vue 2 Options API, CSS3 Animations, SVG
|
|
|
+
|
|
|
+**设计文档:** `docs/superpowers/specs/2026-07-02-login-left-panel-redesign.md`
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 文件结构
|
|
|
+
|
|
|
+| 文件 | 操作 | 说明 |
|
|
|
+|------|------|------|
|
|
|
+| `cfc-web/src/views/Login.vue` | 修改 | 替换全部 brand-panel 模板和样式 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 1: 更新品牌区背景 + 整体布局
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Modify: `cfc-web/src/views/Login.vue:1-884`
|
|
|
+
|
|
|
+- [ ] **Step 1: 替换背景渐变色和布局微调**
|
|
|
+
|
|
|
+修改 `.brand-panel` 的背景和 `.brand-content` 的布局：
|
|
|
+
|
|
|
+```css
|
|
|
+/* 替换现有 .brand-panel 背景 (line ~413-419) */
|
|
|
+.brand-panel {
|
|
|
+ flex: 0 0 55%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: linear-gradient(160deg,
|
|
|
+ #1A0F00 0%,
|
|
|
+ #2D1810 30%,
|
|
|
+ #3D2B1F 60%,
|
|
|
+ #4A3020 100%);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* 替换 .brand-panel::before 背景纹理 (line ~423-433) */
|
|
|
+.brand-panel::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0; left: 0; right: 0; bottom: 0;
|
|
|
+ background:
|
|
|
+ radial-gradient(ellipse 100% 40% at 50% 30%, rgba(255, 215, 0, 0.04) 0%, transparent 70%),
|
|
|
+ radial-gradient(ellipse 80% 60% at 80% 80%, rgba(255, 140, 66, 0.05) 0%, transparent 70%),
|
|
|
+ radial-gradient(circle 50% 50% at 20% 80%, rgba(99, 102, 241, 0.03) 0%, transparent 60%);
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 调整 .brand-content 布局 (line ~435-448) */
|
|
|
+.brand-content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ max-width: 480px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 32px 36px;
|
|
|
+ color: #fff;
|
|
|
+ min-height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 2: 更新品牌头部样式**
|
|
|
+
|
|
|
+```css
|
|
|
+/* 替换 .brand-header (line ~451-457) */
|
|
|
+.brand-header {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 14px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/* .logo-img 保持不变 (line ~459-464) */
|
|
|
+
|
|
|
+/* .brand-titles 不变 (line ~466-470) */
|
|
|
+
|
|
|
+/* 替换 .brand-cn (line ~472-480) */
|
|
|
+.brand-cn {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ line-height: 1.3;
|
|
|
+ background: linear-gradient(135deg, #FFE066 0%, #F59E0B 50%, #FFE066 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+}
|
|
|
+
|
|
|
+/* .brand-dot 不变 (line ~482-486) */
|
|
|
+
|
|
|
+/* .brand-en 不变 (line ~488-494) */
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 3: 更新品牌主张区域样式**
|
|
|
+
|
|
|
+```css
|
|
|
+/* 替换 .brand-mission 相关样式 (line ~497-524) */
|
|
|
+.brand-mission {
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 4: 更新底部统计 + 角色标签样式**
|
|
|
+
|
|
|
+替换 `.brand-values` 部分为 `.brand-footer`:
|
|
|
+
|
|
|
+```css
|
|
|
+/* 替换 .brand-values (line ~608-647) */
|
|
|
+.brand-footer {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-num {
|
|
|
+ font-size: 22px;
|
|
|
+ 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.12);
|
|
|
+}
|
|
|
+
|
|
|
+.role-tags {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.role-tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 3px 14px;
|
|
|
+ font-size: 11px;
|
|
|
+ border: 1px solid;
|
|
|
+ border-radius: 20px;
|
|
|
+ opacity: 0.5;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.role-tag:hover {
|
|
|
+ opacity: 0.9;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 2: 替换模板中的五维沙盘为能量轮盘
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Modify: `cfc-web/src/views/Login.vue:1-293`
|
|
|
+
|
|
|
+- [ ] **Step 1: 替换 brand-panel 的 template 内容**
|
|
|
+
|
|
|
+把 template 中的 `.brand-panel` 内部（lines 4-219）全部替换为：
|
|
|
+
|
|
|
+```html
|
|
|
+<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="orbit-section">
|
|
|
+ <div class="orbit-container">
|
|
|
+ <!-- 中心"家"徽章 -->
|
|
|
+ <div class="orbit-center-node">
|
|
|
+ <span class="center-text">家</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 轨道装饰环 -->
|
|
|
+ <svg class="orbit-ring-svg" viewBox="0 0 340 340" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <circle cx="170" cy="170" r="148" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
|
|
|
+ <circle cx="170" cy="170" r="144" fill="none" stroke="rgba(255,215,0,0.08)" stroke-width="0.5" stroke-dasharray="2,4" class="orbital-dash" />
|
|
|
+
|
|
|
+ <!-- 相生弧线 (身→智→富→行→心→身) -->
|
|
|
+ <defs>
|
|
|
+ <marker id="orbitArrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
|
+ <polygon points="0,0 10,3.5 0,7" fill="#FFD700" opacity="0.6"/>
|
|
|
+ </marker>
|
|
|
+ </defs>
|
|
|
+
|
|
|
+ <!-- 五边形弧线连接 -->
|
|
|
+ <path d="M 170,26 A 144,144 0 0,1 293,95" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.35" class="arc-gen" marker-end="url(#orbitArrow)" />
|
|
|
+ <path d="M 293,95 A 144,144 0 0,1 256,293" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.35" class="arc-gen" marker-end="url(#orbitArrow)" />
|
|
|
+ <path d="M 256,293 A 144,144 0 0,1 84,293" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.35" class="arc-gen" marker-end="url(#orbitArrow)" />
|
|
|
+ <path d="M 84,293 A 144,144 0 0,1 47,95" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.35" class="arc-gen" marker-end="url(#orbitArrow)" />
|
|
|
+ <path d="M 47,95 A 144,144 0 0,1 170,26" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.35" class="arc-gen" marker-end="url(#orbitArrow)" />
|
|
|
+
|
|
|
+ <!-- 轨道粒子 -->
|
|
|
+ <circle cx="170" cy="22" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
|
|
|
+ <circle cx="297" cy="92" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
|
|
|
+ <circle cx="262" cy="298" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
|
|
|
+ <circle cx="78" cy="298" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
|
|
|
+ <circle cx="43" cy="92" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ <!-- 五维节点 (绝对定位公转) -->
|
|
|
+ <!-- 身(橙) -->
|
|
|
+ <div class="orbit-node" style="--node-color:#FF8C42; --orbit-angle:0deg; --orbit-delay:0s;">
|
|
|
+ <span class="node-icon">🌏</span>
|
|
|
+ <span class="node-label">身</span>
|
|
|
+ </div>
|
|
|
+ <!-- 智(紫) -->
|
|
|
+ <div class="orbit-node" style="--node-color:#6366F1; --orbit-angle:72deg; --orbit-delay:-3s;">
|
|
|
+ <span class="node-icon">⚔️</span>
|
|
|
+ <span class="node-label">智</span>
|
|
|
+ </div>
|
|
|
+ <!-- 富(金) -->
|
|
|
+ <div class="orbit-node" style="--node-color:#F59E0B; --orbit-angle:144deg; --orbit-delay:-6s;">
|
|
|
+ <span class="node-icon">💧</span>
|
|
|
+ <span class="node-label">富</span>
|
|
|
+ </div>
|
|
|
+ <!-- 行(绿) -->
|
|
|
+ <div class="orbit-node" style="--node-color:#10B981; --orbit-angle:216deg; --orbit-delay:-9s;">
|
|
|
+ <span class="node-icon">🌿</span>
|
|
|
+ <span class="node-label">行</span>
|
|
|
+ </div>
|
|
|
+ <!-- 心(粉) -->
|
|
|
+ <div class="orbit-node" style="--node-color:#FF6B9D; --orbit-angle:288deg; --orbit-delay:-12s;">
|
|
|
+ <span class="node-icon">🔥</span>
|
|
|
+ <span class="node-label">心</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图例 -->
|
|
|
+ <div class="orbit-legend">
|
|
|
+ <span class="legend-item">
|
|
|
+ <svg width="20" height="6" viewBox="0 0 20 6"><line x1="0" y1="3" x2="14" y2="3" stroke="#FFD700" stroke-width="1.5"/><polygon points="14,3 18,1 18,5" fill="#FFD700"/></svg>
|
|
|
+ <span>相生</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ===== 核心主张 ===== -->
|
|
|
+ <div class="brand-mission">
|
|
|
+ <h1 class="mission-title">给全家的<span class="highlight">一站式幸福提案</span></h1>
|
|
|
+ <p class="mission-desc">
|
|
|
+ AI 智慧家庭成长平台 · 五维能量驱动全家持续成长
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ===== 数据 + 角色标签 ===== -->
|
|
|
+ <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:#6366F1;color:#818CF8">家庭客户</span>
|
|
|
+ <span class="role-tag" style="border-color:#FF6B9D;color:#FF8CB3">服务商</span>
|
|
|
+ <span class="role-tag" style="border-color:#10B981;color:#34D399">平台运营</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧登录表单区 (不变) -->
|
|
|
+ ...
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 3: 添加五维能量轮盘 CSS 动画
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Modify: `cfc-web/src/views/Login.vue:526-607` (样式区域)
|
|
|
+
|
|
|
+- [ ] **Step 1: 替换 sand-table 相关样式为 orbit 样式**
|
|
|
+
|
|
|
+删除旧沙盘相关CSS（lines 527-606），替换为：
|
|
|
+
|
|
|
+```css
|
|
|
+/* ==================== 五维能量轮盘 ==================== */
|
|
|
+.orbit-section {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 0;
|
|
|
+ margin: -6px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.orbit-container {
|
|
|
+ position: relative;
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 轨道SVG装饰 */
|
|
|
+.orbit-ring-svg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ overflow: visible;
|
|
|
+}
|
|
|
+
|
|
|
+/* 虚线轨道动画 */
|
|
|
+.orbital-dash {
|
|
|
+ animation: rotateDash 20s linear infinite;
|
|
|
+ transform-origin: 170px 170px;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes rotateDash {
|
|
|
+ 0% { transform: rotate(0deg); }
|
|
|
+ 100% { transform: rotate(360deg); }
|
|
|
+}
|
|
|
+
|
|
|
+/* 相生弧线流光 */
|
|
|
+.arc-gen {
|
|
|
+ stroke-dasharray: 8 6;
|
|
|
+ animation: flowArc 1.2s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes flowArc {
|
|
|
+ 0% { stroke-dashoffset: 0; }
|
|
|
+ 100% { stroke-dashoffset: -14; }
|
|
|
+}
|
|
|
+
|
|
|
+/* 轨道粒子公转 */
|
|
|
+.orbit-particle {
|
|
|
+ animation: orbitParticle 8s linear infinite;
|
|
|
+ transform-origin: 170px 170px;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes orbitParticle {
|
|
|
+ 0% { opacity: 0; transform: rotate(0deg) translateX(148px) rotate(0deg); }
|
|
|
+ 12% { opacity: 0.6; }
|
|
|
+ 88% { opacity: 0.6; }
|
|
|
+ 100% { opacity: 0; transform: rotate(360deg) translateX(148px) rotate(-360deg); }
|
|
|
+}
|
|
|
+
|
|
|
+/* 中心节点 */
|
|
|
+.orbit-center-node {
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(135deg, #FFD700, #F59E0B);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow:
|
|
|
+ 0 0 20px rgba(245, 158, 11, 0.3),
|
|
|
+ 0 0 60px rgba(245, 158, 11, 0.1);
|
|
|
+ animation: pulseCenter 3s ease-in-out infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.center-text {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ text-shadow: 0 1px 4px rgba(0,0,0,0.15);
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes pulseCenter {
|
|
|
+ 0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), 0 0 60px rgba(245, 158, 11, 0.1); transform: scale(1); }
|
|
|
+ 50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.5), 0 0 80px rgba(245, 158, 11, 0.2); transform: scale(1.05); }
|
|
|
+}
|
|
|
+
|
|
|
+/* 五维节点公转 */
|
|
|
+.orbit-node {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: var(--node-color);
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.2);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 0 12px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.15);
|
|
|
+ animation: orbitRotate 15s linear infinite;
|
|
|
+ animation-delay: var(--orbit-delay);
|
|
|
+ left: calc(50% - 25px);
|
|
|
+ top: calc(50% - 25px);
|
|
|
+ transform-origin: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 轨道公转 */
|
|
|
+@keyframes orbitRotate {
|
|
|
+ 0% { transform: rotate(var(--orbit-angle)) translateX(125px) rotate(calc(-1 * var(--orbit-angle))); }
|
|
|
+ 100% { transform: rotate(calc(var(--orbit-angle) + 360deg)) translateX(125px) rotate(calc(-1 * var(--orbit-angle) - 360deg)); }
|
|
|
+}
|
|
|
+
|
|
|
+.node-icon {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1;
|
|
|
+ margin-bottom: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.node-label {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 1;
|
|
|
+ text-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
|
+}
|
|
|
+
|
|
|
+/* 图例 */
|
|
|
+.orbit-legend {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.legend-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ font-size: 9px;
|
|
|
+ opacity: 0.4;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.legend-item svg {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 2: 移除旧的沙盘相关 CSS**
|
|
|
+
|
|
|
+删除以下不再使用的 CSS 规则（找到并移除）：
|
|
|
+- `.sand-table-wrap` 及其所有子规则
|
|
|
+- `.brand-values` 及其所有子规则
|
|
|
+- `.value-item`, `.value-icon`, `.value-label`, `.value-arrow`, `.value-subtitle`
|
|
|
+- `.sand-table-svg` 相关动画
|
|
|
+- 删除 `@keyframes` 中不再使用的：`nodeBreathe`（保留旧名但不再引用也可删除）
|
|
|
+
|
|
|
+- [ ] **Step 3: 更新响应式 CSS 微调**
|
|
|
+
|
|
|
+在 `@media screen and (max-width: 900px)` 中，确保 `.orbit-section` 在隐藏时随 `.brand-panel` 一起隐藏（已有 `.brand-panel { display: none; }` 处理了）。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 4: 验证
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Verify: `cfc-web/src/views/Login.vue`
|
|
|
+
|
|
|
+- [ ] **Step 1: LSP 诊断检查**
|
|
|
+
|
|
|
+Run: LSP diagnostics on Login.vue
|
|
|
+Expected: 无错误，无警告
|
|
|
+
|
|
|
+- [ ] **Step 2: 编译验证**
|
|
|
+
|
|
|
+```bash
|
|
|
+cd /sc-data/cfc/cfc-web && npx vue-cli-service build --mode production 2>&1 | tail -20
|
|
|
+```
|
|
|
+
|
|
|
+Expected: Build 成功，无错误
|
|
|
+
|
|
|
+- [ ] **Step 3: 最终清理**
|
|
|
+
|
|
|
+确认已删除所有旧的沙盘 SVG 标记和不再使用的 CSS 规则。
|
|
|
+确认右侧表单区域未受影响。
|
Sisyphus