综述: 优化商家端样式规范文档结构
- 删除原有的样式设计.md文件，替换为更详细的样式规范文档.md - 新增全面的样式规范体系，包含全局样式、布局、组件、颜色、字体等完整规范 - 细化页面头部、搜索筛选区域、统计数据区域、标签页、表格等模块的样式定义 - 补充按钮、状态标签、分页组件的详细样式规范和使用指南 - 增加响应式布局、间距系统、字号规范等设计系统说明 - 提供色彩使用原则、间距使用原则和交互反馈的设计建议
This commit is contained in:
parent
12e094fafc
commit
6a24333f6f
|
|
@ -0,0 +1,598 @@
|
|||
# 商家端Web页面样式规范文档
|
||||
|
||||
## 1. 全局样式规范
|
||||
|
||||
### 1.1 基础重置
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
```
|
||||
|
||||
### 1.2 字体系统
|
||||
- **字体家族**: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif`
|
||||
- **基础文字颜色**: `#333`
|
||||
- **次要文字颜色**: `#666`
|
||||
- **标题文字颜色**: `#262626`
|
||||
|
||||
### 1.3 背景颜色
|
||||
- **页面背景**: `#f5f5f5`
|
||||
- **卡片/容器背景**: `white`
|
||||
- **次级背景**: `#fafafa`
|
||||
- **表格行悬停背景**: `#f8f9fa`
|
||||
- **嵌套区域背景**: `#f8f9fa`
|
||||
|
||||
### 1.4 主题色系
|
||||
- **主色**: `#1890ff`
|
||||
- **主色悬停**: `#40a9ff`
|
||||
- **成功色**: `#52c41a`
|
||||
- **警告色**: `#fa8c16`
|
||||
- **错误色**: `#ff4d4f`
|
||||
|
||||
## 2. 布局规范
|
||||
|
||||
### 2.1 容器布局
|
||||
```css
|
||||
.container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
### 2.2 卡片/模块间距
|
||||
- **模块底部间距**: `16px` (margin-bottom)
|
||||
- **模块内边距**: `24px` (padding)
|
||||
- **小卡片内边距**: `20px`
|
||||
|
||||
### 2.3 圆角规范
|
||||
- **大卡片圆角**: `8px`
|
||||
- **小组件圆角**: `6px`
|
||||
- **微小组件圆角**: `4px`
|
||||
|
||||
### 2.4 阴影规范
|
||||
- **标准卡片阴影**: `0 2px 8px rgba(0, 0, 0, 0.1)`
|
||||
|
||||
## 3. 页面头部样式
|
||||
|
||||
### 3.1 页面标题区域
|
||||
```css
|
||||
.page-header {
|
||||
background: white;
|
||||
padding: 16px 24px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
```
|
||||
|
||||
## 4. 搜索/筛选区域样式
|
||||
|
||||
### 4.1 搜索区域容器
|
||||
```css
|
||||
.search-section {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 表单布局
|
||||
```css
|
||||
.search-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
```
|
||||
|
||||
### 4.3 表单元素样式
|
||||
```css
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
```
|
||||
|
||||
### 4.4 日期范围选择器
|
||||
```css
|
||||
.date-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-range .form-input {
|
||||
flex: 1;
|
||||
}
|
||||
```
|
||||
|
||||
## 5. 按钮样式规范
|
||||
|
||||
### 5.1 按钮基础样式
|
||||
```css
|
||||
.btn {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.2 主要按钮
|
||||
```css
|
||||
.btn-primary {
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #40a9ff;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.3 次要按钮
|
||||
```css
|
||||
.btn-default {
|
||||
background: white;
|
||||
color: #666;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.btn-default:hover {
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.4 按钮组
|
||||
```css
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
## 6. 统计数据区域样式
|
||||
|
||||
### 6.1 统计区域容器
|
||||
```css
|
||||
.stats-section {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
### 6.2 统计网格布局
|
||||
```css
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
### 6.3 统计卡片样式
|
||||
```css
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
}
|
||||
```
|
||||
|
||||
## 7. 标签页(Tabs)样式
|
||||
|
||||
### 7.1 标签页容器
|
||||
```css
|
||||
.tabs-section {
|
||||
background: white;
|
||||
padding: 0 24px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
### 7.2 标签页样式
|
||||
```css
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 16px 20px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #1890ff;
|
||||
border-bottom-color: #1890ff;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
```
|
||||
|
||||
## 8. 表格样式规范
|
||||
|
||||
### 8.1 表格容器
|
||||
```css
|
||||
.table-section {
|
||||
background: white;
|
||||
border-radius: 0 0 8px 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
```
|
||||
|
||||
### 8.2 主表格样式
|
||||
```css
|
||||
.order-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.order-table th {
|
||||
background: #fafafa;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f9f9f9;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.order-table tbody tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
```
|
||||
|
||||
### 8.3 嵌套表格样式
|
||||
```css
|
||||
.nested-table-wrapper {
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.sub-table {
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sub-table th,
|
||||
.sub-table td {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #f9f9f9;
|
||||
}
|
||||
|
||||
.sub-table th {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
```
|
||||
|
||||
### 8.4 展开行样式
|
||||
```css
|
||||
.expandable-row {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
```
|
||||
|
||||
### 8.5 商品图片样式
|
||||
```css
|
||||
.product-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
```
|
||||
|
||||
## 9. 状态标签样式
|
||||
|
||||
### 9.1 状态标签基础样式
|
||||
```css
|
||||
.status-tag {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
```
|
||||
|
||||
### 9.2 状态颜色变体
|
||||
```css
|
||||
/* 已支付/已完成 - 绿色 */
|
||||
.status-paid,
|
||||
.status-completed {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
/* 待处理 - 橙色 */
|
||||
.status-pending {
|
||||
background: #fff7e6;
|
||||
color: #fa8c16;
|
||||
border: 1px solid #ffd591;
|
||||
}
|
||||
|
||||
/* 取消 - 红色 */
|
||||
.status-cancelled {
|
||||
background: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border: 1px solid #ffb3b3;
|
||||
}
|
||||
```
|
||||
|
||||
## 10. 分页组件样式
|
||||
|
||||
### 10.1 分页容器
|
||||
```css
|
||||
.pagination {
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: white;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
```
|
||||
|
||||
### 10.2 分页信息
|
||||
```css
|
||||
.pagination-info {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
```
|
||||
|
||||
### 10.3 分页控制区域
|
||||
```css
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
### 10.4 每页条数选择器
|
||||
```css
|
||||
.page-size-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-size-select {
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
```
|
||||
|
||||
### 10.5 页码列表
|
||||
```css
|
||||
.page-list {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.page-item:hover {
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.page-item.active {
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.page-item.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
```
|
||||
|
||||
### 10.6 页码跳转
|
||||
```css
|
||||
.page-jump {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.page-jump input {
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
```
|
||||
|
||||
## 11. 边框和分隔线
|
||||
|
||||
### 11.1 边框颜色规范
|
||||
- **浅灰边框**: `#f0f0f0`
|
||||
- **中灰边框**: `#ddd`
|
||||
- **极浅边框**: `#f9f9f9`
|
||||
|
||||
### 11.2 常用边框样式
|
||||
```css
|
||||
border: 1px solid #f0f0f0; /* 主要边框 */
|
||||
border: 1px solid #ddd; /* 输入框边框 */
|
||||
border-bottom: 1px solid #f0f0f0; /* 分隔线 */
|
||||
```
|
||||
|
||||
## 12. 过渡动画
|
||||
|
||||
### 12.1 标准过渡
|
||||
```css
|
||||
transition: all 0.3s;
|
||||
```
|
||||
|
||||
### 12.2 应用场景
|
||||
- 按钮悬停效果
|
||||
- 标签页切换
|
||||
- 页码项交互
|
||||
- 边框颜色变化
|
||||
|
||||
## 13. 响应式布局
|
||||
|
||||
### 13.1 栅格系统
|
||||
- 使用 `grid-template-columns: repeat(auto-fit, minmax(Xpx, 1fr))` 实现自适应布局
|
||||
- 搜索表单最小宽度: `250px`
|
||||
- 统计卡片最小宽度: `200px`
|
||||
|
||||
### 13.2 间距系统
|
||||
- **超小间距**: `4px`
|
||||
- **小间距**: `8px`
|
||||
- **中等间距**: `12px` / `16px`
|
||||
- **大间距**: `20px` / `24px`
|
||||
|
||||
## 14. 字号规范
|
||||
|
||||
- **大标题**: `24px` (font-weight: 600)
|
||||
- **统计数值**: `24px` (font-weight: 600)
|
||||
- **正文/表单**: `14px`
|
||||
- **子表格**: `12px`
|
||||
- **标签**: `12px`
|
||||
|
||||
## 15. 使用建议
|
||||
|
||||
### 15.1 页面结构顺序
|
||||
1. 页面标题区域 (page-header)
|
||||
2. 搜索/筛选区域 (search-section)
|
||||
3. 统计数据区域 (stats-section) - 可选
|
||||
4. 标签页区域 (tabs-section) - 可选
|
||||
5. 表格区域 (table-section)
|
||||
6. 分页区域 (pagination)
|
||||
|
||||
### 15.2 色彩使用原则
|
||||
- 主色 `#1890ff` 用于主要操作按钮、激活状态、链接
|
||||
- 成功色 `#52c41a` 用于完成/成功状态
|
||||
- 警告色 `#fa8c16` 用于待处理状态
|
||||
- 错误色 `#ff4d4f` 用于取消/错误状态
|
||||
- 保持页面色彩统一,避免过多颜色
|
||||
|
||||
### 15.3 间距使用原则
|
||||
- 模块间使用 `16px` 间距
|
||||
- 模块内使用 `24px` 内边距
|
||||
- 表单元素间使用 `16px` 间距
|
||||
- 小组件间使用 `8px` 或 `12px` 间距
|
||||
|
||||
### 15.4 交互反馈
|
||||
- 所有可点击元素添加 `cursor: pointer`
|
||||
- 悬停状态使用颜色或背景色变化
|
||||
- 焦点状态显示蓝色边框和阴影
|
||||
- 禁用状态降低透明度至 `0.5`
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
# 样式设计提示词
|
||||
|
||||
## 整体设计风格
|
||||
创建一个现代化的企业级管理系统界面，采用简洁清晰的设计风格，注重用户体验和视觉层次。
|
||||
|
||||
## 颜色方案
|
||||
|
||||
### 主色调
|
||||
- **头部背景色**: `rgb(9, 84, 43)` - 深绿色，体现专业稳重
|
||||
- **页面背景色**: `#f5f5f5` - 浅灰色，减少视觉疲劳
|
||||
|
||||
### 功能色彩
|
||||
- **主要操作色**: `#1890ff` - 蓝色系
|
||||
- 悬停状态: `#40a9ff`
|
||||
- 选中状态: `#e6f7ff`（背景）
|
||||
- **成功色**: `#52c41a` - 绿色
|
||||
- 悬停状态: `#73d13d`
|
||||
- **警告色**: `#faad14` - 橙黄色
|
||||
- 悬停状态: `#ffc53d`
|
||||
|
||||
### 辅助色彩
|
||||
- **表单背景**: `#fafafa` - 极浅灰
|
||||
- **边框色**: `#d9d9d9`、`#e8e8e8`
|
||||
- **文本色**: `#333` - 深灰色
|
||||
- **白色**: `#fff` - 纯白色用于卡片背景
|
||||
|
||||
## 布局特点
|
||||
|
||||
### 页面结构
|
||||
- 全屏布局：`width: 100%`, `height: 100vh`
|
||||
- 顶部固定头部区域
|
||||
- 主内容区域可滚动：`overflow-y: auto`
|
||||
|
||||
### 间距系统
|
||||
- 大间距: `30px` (页面边距、区块间距)
|
||||
- 中间距: `20px` (表单元素间距)
|
||||
- 小间距: `10px`、`5px` (按钮、图标间距)
|
||||
|
||||
## 组件设计
|
||||
|
||||
### 按钮样式
|
||||
```css
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
```
|
||||
|
||||
### 表单元素
|
||||
- **输入框**: 圆角 `4px`，边框 `#d9d9d9`
|
||||
- **聚焦效果**: 蓝色边框 + 阴影效果
|
||||
- **标签**: 字重 `500`，深灰色 `#333`
|
||||
|
||||
## 交互效果
|
||||
|
||||
### 动画过渡
|
||||
- **通用过渡**: `transition: all 0.3s ease`
|
||||
- **按钮悬停**: 向上移动 `translateY(-2px)`
|
||||
- **展开动画**: 淡入效果 `fadeIn 0.3s ease-in-out`
|
||||
|
||||
### 视觉反馈
|
||||
- **悬停状态**: 颜色变化 + 轻微位移
|
||||
- **选中状态**: 背景色变化 + 边框高亮
|
||||
- **加载状态**: 渐变动画效果
|
||||
|
||||
## 响应式设计
|
||||
- **移动端适配**: `@media (max-width: 768px)`
|
||||
- **布局调整**: 头部垂直排列，表单单列布局
|
||||
- **间距优化**: 减少边距和字体大小
|
||||
|
||||
## 字体系统
|
||||
```css
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", 微软雅黑,
|
||||
Arial, sans-serif;
|
||||
```
|
||||
|
||||
## 设计原则
|
||||
1. **一致性**: 统一的颜色、字体、间距系统
|
||||
2. **层次性**: 清晰的信息层级和视觉引导
|
||||
3. **易用性**: 直观的操作反馈和状态提示
|
||||
4. **专业性**: 企业级应用的稳重可靠感
|
||||
5. **响应性**: 适配不同设备和屏幕尺寸
|
||||
|
||||
## 关键特色
|
||||
- 深绿色头部体现企业稳重感
|
||||
- 蓝色系交互元素提供现代感
|
||||
- 细腻的阴影和过渡效果
|
||||
Loading…
Reference in New Issue