forked from liweijie/education
样式统一
This commit is contained in:
@@ -0,0 +1,326 @@
|
||||
// ============================================================
|
||||
// 全局设计系统（Design System）
|
||||
// 收敛 Element 基元 + 统一页面结构基线 + 工具类
|
||||
// 依赖 design-tokens.scss 中的 $token 与 --token
|
||||
//
|
||||
// 用途：业务页面优先复用以下区块/工具类，删除各自 scoped 中重复定义，
|
||||
// 实现全站风格、排版、按钮统一。仅需在 index.scss 末尾引入一次。
|
||||
// ============================================================
|
||||
|
||||
// ------------------------- 1. Element 基元收敛 -------------------------
|
||||
|
||||
// 1.1 按钮——统一主色、尺寸、圆角、hover/active 反馈与外光晕
|
||||
.el-button {
|
||||
--el-button-primary-text: #fff;
|
||||
border-radius: var(--token-radius-md, 4px);
|
||||
transition: background-color 0.2s, border-color 0.2s, color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
|
||||
// 主按钮统一教育绿
|
||||
&.el-button--primary {
|
||||
background-color: var(--token-color-primary, #00875a);
|
||||
border-color: var(--token-color-primary, #00875a);
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--token-color-primary-hover, #0b9e6c);
|
||||
border-color: var(--token-color-primary-hover, #0b9e6c);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--token-color-primary-active, #006b47);
|
||||
border-color: var(--token-color-primary-active, #006b47);
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
color: var(--token-color-primary, #00875a);
|
||||
background-color: var(--token-color-primary-lighter, #f0f9f4);
|
||||
border-color: var(--token-color-primary, #00875a);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background-color: var(--token-color-primary, #00875a);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background-color: #a0cfb8;
|
||||
border-color: #a0cfb8;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
// 危险按钮
|
||||
&.el-button--danger {
|
||||
background-color: var(--token-color-danger, #ff4949);
|
||||
border-color: var(--token-color-danger, #ff4949);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #ff6b6b;
|
||||
border-color: #ff6b6b;
|
||||
}
|
||||
}
|
||||
|
||||
// 聚焦外光晕（键盘可访问性），除 text 按钮外
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--token-color-primary-ring, rgba(0, 135, 90, 0.35));
|
||||
}
|
||||
|
||||
// 表格内文字操作按钮保持紧凑
|
||||
&.el-button--text {
|
||||
font-size: var(--token-font-size-sm, 13px);
|
||||
padding: 0 4px;
|
||||
|
||||
&.danger-link {
|
||||
color: var(--token-color-danger, #ff4949);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 1.2 卡片——统一无内阴影、body 内边距
|
||||
.el-card {
|
||||
border-color: var(--token-color-border-lighter, #ebeef5);
|
||||
&.is-always-shadow {
|
||||
box-shadow: var(--token-shadow-card, 0 1px 4px rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
}
|
||||
|
||||
// 1.3 表格——统一表头背景与居中、行 hover、斑马
|
||||
.el-table {
|
||||
th.el-table__cell {
|
||||
background-color: var(--token-color-fill, #f5f7fa);
|
||||
color: var(--token-color-text-main, #303133);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
th.el-table__cell > .cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-table__body tr.hover-row > td.el-table__cell,
|
||||
.el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: var(--token-color-primary-lighter, #f0f9f4);
|
||||
}
|
||||
|
||||
&.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: var(--token-color-fill-light, #f0f2f5);
|
||||
}
|
||||
}
|
||||
|
||||
// 1.4 表单——统一 label 对齐与错误/必填语义
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
.el-form-item__label {
|
||||
color: var(--token-color-text-regular, #606266);
|
||||
}
|
||||
.el-form-item__error {
|
||||
color: var(--token-color-danger, #ff4949);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 1.5 分页——统一置于底部右侧
|
||||
.el-pagination {
|
||||
color: var(--token-color-text-regular, #606266);
|
||||
&.pagination-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------- 2. 页面结构基线 -------------------------
|
||||
// 说明：这些类名与历史业务页 scoped 中的自定义类名保持同名，
|
||||
// 统一后应删除页面内的 scoped 重复定义，避免覆盖。
|
||||
|
||||
// 2.1 基础页面容器
|
||||
.page-shell {
|
||||
padding: var(--token-space-xl, 20px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 2.2 页面标题
|
||||
.page-title {
|
||||
font-size: var(--token-font-size-xl, 20px);
|
||||
font-weight: 600;
|
||||
color: var(--token-color-text-main, #303133);
|
||||
margin-bottom: var(--token-space-lg, 16px);
|
||||
}
|
||||
|
||||
// 2.3 区块/卡片容器——统一白底 + 圆角 + 轻阴影 + 内边距
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: var(--token-radius-xl, 8px);
|
||||
box-shadow: var(--token-shadow-light, 0 1px 4px rgba(0, 0, 0, 0.08));
|
||||
padding: var(--token-space-lg, 16px) var(--token-space-xl, 20px);
|
||||
margin-bottom: var(--token-space-lg, 16px);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 兼容：el-card 封装的查询/表格卡
|
||||
.search-card.el-card,
|
||||
.table-card.el-card {
|
||||
border-radius: var(--token-radius-xl, 8px);
|
||||
}
|
||||
.search-card,
|
||||
.table-card {
|
||||
margin-bottom: var(--token-space-lg, 16px);
|
||||
}
|
||||
|
||||
.search-card {
|
||||
.search-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部操作区（右侧对齐）
|
||||
.search-actions,
|
||||
.search-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--token-space-md, 12px);
|
||||
}
|
||||
|
||||
// 仅明确标记为页脚的操作区才带轻分割线（避免误伤页面自有分割结构）
|
||||
.search-footer {
|
||||
margin-top: var(--token-space-md, 12px);
|
||||
padding-top: var(--token-space-md, 12px);
|
||||
border-top: 1px solid var(--token-color-border-lighter, #ebeef5);
|
||||
}
|
||||
}
|
||||
|
||||
.table-card {
|
||||
.pagination-wrap,
|
||||
.pagination-wrapper,
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--token-space-md, 12px);
|
||||
}
|
||||
}
|
||||
|
||||
// 2.4 查询控件——统一纵向排列的表单：标签右对齐 + 控件自适应
|
||||
.query-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--token-space-sm, 8px);
|
||||
min-height: 32px;
|
||||
|
||||
.q-label {
|
||||
width: 120px;
|
||||
flex-shrink: 0;
|
||||
font-size: var(--token-font-size-sm, 13px);
|
||||
color: var(--token-color-text-main, #303133);
|
||||
text-align: right;
|
||||
margin-right: var(--token-space-sm, 8px);
|
||||
white-space: nowrap;
|
||||
|
||||
&.no-check {
|
||||
margin-left: var(--token-space-2xl, 24px);
|
||||
}
|
||||
}
|
||||
|
||||
.q-control {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 2.5 操作/导出按钮行——统一 flex + 等比间距 + 自动换行
|
||||
.action-row,
|
||||
.export-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--token-space-md, 12px);
|
||||
}
|
||||
|
||||
.action-row + .action-row {
|
||||
margin-top: var(--token-space-md, 12px);
|
||||
}
|
||||
|
||||
// 2.6 列表工具栏——左右分组
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--token-space-md, 12px);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--token-space-lg, 16px);
|
||||
|
||||
.left-group,
|
||||
.right-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--token-space-md, 12px);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// 列表标题
|
||||
.list-title,
|
||||
.section-title {
|
||||
font-size: var(--token-font-size-lg, 16px);
|
||||
font-weight: 600;
|
||||
color: var(--token-color-text-main, #303133);
|
||||
margin-bottom: var(--token-space-md, 12px);
|
||||
}
|
||||
|
||||
// 2.7 危险文字（删除/停用等）
|
||||
.text-danger,
|
||||
.danger-text,
|
||||
.danger-link {
|
||||
color: var(--token-color-danger, #ff4949);
|
||||
}
|
||||
|
||||
// ------------------------- 3. 工具类 -------------------------
|
||||
// 字体
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-primary { color: var(--token-color-primary, #00875a); }
|
||||
.text-regular { color: var(--token-color-text-regular, #606266); }
|
||||
.text-secondary { color: var(--token-color-text-secondary, #909399); }
|
||||
|
||||
.font-sm { font-size: var(--token-font-size-sm, 13px); }
|
||||
.font-lg { font-size: var(--token-font-size-lg, 16px); }
|
||||
|
||||
// 布局
|
||||
.flex { display: flex; align-items: center; }
|
||||
.flex-center { display: flex; align-items: center; justify-content: center; }
|
||||
.flex-between { display: flex; align-items: center; justify-content: space-between; }
|
||||
.flex-end { display: flex; align-items: center; justify-content: flex-end; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-1 { flex: 1; min-width: 0; }
|
||||
.w-full { width: 100%; }
|
||||
|
||||
// 间距（上/下）
|
||||
.mt-0 { margin-top: 0; }
|
||||
.mt-xs { margin-top: var(--token-space-xs, 4px); }
|
||||
.mt-sm { margin-top: var(--token-space-sm, 8px); }
|
||||
.mt-md { margin-top: var(--token-space-md, 12px); }
|
||||
.mt-lg { margin-top: var(--token-space-lg, 16px); }
|
||||
.mt-xl { margin-top: var(--token-space-xl, 20px); }
|
||||
.mb-0 { margin-bottom: 0; }
|
||||
.mb-xs { margin-bottom: var(--token-space-xs, 4px); }
|
||||
.mb-sm { margin-bottom: var(--token-space-sm, 8px); }
|
||||
.mb-md { margin-bottom: var(--token-space-md, 12px); }
|
||||
.mb-lg { margin-bottom: var(--token-space-lg, 16px); }
|
||||
.mb-xl { margin-bottom: var(--token-space-xl, 20px); }
|
||||
|
||||
// 圆角/阴影
|
||||
.radius-sm { border-radius: var(--token-radius-sm, 2px); }
|
||||
.radius-md { border-radius: var(--token-radius-md, 4px); }
|
||||
.radius-lg { border-radius: var(--token-radius-lg, 6px); }
|
||||
.radius-xl { border-radius: var(--token-radius-xl, 8px); }
|
||||
.shadow-light { box-shadow: var(--token-shadow-light, 0 1px 4px rgba(0, 0, 0, 0.08)); }
|
||||
|
||||
// 等宽
|
||||
.mono {
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
}
|
||||
Reference in New Issue
Block a user