2026-07-02-login-left-panel-redesign.md 6.0 KB
登录页左侧品牌区重新设计
日期： 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
- 动画：
pulseCenter3s 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
<path>绘制弧线 - 颜色：
#FFD700透明度 0.6 - 动画：流光效果
flowArc 1.2s linear infinite
- 使用 SVG
- 相克线（简化）：用较淡的细虚线从中心向外辐射，或省略
- 图例：底部中央显示"相生" + "相克" 的小图例
粒子装饰
- 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— 模板（ 中左侧 brand-panel 区域）+ 样式（