/* ============================================= 学校管理员主题 - 统一文字层级系统 与学生实训页 (student-training.scss) 保持一致 ============================================= */ /* 全局字体变量 */ :root { /* 字体栈:中文优先苹方/思源黑体 */ --admin-font-base: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; /* 数字/数据字体:等宽对齐,成绩/金额专用 */ --admin-font-data: "PingFang SC", "SF Mono", "JetBrains Mono", "Microsoft YaHei", monospace; /* 字号层级(对齐 Word 标准) */ --admin-fs-display: 28px; /* 大标题 - 页面主标题 */ --admin-fs-h1: 22px; /* 一级标题 - 面板标题 */ --admin-fs-h2: 18px; /* 二级标题 - 区块标题 */ --admin-fs-h3: 16px; /* 三级标题 - 表格/卡片标题 */ --admin-fs-body: 14px; /* 正文 - 表单/描述 */ --admin-fs-body-sm: 13px; /* 次要文字 - 表格次要 */ --admin-fs-caption: 12px; /* 辅助文字 - 标签/徽章 */ --admin-fs-button: 14px; /* 按钮文字 */ --admin-fs-data: 16px; /* 数字/金额 */ /* 字重 */ --admin-fw-normal: 400; --admin-fw-medium: 600; --admin-fw-bold: 700; --admin-fw-bolder: 800; /* 行高 */ --admin-lh-tight: 1.2; --admin-lh-normal: 1.4; --admin-lh-relaxed: 1.6; --admin-lh-loose: 1.8; } .school-admin-workbench { min-height: calc(100vh - 84px - 40px); padding: 24px; box-sizing: border-box; color: #1f2937; } .admin-hero { position: relative; overflow: hidden; margin-bottom: 18px; padding: 22px 24px; border: 1px solid rgba(0, 180, 255, 0.32); border-radius: 24px; background: #f9fafb; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(14px); } .admin-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #e5e7eb, transparent 38%), repeating-linear-gradient(90deg, rgba(125, 211, 252, 0.08) 0 1px, transparent 1px 64px); opacity: 0.42; } .admin-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 14px; border: 1px solid #2563eb; border-radius: 999px; color: #4b5563; background: rgba(0, 170, 255, 0.15); font-family: var(--admin-font-base); font-size: var(--admin-fs-caption); font-weight: var(--admin-fw-medium); } .admin-title { position: relative; z-index: 1; margin: 0; font-family: var(--admin-font-base); font-size: var(--admin-fs-display); line-height: var(--admin-lh-tight); font-weight: var(--admin-fw-bolder); letter-spacing: 0; color: transparent; background: linear-gradient(135deg, #ffffff, #2563eb); -webkit-background-clip: text; background-clip: text; } .admin-subtitle { position: relative; z-index: 1; margin-top: 8px; color: #6b7280; font-family: var(--admin-font-base); font-size: var(--admin-fs-body); line-height: var(--admin-lh-relaxed); } .admin-panel { padding: 18px; border: 1px solid rgba(0, 180, 255, 0.26); border-radius: 24px; background: #f9fafb; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24); backdrop-filter: blur(12px); } /* 面板标题 */ .admin-panel-title { font-family: var(--admin-font-base); font-size: var(--admin-fs-h2); font-weight: var(--admin-fw-bold); line-height: var(--admin-lh-normal); color: #1f2937; } /* 面板副标题 */ .admin-panel-subtitle { font-family: var(--admin-font-base); font-size: var(--admin-fs-body); font-weight: var(--admin-fw-normal); line-height: var(--admin-lh-relaxed); color: #6b7280; } .school-admin-workbench .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 18px; background: rgba(0, 35, 55, 0.44); } .school-admin-workbench .toolbar-left, .school-admin-workbench .toolbar-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .school-admin-workbench .toolbar .el-button .el-icon { margin-right: 4px; } /* ============================================= 工具栏按钮样式 - 差异化设计 每个按钮有独特的视觉身份和动画 ============================================= */ /* 工具栏通用基础样式 */ .school-admin-workbench .toolbar .el-button { padding: 10px 18px; border-radius: 12px; font-family: var(--admin-font-base); font-size: 13px; font-weight: 600; position: relative; overflow: hidden; } /* ============================================= 查询按钮 - 战术扫描风格(蓝色) 模拟雷达/扫描仪的视觉效果 ============================================= */ .school-admin-workbench .toolbar .el-button[type="primary"].toolbar-btn, .school-admin-workbench .toolbar .el-button[type="primary"] { background: linear-gradient(135deg, #ffffff 0%, #eff6ff 50%, #dbeafe 100%); border: 1px solid rgba(0, 170, 255, 0.5); color: #ffffff; box-shadow: 0 0 20px rgba(37, 99, 235, 0.2), inset 0 0 30px #f9fafb; } .school-admin-workbench .toolbar .el-button[type="primary"].toolbar-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(0, 200, 255, 0.3) 50%, transparent 100%); transition: left 0.5s ease; } .school-admin-workbench .toolbar .el-button[type="primary"].toolbar-btn:hover::before { left: 100%; } .school-admin-workbench .toolbar .el-button[type="primary"].toolbar-btn::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: radial-gradient(circle at 30% 50%, rgba(0, 200, 255, 0.15) 0%, transparent 60%); pointer-events: none; } .school-admin-workbench .toolbar .el-button[type="primary"].toolbar-btn:hover { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%); border-color: rgba(0, 200, 255, 0.7); box-shadow: 0 0 30px rgba(0, 180, 255, 0.35), 0 0 60px rgba(37, 99, 235, 0.15), inset 0 0 20px rgba(0, 200, 255, 0.1); transform: translateY(-2px); } .school-admin-workbench .toolbar .el-button[type="primary"].toolbar-btn:hover svg { filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.8)); animation: scanPulse 1s ease-in-out infinite; } @keyframes scanPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* ============================================= 重置按钮 - 循环刷新风格(紫色) 模拟数据同步/刷新的视觉效果 ============================================= */ .school-admin-workbench .toolbar .el-button:not([type="primary"]):not([type="success"]).toolbar-btn, .school-admin-workbench .toolbar .el-button:not([type="primary"]):not([type="success"]) { background: linear-gradient(135deg, #f9fafb 0%, #f9fafb 50%, #f9fafb 100%); border: 1px solid rgba(150, 100, 255, 0.4); color: #7c3aed; backdrop-filter: blur(10px); } .school-admin-workbench .toolbar .el-button:not([type="primary"]):not([type="success"]).toolbar-btn::before { content: ''; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(150, 100, 255, 0.1) 0%, transparent 50%), linear-gradient(225deg, rgba(139, 92, 246, 0.08) 0%, transparent 50%); pointer-events: none; } .school-admin-workbench .toolbar .el-button:not([type="primary"]):not([type="success"]).toolbar-btn:hover { background: linear-gradient(135deg, #f5f3ff 0%, #f9fafb 50%, #f5f3ff 100%); border-color: rgba(180, 130, 255, 0.6); color: #7c3aed; box-shadow: 0 0 20px rgba(150, 100, 255, 0.25), 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(139, 92, 246, 0.08); transform: translateY(-2px); } .school-admin-workbench .toolbar .el-button:not([type="primary"]):not([type="success"]).toolbar-btn:hover svg { animation: spinRefresh 0.8s ease-in-out; filter: drop-shadow(0 0 6px rgba(180, 130, 255, 0.8)); } @keyframes spinRefresh { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } /* ============================================= 新增按钮 - 脉冲创建风格(绿色) 模拟能量聚集/爆发的视觉效果 ============================================= */ .school-admin-workbench .toolbar .el-button[type="success"].toolbar-btn, .school-admin-workbench .toolbar .el-button[type="success"] { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%); border: 1px solid rgba(0, 220, 130, 0.5); color: #ffffff; box-shadow: 0 0 20px rgba(43, 164, 113, 0.15), inset 0 0 25px rgba(0, 220, 130, 0.05); } .school-admin-workbench .toolbar .el-button[type="success"].toolbar-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(43, 164, 113, 0.4) 0%, transparent 70%); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease; } .school-admin-workbench .toolbar .el-button[type="success"].toolbar-btn:hover::before { width: 200%; height: 200%; } .school-admin-workbench .toolbar .el-button[type="success"].toolbar-btn::after { content: ''; position: absolute; inset: -2px; border-radius: 14px; background: linear-gradient(135deg, rgba(0, 220, 130, 0.3), transparent, rgba(43, 164, 113, 0.15)); z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .school-admin-workbench .toolbar .el-button[type="success"].toolbar-btn:hover::after { opacity: 1; } .school-admin-workbench .toolbar .el-button[type="success"].toolbar-btn:hover { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #2ba471 100%); border-color: rgba(0, 240, 150, 0.7); color: #ffffff; box-shadow: 0 0 35px rgba(43, 164, 113, 0.4), 0 0 70px rgba(43, 164, 113, 0.15), inset 0 0 25px rgba(0, 220, 130, 0.12); transform: translateY(-2px); } .school-admin-workbench .toolbar .el-button[type="success"].toolbar-btn:hover svg { animation: pulseCreate 0.6s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(0, 240, 150, 0.9)); } @keyframes pulseCreate { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.1) rotate(-5deg); } 75% { transform: scale(1.1) rotate(5deg); } } /* ============================================= 工具栏按钮通用样式 ============================================= */ .school-admin-workbench .toolbar-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; font-family: var(--admin-font-base); font-size: 13px; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .school-admin-workbench .toolbar-btn svg { flex-shrink: 0; transition: transform 0.3s ease, filter 0.3s ease; } .school-admin-workbench .toolbar .el-button svg { flex-shrink: 0; margin-right: 4px; } .school-admin-workbench .toolbar .el-button span { vertical-align: middle; position: relative; z-index: 1; } /* 表格操作按钮样式(带图标) */ .school-admin-workbench .action-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: var(--admin-fs-body-sm); color: #2563eb; } .school-admin-workbench .action-btn svg { flex-shrink: 0; } .school-admin-workbench .action-btn.el-button--danger { color: #ef4444; } /* link 按钮带图标样式 */ .school-admin-workbench .el-button--primary.is-link, .school-admin-workbench .el-button--danger.is-link { display: inline-flex; align-items: center; gap: 4px; } .school-admin-workbench .el-button--primary.is-link .el-icon, .school-admin-workbench .el-button--danger.is-link .el-icon { margin-right: 0; } /* 文字按钮样式(无背景纯文字) */ .school-admin-workbench .el-button.is-text { padding: 4px 8px; border-radius: 4px; border: none; background: transparent !important; box-shadow: none !important; font-family: var(--admin-font-base); font-size: var(--admin-fs-body-sm); font-weight: var(--admin-fw-medium); } .school-admin-workbench .el-button.is-text:hover { background: #eff6ff !important; } .school-admin-workbench .el-button.is-text+.el-button.is-text { margin-left: 8px; } /* text 按钮的文字颜色 */ .school-admin-workbench .el-button.is-text[type="primary"] { color: #2563eb; } .school-admin-workbench .el-button.is-text[type="primary"]:hover { color: #2563eb; } .school-admin-workbench .el-button.is-text[type="danger"] { color: #ef4444; } .school-admin-workbench .el-button.is-text[type="danger"]:hover { color: #fca5a5; } .school-admin-workbench .filter-input { width: 220px; } .school-admin-workbench .el-input__wrapper, .school-admin-workbench .el-select .el-input__wrapper { background: #ffffff; border: 1px solid #d1d5db; box-shadow: none; font-family: var(--admin-font-base); font-size: var(--admin-fs-body); } .school-admin-workbench .el-input__inner { color: #1f2937; font-family: var(--admin-font-base); font-size: var(--admin-fs-body); } .school-admin-workbench .el-input__inner::placeholder { color: #9ca3af; font-family: var(--admin-font-base); font-size: var(--admin-fs-body-sm); } .school-admin-workbench .el-button { border-radius: 14px; font-family: var(--admin-font-base); font-size: var(--admin-fs-button); font-weight: var(--admin-fw-medium); } .school-admin-workbench .el-button--primary, .school-admin-workbench .el-button--success { border-color: #2563eb; background: linear-gradient(95deg, #2563eb, #1d4ed8); box-shadow: 0 0 14px #e5e7eb; } .school-admin-workbench .el-table { overflow: hidden; border-radius: 18px; border-color: #e5e7eb; background: rgba(3, 24, 36, 0.72); color: #374151; font-family: var(--admin-font-base); font-size: var(--admin-fs-body); --el-table-border-color: #e5e7eb; --el-table-header-bg-color: #ffffff; --el-table-header-text-color: #1f2937; --el-table-row-hover-bg-color: #eff6ff; } .school-admin-workbench .el-table .el-table__header-wrapper th.el-table__cell, .school-admin-workbench .el-table .el-table__fixed-header-wrapper th.el-table__cell { background-color: #ffffff !important; color: #1f2937 !important; font-family: var(--admin-font-base); font-size: var(--admin-fs-body); font-weight: var(--admin-fw-bold); border-color: #e5e7eb; } .school-admin-workbench .el-table th.el-table__cell>.cell { color: #1f2937; font-family: var(--admin-font-base); font-size: var(--admin-fs-body); font-weight: var(--admin-fw-bold); } .school-admin-workbench .el-table tr, .school-admin-workbench .el-table td.el-table__cell { background: rgba(3, 24, 36, 0.58); border-color: #e5e7eb; font-family: var(--admin-font-base); font-size: var(--admin-fs-body-sm); } .school-admin-workbench .el-table td.el-table__cell .cell { font-family: var(--admin-font-base); font-size: var(--admin-fs-body-sm); line-height: var(--admin-lh-relaxed); } .school-admin-workbench .el-table__body tr:hover>td.el-table__cell { background: #eff6ff; } .school-admin-workbench .el-table .el-loading-mask { background: rgba(4, 18, 29, 0.72) !important; backdrop-filter: blur(1px); } .school-admin-workbench .el-table .el-loading-spinner .path { stroke: #2563eb; } .school-admin-workbench .el-table .el-loading-text { color: #374151; } .school-admin-workbench .pager { margin-top: 14px; justify-content: flex-end; } .school-admin-workbench .el-pagination { --el-pagination-bg-color: transparent; --el-pagination-button-bg-color: rgba(3, 24, 36, 0.85); --el-pagination-hover-color: #2563eb; color: #374151; font-family: var(--admin-font-base); font-size: var(--admin-fs-body-sm); } .school-admin-workbench .el-pagination button, .school-admin-workbench .el-pagination .el-pager li { font-family: var(--admin-font-base); font-size: var(--admin-fs-body-sm); } .school-admin-workbench .el-pagination__total, .school-admin-workbench .el-pagination__jump { font-family: var(--admin-font-base); font-size: var(--admin-fs-body-sm); color: #6b7280; } .school-admin-workbench .admin-form { max-width: none; padding: 18px; border: 1px solid #e5e7eb; border-radius: 22px; background: rgba(0, 20, 35, 0.62); } .school-admin-workbench .el-form-item__label { color: #4b5563; font-family: var(--admin-font-base); font-size: var(--admin-fs-body); font-weight: var(--admin-fw-medium); line-height: var(--admin-lh-normal); } .school-admin-workbench .el-form-item__content { font-family: var(--admin-font-base); font-size: var(--admin-fs-body); line-height: var(--admin-lh-normal); } .school-admin-workbench .el-form-item__error { font-family: var(--admin-font-base); font-size: var(--admin-fs-caption); } .admin-edit-dialog, .platform-admin-dialog { border-radius: 22px; background: #f9fafb; border: 1px solid rgba(0, 180, 255, 0.28); } .admin-edit-dialog .el-dialog__title, .admin-edit-dialog .el-form-item__label, .platform-admin-dialog .el-dialog__title, .platform-admin-dialog .el-form-item__label { color: #1f2937; font-family: var(--admin-font-base); font-size: var(--admin-fs-body); font-weight: var(--admin-fw-medium); } .admin-edit-dialog .el-dialog__body, .admin-edit-dialog .el-dialog__footer, .platform-admin-dialog .el-dialog__body, .platform-admin-dialog .el-dialog__footer { background: transparent; font-family: var(--admin-font-base); } .admin-edit-dialog, .platform-admin-dialog { display: flex; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); flex-direction: column; } .admin-edit-dialog .el-dialog__body, .platform-admin-dialog .el-dialog__body { overflow-y: auto; font-family: var(--admin-font-base); /* 美化滚动条 */ scrollbar-width: thin; scrollbar-color: rgba(37, 99, 235, 0.4) #f9fafb; } .admin-edit-dialog .el-dialog__body::-webkit-scrollbar, .platform-admin-dialog .el-dialog__body::-webkit-scrollbar { width: 6px; height: 6px; } .admin-edit-dialog .el-dialog__body::-webkit-scrollbar-track, .platform-admin-dialog .el-dialog__body::-webkit-scrollbar-track { background: #f9fafb; border-radius: 3px; } .admin-edit-dialog .el-dialog__body::-webkit-scrollbar-thumb, .platform-admin-dialog .el-dialog__body::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, 0.4); border-radius: 3px; } .admin-edit-dialog .el-dialog__body::-webkit-scrollbar-thumb:hover, .platform-admin-dialog .el-dialog__body::-webkit-scrollbar-thumb:hover { background: rgba(0, 170, 255, 0.6); } .admin-edit-dialog .el-input__wrapper, .admin-edit-dialog .el-select .el-input__wrapper { background: #ffffff; border: 1px solid #d1d5db; box-shadow: none; font-family: var(--admin-font-base); font-size: var(--admin-fs-body); } .admin-edit-dialog .el-input__inner { color: #1f2937; font-family: var(--admin-font-base); font-size: var(--admin-fs-body); } .admin-edit-dialog .el-input__inner::placeholder { color: #9ca3af; font-family: var(--admin-font-base); font-size: var(--admin-fs-body-sm); } @media (max-width: 900px) { .school-admin-workbench { padding: 14px; } .admin-title { font-size: calc(var(--admin-fs-display) * 0.85); } .school-admin-workbench .filter-input { width: 100%; } } /* ============================================= 文字层级工具类 学校管理员页面统一使用以下类名 ============================================= */ /* 大标题 - 页面主标题 */ .text-display { font-family: var(--admin-font-base) !important; font-size: var(--admin-fs-display) !important; font-weight: var(--admin-fw-bolder) !important; line-height: var(--admin-lh-tight) !important; } /* 一级标题 - 面板标题 */ .text-h1 { font-family: var(--admin-font-base) !important; font-size: var(--admin-fs-h1) !important; font-weight: var(--admin-fw-bold) !important; line-height: var(--admin-lh-normal) !important; } /* 二级标题 - 区块标题 */ .text-h2 { font-family: var(--admin-font-base) !important; font-size: var(--admin-fs-h2) !important; font-weight: var(--admin-fw-bold) !important; line-height: var(--admin-lh-normal) !important; } /* 三级标题 - 卡片/表格标题 */ .text-h3 { font-family: var(--admin-font-base) !important; font-size: var(--admin-fs-h3) !important; font-weight: var(--admin-fw-medium) !important; line-height: var(--admin-lh-normal) !important; } /* 正文 - 表单/描述 */ .text-body { font-family: var(--admin-font-base) !important; font-size: var(--admin-fs-body) !important; font-weight: var(--admin-fw-normal) !important; line-height: var(--admin-lh-relaxed) !important; } /* 次要文字 */ .text-body-sm { font-family: var(--admin-font-base) !important; font-size: var(--admin-fs-body-sm) !important; font-weight: var(--admin-fw-normal) !important; line-height: var(--admin-lh-relaxed) !important; } /* 辅助文字 - 标签/徽章 */ .text-caption { font-family: var(--admin-font-base) !important; font-size: var(--admin-fs-caption) !important; font-weight: var(--admin-fw-medium) !important; line-height: var(--admin-lh-tight) !important; } /* 数字/金额 - 等宽对齐 */ .text-data { font-family: var(--admin-font-data) !important; font-size: var(--admin-fs-data) !important; font-weight: var(--admin-fw-bold) !important; font-variant-numeric: tabular-nums !important; line-height: var(--admin-lh-tight) !important; } /* 按钮文字 */ .text-button { font-family: var(--admin-font-base) !important; font-size: var(--admin-fs-button) !important; font-weight: var(--admin-fw-medium) !important; line-height: 1 !important; }