/* 微信内 H5 · 移动端优先。绿色跟微信生态一致，患者零陌生感。 * * ★ 版式定稿（店主 2026-08-13 定：以最佳美观性为准，字号与版式固定， * 不响应终端字体设置）。三层防线： * 1. 锁字号：CSS text-size-adjust + index.html 里的微信 JSBridge 复位 * 2. 字号层级用 em 表达（基准 15px），改 body 一个数字即可全站等比调整 * 3. 兜底弹性：万一某端锁不住，宽度用 em、每行可 wrap，只会整体变大不会错位 * * 字号层级（× 15px 基准）： * 1.60em 24px 日期数字（患者卡最醒目的锚点） * 1.27em 19px 诊所名 * 1.13em 17px 卡片标题 / 预约时间 / 表单输入 * 1.07em 16px 就诊人姓名 / 按钮 / 日期条 * 1.00em 15px 员工端患者姓名 / 页签 * 0.93em 14px 事项 / 表格 * 0.87em 13px 医生名 / 提示 / 底部导航 * 0.80em 12px 元信息（电话、最近就诊、院区、备注） * 0.73em 11px 状态徽章 / 病历号 / 结束时间 */ :root { --sunken: #f2f5fa; /* 卡片里再凹一层的底（备注框） */ /* 字标专用的圆体（店主 2026-08-16 要求）。 ui-rounded → 苹果的 SF Pro Rounded（管拉丁字母）；Yuanti SC → 苹果的圆体-简（管中文）。 ⚠️ 安卓系统**没有**圆体中文字库，会自然退回下面的常规无衬线 —— 这是已知差异， 不影响可读性，只是安卓上字标不圆。要全端一致就得内嵌字体子集（未做）。 */ --font-round: ui-rounded, 'Yuanti SC', 'Yuanti TC', 'Hiragino Maru Gothic ProN', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; /* 顶栏专用：底色 + 灰字。灰字是店主定的（百搭），所以顶栏必须是浅底。 */ /* ⚠️ 顶栏底色要比页面底色明显深一档，否则那条分界线两边像同一块。 店主 2026-08-16 **三次**反馈"太浅" ⇒ #e6ecf7 → #dee7f4 → #d3e0f2 → **#c9dbf3** （亮度 87.6% → 79.2% → 73.6% → 69.6%）。 最后这一档同时把**饱和度从 54% 提到 65%** —— 饱和度不影响对比度， 却实实在在让它"看起来更蓝更深"，是这条线内唯一还能榨出来的余量。 （同理：绿泡泡看着分明靠的就是饱和度，它亮度差只有 2.3%。） 🔴 **#c9dbf3 是硬底线，到此为止**：顶栏文字是店主定死的 logo 灰 #5f5f5f， 这个底色下对比度 **4.53**，只比 4.5 高 0.03。再深一点点， 「Focus on Orthodontic」「预约记录查询」就不合格了。 **要更深必须先动那个灰** —— 而那是 logo 的颜色，得店主点头。 */ --top-bg: #c9dbf3; --top-ink: #5f5f5f; /* ＝原始 logo 的灰，全站唯一的 logo 色 */ /* ⚠️ 身份行（「崔倩倩 · 全院预约」）原来是 #7c8698，在旧底色上对比度只有 2.94， **本来就不达标**。底色每加深一档它就得跟着压深一档： #7c8698(2.94❌) → #55637a(4.55✅ 于 #d3e0f2) → **#4b586d**(5.11✅ 于 #c9dbf3)。 ⚠️ 改 --top-bg 时**别忘了回来核这一行** —— 它比 logo 灰更容易先掉线。 */ --top-sub-ink: #4b586d; /* ── 语义色：绿=成功/已确认，橙=待办，红=危险。 ⚠️ **不随主题变**（钢铁侠除外，深色底下要提亮才看得清）。 否则"已确认"在紫葡萄下变成紫的，徽标就不再是徽标了。 */ --green: #07c160; --green-dark: #06ad56; --ok-bg: #e8f9ef; /* 成功徽标底 */ --warn: #ff9f1a; --warn-bg: #fff7e8; --danger: #fa5151; --info: #2563a8; /* 电话已确认 */ --info-bg: #eaf2ff; /* ── 品牌 accent：顶栏/主按钮/选中态/链接。**由 Palette 主题换** （店主 2026-08-15：员工可自选四套皮肤，患者固定「爱联洋」）。 */ --brand: #0d3f8f; /* 取自 logo 的深蓝 */ --brand-dark: #0a3273; --brand-soft: #e6ecf7; --on-brand: #ffffff; /* 压在品牌色上的字色（钢铁侠是浅底深字，要翻过来） */ /* ── 界面底色：钢铁侠会整套换成深色 */ /* 页面底色跟着顶栏一起加深（店主 2026-08-16：两种蓝都再深一点）。 87.9% → 81.8%；白卡片压在上面对比 1.21，浮得起来。 */ --bg: #e3eaf5; --card: #ffffff; --ink: #0f1a2e; --sub: #6b7891; --line: #dde3ef; --mask: rgba(0, 0, 0, .45); --toast: rgba(17, 17, 17, .82); --shadow: 0 1px 3px rgba(0, 0, 0, .05); } * { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; } [v-cloak] { display: none; } html, body { height: 100%; } /* ★ 字号锁定（店主 2026-08-13 定）：版式按设计稿固定，不随终端字体设置变化。 !important 是必要的 —— 部分安卓 WebView 会注入自己的 text-size-adjust。 配套的 JS 复位在 index.html 里（微信安卓只能靠 JSBridge 关）。 */ html, body, .foot, .sheet, .toast { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; /* ← 全站字号基准，改这一个数字全站等比缩放 */ line-height: 1.5; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; /* 长串（病历号/备注）不撑破容器 */ } #app { max-width: 560px; margin: 0 auto; min-height: 100%; padding-bottom: 6em; } /* ── 顶栏 ── ⚠️ 店主 2026-08-16：logo 与两行文字**一律用灰色**（＝原始 logo 的 #5f5f5f）， 理由是"和每个颜色都百搭"。灰字必须有浅底才读得清 ⇒ 顶栏从"饱和色块" 改成"**浅色调 + 品牌色下划线**"：底色是该主题的浅色调（还是本主题的色系）， 下面一道 2px 品牌色作为主题标识。钢铁侠反过来：深底 + 浅灰字。 */ .top { --logo-h: 2.7em; /* 顶栏所有尺寸的基准，改这一个值整块等比缩放。 ⚠️ 必须声明在 .top 上：logo 与右侧标题是**兄弟**， 声明在 .brandbox 上的话标题读不到，calc() 会静默失效。 */ position: relative; padding: 1.35em 1.2em 1.15em; background: var(--top-bg); color: var(--top-ink); border-bottom: 2px solid var(--brand); } /* 第一行：左 logo ——连接线—— 右标题（照原稿图1）。 ⚠️ 原稿是 8:1 的宽幅横版，手机顶栏塞不下同样的比例 ⇒ 只保留它的**结构**（左标识／细线连接／右标题双语），尺寸按手机重排。 */ .top-row { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: .5em; min-width: 0; } /* 第二行：身份 + 版本切换。切换按钮从第一行挪下来 —— 放第一行会跟右侧标题抢位置，窄屏必挤爆。 */ .top-sub-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .5em; justify-content: space-between; margin-top: .7em; } .switcher { border: 1px solid var(--brand); background: transparent; color: var(--brand-dark); border-radius: 999px; padding: .3em .85em; font-size: .8em; flex: none; cursor: pointer; } /* ── 顶栏品牌区 ── 图标用店主给的**原始 PNG** 当 mask（只取 alpha 当模具，颜色由 background-color 给） ⇒ **形状是原图的，一个像素都没动**，同时还能跟着主题换色。 */ /* 三件套的比例照原稿实测（量的是 11588×2555 那张原图，以图标高为 1）： 图标高 1.000 ／ 联洋矫正 字高 .674 ／ 标语字高 .202 两行间距 .124 ／ 图标↔文字 .142 .674 + .124 + .202 = 1.000 ⇒ **文字块与图标等高、上下齐平** 两行**等宽**（实测比值 1.000）—— 标语是靠字距拉开去对齐上一行的。 ⇒ 下面全部用 --logo-h 换算，改大小只改这一个值，比例不会跑。 */ .brandbox { flex: none; display: flex; align-items: stretch; min-width: 0; gap: calc(var(--logo-h) * .142); } .mark { flex: none; width: var(--logo-h); height: var(--logo-h); background-color: currentColor; -webkit-mask: url(/mark.png) no-repeat center / contain; mask: url(/mark.png) no-repeat center / contain; } .wordmark { display: flex; flex-direction: column; justify-content: space-between; height: var(--logo-h); min-width: 0; } .clinic { font-family: var(--font-round); font-size: calc(var(--logo-h) * .66); font-weight: 600; line-height: .9; letter-spacing: .10em; white-space: nowrap; } /* 字距是**对着字标宽度调出来的**（原稿两行等宽）。字标现在是「联洋矫正」四个字； 若以后改中文字数，这个值要重新对一次 —— 量法见 frontend/README.md。 */ .tagline { font-family: var(--font-round); font-size: calc(var(--logo-h) * .305); line-height: 1; letter-spacing: 0; white-space: nowrap; opacity: .95; } /* 与卡片里的患者姓名 .pname 同号（店主 2026-08-16 要求放大）*/ .top-sub { font-size: 1em; color: var(--top-sub-ink); margin-top: .75em; } /* ── 连接线（纯装饰，照原稿）── 结构：● ——弹性横线—— 折角。折角用固定宽度 SVG，横线用 flex 伸缩 ⇒ 窄屏时只有横线变短，折角不会被拉扁。 */ /* 折角要**正好**从横线抬到右侧标题的那道下划线上，所以高度用 --logo-h 换算， 和标题块的行高绑在一起（两边都由 --logo-h 驱动，缩放时不会脱节）。 */ .connector { flex: 1 1 auto; min-width: .8em; display: flex; align-items: flex-end; gap: 0; padding-bottom: calc(var(--logo-h) * .045); opacity: .55; } .c-dot { flex: none; width: .3em; height: .3em; border-radius: 50%; background: currentColor; margin-bottom: -.11em; } .c-line { flex: 1 1 auto; min-width: 0; height: 1px; background: currentColor; } .c-step { flex: none; width: calc(var(--logo-h) * .3); height: calc(var(--logo-h) * .245); } .c-step path { fill: none; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; } /* ── 右侧页面标题 ── 中文在上、细线、英文在下 —— 线就是连接线折上来的那一段（用 border-bottom 接住）。 */ .pagetitle { flex: 0 1 auto; min-width: 0; text-align: right; } .pt-cn { font-family: var(--font-round); font-size: calc(var(--logo-h) * .44); letter-spacing: .13em; line-height: 1.15; white-space: nowrap; padding: 0 0 .25em .2em; border-bottom: 1px solid currentColor; } .pt-en { font-family: var(--font-round); font-size: calc(var(--logo-h) * .2); letter-spacing: .04em; line-height: 1.15; white-space: nowrap; margin-top: .3em; opacity: .85; overflow: hidden; text-overflow: ellipsis; } /* ── 底栏 tabbar ── 固定在底部，留出 iPhone 底部横条的安全距离。 */ /* 钉在屏幕底部（不是 sticky —— 内容短的时候 sticky 会浮在半空）。 #app 是 max-width:560 的左对齐容器，所以这里用同样的宽度约束跟着它。 */ .tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 40; width: 100%; max-width: 560px; /* 跟 #app 一样居中，宽屏下才不会歪到左边 */ display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); } /* 店主 2026-08-16：底栏**只留文字，不要图标**。 ⚠️ 图标撑掉了 ⇒ 高度必须用 padding 补回来。第一版只给 .78em，实测整条 只有 37px 高，**低于 44px 的触控下限**，拇指容易点空。现在 1.15em/1.2em 实测 **48px**（含 border）—— 过了 44px 这条线。 ⚠️ 改字号或内边距后**回来量一遍** `.tabbar` 的实际高度，别只看着顺眼。 */ .tabitem { flex: 1 1 0; position: relative; border: 0; background: transparent; color: var(--sub); padding: 1.15em .2em 1.2em; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; } .tabitem.on { color: var(--brand-dark); font-weight: 600; } .ti-txt { font-size: .95em; white-space: nowrap; line-height: 1.25; } /* 底栏**不设红点**（店主 2026-08-16）—— 原来那个接的是预约改期申请队列， 患者端入口已撤 ⇒ 永远是空的、永远不亮。待办提示统一走员工页顶部的横条。 */ /* 页内次要动作（原来挤在底栏的那些） */ .inpage-links { text-align: center; padding: 1em 0 .2em; color: var(--sub); font-size: .87em; } /* ⚠️ 分隔点不要用 --line：那是描边色，压在 --bg 上几乎看不见（踩过） */ .inpage-links .dot { margin: 0 .55em; color: var(--sub); opacity: .5; } .demo-back { display: block; text-align: center; padding: .8em 0; color: var(--brand-dark); text-decoration: none; font-size: .87em; } /* ── Palette 选项行 ── 每行自己带 .t-，所以色块直接用该主题的 --brand，所见即所得。 */ .themerow { display: flex; align-items: center; gap: .7em; width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 12px; padding: .7em .8em; margin-bottom: .6em; cursor: pointer; } .themerow.on { border-color: var(--brand); background: var(--brand-soft); } /* 色块：在品牌色上叠一层半透明白调浅（店主 2026-08-16：原来太浓）。 叠白而不是另配一组浅色变量 —— 四套主题自动跟着走，不用维护第二套色值。 上浅下略深，保留一点球面感，不至于变成一块平贴纸。 */ .swatch { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: linear-gradient(140deg, rgba(255,255,255,.62), rgba(255,255,255,.34)), linear-gradient(140deg, var(--brand), var(--brand-dark)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); } .tname { font-weight: 600; } .tick { margin-left: auto; color: var(--brand-dark); font-weight: 700; } /* ── 到院方式 ── */ .arrive-card .arrive-row { display: flex; flex-wrap: wrap; gap: .3em .7em; padding: .7em 0; border-bottom: 1px solid var(--line); } .arrive-card .arrive-row:last-of-type { border-bottom: 0; } .arr-k { flex: none; color: var(--sub); white-space: nowrap; } .arr-v { flex: 1 1 12em; line-height: 1.7; } .arr-v a { color: var(--brand-dark); text-decoration: none; white-space: nowrap; } .arrive-tip { margin-top: .8em; } .switcher { border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); color: #fff; border-radius: 999px; padding: .35em .9em; font-size: .8em; flex: none; } /* ── 通用 ── */ .card { background: var(--card); border-radius: 12px; margin: .8em; padding: 1.2em; box-shadow: 0 1px 4px rgba(0, 0, 0, .04); } .card h2 { font-size: 1.13em; margin-bottom: .4em; } .hint { color: var(--sub); font-size: .87em; line-height: 1.6; } .hint.dim { font-size: .8em; } .hint a { color: var(--brand); text-decoration: none; } .center-page { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .8em; padding: 1.6em; text-align: center; } .center-block { display: flex; justify-content: center; padding: 2.6em 0; } .big-icon { font-size: 2.9em; line-height: 1; } .spinner { width: 1.7em; height: 1.7em; border: .2em solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; flex: none; } @keyframes spin { to { transform: rotate(360deg); } } /* ── 表单 ── */ .field { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .6em; border-bottom: 1px solid var(--line); padding: .85em 0; margin-top: .15em; } .field span { flex: 0 0 auto; min-width: 4.2em; color: var(--sub); font-size: .93em; } .field input { flex: 1 1 9em; min-width: 0; border: 0; outline: 0; font-size: 1.07em; background: transparent; color: var(--ink); } .btn { display: block; width: 100%; margin-top: .9em; padding: .8em; border: 0; border-radius: 8px; font-size: 1.07em; cursor: pointer; line-height: 1.35; } .btn.primary { background: var(--brand); color: var(--on-brand); } .btn.primary:disabled { opacity: .5; } .btn.plain { background: transparent; color: var(--sub); font-size: .93em; margin-top: .4em; } .btn.tiny { width: auto; margin: 0; padding: .35em .8em; font-size: .8em; border-radius: 6px; } .btn.danger { background: #fff1f0; color: var(--danger); } .bind-card { margin-top: 1.3em; } /* ── 选就诊人 / 就诊人管理 ── */ .pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35em .7em; padding: .85em .15em; border-bottom: 1px solid var(--line); } .pick-row input { width: 1.2em; height: 1.2em; accent-color: var(--brand); flex: none; } .pick-name { font-size: 1.07em; font-weight: 500; } .pick-cno { color: var(--sub); font-size: .8em; margin-left: auto; } /* ── 筛选与页签 ── */ .chips { display: flex; gap: .5em; padding: .8em .8em 0; flex-wrap: wrap; } .chip { border: 1px solid var(--line); background: var(--card); color: var(--sub); border-radius: 999px; padding: .4em .9em; font-size: .87em; } .chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 500; } .tabs { display: flex; margin: .8em .8em 0; background: var(--card); border-radius: 10px; padding: .27em; } .tab { flex: 1 1 0; border: 0; background: transparent; padding: .6em .3em; font-size: 1em; color: var(--sub); border-radius: 8px; line-height: 1.35; } .tab.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; } /* ── 预约卡片 ── */ .appt { display: flex; flex-wrap: nowrap; gap: .9em; padding: .95em 1.05em; } .appt-date { flex: 0 0 auto; min-width: 4.3em; text-align: center; border-right: 1px solid var(--line); padding-right: .75em; } .appt-date .m { font-size: .8em; color: var(--sub); line-height: 1.3; } .appt-date .d { font-size: 1.6em; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; } .appt-date .w { font-size: .73em; color: var(--sub); margin-top: .15em; line-height: 1.3; } .appt-body { flex: 1 1 auto; min-width: 0; } .appt-line1 { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .6em; justify-content: space-between; } .time { font-size: 1.13em; font-weight: 600; font-variant-numeric: tabular-nums; } .badge { font-size: .73em; padding: .15em .6em; border-radius: 999px; flex: none; line-height: 1.5; } .badge.ok { background: var(--ok-bg); color: var(--green-dark); } /* 语义绿 */ .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.dim { background: #f2f3f5; color: var(--sub); } /* 电话确认（前台在 HIS 勾的「手动确认」）—— 用蓝色跟微信确认的绿区分开， 患者一眼能看出"这条是打电话定的"还是"我自己在微信点的" */ .badge.info { background: var(--info-bg); color: var(--info); } .appt-line2 { margin-top: .4em; display: flex; gap: .2em .7em; flex-wrap: wrap; align-items: baseline; } .subject { font-size: .93em; } .doctor { font-size: .87em; color: var(--sub); } /* 院区标签（双院区 2026-08-17）：只在一屏里确实有两个院区时才出现，见 app.js 的 multiSite。 用描边不用色块 —— 状态徽标已经占了"实心色块"这个视觉位置，院区是另一个维度， 两者抢同一种画法会让人以为是同类信息。nowrap 是版式硬规矩（值不许拦腰断开）。 */ .sitetag { font-size: .78em; color: var(--brand-dark); background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 999px; padding: .05em .55em; white-space: nowrap; line-height: 1.6; } /* 院区筛选独占一行（店主 2026-08-18）：和医生是两个维度，同一行会被当成一串同类。 分隔线那套已经不需要了 —— 换行本身就是最清楚的分隔。 */ .chip-site.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); } .appt-line3 { margin-top: .3em; display: flex; flex-wrap: wrap; gap: .2em .7em; font-size: .8em; color: var(--sub); align-items: baseline; } /* ★ 每个"值"整体换行，不被拦腰截断：日期不会断成 2026- / 07-15，电话不会断成两截。 容器本身能换行，所以子项 nowrap 只会让它整块移到下一行，不会溢出。 */ .appt-line2 > *, .appt-line3 > *, .tel, .pcno, .time, .backtoday { white-space: nowrap; } .notice { margin: .3em 1.1em 0; color: var(--sub); font-size: .8em; line-height: 1.6; } .empty { text-align: center; padding: 3em 1.6em; display: flex; flex-direction: column; gap: .7em; align-items: center; } /* ── 底部（可换行；分隔点在换行时会错位，故隐藏，用间距代替）── */ /* ── 员工版 ── */ .datebar { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: .8em .8em 0; background: var(--card); border-radius: 10px; padding: .4em; } .datebtn { flex: 0 0 auto; min-width: 2.8em; padding: .5em 0; border: 0; background: transparent; color: var(--sub); font-size: .93em; } .dateshow { flex: 1 1 8em; text-align: center; font-size: 1.07em; font-weight: 600; font-variant-numeric: tabular-nums; } .dateshow .dim2 { font-weight: 400; color: var(--sub); font-size: .87em; } .backtoday { display: inline-block; margin-left: .5em; font-size: .73em; color: var(--brand-dark); background: var(--ok-bg); border-radius: 999px; padding: .15em .6em; font-weight: 400; } .appt.slim { padding: .8em .95em; gap: .8em; } .stime { flex: 0 0 auto; min-width: 4.6em; text-align: center; border-right: 1px solid var(--line); padding-right: .65em; display: flex; flex-direction: column; align-items: center; } /* 「历史就诊」按品牌色走（各角色自动跟着变），描边胶囊而不是实心 —— 它是辅助动作，不该比卡片里的患者姓名更抢眼。 */ .histbtn { margin-top: .5em; border: 1px solid var(--brand); background: transparent; color: var(--brand-dark); border-radius: 999px; padding: .25em .6em; font-size: .73em; line-height: 1.4; white-space: nowrap; cursor: pointer; } .histbtn:active { background: var(--brand-soft); } .stime .t1 { font-size: 1.07em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; } .stime .t2 { font-size: .73em; color: var(--sub); margin-top: .15em; line-height: 1.3; } .pname { font-size: 1em; font-weight: 600; } .pcno { font-size: .73em; color: var(--sub); font-weight: 400; margin-left: .3em; } .dim2 { color: var(--sub); } .demo-back { color: var(--brand-dark); text-decoration: none; } /* 收入卡：字号已锁定，定死三列（今日/本月/今年 并排对比最直观）。 金额超百万自动转"万"（app.js fmtWan），保证三列都装得下。 */ .rev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin: .8em .8em 0; } .rev-cards .rev-card { margin: 0; padding: .8em .35em; text-align: center; } .rk { font-size: .8em; color: var(--sub); } .rv { font-size: 1.07em; font-weight: 700; margin-top: .25em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.3; } .rs { font-size: .73em; color: var(--sub); margin-top: .2em; line-height: 1.4; } /* 表格按内容分列（fixed 布局会把金额列截断成 "¥10,695,294."）； 金额取整后长度可控，各列 nowrap 保证数字不被拦腰断开。 */ .rtable { width: 100%; border-collapse: collapse; font-size: .93em; table-layout: auto; } .rtable td { padding: .55em .2em; border-bottom: 1px solid var(--line); vertical-align: baseline; white-space: nowrap; } .rtable td:first-child { width: 1%; } /* 日期列按内容收窄，把空间让给金额 */ .rtable tr:last-child td { border-bottom: 0; } .rtable .num { text-align: right; font-variant-numeric: tabular-nums; } .rtable .tf { color: var(--danger); font-size: .87em; } /* ── 申请与弹层 ── */ .appt-actions { margin-top: .55em; display: flex; flex-wrap: wrap; gap: .35em .95em; align-items: center; } .alink { border: 0; background: transparent; color: var(--brand-dark); font-size: .87em; padding: 0; cursor: pointer; } .alink.danger { color: var(--danger); } .mask { position: fixed; inset: 0; background: var(--mask); z-index: 50; display: flex; align-items: flex-end; justify-content: center; } .sheet { background: var(--card); width: 100%; max-width: 560px; border-radius: 16px 16px 0 0; padding: 1.3em 1.2em calc(1.3em + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; } .sheet h2 { font-size: 1.13em; margin-bottom: .4em; } .memo { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: .65em; font-size: 1em; margin-top: .8em; resize: none; font-family: inherit; } .req-row { padding: .8em .15em; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .25em; align-items: flex-start; } .req-line1 { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; align-items: center; gap: .25em .6em; } .req-card { display: flex; flex-direction: column; gap: .35em; padding: .95em 1.05em; } .req-actions { display: flex; gap: .5em; margin-top: .4em; flex-wrap: wrap; } .stale { margin: .65em .95em 0; font-size: .8em; color: var(--warn); line-height: 1.5; } .tel { color: var(--brand-dark); text-decoration: none; font-size: .87em; } /* 员工时段快选用 .chips（原生 input[type=date] 各端宽度差异极大，已弃用）*/ .dayhead { margin: .95em 1.05em .15em; font-size: .87em; font-weight: 600; color: var(--sub); } .memo-line { margin-top: .35em; font-size: .8em; color: var(--sub); background: var(--sunken); border-radius: 6px; padding: .35em .55em; line-height: 1.5; overflow-wrap: anywhere; } /* ── Toast ── */ .toast { position: fixed; top: 18%; left: 50%; transform: translateX(-50%); background: var(--toast); color: #fff; padding: .65em 1.2em; border-radius: 8px; font-size: .93em; max-width: 80vw; text-align: center; z-index: 99; line-height: 1.5; } .toast.err { background: rgba(200, 42, 42, .92); } /* ══ Palette 四主题（店主 2026-08-15 定，2026-08-16 加大配色范围）══════ ⚠️ 这套**取代**了原来按角色自动配色的做法：员工自选、云端按 openid 记住； **患者固定「爱联洋」**。 ⚠️ 店主 2026-08-16：前三套原来只换 accent（顶栏/按钮），"改变的元素太少"， 现在**整套色系一起换** —— 底色、卡片、描边、文字都带上同一个色相， 像钢铁侠那样是一整套皮肤，而不是换个主题色而已。 每套都要给全下面这批变量，漏一个就会在该主题下露出别人的颜色。 */ /* 绿泡泡 —— 微信绿 */ .t-green { /* ⚠️ sub-ink 由 #6d8579 压到 #5e7369（2026-08-20）：原来对比度 3.53，不到 WCAG AA 的 4.5。 色相饱和度都没动，只降/提一档明度。四套主题的这两个对比度现在有断言盯着， 改 --top-bg 时会连带把它算一遍 —— 它比 logo 灰更容易先掉线。 */ --top-bg: #e3f6ea; --top-ink: #5f5f5f; --top-sub-ink: #5e7369; --brand: #07c160; --brand-dark: #059a4c; --brand-soft: #e3f6ea; --bg: #eef6f1; --card: #ffffff; --sunken: #f1f8f4; --ink: #12241a; --sub: #6d8579; --line: #dceae2; --shadow: 0 1px 3px rgba(6, 122, 60, .07); } /* 爱联洋 —— 取自 logo 的深蓝（患者固定这套）*/ .t-liany { /* ⚠️ 这三个值必须与上面 :root 的一致（患者固定这套，走的是 :root）。 改一处忘了另一处，患者端和员工选爱联洋会是两个颜色。 */ --top-bg: #c9dbf3; --top-ink: #5f5f5f; --top-sub-ink: #4b586d; --brand: #0d3f8f; --brand-dark: #0a3273; --brand-soft: #e6ecf7; --bg: #e3eaf5; --card: #ffffff; --sunken: #f2f5fa; --ink: #0f1a2e; --sub: #6b7891; --line: #dde3ef; --shadow: 0 1px 3px rgba(13, 63, 143, .08); } /* 紫葡萄 */ .t-grape { /* ⚠️ sub-ink 由 #7c7190 压到 #6b617c（2026-08-20）：原来对比度 3.57，不到 WCAG AA 的 4.5。 色相饱和度都没动，只降/提一档明度。四套主题的这两个对比度现在有断言盯着， 改 --top-bg 时会连带把它算一遍 —— 它比 logo 灰更容易先掉线。 */ --top-bg: #e9e0f8; --top-ink: #5f5f5f; --top-sub-ink: #6b617c; --brand: #722ed1; --brand-dark: #5b21b6; --brand-soft: #efe7fb; --bg: #f3eefb; --card: #ffffff; --sunken: #f7f3fd; --ink: #1e1330; --sub: #7c7190; --line: #e6dcf6; --shadow: 0 1px 3px rgba(91, 33, 182, .08); } /* 钢铁侠 —— 灰黑，X 那种冷调深色。唯一的深色主题。 ⚠️ 深色下三件事必须一起改，漏一件就会出现"白底黑字块"或看不见的文字： ① 底色/卡片/文字/描边 全反过来 ② 语义色要**提亮**（#07c160 在深底上发闷，徽标底要用半透明而不是浅色块） ③ --on-brand 翻成深色（品牌色在这套里是浅灰，压深字才看得清） */ .t-iron { /* ⚠️ sub-ink 由 #71767b 压到 #7b8186（2026-08-20）：原来对比度 3.88，不到 WCAG AA 的 4.5。 色相饱和度都没动，只降/提一档明度。四套主题的这两个对比度现在有断言盯着， 改 --top-bg 时会连带把它算一遍 —— 它比 logo 灰更容易先掉线。 */ --top-bg: #16181c; --top-ink: #b9bdc1; --top-sub-ink: #7b8186; --brand: #e7e9ea; --brand-dark: #ffffff; --brand-soft: #202327; --on-brand: #0f1419; --bg: #000000; --card: #16181c; --sunken: #202327; --ink: #e7e9ea; --sub: #71767b; --line: #2f3336; --mask: rgba(0, 0, 0, .72); --toast: rgba(231, 233, 234, .92); --shadow: 0 1px 3px rgba(0, 0, 0, .5); --green: #00ba7c; --green-dark: #00ba7c; --ok-bg: rgba(0, 186, 124, .16); --warn: #ffd400; --warn-bg: rgba(255, 212, 0, .14); --danger: #f4212e; --info: #6fb3ff; --info-bg: rgba(111, 179, 255, .14); } .t-iron .toast { color: #0f1419; } /* 患者历史（员工代查）：一次就诊两行 —— 上行"日期 时间 …… 状态"、下行"事项 医生"。 为什么不挤成一行：医生名长短差很多（"张莹莹" vs "郭天环 上级：晁洋"）， 挤一行时徽标时而换行时而不换，整列看着参差不齐。拆两行就稳定了。 老病人上百条 ⇒ 列表自己滚，不把弹层撑到屏幕外（版式硬规矩 3）。 */ .hist-list { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .hist-row { padding: .6em 0; border-bottom: 1px solid var(--line); font-size: .93em; } .hist-row:last-child { border-bottom: 0; } .hist-top { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .6em; } .hist-top .badge { margin-left: auto; } .hist-bot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .6em; margin-top: .15em; } .hist-d { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); } .hist-t { white-space: nowrap; color: var(--sub); font-size: .93em; } .hist-s { color: var(--ink); } .hist-y { color: var(--sub); font-size: .93em; } .sheet .hist-list + .btn { margin-top: 1em; } /* 待审批横条：管理员一进员工页就该看见，所以给它品牌色描边而不是灰底 */ .pending-bar { display: flex; align-items: center; gap: .5em; width: 100%; border: 1px solid var(--brand); background: var(--brand-soft); color: var(--ink); border-radius: 12px; padding: .7em .9em; margin-bottom: .8em; font-size: .93em; cursor: pointer; text-align: left; } .pb-dot { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--danger); } .pb-go { margin-left: auto; color: var(--brand-dark); white-space: nowrap; } /* 窄屏兜底（版式硬规矩：宁可少显示，也不能横向溢出）。 ⚠️ 顶栏所有尺寸都挂在 --logo-h 上 ⇒ **只调这一个值**整块等比缩小， 比逐个元素改字号可靠得多（改漏一个就会溢出，而且溢出是看不见的： 元素本身没超框，是 nowrap 的文字把 scrollWidth 撑大了）。 */ @media (max-width: 374px) { .top { --logo-h: 2.3em; } .pt-en { display: none; } /* 英文最长，先收它 */ .connector { min-width: .4em; } } @media (max-width: 299px) { /* 极窄：右侧标题整块让掉，保住 logo */ .connector, .pagetitle { display: none; } } /* 最后一道保险：真挤不下时省略号，绝不撑出横向滚动条 */ .pt-cn { overflow: hidden; text-overflow: ellipsis; } /* 审批页顶部那条操作标准（店主 2026-08-18 逐字给的）。 放在列表**上方**而不是每张卡里 —— 它是一条通用规矩，不是某一条申请的属性； 每张卡都印一遍是噪音，印在最上面才像"作业指导"。 */ .req-standard { margin: .2em .3em .8em; padding: .6em .8em; background: var(--warn-bg); border-radius: 8px; line-height: 1.7; } /* 到院路线图（店主 2026-08-18 给的长图，1080×4700 左右）。 宽度撑满卡片、高度自适应 —— 长图在手机上就该这么看。 ⚠️ 不设 max-height：截断长图等于把最后几步路藏起来。 */ .route-img { display: block; width: 100%; height: auto; border-radius: 8px; } .arrive-site + .arrive-site { margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--line); } .arrive-site h2 { margin-bottom: .6em; } .notice-body { white-space: pre-wrap; line-height: 1.9; padding: .4em 0; } /* 取数时刻 + 刷新（员工端，店主 2026-08-18）。 字号压到最小一档：它是元信息，不该跟内容抢注意力； 但**常驻显示** —— 员工会长时间开着页面盯排班，得随时知道手里这份是什么时候的。 */ .fetched-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4em .8em; margin: .1em .3em .7em; } .fetched-at { font-size: .73em; color: var(--sub); white-space: nowrap; } /* 审批卡片上的提醒（如"该号只是员工登记电话"）。店主 2026-08-19。 用语义色 --amber 而不是主题色 —— 它是警示，不该跟着 Palette 变。 */ .hint.warn { color: #9a6400; background: #fff7e6; border-radius: 6px; padding: 6px 8px; margin-top: 4px; } /* 「已打钩却开通不了」——审批队列顶部的告警卡（2026-08-20）。 用警示黄而不是红：它不是错误，是**有人要去 HIS 里补一步**。 */ .stuck-card { border-left: 4px solid #d9a406; } .stuck-head { font-weight: 600; margin-bottom: .4em; } .stuck-row { padding: .5em 0; border-top: 1px solid var(--line); } .stuck-row:first-of-type { border-top: 0; } .stuck-why { color: #8a6a00; }