/* ============================================================= * 设计系统层 · 专业版 (Pro UI) * ------------------------------------------------------------- * 作用：在【不改动任何 JS 逻辑】的前提下，对现有界面外壳 * （顶栏 / 侧边栏 / 内容区 / 排行榜 / 工具条）做专业重做。 * 接入方式：仅需给加 class="pro-ui" 并引入本文件即可； * 移除该 class 即整站回退到原样式（安全 A/B）。 * 设计原则：统一 Design Token、克制配色、清晰层级、留白与微交互。 * ============================================================= */ /* ============ 1. 设计令牌 (Design Tokens) ============ */ .pro-ui { /* —— 品牌主色：沉稳靛蓝 + 一点紫，专业且大气 —— */ --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-200: #c7d2fe; --brand-300: #b6bdec; --brand-400: #9298e6; --brand-500: #6c72c4; --brand-600: #5a5f9c; --brand-700: #4b46a3; --brand-800: #3d3a85; --brand-900: #312e6e; /* —— 点缀金：成就 / 积分感，呼应校徽金，仅作强调色 —— */ --gold-400: #fbbf24; --gold-500: #f59e0b; --gold-600: #d97706; /* —— 语义色 —— */ --success: #10b981; --danger: #ef4444; --warning: #f59e0b; /* —— 中性色阶（页面骨架） —— */ --surface-1: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --text-1: #0f172a; --text-2: #475569; --text-3: #94a3b8; --border-1: #e2e8f0; --border-2: #cbd5e1; /* —— 玻璃拟态 / 卡片阴影（覆盖旧值，统一为低饱和柔和阴影） —— */ --glass-bg: rgba(255,255,255,0.72); --glass-border: rgba(255,255,255,0.55); --card-shadow: 0 4px 24px rgba(15,23,42,0.06); --card-shadow-hover: 0 12px 40px rgba(15,23,42,0.12); /* —— 兼容旧变量：让仍引用它们的组件自动跟随新品牌色 —— */ --primary-color: var(--brand-600); --primary-light: var(--brand-400); --primary-dark: var(--brand-800); --secondary-color: #6d5bb8; /* 柔紫，呼应品牌 */ --accent-color: var(--gold-500); /* —— 圆角 / 阴影 / 间距 / 缓动 —— */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --sh-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08); --sh-2: 0 4px 14px rgba(15,23,42,.08); --sh-3: 0 12px 32px rgba(15,23,42,.12); --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --ease: cubic-bezier(.4,0,.2,1); /* —— 字体与字阶 —— */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif; --font-display: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-display: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); /* —— 页面底色：极淡的双色光晕，制造"大气"的呼吸感 —— */ font-family: var(--font-sans); color: var(--text-1); background: var(--surface-3); } /* ============ 2. 顶栏 (Header) ============ */ .pro-ui .fixed-header { height: 72px; padding: 0 var(--s-6); background: linear-gradient(100deg, #1f2937 0%, #283549 52%, #313e54 100%); border-bottom: none; box-shadow: 0 6px 22px rgba(15,23,42,0.18); } /* 顶端一道极细金线，呼应校徽、提升精致度 */ .pro-ui .fixed-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-600)); opacity: .35; } .pro-ui .header-title { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; letter-spacing: .5px; color: #fff; background: none !important; -webkit-background-clip: border-box; -webkit-text-fill-color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); } .pro-ui .logo { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); border-radius: 14px; padding: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); } /* 顶栏右侧控件统一为半透明胶囊，语言一致 */ .pro-ui .header-controls > button { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 8px 14px; font-weight: 600; backdrop-filter: blur(6px); transition: background .2s var(--ease); } .pro-ui .header-controls > button:hover { background: rgba(255,255,255,.30); } /* ============ 3. 侧边栏与导航模块 ============ */ .pro-ui .sidebar { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-xl); padding: var(--s-5); box-shadow: var(--sh-2); } /* 模块卡片：白底 + 细边 + 柔和阴影，去除糖果渐变与金边 */ .pro-ui .nav-module { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--sh-1); margin-bottom: var(--s-4); overflow: hidden; } .pro-ui .nav-module h3 { background: var(--surface-2); color: var(--text-1); text-shadow: none; border-bottom: 1px solid var(--border-1); border-left: 4px solid var(--brand-600); border-radius: 0; padding: 14px 16px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; display: flex; justify-content: space-between; align-items: center; } /* 关闭跑马灯微光，专业感来自克制而非动效堆叠 */ .pro-ui .nav-module h3::before { display: none !important; } .pro-ui .nav-module h3::after { content: "▾"; color: var(--text-3); font-size: .8em; } /* 不同模块统一用同一支品牌色作左侧色条，不再彩虹渐变（克制、不晃眼） */ .pro-ui .nav-module.class-management h3, .pro-ui .nav-module.score-management h3, .pro-ui .nav-module.student-management h3, .pro-ui .nav-module.pet-management h3, .pro-ui .nav-module.record-management h3 { border-left-color: var(--brand-600); } /* 导航按钮：浅底 + 悬浮品牌色填充，清晰可点 */ .pro-ui .nav-module .nav-btn { background: var(--surface-2) !important; color: var(--text-1) !important; border: 1px solid var(--border-1) !important; box-shadow: none !important; border-radius: var(--r-md); font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; padding: 10px 14px; text-align: left; transition: all .2s var(--ease); } .pro-ui .nav-module .nav-btn:hover { background: var(--brand-50) !important; color: var(--brand-700) !important; border-color: var(--brand-300) !important; transform: translateX(2px); box-shadow: var(--sh-1); } .pro-ui .nav-btn:active { transform: translateY(0); } /* 中和学生管理"批量导入"的绿色 !important 与微光 */ .pro-ui .nav-module.student-management .dropdown-toggle { background: var(--surface-2) !important; color: var(--text-1) !important; } .pro-ui .nav-module.student-management .dropdown-toggle:hover { background: var(--brand-50) !important; color: var(--brand-700) !important; } .pro-ui .nav-module.student-management .dropdown-toggle::before { display: none !important; } .pro-ui .nav-module.student-management .dropdown-menu { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-md); box-shadow: var(--sh-3); backdrop-filter: blur(10px); } .pro-ui .nav-module.student-management .dropdown-menu a { color: var(--text-1); border-bottom: 1px solid var(--border-1); font-weight: 500; } .pro-ui .nav-module.student-management .dropdown-menu a:hover { background: var(--brand-600); color: #fff; transform: translateX(4px); } /* ============ 4. 内容区与工具条 ============ */ .pro-ui .content-area { background: transparent; backdrop-filter: none; border-radius: var(--r-xl); padding: 0; gap: var(--s-5); } .pro-ui .main-content { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-xl); box-shadow: var(--sh-2); padding: var(--s-6); } /* 工具条：统一按钮语言，分组留白 */ .pro-ui .controls { gap: 10px; margin-bottom: var(--s-5); align-items: center; } .pro-ui .controls button { background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); box-shadow: 0 4px 14px rgba(15,23,42,.14); border: none; border-radius: var(--r-md); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-base); padding: 10px 18px; transition: all .2s var(--ease); } .pro-ui .controls button:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.18); } .pro-ui .controls button:active { transform: translateY(0); } /* 危险操作：红色警示，语义清晰 */ .pro-ui .controls button.delete-btn { background: linear-gradient(135deg, var(--danger), #dc2626) !important; box-shadow: 0 4px 14px rgba(239,68,68,.35) !important; } /* 特色入口（趣味晨读 / 冲刺挑战）：金色，担当视觉焦点 */ .pro-ui .controls button.btn-feature { background: linear-gradient(135deg, var(--gold-500), #fbbf24) !important; box-shadow: 0 4px 14px rgba(245,158,11,.4) !important; color: #1f2937; font-weight: 700; } .pro-ui .controls label { font-size: var(--fs-base); color: var(--text-2); } .pro-ui .controls .search-box { border: 1px solid var(--border-2); border-radius: 999px; padding: 9px 16px; font-size: var(--fs-base); background: var(--surface-1); } .pro-ui .controls .search-box:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(99,102,241,.25); } /* ============ 5. 实时排行榜 ============ */ .pro-ui .rankings { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--sh-2); padding: var(--s-5); } .pro-ui .rankings:hover { box-shadow: var(--sh-3); transform: none; } .pro-ui .rankings h3 { margin-top: 0; color: var(--brand-700); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: .5px; text-shadow: none; } .pro-ui .ranking-toggle button, .pro-ui .ranking-period-toggle button { border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); font-weight: 600; padding: 6px 14px; transition: all .2s var(--ease); } .pro-ui .ranking-toggle button.active, .pro-ui .ranking-period-toggle button.active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); } /* ============ 6. 全局精致细节 ============ */ .pro-ui button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.35); } .pro-ui ::-webkit-scrollbar { width: 10px; height: 10px; } .pro-ui ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; } .pro-ui ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } .pro-ui ::-webkit-scrollbar-track { background: transparent; } /* ============ 7. 暗色模式（新令牌的暗色映射） ============ */ .pro-ui[data-theme="dark"], [data-theme="dark"] .pro-ui { --surface-1: #1e293b; --surface-2: #273449; --surface-3: #0f172a; --text-1: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8; --border-1: #334155; --border-2: #475569; --glass-bg: rgba(30,41,59,0.72); --glass-border: rgba(148,163,184,0.20); --sh-1: 0 1px 2px rgba(0,0,0,.3); --sh-2: 0 4px 14px rgba(0,0,0,.4); --sh-3: 0 12px 32px rgba(0,0,0,.5); --brand-50: #312e81; --brand-300: #a5b4fc; --brand-400: #818cf8; --brand-500: #818cf8; --brand-600: #6366f1; --brand-700: #c7d2fe; background: radial-gradient(1200px 600px at 82% -12%, #312e81 0%, transparent 60%), radial-gradient(1000px 520px at -5% 0%, #3b2f0b 0%, transparent 55%), #0f172a; } /* ============ 8. 内容区组件深化（卡片 / 积分 / 弹窗 / 筛选） ============ */ /* —— 8.1 学生卡片：去除糖果光晕与⚡粒子，回归沉稳留白 —— */ .pro-ui .students-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); } .pro-ui .master-card, .pro-ui .student-card { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-2); /* 顶部一道 3px 品牌色细线，制造层级而不靠粗描边 */ position: relative; } .pro-ui .master-card::after, .pro-ui .student-card::after { content: "" !important; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 3px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); opacity: .85 !important; font-size: 0 !important; right: 0 !important; animation: none !important; filter: none !important; } /* 关闭旋转光晕 + 浮动⚡（幼稚感根源） */ .pro-ui .student-card::before, .pro-ui .master-card::before { display: none !important; animation: none !important; content: "" !important; } .pro-ui .master-card:hover, .pro-ui .student-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--brand-300); transition: all .3s var(--ease); } /* —— 8.2 分数录入区：容器 + 切换 + 表单 —— */ .pro-ui .score-entry-section { background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--r-xl); padding: var(--s-6); } .pro-ui .score-entry-section h4 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text-1); margin: 0 0 var(--s-4); } /* 切换按钮：分段控件（segmented control）语言 */ .pro-ui .toggle-buttons { display: inline-flex; background: var(--surface-3); border: 1px solid var(--border-1); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: var(--s-5); } .pro-ui .toggle-btn { border: none; background: transparent; color: var(--text-2); border-radius: 999px; padding: 8px 20px; font-weight: 600; font-size: var(--fs-base); font-family: var(--font-sans); cursor: pointer; transition: all .2s var(--ease); } .pro-ui .toggle-btn.active { background: var(--brand-600); color: #fff; box-shadow: var(--sh-1); } /* 表单元素：统一输入框语言 */ .pro-ui .score-entry-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); } .pro-ui .score-entry-form label { font-size: var(--fs-base); color: var(--text-2); font-weight: 500; } .pro-ui .score-entry-form select, .pro-ui .score-entry-form input { padding: 10px 14px; font-size: var(--fs-base); border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-1); outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .pro-ui .score-entry-form select:focus, .pro-ui .score-entry-form input:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(99,102,241,.20); } /* 保存分数等普通按钮：品牌主色 */ .pro-ui .score-entry-form button:not(.score-btn) { background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); color: #fff; border: none; border-radius: var(--r-md); padding: 10px 22px; font-weight: 600; font-size: var(--fs-base); font-family: var(--font-sans); cursor: pointer; box-shadow: 0 4px 14px rgba(79,70,229,.30); transition: all .2s var(--ease); } .pro-ui .score-entry-form button:not(.score-btn):hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(79,70,229,.40); } /* —— 8.3 积分快捷按钮：保留语义色，但改为沉稳实色（非糖果渐变） —— */ .pro-ui .score-controls-actions { gap: var(--s-3); } .pro-ui .score-controls-actions select, .pro-ui .score-controls-actions input { border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface-1); } .pro-ui .score-controls-actions select:focus, .pro-ui .score-controls-actions input:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(99,102,241,.20); } .pro-ui .score-controls-actions .score-btn { border-radius: var(--r-md); box-shadow: var(--sh-1); background-image: none; /* 去渐变 */ } .pro-ui .score-controls-actions .score-btn-add { background: var(--success); } .pro-ui .score-controls-actions .score-btn-subtract { background: var(--danger); } .pro-ui .score-controls-actions .score-btn-close { background: var(--text-3); } .pro-ui .score-controls-actions .score-btn-history { background: var(--brand-600); } .pro-ui .score-controls-actions .score-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); filter: brightness(1.05); } /* —— 8.4 字母定位 / 批量导入等工具条次级按钮 —— */ .pro-ui .controls .letter-filter-btn { background: var(--surface-2); color: var(--text-1); border: 1px solid var(--border-2); border-radius: 999px; padding: 9px 16px; font-family: var(--font-sans); font-weight: 600; box-shadow: none; transition: all .2s var(--ease); } .pro-ui .controls .letter-filter-btn:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-300); } .pro-ui .letter-filter-panel { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: var(--s-3); } .pro-ui .letter-btn { background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--r-sm); color: var(--text-2); font-family: var(--font-sans); transition: all .15s var(--ease); } .pro-ui .letter-btn:hover { background: var(--brand-50); color: var(--brand-700); } .pro-ui .letter-btn.active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); } /* 批量导入下拉按钮（与工具条语言统一） */ .pro-ui .controls .dropdown-btn .import-btn, .pro-ui .controls .dropdown-btn .dropdown-toggle { background: var(--surface-2); color: var(--text-1); border: 1px solid var(--border-2); border-radius: var(--r-md); padding: 10px 18px; font-weight: 600; font-family: var(--font-sans); box-shadow: none; transition: all .2s var(--ease); } .pro-ui .controls .dropdown-btn .import-btn:hover, .pro-ui .controls .dropdown-btn .dropdown-toggle:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-300); } /* —— 8.5 返回按钮 / 周月榜区块 —— */ .pro-ui .back-button { background: var(--surface-2) !important; color: var(--text-1) !important; border: 1px solid var(--border-2) !important; border-radius: var(--r-md) !important; padding: 10px 20px !important; font-weight: 600; font-family: var(--font-sans); box-shadow: none !important; display: inline-block !important; transition: all .2s var(--ease); } .pro-ui .back-button:hover { background: var(--brand-50) !important; color: var(--brand-700) !important; } /* 周月榜：由蓝紫渐变面板改为干净卡片 + 品牌顶线 */ .pro-ui #weeklyMonthly { background: var(--surface-1); border: 1px solid var(--border-1); border-top: 3px solid var(--brand-600); border-radius: var(--r-xl); box-shadow: var(--sh-2); } .pro-ui #weeklyMonthly h3 { color: var(--brand-700); text-shadow: none; } /* ============ 9. 全屏弹窗（领养中心 / 各类弹层）专业重做 ============ */ .pro-ui .fullscreen-modal .modal-content.fullscreen { background: var(--surface-2); border-radius: var(--r-xl); box-shadow: 0 30px 80px rgba(15,23,42,.45); max-width: 1500px; } .pro-ui .fullscreen-modal .modal-header { background: var(--brand-700); color: #fff; border-bottom: none; padding: 18px 36px; border-radius: var(--r-xl) var(--r-xl) 0 0; } .pro-ui .fullscreen-modal .close-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); border-radius: 50%; font-size: 1.6em; transition: all .2s var(--ease); } .pro-ui .fullscreen-modal .close-btn:hover { background: rgba(255,255,255,.32); transform: rotate(90deg); } .pro-ui .fullscreen-modal .modal-body { background: var(--surface-2); } /* 弹窗内标题字体统一，去除 Comic Neue 儿童体 */ .pro-ui .pet-center-title { font-family: var(--font-display); color: #fff; text-shadow: none; letter-spacing: .5px; } /* 班级选择器 / 搜索框（弹窗内）统一语言 */ .pro-ui .class-selector { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-md); } .pro-ui .class-selector-trigger { color: var(--text-1); font-family: var(--font-sans); } .pro-ui .class-add-btn { background: var(--brand-600); color: #fff; border: none; border-radius: var(--r-md); box-shadow: 0 4px 14px rgba(79,70,229,.30); } .pro-ui .student-select, .pro-ui .pet-search-input { border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-1); outline: none; } .pro-ui .student-select:focus, .pro-ui .pet-search-input:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(99,102,241,.20); } /* 稀有度筛选按钮：保留稀有度语义色，但去重渐变、统一为实色胶囊 */ .pro-ui .rarity-filter-btn { background: var(--surface-1); border: 1px solid var(--border-2); border-radius: 999px; color: var(--text-2); font-family: var(--font-sans); font-weight: 600; background-image: none; transition: all .2s var(--ease); } .pro-ui .rarity-filter-btn:hover { border-color: var(--brand-300); color: var(--brand-700); } .pro-ui .rarity-filter-btn.all.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; } .pro-ui .rarity-filter-btn.common.active { background: #64748b; border-color: #64748b; color: #fff; } .pro-ui .rarity-filter-btn.uncommon.active { background: var(--success); border-color: var(--success); color: #fff; } .pro-ui .rarity-filter-btn.rare.active { background: #0ea5e9; border-color: #0ea5e9; color: #fff; } .pro-ui .rarity-filter-btn.epic.active { background: #8b5cf6; border-color: #8b5cf6; color: #fff; } .pro-ui .rarity-filter-btn.legendary.active { background: var(--gold-500); border-color: var(--gold-500); color: #1f2937; } /* ============ 10. 降级保护：尊重「减少动态效果」系统偏好 ============ */ @media (prefers-reduced-motion: reduce) { .pro-ui * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ============ 11. 新版工作区布局重构（信息架构级，非仅换色） ============ */ /* 11.1 三栏工作区：居中限宽 + 统一大间距 → "大气"呼吸感 */ .pro-ui .main-container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; max-width: 1680px; margin: 0 auto; padding: var(--s-6); gap: var(--s-6); } /* 11.2 左侧导航栏：精炼为「分组导航」（保留手风琴结构供 JS 使用） */ .pro-ui .sidebar { position: sticky; width: 184px; flex: 0 0 184px; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; } .pro-ui .sidebar::before { content: "功能导航"; display: block; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 2px; color: var(--text-3); margin-bottom: var(--s-4); padding-left: 4px; } .pro-ui .nav-module { margin-bottom: var(--s-4); } .pro-ui .nav-module:last-child { margin-bottom: 0; } .pro-ui .nav-module .nav-buttons { padding: 2px 0 8px; } .pro-ui .nav-module h3 { font-size: var(--fs-base); padding: 11px 13px; } .pro-ui .nav-module h3 span { font-weight: 700; } .pro-ui .nav-module .nav-btn { padding: 7px 10px; font-size: var(--fs-sm); } /* 11.3 内容列：透明容器，内部由卡片承载层级 */ .pro-ui .content-area { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-6); background: transparent; backdrop-filter: none; padding: 0; } /* 11.4 排行榜：固定右栏、限宽 */ .pro-ui .rankings { position: sticky; align-self: flex-start; flex: 0 0 340px; width: 340px; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; font-size: 1rem; } /* 11.5 班级概览区（KPI + 快捷操作） */ .pro-ui .overview { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-xl); box-shadow: var(--sh-2); padding: var(--s-6); } .pro-ui .overview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); } .pro-ui .overview-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--text-1); letter-spacing: .5px; } .pro-ui .overview-sub { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-base); } .pro-ui .overview-actions { display: flex; gap: 10px; flex-wrap: wrap; } .pro-ui .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-5); } .pro-ui .kpi-card { background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; } .pro-ui .kpi-card::after { display: none; } .pro-ui .kpi-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; } .pro-ui .kpi-value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--text-1); line-height: 1.1; } .pro-ui .qa-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); } .pro-ui .qa-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: var(--s-5) var(--s-3); background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--r-lg); cursor: pointer; text-align: center; transition: all .2s var(--ease); font-family: var(--font-sans); } .pro-ui .qa-tile:hover { background: var(--brand-50); border-color: var(--brand-300); transform: translateY(-3px); box-shadow: var(--sh-2); } .pro-ui .qa-ico { font-size: 1.8em; line-height: 1; } .pro-ui .qa-text { font-size: var(--fs-sm); font-weight: 600; color: var(--text-1); } /* 11.6 响应式：窄屏收为单列堆叠 */ @media (max-width: 1100px) { .pro-ui .main-container { flex-direction: column; } .pro-ui .sidebar { width: 100%; flex: 1 1 auto; position: static; max-height: none; } .pro-ui .sidebar::before { display: none; } .pro-ui .rankings { width: 100%; flex: 1 1 auto; position: static; max-height: none; } .pro-ui .kpi-row { grid-template-columns: repeat(2, 1fr); } .pro-ui .qa-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .pro-ui .kpi-row { grid-template-columns: repeat(2, 1fr); } .pro-ui .qa-grid { grid-template-columns: repeat(2, 1fr); } } /* ═══════════════════════════════════════════ 12. 用户管理面板 — 专业级 Admin UI ═══════════════════════════════════════════ */ /* 12.1 弹窗容器：毛玻璃 + 精致阴影 */ .pro-ui #userManageModal .user-manage-content { background: var(--surface-1); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset; max-width: 720px; width: 92%; overflow: hidden; } /* 12.2 标题栏：深色品牌条 */ .pro-ui #userManageModal .modal-header { background: linear-gradient(135deg, #1a1f36 0%, #252b48 100%); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: none; } .pro-ui #userManageModal .modal-header h2 { font-size: 16px; font-weight: 700; color: #e8eaf0; margin: 0; letter-spacing: .3px; } .pro-ui #userManageModal .modal-header .close { color: rgba(255,255,255,.5); font-size: 22px; transition: all .2s ease; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; } .pro-ui #userManageModal .modal-header .close:hover { color: #fff; background: rgba(255,255,255,.12); transform: rotate(90deg); } /* 12.3 内容区 */ .pro-ui #userManageModal .modal-body { padding: 20px 24px 24px; background: transparent; } /* 12.4 添加用户按钮：品牌主色 + 微动效 */ .pro-ui #userManageModal .class-save-btn { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; border: none; padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); box-shadow: 0 2px 8px rgba(90,95,156,.3); letter-spacing: .2px; } .pro-ui #userManageModal .class-save-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(90,95,156,.45); } .pro-ui #userManageModal .class-save-btn:active { transform: translateY(0); } /* 12.5 表格：无硬边框，行分隔线 + 悬浮高亮 */ .pro-ui #userManageModal .user-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; margin-top: 14px; } .pro-ui #userManageModal .user-table th { padding: 10px 14px; text-align: left; background: transparent; color: var(--text-3); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; border-bottom: 1px solid rgba(128,134,156,.15); } .pro-ui #userManageModal .user-table td { padding: 12px 14px; border-bottom: 1px solid rgba(128,134,156,.08); color: var(--text-1); vertical-align: middle; transition: background .15s ease; } /* 行悬浮 */ .pro-ui #userManageModal .user-table tbody tr { transition: background .15s ease; } .pro-ui #userManageModal .user-table tbody tr:hover td { background: rgba(90,95,156,.06); } .pro-ui #userManageModal .user-table tbody tr:last-child td { border-bottom: none; } /* 12.6 用户名：加粗 + 头像感 */ .pro-ui #userManageModal .user-table td:first-child { font-weight: 600; color: var(--text-1); font-size: 14px; } /* 12.7 角色徽章：精致胶囊 */ .pro-ui #userManageModal .user-table .role-badge { padding: 3px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; display: inline-block; } .pro-ui #userManageModal .user-table .role-admin { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; box-shadow: 0 1px 4px rgba(146,64,14,.12); } .pro-ui #userManageModal .user-table .role-teacher { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; box-shadow: 0 1px 4px rgba(6,95,70,.1); } /* 12.8 操作按钮：图标风格，统一底色+彩色图标/文字 */ .pro-ui #userManageModal .user-table .u-act-btn { border: 1px solid rgba(128,134,156,.18); cursor: pointer; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; margin-right: 6px; margin-bottom: 0; transition: all .2s ease; color: var(--text-2); background: rgba(255,255,255,.6); backdrop-filter: blur(4px); } .pro-ui #userManageModal .user-table .u-act-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.1); } .pro-ui #userManageModal .user-table .u-act-btn:last-child { margin-right: 0; } /* 编辑 — 蓝系 */ .pro-ui #userManageModal .user-table .u-edit { color: #2563eb; border-color: rgba(37,99,235,.25); background: rgba(37,99,235,.06); } .pro-ui #userManageModal .user-table .u-edit:hover { background: rgba(37,99,235,.14); border-color: rgba(37,99,235,.4); box-shadow: 0 3px 10px rgba(37,99,235,.18); } /* 改密 — 紫系 */ .pro-ui #userManageModal .user-table .u-chg-pw { color: #7c3aed; border-color: rgba(124,58,237,.25); background: rgba(124,58,237,.06); } .pro-ui #userManageModal .user-table .u-chg-pw:hover { background: rgba(124,58,237,.14); border-color: rgba(124,58,237,.4); box-shadow: 0 3px 10px rgba(124,58,237,.18); } /* 删除 — 红系 */ .pro-ui #userManageModal .user-table .u-del { color: #dc2626; border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.06); } .pro-ui #userManageModal .user-table .u-del:hover { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.4); box-shadow: 0 3px 10px rgba(220,38,38,.18); } /* 12.9 空状态 */ .pro-ui #userManageModal .user-table td[colspan] { text-align: center !important; padding: 40px 20px !important; color: var(--text-3) !important; font-size: 14px; } /* ═══════════════════════════════════════════ 13. 修改密码弹窗 — 专业风格 ═══════════════════════════════════════════ */ .pro-ui #changePwModal .modal-content { background: var(--surface-1); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.35); overflow: hidden; } .pro-ui #changePwModal .modal-header { background: linear-gradient(135deg, #2d1b4e 0%, #4c1d95 100%); padding: 16px 22px; border-bottom: none; } .pro-ui #changePwModal .modal-header h2 { font-size: 15px; font-weight: 700; color: #e8e0f0; margin: 0; } .pro-ui #changePwModal .modal-header .close { color: rgba(255,255,255,.5); font-size: 20px; transition: all .2s; } .pro-ui #changePwModal .modal-header .close:hover { color: #fff; background: rgba(255,255,255,.12); border-radius: 6px; } .pro-ui #changePwModal .modal-body { padding: 22px 24px 24px; background: transparent; } .pro-ui #changePwModal .form-group label { font-weight: 600; font-size: 13px; color: var(--text-1); margin-bottom: 6px; display: block; } .pro-ui #changePwModal .form-group input { width: 100%; padding: 10px 14px; border: 1.5px solid rgba(128,134,156,.2); border-radius: 10px; font-size: 14px; background: rgba(255,255,255,.7); transition: all .2s ease; box-sizing: border-box; outline: none; } .pro-ui #changePwModal .form-group input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(90,95,156,.15); background: #fff; } .pro-ui #changePwModal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .pro-ui #changePwModal .class-save-btn { background: linear-gradient(135deg, #6d28d9, #7c3aed); color: #fff; border: none; padding: 9px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease; box-shadow: 0 2px 8px rgba(124,58,237,.3); } .pro-ui #changePwModal .class-save-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,.42); } .pro-ui #changePwModal .class-cancel-btn { background: transparent; color: var(--text-2); border: 1.5px solid rgba(128,134,156,.25); padding: 9px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease; } .pro-ui #changePwModal .class-cancel-btn:hover { background: rgba(128,134,156,.06); border-color: rgba(128,134,156,.35); } .pro-ui #changePwError { border-radius: 10px !important; font-size: 13px !important; border-left: 3px solid #dc2626 !important; } /* ═══════════════════════════════════════════ 14. 用户添加/编辑弹窗 — 统一专业风格 ═══════════════════════════════════════════ */ .pro-ui #userEditModal .user-edit-content { background: var(--surface-1); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.35); max-width: 480px; width: 92%; overflow: hidden; } .pro-ui #userEditModal .modal-header { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); padding: 16px 22px; border-bottom: none; } .pro-ui #userEditModal .modal-header h2 { font-size: 15px; font-weight: 700; color: #e2e8f0; margin: 0; } .pro-ui #userEditModal .modal-header .close { color: rgba(255,255,255,.5); font-size: 20px; transition: all .2s; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; } .pro-ui #userEditModal .modal-header .close:hover { color: #fff; background: rgba(255,255,255,.12); transform: rotate(90deg); } .pro-ui #userEditModal .modal-body { padding: 20px 24px 24px; background: transparent; } .pro-ui #userEditModal .form-group { margin-bottom: 14px; } .pro-ui #userEditModal .form-group label { display: block; font-weight: 600; font-size: 13px; color: var(--text-1); margin-bottom: 6px; } .pro-ui #userEditModal .form-group input, .pro-ui #userEditModal .form-group select { width: 100%; padding: 10px 14px; border: 1.5px solid rgba(128,134,156,.2); border-radius: 10px; font-size: 14px; background: rgba(255,255,255,.7); transition: all .2s ease; box-sizing: border-box; outline: none; color: var(--text-1); } .pro-ui #userEditModal .form-group input:focus, .pro-ui #userEditModal .form-group select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(90,95,156,.15); background: #fff; } .pro-ui #userEditModal .user-class-picker { border-color: rgba(128,134,156,.18) !important; background: rgba(255,255,255,.4) !important; } .pro-ui #userEditModal .user-class-picker label { background: rgba(90,95,156,.08) !important; color: var(--text-1) !important; border: 1px solid rgba(90,95,156,.12) !important; transition: all .2s ease; } .pro-ui #userEditModal .user-class-picker label:hover { background: rgba(90,95,156,.16) !important; border-color: rgba(90,95,156,.25) !important; } .pro-ui #userEditModal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } /* ═══════════════════════════════════════════ 15. 管理员跨账号查看（管理视角） ═══════════════════════════════════════════ */ /* 15.1 顶部管理视角横幅（紧贴 fixed-header 之下） */ .pro-ui.admin-view-active { padding-top: 42px; } .pro-ui .admin-view-banner { position: fixed; top: 70px; left: 0; right: 0; z-index: 9998; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 20px; background: linear-gradient(90deg, #3b2f63, #5a3f9c); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.25); border-bottom: 1px solid rgba(255,255,255,.15); } .pro-ui .admin-view-banner-text { flex: 1; } .pro-ui .admin-view-exit { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: #fff; cursor: pointer; padding: 5px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; transition: all .2s ease; white-space: nowrap; } .pro-ui .admin-view-exit:hover { background: rgba(255,255,255,.3); } /* 15.2 顶栏退出按钮（管理视角时显示） */ .pro-ui .admin-view-exit-btn { background: linear-gradient(90deg, #5a3f9c, #7c5cd6); color: #fff; border: none; cursor: pointer; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px rgba(90,63,156,.3); transition: filter .2s ease; } .pro-ui .admin-view-exit-btn:hover { filter: brightness(1.08); } /* 15.3 班级下拉中的「全校班级」目录 */ .pro-ui .admin-class-directory-wrap { margin: 8px 0 4px; padding-top: 8px; border-top: 1px dashed rgba(128,134,156,.3); } .pro-ui .admin-dir-title { font-size: 12px; font-weight: 700; color: var(--text-2); padding: 4px 12px 6px; letter-spacing: .3px; } .pro-ui .admin-class-directory { max-height: 240px; overflow-y: auto; } .pro-ui .admin-dir-loading, .pro-ui .admin-dir-empty { font-size: 12px; color: var(--text-3); padding: 6px 12px; } .pro-ui .admin-dir-teacher { padding: 2px 0; } .pro-ui .admin-dir-teacher-name { font-size: 12px; font-weight: 700; color: var(--brand-600); padding: 5px 12px 2px; } .pro-ui .admin-dir-class { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 22px; cursor: pointer; font-size: 13px; color: var(--text-1); border-radius: 6px; transition: all .15s ease; } .pro-ui .admin-dir-class:hover { background: rgba(90,95,156,.12); padding-left: 26px; }