|
@@ -464,4 +464,120 @@
|
|
|
|
|
|
|
|
/* 浮动 */
|
|
/* 浮动 */
|
|
|
.pull-right { float: right; }
|
|
.pull-right { float: right; }
|
|
|
-.clearfix::after { content: ""; display: table; clear: both; }
|
|
|
|
|
|
|
+.clearfix::after { content: ""; display: table; clear: both; }
|
|
|
|
|
+
|
|
|
|
|
+/* ==== 企业级设计系统(Ant Design 5 规范,对齐 design-tokens.md) ==== */
|
|
|
|
|
+/* 作用域:.admin-page 及其后代 —— 覆盖全部 B 端管理页(admin / teacher / 顶层共享页) */
|
|
|
|
|
+/* 原则:克制、干净、留白分区、状态色仅承载语义、主色覆盖率 < 5% */
|
|
|
|
|
+
|
|
|
|
|
+:root {
|
|
|
|
|
+ --adm-primary: #1677FF;
|
|
|
|
|
+ --adm-primary-hover: #4096FF;
|
|
|
|
|
+ --adm-primary-active: #0958D9;
|
|
|
|
|
+ --adm-success: #52C41A;
|
|
|
|
|
+ --adm-success-text: #389E0D;
|
|
|
|
|
+ --adm-warning: #FAAD14;
|
|
|
|
|
+ --adm-warning-text: #D48806;
|
|
|
|
|
+ --adm-error: #FF4D4F;
|
|
|
|
|
+ --adm-error-text: #CF1322;
|
|
|
|
|
+ --adm-info: #1677FF;
|
|
|
|
|
+ --adm-info-text: #0958D9;
|
|
|
|
|
+ --adm-text-88: rgba(0, 0, 0, 0.88);
|
|
|
|
|
+ --adm-text-65: rgba(0, 0, 0, 0.65);
|
|
|
|
|
+ --adm-text-45: rgba(0, 0, 0, 0.45);
|
|
|
|
|
+ --adm-text-25: rgba(0, 0, 0, 0.25);
|
|
|
|
|
+ --adm-border-base: #D9D9D9;
|
|
|
|
|
+ --adm-border-split: #F0F0F0;
|
|
|
|
|
+ --adm-fill: #F5F5F5;
|
|
|
|
|
+ --adm-bg-container: #FFFFFF;
|
|
|
|
|
+ --adm-bg-header: #FAFAFA;
|
|
|
|
|
+ --adm-radius-sm: 2px;
|
|
|
|
|
+ --adm-radius-control: 6px;
|
|
|
|
|
+ --adm-radius-card: 8px;
|
|
|
|
|
+ --adm-shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 主色按钮统一为 Ant 蓝(覆盖 Element 默认 #409EFF) */
|
|
|
|
|
+.admin-page .el-button--primary { background-color: var(--adm-primary); border-color: var(--adm-primary); color: #fff; }
|
|
|
|
|
+.admin-page .el-button--primary:hover,
|
|
|
|
|
+.admin-page .el-button--primary:focus { background-color: var(--adm-primary-hover); border-color: var(--adm-primary-hover); }
|
|
|
|
|
+.admin-page .el-button--primary:active { background-color: var(--adm-primary-active); border-color: var(--adm-primary-active); }
|
|
|
|
|
+.admin-page .el-button--primary.is-disabled,
|
|
|
|
|
+.admin-page .el-button--primary.is-disabled:hover { background-color: #A0C4FF; border-color: #A0C4FF; color: #fff; }
|
|
|
|
|
+
|
|
|
|
|
+/* 卡片:1px 描边 + 极轻阴影,替代重投影 */
|
|
|
|
|
+.admin-page .el-card { border: 1px solid var(--adm-border-split); border-radius: var(--adm-radius-card); box-shadow: var(--adm-shadow-card); }
|
|
|
|
|
+.admin-page .el-card__header { padding: 20px 24px; border-bottom: 1px solid var(--adm-border-split); }
|
|
|
|
|
+.admin-page .el-card__body { padding: 24px; }
|
|
|
|
|
+
|
|
|
|
|
+/* 页面标题区:唯一主操作居右 */
|
|
|
|
|
+.admin-page .admin-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-shrink: 0; }
|
|
|
|
|
+.admin-page .admin-page-title { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--adm-text-88); }
|
|
|
|
|
+.admin-page .admin-page-subtitle { font-size: 12px; color: var(--adm-text-45); margin-left: 12px; }
|
|
|
|
|
+.admin-page .admin-page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
|
|
|
|
+
|
|
|
|
|
+/* 筛选区:去卡片化,改底部 1px 分割线分区 */
|
|
|
|
|
+.admin-page .filter-bar {
|
|
|
|
|
+ display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px;
|
|
|
|
|
+ padding: 0 0 16px; margin-bottom: 16px;
|
|
|
|
|
+ background: transparent; border-radius: 0; box-shadow: none;
|
|
|
|
|
+ border-bottom: 1px solid var(--adm-border-split);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 区块标题:3px 主色竖条 */
|
|
|
|
|
+.admin-page .admin-section-title {
|
|
|
|
|
+ font-size: 14px; font-weight: 500; color: var(--adm-text-88);
|
|
|
|
|
+ padding-left: 8px; border-left: 3px solid var(--adm-primary);
|
|
|
|
|
+ margin: 24px 0 12px; line-height: 1.2;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 表格:表头浅底、行高舒适、单元格留白 */
|
|
|
|
|
+.admin-page .el-table { font-size: 14px; border-radius: var(--adm-radius-card); }
|
|
|
|
|
+.admin-page .el-table th { background-color: var(--adm-bg-header) !important; color: var(--adm-text-88); font-weight: 500; height: 46px; padding: 0; }
|
|
|
|
|
+.admin-page .el-table td { padding: 12px 0; }
|
|
|
|
|
+.admin-page .el-table .cell { padding-left: 16px; padding-right: 16px; }
|
|
|
|
|
+.admin-page .el-table--border, .admin-page .el-table--group { border-color: var(--adm-border-split); }
|
|
|
|
|
+.admin-page .el-table td, .admin-page .el-table th.is-leaf { border-color: var(--adm-border-split); }
|
|
|
|
|
+
|
|
|
|
|
+/* 数值列:右对齐 + 等宽数字 */
|
|
|
|
|
+.admin-page .el-table .cell-num,
|
|
|
|
|
+.admin-page .el-table .is-right .cell { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
|
|
|
|
|
+
|
|
|
|
|
+/* 状态标签:浅底 + 深字 + 同色描边(语义化,替代纯文字着色) */
|
|
|
|
|
+.admin-page .el-tag { border-radius: var(--adm-radius-sm); }
|
|
|
|
|
+.admin-page .el-tag--success { background: #F6FFED; border-color: #B7EB8F; color: var(--adm-success-text); }
|
|
|
|
|
+.admin-page .el-tag--warning { background: #FFFBE6; border-color: #FFE58F; color: var(--adm-warning-text); }
|
|
|
|
|
+.admin-page .el-tag--info { background: #E6F4FF; border-color: #91CAFF; color: var(--adm-info-text); }
|
|
|
|
|
+.admin-page .el-tag--danger { background: #FFF1F0; border-color: #FFCCC7; color: var(--adm-error-text); }
|
|
|
|
|
+
|
|
|
|
|
+/* 标准化状态徽标(自定义 span,替代纯文字着色) */
|
|
|
|
|
+.admin-page .adm-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font-size: 12px; line-height: 20px; border-radius: var(--adm-radius-sm); white-space: nowrap; }
|
|
|
|
|
+.admin-page .adm-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
|
|
|
+.admin-page .adm-status--success { background: #F6FFED; color: var(--adm-success-text); }
|
|
|
|
|
+.admin-page .adm-status--info { background: #E6F4FF; color: var(--adm-info-text); }
|
|
|
|
|
+.admin-page .adm-status--warning { background: #FFFBE6; color: var(--adm-warning-text); }
|
|
|
|
|
+.admin-page .adm-status--error { background: #FFF1F0; color: var(--adm-error-text); }
|
|
|
|
|
+.admin-page .adm-status--default { background: var(--adm-fill); color: var(--adm-text-65); }
|
|
|
|
|
+
|
|
|
|
|
+/* 对话框 */
|
|
|
|
|
+.admin-page .el-dialog__header { padding: 16px 24px; border-bottom: 1px solid var(--adm-border-split); }
|
|
|
|
|
+.admin-page .el-dialog__title { font-size: 16px; font-weight: 500; color: var(--adm-text-88); }
|
|
|
|
|
+.admin-page .el-dialog__body { padding: 24px; }
|
|
|
|
|
+.admin-page .el-dialog__footer { padding: 12px 24px; border-top: 1px solid var(--adm-border-split); }
|
|
|
|
|
+
|
|
|
|
|
+/* 分页 */
|
|
|
|
|
+.admin-page .el-pagination { padding: 16px 0 0; text-align: right; font-weight: normal; flex-shrink: 0; }
|
|
|
|
|
+
|
|
|
|
|
+/* 表单 */
|
|
|
|
|
+.admin-page .el-form-item__label { font-size: 14px; color: var(--adm-text-65); font-weight: 500; }
|
|
|
|
|
+.admin-page .el-divider__text { font-size: 14px; font-weight: 500; color: var(--adm-text-88); }
|
|
|
|
|
+.admin-page .el-divider--horizontal { margin: 24px 0; }
|
|
|
|
|
+
|
|
|
|
|
+/* 表格容器:弹性撑满(替代 JS 计算 max-height),仅表格自身滚动 */
|
|
|
|
|
+.admin-page .adm-table-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
|
|
|
|
|
+.admin-page .adm-table-wrap > .el-table { flex: 1; min-height: 0; height: 100%; }
|
|
|
|
|
+
|
|
|
|
|
+/* 通用辅助 */
|
|
|
|
|
+.admin-page .text-muted { color: var(--adm-text-45); }
|
|
|
|
|
+.admin-page .adm-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
|
|
|
|
|
+.admin-page > .header { flex-shrink: 0; }
|