# 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
浠艾福
亿图腾·浠艾福 Care Family
家
🌏 身
⚔️ 智
💧 富
🌿 行
🔥 心
相生

给全家的一站式幸福提案

AI 智慧家庭成长平台 · 五维能量驱动全家持续成长

120,000+ 家庭信赖
1,000+ 专业人员
5 幸福维度
家庭客户 服务商 平台运营
... ``` --- ### 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 规则。 确认右侧表单区域未受影响。