/* ============================================================================ 石维宝小程序 · 全端界面原型唯一样式表（支付宝风格 / Alipay Style）基于统一版结构，令牌与视觉重写为支付宝设计语言： · 主色浅支付宝蓝 #4096FF（消费者端，压白字的填充另取 #1677FF）；商户橙 #EA580C（商户端）；政务蓝 #3A74C4 （市场监管端五级：市局 / 区县局 / 基层所 / 服务站 / 二级服务站，App 与 PC 共用同一批页面） · 白卡大圆角 + 极浅描边/柔和阴影；胶囊大按钮；彩色渐变宫格图标 · 语义色采用 Ant/支付宝口径：成功 #00B42A / 警告 #FF7D00 / 危险 #F53F3F / 信息 #1677FF 选择器与类名与统一版完全一致，88 页 + 总览/规范页共用本表，无需改结构即可换肤。结构：0 基础 / 1 字号阶梯 / 1b A+ 字号两档 / 2 三端主题令牌 / 3 工具类 / 4 按钮 / 5 徽章标签 6 卡片单元格 / 7 表单勾选 / 8 步骤时间线 / 9 页签筛选 / 10 弹层提示 11 移动端壳 / 12 数据展示 / 13 PC 后台 / 14 总览页 / 15 规范页 / 16 其它 / 17 增强组件 18 消费者首页增强 / 20 网点地图 / 文末三段：17 网点九子类配色、18 静态尺寸工具类、18b 内联 style 第二批收口 ============================================================================ */ /* ---------- 0 基础 ---------- */ *, *::before, *::after { box-sizing: border-box; } /* 小程序约束：小程序没有 html / :root，改不了根字号 —— A+ 字号两档不得依赖本行（见 §2 的 --fs-* 阶梯）。本行只是桌面基线，供下方 10 处 rem 盒子尺寸（.cell-icon / .opt min-height / .navbar 等）取一个确定值； → 落地：删除本行，盒子尺寸改 rpx 或 px；字号一律走 var(--fs-*)，与根字号无关。-webkit-text-size-adjust 为 Web 专有，小程序无此属性 */ html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; color: var(--c-ink); background: #EBEEF3; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } a { text-decoration: none; color: inherit; } img { max-width: 100%; } /* 小程序约束：小程序无元素，wxml/axml 对属性选择器支持有限，「按 body class 区分端」的开关不可用 → 落地：520px 机身宽度只是原型画布；实现时由页面根节点承载，端差异（消费者 / 商户 / 服务站 / PC）用条件编译产生的根 class 表达 */ body:not(.gov):not(.ov):not(.ts) { max-width: 520px; margin: 0 auto; min-height: 100vh; background: var(--c-bg); box-shadow: 0 0 40px rgba(9,30,66,.16); } body.gov { background: var(--c-bg); } /* ---------- 1 字号阶梯（后缀 = 常规渲染像素） ---------- 小程序约束：小程序无 html / :root 元素、不能改根字号，rem 无法作为「全站放大」的抓手 → 落地：阶梯全部写成 px 绝对值，A+ 字号大号档覆盖同名变量（见下方 html.lg）；数值 = 原 rem × 16px，与改前逐像素相同，不影响现有观感 */ :root { --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-28: 28px; --fs-ic-18: 18px; --fs-ic-20: 20px; --fs-ic-22: 22px; --fs-ic-24: 24px; --fs-ic-28: 28px; --fs-ic-36: 36px; --fs-ic-40: 40px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px; /* 支付宝：卡片以留白与极浅描边分层，阴影更轻 */ --sh-sm: 0 1px 2px rgba(9,30,66,.04); --sh-md: 0 2px 10px rgba(9,30,66,.07); --sh-lg: 0 8px 24px rgba(9,30,66,.12); --c-ink: #191919; --c-ink-2: #646A73; --c-ink-3: #9AA0A6; --c-line: #EBEDF0; --c-line-2: #F2F3F5; --c-bg: #F5F6F8; --c-card: #FFFFFF; /* 语义色（Ant / 支付宝口径）：base 用于填充/图标/圆点（图形 ≥3:1），deep 用于文字（AA ≥4.5:1） */ --c-ok: #00B42A; --c-ok-soft: #EAF9EE; --c-ok-deep: #15803D; --c-warn: #FF7D00; --c-warn-soft: #FFF4E8; --c-warn-deep: #B45309; --c-danger: #F53F3F; --c-danger-soft: #FFECE8; --c-danger-deep: #CB2634; --c-info: #1677FF; --c-info-soft: #E8F3FF; --c-info-deep: #0958D9; } /* ---------- 1b A+ 字号两档（标准 / 大号）：只覆盖字号变量，不动根字号、不动盒子 ---------- 小程序约束：小程序无 html 根元素、无法修改根字号，「根字号 16→20 让 rem 全站等比放大」整体不成立 → 落地：变量覆盖写在每个页面的根容器上（，webview 渲染层变量可继承），档位由 App.onLaunch 从 uni.getStorageSync('cs_lg') 恢复；本表 html.lg 与落地等价，数值 = 标准档 ×1.25「5 舍 6 入」取整，观感不变。注意：盒子尺寸（rem 表达的 width/height/padding）两档均不放大，故可点区靠 min-height≥44px 保底、文案允许换行。 */ html.lg { --fs-10: 13px; --fs-11: 14px; --fs-12: 15px; --fs-13: 16px; --fs-14: 17px; --fs-15: 19px; --fs-16: 20px; --fs-17: 21px; --fs-18: 22px; --fs-19: 24px; --fs-20: 25px; --fs-22: 27px; --fs-24: 30px; --fs-28: 35px; --fs-ic-18: 22px; --fs-ic-20: 25px; --fs-ic-22: 27px; --fs-ic-24: 30px; --fs-ic-28: 35px; --fs-ic-36: 45px; --fs-ic-40: 50px; } /* ---------- 2 三端主题令牌（默认：消费者端 · 浅支付宝蓝） ---------- */ :root { --c-primary: #4096FF; --c-primary-light: #69B1FF; --c-primary-dark: #1677FF; --c-primary-deep: #003EB3; --c-primary-ink: #0958D9; --c-primary-soft: #EBF4FF; --c-primary-softer: #F5F9FF; --c-primary-border: #CAE5FF; --c-primary-wash: #EDF5FF; --c-primary-tint: #EBF4FF; --c-primary-tint-2: #D6EAFF; --c-primary-gradient: linear-gradient(135deg, #69B1FF, #4096FF 52%, #1677FF); /* --c-primary-fill = 压白字的填充色（主按钮 / 选中态 / 扫码胶囊）：主色淡一档后白字对比度会掉（白字 / #4096FF 实测 2.9:1），故填充单列一档沿用旧主色 #1677FF（实测 4.1:1，与淡色前持平） */ --c-primary-fill: #1677FF; } /* 小程序约束：小程序无 body 元素、属性选择器支持不全，故 body[data-role=…] / body[data-end="gov"] 这类「按角色切主题令牌」的挂点不可移植（与 §5 的 body:not(.gov) 同一处理）。 → 落地：三套令牌分别落成 .theme-consumer / .theme-merchant / .theme-gov 三个 class，由页面根固定挂载——按页面所属的包（主包 / 分包 merchant / 分包 gov）写死，同一小程序内也不存在运行时切主题。变量本身（--c-primary 等）可原样移植，仅挂点改变 */ body[data-end="gov"], body[data-role="gov"] { --c-primary: #3A74C4; --c-primary-light: #5A92D8; --c-primary-dark: #2B5FA5; --c-primary-deep: #1A3E6E; --c-primary-ink: #2B5FA5; --c-primary-soft: #EBF2FB; --c-primary-softer: #F5F9FD; --c-primary-border: #CFE0F5; --c-primary-wash: #F2F7FD; --c-primary-tint: #EEF4FC; --c-primary-tint-2: #D9E7F8; --c-primary-gradient: linear-gradient(135deg, #5A92D8, #3A74C4 55%, #2B5FA5); --c-primary-fill: #3A74C4; } body[data-role="merchant"] { --c-primary: #EA580C; --c-primary-light: #FB7A2F; --c-primary-dark: #C2410C; --c-primary-deep: #7C2D12; --c-primary-ink: #C2410C; --c-primary-soft: #FFF1E8; --c-primary-softer: #FFF8F3; --c-primary-border: #FFD3B0; --c-primary-wash: #FFF3EA; --c-primary-tint: #FFF1E8; --c-primary-tint-2: #FFE0CC; --c-primary-gradient: linear-gradient(135deg, #FB7A2F, #EA580C 52%, #C2410C); --c-primary-fill: #EA580C; } /* 消费者端底色再淡一档（整体向白收一半）：§1 的中性底三端共用，故本端单独覆盖，商户端与监管端取值不变。卡面本就是纯白 #FFFFFF，无可再淡空间，故 card 沿用白；页面底与描边的层次差随之减半，分层主要交给阴影。 */ body[data-role="consumer"] { --c-line: #F5F6F8; --c-line-2: #F9F9FA; --c-bg: #FAFBFC; --sh-sm: 0 1px 2px rgba(9,30,66,.02); --sh-md: 0 2px 10px rgba(9,30,66,.035); --sh-lg: 0 8px 24px rgba(9,30,66,.06); } /* ---------- 3 工具类 ---------- */ .mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px} .mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px} .flex{display:flex;align-items:center}.flex-b{display:flex;align-items:center;justify-content:space-between} .gap-8{gap:8px}.gap-12{gap:12px}.f1{flex:1;min-width:0} .muted{color:var(--c-ink-2)}.dim{color:var(--c-ink-3)} .small{font-size:var(--fs-14)}.tiny{font-size:var(--fs-12)}.mini{font-size:var(--fs-11)} .big{font-size:var(--fs-17)}.strong{font-weight:600}.b{font-weight:700} .num{font-variant-numeric:tabular-nums} .t-c{text-align:center}.t-r{text-align:right} .ink{color:var(--c-primary-ink)}.ok-c{color:var(--c-ok-deep)}.warn-c{color:var(--c-warn-deep)}.danger-c{color:var(--c-danger-deep)} .line{height:1px;background:var(--c-line);border:0;margin:12px 0} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} /* 小程序约束：两端 webview 对 CSS Grid 的支持程度随基础库版本浮动，auto-fit / minmax 这类自适应轨在支付宝端偶发塌陷 → 落地：小程序页面只用等分列（本区 .grid2/.grid3/.grid4 与 .qgrid/.stat-row/.up-grid/.op-stats 等，全是 repeat(N,1fr)）；auto-fit + minmax 仅存在于 PC 评审板（.ov-cards / .ts-grid2 / .ts-grid3），不随迁移下发 */ .ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ---------- 4 按钮（支付宝：主按钮扁平蓝、大号 CTA 胶囊） ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:var(--r-md); font-size:var(--fs-16);font-weight:600;padding:0 18px;min-height:2.875rem;transition:filter .15s, transform .05s, box-shadow .15s;user-select:none} .btn:active{transform:scale(.98)} .btn-primary{background:var(--c-primary-fill);color:#fff;box-shadow:0 2px 8px rgba(9,30,66,.16)} .btn-outline{background:#fff;color:var(--c-primary);border-color:var(--c-primary-border)} .btn-soft{background:var(--c-primary-soft);color:var(--c-primary-ink)} .btn-danger{background:var(--c-danger);color:#fff;box-shadow:0 2px 8px rgba(245,63,63,.22)} .btn-danger-o{background:#fff;color:var(--c-danger-deep);border-color:#FFC7C2} .btn-block{display:flex;width:100%} .btn-lg{min-height:3rem;font-size:var(--fs-17);border-radius:var(--r-full)} .btn-sm{min-height:2.125rem;font-size:var(--fs-14);padding:0 12px;border-radius:var(--r-sm)} .btn-xs{min-height:1.75rem;font-size:var(--fs-12);padding:0 10px;border-radius:var(--r-sm)} .btn[disabled],.btn.is-off{background:var(--c-line-2);color:var(--c-ink-3);border-color:transparent;box-shadow:none} .link{color:var(--c-primary-ink);font-weight:600} .link.mini{font-weight:500} /* ---------- 5 徽章 / 标签 / 提示条 ---------- */ .badge-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-full);font-size:var(--fs-11);font-weight:600;line-height:1.4;white-space:nowrap;flex:none} .badge-status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor} .badge-status.info{background:var(--c-info-soft);color:var(--c-info-deep)} .badge-status.ok{background:var(--c-ok-soft);color:var(--c-ok-deep)} .badge-status.warn{background:var(--c-warn-soft);color:var(--c-warn-deep)} .badge-status.danger{background:var(--c-danger-soft);color:var(--c-danger-deep)} .badge-status.mute{background:var(--c-line-2);color:var(--c-ink-2)} .tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--r-full);font-size:var(--fs-12);font-weight:600;line-height:1.5} .tag.blue{background:var(--c-primary-soft);color:var(--c-primary-ink);border:1px solid var(--c-primary-border)} .tag.ok{background:var(--c-ok-soft);color:var(--c-ok-deep)} .tag.warn{background:var(--c-warn-soft);color:var(--c-warn-deep)} .tag.danger{background:var(--c-danger-soft);color:var(--c-danger-deep)} /* 复位 .line 分隔条泄漏的 height/margin，否则 tag 被压成 1px */ .tag.line{background:#fff;color:var(--c-ink-2);border:1px solid var(--c-line);height:auto;margin:0} .tag.soon{background:repeating-linear-gradient(45deg,#F4F5F7,#F4F5F7 4px,#EDEFF2 4px,#EDEFF2 8px);color:var(--c-ink-3);border:1px dashed var(--c-ink-3);font-weight:500} .notice{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-13);line-height:1.6} .notice .ico{flex-shrink:0;font-size:var(--fs-ic-18);line-height:1.3} .notice.info{background:var(--c-primary-wash);color:var(--c-primary-ink);border:1px solid var(--c-primary-border)} .notice.warn{background:var(--c-warn-soft);color:var(--c-warn-deep);border:1px solid #FFD9A8} .notice.danger{background:var(--c-danger-soft);color:var(--c-danger-deep);border:1px solid #FFC7C2} .notice.ok{background:var(--c-ok-soft);color:var(--c-ok-deep);border:1px solid #B7EBC3} /* ---------- 6 卡片 / 单元格 / 区块 ---------- */ .card{background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--sh-sm);margin-bottom:10px;overflow:hidden} /* 必读强调卡：改前内联 border:1.5px solid var(--c-danger);border-radius:var(--r-md)（.card 默认 --r-lg，故圆角一并改写） */ .card.alert{border:1.5px solid var(--c-danger);border-radius:var(--r-md)} .card-p{padding:14px} /* 带 .card-hd 的卡片正文：.card-hd 只给上边（12px 14px 0），左右与底部内边距由本类给。改前 .card-bd 全站 56 处（服务站端 41 处）从未定义 → 字段/图表/说明文字贴卡片边缘，与同页 .cell 行的 14px 内缩打架。 .cell 自带 13px 14px 内边距，故在正文里向两侧出血，跟直接挂在 .card 下的 .cell 完全对齐。 */ .card-bd{padding:10px 14px 14px} .card-bd>.cell{margin:0 -14px} .card-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 0} .card-title{font-size:var(--fs-16);font-weight:700} .card-more{font-size:var(--fs-13);color:var(--c-ink-3)} .cell{display:flex;align-items:center;gap:12px;padding:13px 14px;position:relative} .cell + .cell::before{content:'';position:absolute;left:14px;right:0;top:0;height:1px;background:var(--c-line-2)} .cell.tap{cursor:pointer} .cell:active{background:var(--c-primary-softer)} .cell-icon{width:2.5rem;height:2.5rem;border-radius:var(--r-md);background:var(--c-primary-soft);color:var(--c-primary-ink); display:flex;align-items:center;justify-content:center;font-size:var(--fs-ic-20);flex-shrink:0;font-weight:700} .cell-icon.round{border-radius:50%} .cell-icon.ok{background:var(--c-ok-soft);color:var(--c-ok-deep)} .cell-icon.warn{background:var(--c-warn-soft);color:var(--c-warn-deep)} .cell-icon.danger{background:var(--c-danger-soft);color:var(--c-danger-deep)} /* 灰底图标（说明/帮助类入口）：改前写在页面 style="background:var(--c-line-2);color:var(--c-ink-2)"，6 处内联重复 */ .cell-icon.plain{background:var(--c-line-2);color:var(--c-ink-2)} /* 详情页大号图标（改前 2 处内联 width:3.4rem;height:3.4rem;font-size:var(--fs-ic-28)） */ .cell-icon.xl{width:3.4rem;height:3.4rem;font-size:var(--fs-ic-28)} /* 实底类型色图标：--mk 由页面 class mk-（§17）带出，改前是内联 style="background:{{t.color}}" */ .cell-icon.solid{background:var(--mk);color:#fff} /* 商户首字头像：按行业区分底色（柔和底 + 同色系深色字），检索页/工单列表共用 */ /* 行业配色：小程序约束：wxml / axml 对属性选择器支持有限 → 落地：由 DB.indClass(name) 输出 ASCII slug class 取值与改前 .cell-icon[data-ind="…"] 逐条相同；零售 = 默认主色软底，故不单独覆盖 */ .cell-icon.ind-hotel{background:#E8F1FF;color:#2B5FA5} .cell-icon.ind-food{background:#FFF0E2;color:#BC5A12} .cell-icon.ind-beauty{background:#FCE7F1;color:#B02C6B} .cell-icon.ind-car{background:#DFF0EC;color:#0E6E5F} .cell-icon.ind-fitness{background:#FDE7E2;color:#BC3C26} .cell-icon.ind-housekeep{background:var(--c-ok-soft);color:var(--c-ok-deep)} .cell-icon.ind-edu{background:#E9E8FD;color:#463AB8} .cell-icon.ind-decor{background:#EFE7FA;color:#6A3FB5} .cell-icon.ind-other{background:var(--c-primary-soft);color:var(--c-primary-ink)} /* 图标资产：.if 线性 SVG（icons.js sprite use 引用），颜色/字号继承 currentColor； B 类白名单符号（✓ ✕ ★ ①②③④ ├─└ △ ▮ ◉）不资产化，保留原字符 */ .if{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .cell-icon .if{width:var(--fs-ic-20);height:var(--fs-ic-20)} .tb-ico .if{width:var(--fs-ic-22);height:var(--fs-ic-22);stroke-width:1.8} .si .if{width:var(--fs-16);height:var(--fs-16)} .ntf-ico .if{width:var(--fs-18);height:var(--fs-18)} .ico .if{width:var(--fs-16);height:var(--fs-16)} .cell-main{flex:1;min-width:0} .cell-title{font-size:var(--fs-16);font-weight:600;line-height:1.45} .cell-sub{font-size:var(--fs-13);color:var(--c-ink-2);margin-top:3px;line-height:1.5} .cell-arrow{color:var(--c-ink-3);font-size:var(--fs-ic-20);flex-shrink:0} .sec{padding:16px 12px 4px} .sec-hd{display:flex;align-items:center;justify-content:space-between;padding:0 2px 8px} .sec-t{font-size:var(--fs-17);font-weight:700;display:inline-flex;align-items:center;gap:6px} .sec-t .if{width:var(--fs-ic-20);height:var(--fs-ic-20)} .sec-more{font-size:var(--fs-13);color:var(--c-ink-3)} .content{padding:10px 12px 24px} body.has-tab .content{padding-bottom:5.6rem} /* ---------- 7 表单 / 勾选卡 / 上传 / 开关 ---------- */ .field{margin-bottom:14px} .lb{display:flex;align-items:center;gap:6px;font-size:var(--fs-15);font-weight:600;margin-bottom:7px} .f-label{display:flex;align-items:center;font-size:var(--fs-15);font-weight:600;margin-bottom:7px} .f-label .req{color:var(--c-danger);margin-left:3px} .f-label .opt-tag{margin-left:auto;font-size:var(--fs-12);color:var(--c-ink-3);font-weight:400} /* 小程序约束：的 type 枚举与 HTML 不完全相同——number / idcard / digit 可用，无 email / search / url，也没有独立的 tel 类型 → 落地：type="tel" 改 type="number" + maxlength="11"；密码用 password 属性（非 type）；本条为全站统一说明，各页面 13 处 input 不再逐条批注 */ .input,.textarea,.select{width:100%;border:1.5px solid var(--c-line);border-radius:var(--r-md);background:#fff; font-size:var(--fs-16);padding:11px 12px;color:var(--c-ink);outline:none;transition:border .15s, box-shadow .15s} .input:focus,.textarea:focus,.select:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-tint)} .input::placeholder,.textarea::placeholder{color:#B4B9C0} .textarea{min-height:6em;resize:vertical;line-height:1.6} /* 小程序约束：wxml/axml 无作为数据源与 JS 契约，外层 .pk 用 border 画一个文本箭头「›」表达 picker 收合态；落地写法：，回调取 e.detail.value 为数组下标，需回写 value。 */ .pk{display:block;position:relative} .pk::after{content:'';position:absolute;right:13px;top:50%;width:6px;height:6px;margin-top:-4px;pointer-events:none; border-top:1.6px solid var(--c-ink-3);border-right:1.6px solid var(--c-ink-3);transform:rotate(45deg)} .pk > .select,.pk > .input{padding-right:32px} .select{appearance:none;-webkit-appearance:none;background-image:none} /* PC 端不受小程序约束，」而设，App 端的箭头由 .pk::after 画（picker 收合态），而 PC 页面的筛选下拉多是裸