# 登录页左侧品牌区重新设计 **日期：** 2026-07-02 **状态：** 设计已确认 ## 概述 重新设计 cfc-web 管理端登录页（Login.vue）的左侧品牌展示区。以「五维能量轮盘」为核心视觉元素，采用五维品牌色系，替换当前的五行沙盘 SVG。 ## 设计方向 - **参考来源：** `web/` 企业官网的视觉语言（dimension-orbit 动画、卡片化风格、色彩运用） - **色彩体系：** 五维品牌色（身橙/智紫/富金/行绿/心粉） - **整体风格：** 热忱现代，品牌感强，动画流畅 ## 布局结构 ``` ┌──────────────────────────────────┐ │ 品牌 Logo + 标题 │ 顶部固定 ├──────────────────────────────────┤ │ │ │ 五维能量轮盘 (主视觉元素) │ 弹性居中 │ - 中心: "家" 金色徽章 │ max 300×300px │ - 五维节点公转 (72°等分) │ │ - 相生连接线 + 流光动画 │ │ │ ├──────────────────────────────────┤ │ "给全家的 一站式幸福提案" │ 品牌主张 │ "AI 智慧家庭成长平台..." │ ├──────────────────────────────────┤ │ 统计: 120,000+ / 1,000+ / 5 │ 底部信息 │ 角色标签: 家庭客户/服务商/平台运营 │ └──────────────────────────────────┘ ``` ## 配色方案 ### 背景渐变 ``` #1A0F00 (#top) ↓ 径向光晕 + 极淡暖金粒子 #2D1810 (#mid) ↓ #3D2B1F (#bottom) ``` ### 五维色系 | 维度 | 颜色 | HEX | 用途 | |:----:|:----:|:----:|------| | 身(土) | 橙 | `#FF8C42` | 节点1 + 标签边框 | | 智(金) | 紫 | `#6366F1` | 节点2 + 标签边框 | | 富(水) | 金 | `#F59E0B` | 节点3 + 标签边框 | | 行(木) | 绿 | `#10B981` | 节点4 + 标签边框 | | 心(火) | 粉 | `#FF6B9D` | 节点5 + 标签边框 | ### 文字色 | 用途 | 样式 | |------|------| | 品牌名(中文) | 金色渐变 `#FFE066 → #F59E0B` | | 品牌名(英文) | 白色 opacity 0.5 | | 核心标题 | 金色渐变 `#FFE066 → #F59E0B` | | 副标题 | 白色 opacity 0.55 | | 统计数字 | 金色渐变 | | 统计标签 | 白色 opacity 0.5 | | 角色标签 | 对应维度色，opacity 0.5 | ## 组件结构 ### 1. 品牌头部（brand-header） ``` [logo.png] 亿图腾·浠艾福 Care Family ``` - 与当前布局一致，微调字距 - `margin-bottom: 12px` ### 2. 五维能量轮盘（dimension-orbit-section） 容器：`300×300px`，`position: relative`，`margin: 0 auto` #### 中心节点（center-node） - 72×72px 正圆 - 背景：`linear-gradient(135deg, #FFD700, #F59E0B)` - 文字："家" 白色 24px 700 - 动画：`pulseCenter` 3s ease-in-out infinite #### 轨道节点（orbit-nodes） 5 个节点通过 CSS `transform: rotate(Ndeg) translateX(Rpx)` 实现公转： | 节点 | 初始角度 | 颜色 | 内容 | |:----:|:--------:|:----:|:----:| | 身 | 0° | `#FF8C42` | 🌏 + 身 | | 智 | 72° | `#6366F1` | ⚔️ + 智 | | 富 | 144° | `#F59E0B` | 💧 + 富 | | 行 | 216° | `#10B981` | 🌿 + 行 | | 心 | 288° | `#FF6B9D` | 🔥 + 心 | - 节点尺寸：52×52px 正圆 - 边框：2px solid color，微弱内阴影 - 文字颜色：白色 - 动画：`orbit 15s linear infinite` - 通过 `animation-delay` 错开 5 个节点的起始相位（每个延迟 0s, 3s, 6s, 9s, 12s） #### 轨道 && 连接线 - 外层装饰轨道：半径 130px，细线 `stroke: rgba(255,255,255,0.06)`，虚线点缀 - 相生弧线：连接相邻维度节点，组成五边形 - 使用 SVG `` 绘制弧线 - 颜色：`#FFD700` 透明度 0.6 - 动画：流光效果 `flowArc 1.2s linear infinite` - 相克线（简化）：用较淡的细虚线从中心向外辐射，或省略 - 图例：底部中央显示"相生" + "相克" 的小图例 #### 粒子装饰 - 5 颗微小粒子沿轨道外缘缓慢公转 - 尺寸 2px，金色 - 动画：`orbitParticle 8s linear infinite` ### 3. 品牌主张（brand-mission） ``` h1: 给全家的 <金色高亮>一站式幸福提案 p: AI 智慧家庭成长平台 · 五维能量驱动全家持续成长 ``` - 标题 20px 700 - 描述 13px 300 ### 4. 底部信息（brand-footer） #### 统计行 ``` 120,000+ | 1,000+ | 5 家庭信赖 | 专业人员 | 幸福维度 ``` - 数字 22px 700 金色渐变 - 标签 10px opacity 0.5 - 竖线分隔 1px 白色 opacity 0.1, 高 28px #### 角色标签 ``` [家庭客户] [服务商] [平台运营] ``` - 圆角 20px，字号 11px - 边框色 + 文字色分别对应五维色系中最接近的三种颜色 - 家庭客户 → 智(紫) `#6366F1` - 服务商 → 心(粉) `#FF6B9D` - 平台运营 → 行(绿) `#10B981` ## 动画清单 | 动画 | 目标 | 周期 | 说明 | |------|------|:----:|------| | `pulseCenter` | 中心"家"节点 | 3s | 呼吸缩放 + 发光强弱变化 | | `nodeOrbit` | 五维节点 | 15s | 围绕中心公转（匀速） | | `flowArc` | 相生弧线 | 1.2s | 虚线偏移产生流动感 | | `pulseLine` | 相克线 | 2.2s | 透明度脉冲 | | `orbitParticle` | 轨道粒子 | 8s | 沿轨道公转 | | `nodeBreathe` | 节点自身 | 3.2s | 节点呼吸放大效果 | ## 响应式 | 断点 | 行为 | |:----:|------| | >900px | 完整双栏布局，左侧 55% | | ≤900px | 隐藏左侧品牌区，表单全屏（与当前一致） | ## 重用说明 此设计仅修改 `Login.vue` 中的 `.brand-panel` 相关模板和样式。 - 不修改右侧 `.form-panel` 区域 - 不修改 Script 部分 - 不修改组件结构（SliderCaptcha 等） ## 修改文件 - `cfc-web/src/views/Login.vue` — 模板（