zhouhui.jiang / test_cursor

Go to a project
Toggle navigation Toggle navigation pinning
zhouhui.jiang
fb603427 1 parent 732ec79f

Add前端样式模板

Expand all
Inline Side-by-side
Showing 43 changed files with 293 additions and 0 deletions
This diff is collapsed. Click to expand it.
// 字体系统
$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设计规范制定，旨在提供一致、现代、专业的用户体验。*
This diff could not be displayed because it is too large.
<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