Add前端样式模板

+// 字体系统
+$font-family-primary: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+// 文字层级系统
+.text-h1 {
+  font-family: $font-family-primary;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 40px;
+  letter-spacing: 0;
+  color: var(--el-text-color-primary);
+}
+
+.text-h2 {
+  font-family: $font-family-primary;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 32px;
+  letter-spacing: 0;
+  color: var(--el-text-color-primary);
+}
+
+.text-h3 {
+  font-family: $font-family-primary;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 28px;
+  letter-spacing: 0;
+  color: var(--el-text-color-primary);
+}
+
+.text-h4 {
+  font-family: $font-family-primary;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0;
+  color: var(--el-text-color-primary);
+}
+
+.text-body {
+  font-family: $font-family-primary;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: 0;
+  color: var(--el-text-color-primary);
+}
+
+.text-caption {
+  font-family: $font-family-primary;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0;
+  color: var(--el-text-color-regular);
+}
+
+.text-small {
+  font-family: $font-family-primary;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0;
+  color: var(--el-text-color-secondary);
+}
+
+// 文字工具类
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.text-bold { font-weight: 600; }
+.text-medium { font-weight: 500; }
+.text-normal { font-weight: 400; }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-ellipsis-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.text-ellipsis-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// 全局文字样式重置
+* {
+  font-family: $font-family-primary;
+}
+
+// 标题样式
+h1, .h1 {
+  @extend .text-h1;
+}
+
+h2, .h2 {
+  @extend .text-h2;
+}
+
+h3, .h3 {
+  @extend .text-h3;
+}
+
+h4, .h4 {
+  @extend .text-h4;
+}
+
+// 段落和文本样式
+p, .p {
+  @extend .text-body;
+  margin: 0 0 16px 0;
+}
+
+// 小文本样式
+small, .small {
+  @extend .text-caption;
+}
+
+// 标签样式
+label, .label {
+  @extend .text-caption;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 6px;
+}
+
+// 按钮文字样式
+button, .btn {
+  font-family: $font-family-primary;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+// 输入框文字样式
+input, textarea, select {
+  font-family: $font-family-primary;
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0;
+}
+
+// 表格文字样式
+table {
+  font-family: $font-family-primary;
+  
+  th {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 18px;
+    letter-spacing: 0;
+  }
+  
+  td {
+    font-size: 12px;
+    line-height: 18px;
+    letter-spacing: 0;
+  }
+}

+# GCCPOP设计规范 0228
+
+## 📋 项目概述
+
+本目录包含基于GCCPOP设计规范的前端样式规范对齐详细修改计划，旨在将前端项目在8个基础规范维度与设计模板对齐。
+
+## 📁 目录结构
+
+```
+GCCPOP设计规范 0228/
+├── README.md                                    # 项目说明文档
+├── 前端样式规范对齐详细修改计划.md                # 详细修改计划
+├── html/
+│   └── 0 打开这个.html                          # 设计规范模板文件
+└── 实施指南/
+    ├── 01-基础规范颜色/
+    ├── 02-基础规范文字/
+    ├── 03-基础规范栅格/
+    ├── 04-基础规范导航/
+    ├── 05-基础规范图标/
+    ├── 06-基础规范控件/
+    ├── 07-基础规范框/
+    └── 08-基础规范弹窗/
+```
+
+## 🎯 8个基础规范维度
+
+1. **基础规范颜色**（色值、配色方案、应用场景）
+2. **基础规范文字**（字体、字号、行高、字重、文本样式）
+3. **基础规范栅格**（栅格系统参数、布局规则、响应式断点）
+4. **基础规范导航**（导航结构、交互样式、层级关系）
+5. **基础规范图标**（图标库、尺寸规范、风格统一、交互状态）
+6. **基础规范控件**（按钮、输入框、选择器等组件样式及交互）
+7. **基础规范框**（卡片、面板等容器组件的样式规范）
+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周末：项目交付
+
+## 📋 验收标准
+
+1. **颜色系统**：所有颜色值与应用场景符合设计规范
+2. **文字系统**：字体、字号、行高、字重完全对齐
+3. **栅格系统**：响应式布局在不同设备上表现一致
+4. **导航系统**：交互样式和层级关系符合规范
+5. **图标系统**：尺寸规范和风格统一
+6. **控件系统**：按钮、输入框等组件样式及交互一致
+7. **框系统**：卡片、面板等容器组件样式规范
+8. **弹窗系统**：弹窗尺寸、层级、动画、交互逻辑符合规范
+
+## 🔧 使用指南
+
+1. **查看详细计划**：阅读 `前端样式规范对齐详细修改计划.md` 了解完整的实施细节
+2. **参考设计模板**：查看 `html/0 打开这个.html` 了解原始设计规范
+3. **按阶段实施**：按照实施计划逐步完成各个阶段的开发工作
+4. **质量检查**：每个阶段结束后进行代码审查和设计规范符合度检查
+
+## 📞 联系方式
+
+如有疑问或需要技术支持，请联系项目团队。
+
+---
+
+*本规范基于GCCPOP设计规范制定，旨在提供一致、现代、专业的用户体验。*

+<meta http-equiv="refresh" content="0;url=../index.html#3">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#8">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#7">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#5">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#6">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#4">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#2">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#1">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#0">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=index.html#p">
\ No newline at end of file