599 lines
10 KiB
Markdown
599 lines
10 KiB
Markdown
# 商家端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`
|