/* ============================================================ * 设计规范 + 组件样式库（theme.css） * 用法：在页面 引入 * 适用于：商家后台 / 运营后台 / 代理商后台 / 编辑器，统一视觉 * ============================================================ */ /* ===== 1. 设计 Token（改这里即可全局换肤）===== */ :root { /* 品牌主色 */ --brand: #185FA5; --brand-hover: #0C447C; --brand-light: #E6F1FB; /* 主色浅底 */ /* 文字色 */ --text-primary: #1a1a1a; /* 标题/正文 */ --text-secondary: #555555; /* 次要文字 */ --text-tertiary: #888888; /* 提示/占位 */ --text-inverse: #ffffff; /* 深底上的文字 */ /* 背景色 */ --bg-page: #f7f8fa; /* 页面背景 */ --bg-card: #ffffff; /* 卡片背景 */ --bg-hover: #f2f3f5; /* 悬停背景 */ /* 状态色 */ --color-success: #1D9E75; --color-warning: #BA7517; --color-danger: #E24B4A; --color-info: #378ADD; /* 边框 */ --border: #e4e6eb; --border-light: #eef0f3; /* 字体 */ --font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-size-title: 24px; /* 行高 */ --line-height: 1.6; /* 间距 */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* 圆角 */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* 覆盖 Element Plus 主题（如使用 Element Plus）*/ --el-color-primary: #185FA5; --el-border-radius-base: 8px; } /* ===== 2. 基础元素 ===== */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-family); font-size: var(--font-size-md); line-height: var(--line-height); color: var(--text-primary); background: var(--bg-page); } h1 { font-size: var(--font-size-title); font-weight: 700; margin: 0 0 var(--space-md); } h2 { font-size: var(--font-size-xl); font-weight: 600; margin: 0 0 var(--space-md); } h3 { font-size: var(--font-size-lg); font-weight: 600; margin: 0 0 var(--space-sm); } p { margin: 0 0 var(--space-sm); color: var(--text-secondary); } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); } /* ===== 3. 按钮 ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; font-size: var(--font-size-md); font-weight: 500; color: var(--text-inverse); background: var(--brand); border: none; border-radius: var(--radius-md); cursor: pointer; transition: background 0.2s; white-space: nowrap; } .btn:hover { background: var(--brand-hover); } .btn:disabled { background: var(--border); color: var(--text-tertiary); cursor: not-allowed; } /* 次级按钮（描边）*/ .btn-secondary { color: var(--brand); background: var(--bg-card); border: 1px solid var(--brand); } .btn-secondary:hover { background: var(--brand-light); } /* 文字按钮 */ .btn-text { color: var(--brand); background: transparent; padding: 6px 10px; } .btn-text:hover { background: var(--brand-light); } /* 危险按钮 */ .btn-danger { background: var(--color-danger); } .btn-danger:hover { background: #A32D2D; } /* 尺寸 */ .btn-sm { padding: 6px 14px; font-size: var(--font-size-sm); } .btn-lg { padding: 12px 28px; font-size: var(--font-size-lg); } /* ===== 4. 卡片 ===== */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); } .card-header { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--space-md); } .card-title { font-weight: 600; } /* ===== 5. 表格 ===== */ .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-light); font-size: var(--font-size-md); } .table th { font-weight: 600; color: var(--text-secondary); background: var(--bg-hover); white-space: nowrap; } .table tr:hover td { background: var(--bg-hover); } /* ===== 6. 表单 ===== */ .field { margin-bottom: var(--space-md); } .label { display: block; font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-xs); } .input, .select, .textarea { width: 100%; padding: 10px 12px; font-size: var(--font-size-md); font-family: var(--font-family); color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); outline: none; transition: border-color 0.2s; } .input:focus, .select:focus, .textarea:focus { border-color: var(--brand); } .input::placeholder { color: var(--text-tertiary); } /* ===== 7. 标签 / 状态 ===== */ .tag { display: inline-block; padding: 2px 10px; font-size: var(--font-size-xs); border-radius: 999px; line-height: 1.6; } .tag-success { background: #E1F5EE; color: #0F6E56; } .tag-warning { background: #FAEEDA; color: #854F0B; } .tag-danger { background: #FCEBEB; color: #A32D2D; } .tag-info { background: #E6F1FB; color: #185FA5; } .tag-muted { background: var(--bg-hover); color: var(--text-tertiary); } /* ===== 8. 导航 / 菜单 ===== */ .nav { display: flex; flex-direction: column; gap: var(--space-xs); } .nav-item { padding: 10px 16px; font-size: var(--font-size-md); color: var(--text-secondary); border-radius: var(--radius-md); cursor: pointer; } .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } .nav-item.active { background: var(--brand); color: var(--text-inverse); } /* ===== 9. 工具类 ===== */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-brand { color: var(--brand); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-bold { font-weight: 600; } .text-sm { font-size: var(--font-size-sm); } .text-xs { font-size: var(--font-size-xs); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } /* ===== 10. 布局 ===== */ .flex { display: flex; align-items: center; gap: var(--space-sm); } .flex-between { display: flex; align-items: center; justify-content: space-between; } .grid { display: grid; gap: var(--space-md); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 统计卡片 */ .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); } .stat-card .stat-label { font-size: var(--font-size-sm); color: var(--text-tertiary); } .stat-card .stat-value { font-size: 24px; font-weight: 600; margin-top: var(--space-xs); }