/* ============================================================================ 医院培训考试系统 · H5 端收敛层 h5/ui-refresh.css ---------------------------------------------------------------------------- 背景：H5 的样式全部写在 index.html 的内联 之后多引一行 ，纯加法。 回滚方式：删掉那一行即可。 注意：H5 有若干处用内联 style 写死的白色文字（在深底上），这些必须用 !important 才能压住，属有意为之。 ========================================================================== */ /* ========================================================================== 1 · 变量重定向：与管理端 tokens.css 同源 ========================================================================== */ :root { --blue: #0066CC; --blue-bg: #E8F1FC; --green: #157A3C; --green-bg: #E7F4EC; --red: #C4322B; --red-bg: #FBE9E7; --orange: #B45309; --orange-bg: #FBF0E0; --purple: #5A5A5F; --purple-bg: #F0F0F0; --bg: #F5F5F7; --surface: #FFFFFF; --border: #E0E0E0; --text: #1D1D1F; --text2: #5A5A5F; --text3: #5A5A5F; /* 原为一档浅灰，对白仅 2.6:1，小字不合规 */ --radius: 11px; /* 撤掉两套从未真正加载的 webfont，改系统栈：院内局域网无外网也不掉字 */ --font-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: var(--font-display); /* 夜间阅读模式（学习资料阅读器的「夜览」档）——独立暗色阶。 正文 #F5F5F7 对底 #1C1C1E 为 15.6:1；次级 #A1A1A6 为 6.7:1，均在 AA 之上。 */ --night-surface: #1C1C1E; --night-hairline: #38383A; --night-muted: #A1A1A6; } /* ========================================================================== 2 · 基础排版 ========================================================================== */ html, body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 14px; } /* ========================================================================== 3 · 登录页：深蓝渐变玻璃 -> 浅色羊皮纸 + 白卡 + 发丝线 ========================================================================== */ #login { background: #F5F5F7; background-image: none; } .login-wrap { background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 18px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 32px 24px 26px; } .login-logo-icon { border-radius: 11px; background: #0066CC; } .login-logo-icon img { border-radius: 11px; } .login-hosp { font-size: 21px; font-weight: 600; color: #1D1D1F; letter-spacing: -.011em; } .login-sub { font-size: 13px; color: #5A5A5F; } .field label { font-size: 13px; font-weight: 600; color: #5A5A5F; text-transform: none; letter-spacing: 0; } .field input { background: #FFFFFF; color: #1D1D1F; border: 1px solid #E0E0E0; border-radius: 8px; min-height: 44px; font-size: 17px; } .field input::placeholder { color: #7A7A7A; } .field input:focus { border-color: #0071E3; box-shadow: none; } /* 内联写死的白色文字：这些元素原本在深蓝底上，必须 !important 才能压住 */ #login .field button { color: #5A5A5F !important; font-size: 13px !important; } #login .field button:hover { color: #0066CC !important; } #login label[style] { color: #5A5A5F !important; font-size: 13px !important; } #login button[onclick*="showDiag"] { color: #5A5A5F !important; font-size: 13px !important; } #debug-panel div { background: #F0F0F0 !important; color: #5A5A5F !important; } .btn-login { background: #0066CC; background-image: none; color: #FFFFFF; border-radius: 9999px; font-size: 17px; font-weight: 600; letter-spacing: 0; min-height: 48px; padding: 13px; box-shadow: none; } .btn-login:active { background: #0058B0; } .btn-login:disabled { opacity: .4; } .err-tip { border: 1px solid #F0C9C4; border-radius: 8px; font-size: 13px; padding: 10px 14px; } /* ========================================================================== 4 · 顶栏 / 底栏 / 计时条：撤毛玻璃，改发丝线 ========================================================================== */ .top-bar, .overlay-top { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #E0E0E0; } .top-bar-title { font-size: 17px; font-weight: 600; } .top-bar-right { font-size: 13px; color: #5A5A5F; } .bottom-nav, .overlay-bottom, .exam-timer-bar { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid #E0E0E0; } .nav-btn { min-height: 44px; color: #5A5A5F; padding: 6px 0; } .nav-btn svg { width: 22px; height: 22px; } .nav-btn span { font-size: 13px; font-weight: 400; } .nav-btn.active { color: #0066CC; font-weight: 600; } .nav-badge { background: #C4322B; font-size: 13px; font-weight: 600; width: 18px; height: 18px; min-width: 18px; top: 2px; } .back-btn { background: #F0F0F0; border-radius: 50%; width: 44px; height: 44px; min-width: 44px; } /* ========================================================================== 5 · 卡片：发丝描边替阴影 ========================================================================== */ .card, .q-card, .result-hero, .menu-row, .content-text, .task-urgent, .rec-row { background: #FFFFFF; border: 1px solid #E0E0E0; box-shadow: none; } .card { border-radius: 18px; } .q-card, .menu-row { border-radius: 11px; } .content-text { border-radius: 11px; } .result-hero { border-radius: 18px; } .task-urgent { border-radius: 11px; } .card-title { font-size: 17px; font-weight: 600; } .card-meta, .rec-meta, .empty p { font-size: 13px; color: #5A5A5F; } .card-footer { border-top: 1px solid #F0F0F0; } /* ========================================================================== 6 · 徽标：圆角胶囊与 11px 小字一起收掉 ========================================================================== */ .bdg { border-radius: 5px; font-size: 13px; font-weight: 400; padding: 4px 9px; } .bdg-gray, .bdg-purple { background: #F0F0F0; color: #333333; } /* ========================================================================== 7 · 按钮 ========================================================================== */ .btn { border-radius: 11px; font-size: 17px; font-weight: 400; min-height: 44px; } .btn-sm { font-size: 13px; min-height: 36px; padding: 7px 13px; } .btn-primary { background: #0066CC; } .btn-primary:active { background: #0058B0; } .btn-secondary { background: #FFFFFF; border: 1px solid #E0E0E0; color: #1D1D1F; } .btn-warning { background: #FBF0E0; color: #B45309; } .btn-full { border-radius: 9999px; height: 48px; font-size: 17px; font-weight: 600; } /* ========================================================================== 8 · 首页 Hero：三色渐变 -> 实心强调色 ========================================================================== */ .home-hero { background: #0066CC; background-image: none; border-radius: 18px; box-shadow: none; } .home-hero-name { font-size: 21px; font-weight: 600; letter-spacing: -.011em; } .home-hero-sub { font-size: 13px; color: rgba(255, 255, 255, .82); } .home-kpi-box { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26); border-radius: 11px; backdrop-filter: none; -webkit-backdrop-filter: none; } .home-kpi-val { font-size: 21px; font-weight: 700; } .home-kpi-lbl { font-size: 13px; color: rgba(255, 255, 255, .8); } .home-section-title { color: #1D1D1F; font-size: 17px; font-weight: 600; } .home-section-title span { font-size: 13px; font-weight: 400; color: #0066CC; } /* ========================================================================== 9 · 列表行 / 分数胶囊 / 弱项标签 ========================================================================== */ .rec-row { border-bottom: 1px solid #F0F0F0; } .detail-item { background: #FFFFFF; border-bottom: 1px solid #F0F0F0; } .rec-title { font-size: 14px; font-weight: 600; } .rec-score-pill { font-size: 14px; font-weight: 600; } .weak-chip { background: #FBF0E0; border: 1px solid #E8D3AC; color: #B45309; border-radius: 5px; font-size: 13px; padding: 4px 9px; } /* ========================================================================== 10 · 考试 / 答题 / 结果 ========================================================================== */ .timer { font-size: 21px; font-weight: 600; color: #0066CC; } .prog-bar { background: #E0E0E0; border-radius: 9999px; } .prog-fill { border-radius: 9999px; background: #0066CC; } .q-type-tag { border-radius: 5px; font-size: 13px; font-weight: 600; } .q-text { font-size: 17px; font-weight: 400; } .opt { border: 1px solid #E0E0E0; border-radius: 8px; min-height: 44px; } .opt-key { font-size: 13px; } .fill-inp { border: 1px solid #E0E0E0; border-radius: 8px; min-height: 44px; font-size: 17px; } .fill-inp:focus { border-color: #0071E3; box-shadow: none; } .score-circle { font-size: 28px; font-weight: 700; } .study-info-bar { border-radius: 8px; font-size: 13px; } /* ========================================================================== 11 · 我的 ========================================================================== */ .profile-avatar { background: #0066CC; font-size: 24px; font-weight: 600; } .menu-label { font-size: 17px; font-weight: 400; } .menu-icon { border-radius: 8px; } /* ========================================================================== 12 · 弹层 / Toast / 加载 / 空态 ========================================================================== */ #sheet-overlay { background: rgba(0, 0, 0, .32); backdrop-filter: none; -webkit-backdrop-filter: none; } .sheet { border-radius: 18px 18px 0 0; } #toast { background: #1D1D1F; border-radius: 9999px; font-size: 14px; } .empty h3 { font-size: 17px; color: #333333; } .empty svg { width: 40px; height: 40px; } /* ========================================================================== 13 · AI 讲义排版：6 色彩虹 -> 墨 + 唯一强调色 + 三个语义色 ========================================================================== */ .h5-ai-outline { background: #FFFFFF; border-color: #E0E0E0; } .h5-ai-outline-label { font-size: 14px; font-weight: 600; color: #0066CC; } .h5-ai-outline-sub { font-size: 13px; color: #5A5A5F; } .h5-ai-outline-article .ai-training-article { font-size: 17px; line-height: 1.8; color: #1D1D1F; } .h5-ai-outline-article h1 { font-size: 21px; line-height: 1.3; color: #1D1D1F; } .h5-ai-outline-article h2 { font-size: 17px; color: #1D1D1F; border-left: 3px solid #0066CC; padding-left: 11px; } .h5-ai-outline-article h3 { font-size: 17px; color: #1D1D1F; } .h5-ai-outline-article strong, .h5-ai-outline-article .ai-key { color: #1D1D1F; font-weight: 600; } .h5-ai-outline-article .ai-lead { font-size: 17px; color: #333333; background: #F5F5F7; border-radius: 8px; } .h5-ai-outline-article blockquote, .h5-ai-outline-article .ai-tip, .h5-ai-outline-article .ai-note { background: #E8F1FC; border-left: 3px solid #0066CC; border-radius: 8px; } .h5-ai-outline-article .ai-warning { background: #FBF0E0; border-left: 3px solid #B45309; border-radius: 8px; } .h5-ai-outline-article .ai-review { background: #E7F4EC; border-left: 3px solid #157A3C; border-radius: 8px; } /* ========================================================================== 14 · 可访问性 ========================================================================== */ :focus-visible { outline: 2px solid #0071E3; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }