GCCPOP设计规范 0228
📋 项目概述
本目录包含基于GCCPOP设计规范的前端样式规范对齐详细修改计划，旨在将前端项目在8个基础规范维度与设计模板对齐。
📁 目录结构
GCCPOP设计规范 0228/
├── README.md # 项目说明文档
├── 前端样式规范对齐详细修改计划.md # 详细修改计划
├── html/
│ └── 0 打开这个.html # 设计规范模板文件
└── 实施指南/
├── 01-基础规范颜色/
├── 02-基础规范文字/
├── 03-基础规范栅格/
├── 04-基础规范导航/
├── 05-基础规范图标/
├── 06-基础规范控件/
├── 07-基础规范框/
└── 08-基础规范弹窗/
🎯 8个基础规范维度
- 基础规范颜色（色值、配色方案、应用场景）
- 基础规范文字（字体、字号、行高、字重、文本样式）
- 基础规范栅格（栅格系统参数、布局规则、响应式断点）
- 基础规范导航（导航结构、交互样式、层级关系）
- 基础规范图标（图标库、尺寸规范、风格统一、交互状态）
- 基础规范控件（按钮、输入框、选择器等组件样式及交互）
- 基础规范框（卡片、面板等容器组件的样式规范）
- 基础规范弹窗（弹窗尺寸、层级、动画、交互逻辑）
🎨 核心设计规范
颜色系统
-
主色调：
#141F33(RGB: 20, 31, 51) -
功能色： 成功
#52C41A、警告#FAAD14、危险#FF4D4F、信息#13C2C2
字体系统
- 字体族： PingFang SC
- 主标题： 24px, 600, 40px行高
- 正文： 14px, 400, 22px行高
布局系统
- 圆角： 6px (基础), 8px (容器), 12px (弹窗)
- 间距： 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px
- 阴影： 基于主色调的 rgba 阴影系统
📊 实施计划
第一阶段（第1-2周）：基础系统搭建
- 创建颜色变量系统
- 建立文字层级规范
- 实现栅格系统
第二阶段（第3-4周）：组件系统
- 导航系统重构
- 图标系统建立
- 控件系统完善
第三阶段（第5-6周）：容器和弹窗
- 框系统实现
- 弹窗系统建立
- Element Plus主题定制
第四阶段（第7-8周）：页面应用
- 订单管理页面应用
- 出库管理页面应用
- 发票管理页面应用
- 其他业务页面应用
第五阶段（第9-10周）：优化和测试
- 响应式适配
- 交互优化
- 性能优化
- 全面测试
🎯 关键里程碑
- 第2周末：基础系统完成
- 第4周末：组件系统完成
- 第6周末：容器弹窗系统完成
- 第8周末：页面应用完成
- 第10周末：项目交付
📋 验收标准
- 颜色系统：所有颜色值与应用场景符合设计规范
- 文字系统：字体、字号、行高、字重完全对齐
- 栅格系统：响应式布局在不同设备上表现一致
- 导航系统：交互样式和层级关系符合规范
- 图标系统：尺寸规范和风格统一
- 控件系统：按钮、输入框等组件样式及交互一致
- 框系统：卡片、面板等容器组件样式规范
- 弹窗系统：弹窗尺寸、层级、动画、交互逻辑符合规范
🔧 使用指南
-
查看详细计划：阅读
前端样式规范对齐详细修改计划.md了解完整的实施细节 -
参考设计模板：查看
html/0 打开这个.html了解原始设计规范 - 按阶段实施：按照实施计划逐步完成各个阶段的开发工作
- 质量检查：每个阶段结束后进行代码审查和设计规范符合度检查
📞 联系方式
如有疑问或需要技术支持，请联系项目团队。
本规范基于GCCPOP设计规范制定，旨在提供一致、现代、专业的用户体验。