linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dm-design/商家端web/样式规范文档.md

10 KiB
Raw Blame History

商家端Web页面样式规范文档

1. 全局样式规范

1.1 基础重置

* {
    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 容器布局

.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 页面标题区域

.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 搜索区域容器

.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 表单布局

.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 表单元素样式

.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 日期范围选择器

.date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-range .form-input {
    flex: 1;
}

5. 按钮样式规范

5.1 按钮基础样式

.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 主要按钮

.btn-primary {
    background: #1890ff;
    color: white;
}

.btn-primary:hover {
    background: #40a9ff;
}

5.3 次要按钮

.btn-default {
    background: white;
    color: #666;
    border: 1px solid #ddd;
}

.btn-default:hover {
    border-color: #1890ff;
    color: #1890ff;
}

5.4 按钮组

.button-group {
    display: flex;
    gap: 12px;
}

6. 统计数据区域样式

6.1 统计区域容器

.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 统计网格布局

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

6.3 统计卡片样式

.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 标签页容器

.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 标签页样式

.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 表格容器

.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 主表格样式

.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 嵌套表格样式

.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 展开行样式

.expandable-row {
    background: #f8f9fa;
}

.expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.expand-btn:hover {
    background: #e6f7ff;
}

8.5 商品图片样式

.product-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}

9. 状态标签样式

9.1 状态标签基础样式

.status-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

9.2 状态颜色变体

/* 已支付/已完成 - 绿色 */
.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 分页容器

.pagination {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-top: 1px solid #f0f0f0;
}

10.2 分页信息

.pagination-info {
    color: #666;
    font-size: 14px;
}

10.3 分页控制区域

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

10.4 每页条数选择器

.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 页码列表

.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 页码跳转

.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 常用边框样式

border: 1px solid #f0f0f0;  /* 主要边框 */
border: 1px solid #ddd;     /* 输入框边框 */
border-bottom: 1px solid #f0f0f0;  /* 分隔线 */

12. 过渡动画

12.1 标准过渡

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