/* ============================================================ 微聚瑞 · Design Tokens（design-tokens.json v1.0 全量映射） 规则：全文档禁裸 hex（唯一例外 #fff 反白 / rgba 遮罩基色） ============================================================ */ :root { /* —— 品牌色（模板可覆盖组；默认靛蓝纯色，禁渐变） —— */ --brand-600: #3B4FE0; --brand-700: #2E3DB8; --brand-500: #5C6BE8; --brand-50: #EEF0FE; /* —— 表面 —— */ --bg: #F4F5F9; /* shop 底 */ --bg-admin: #F7F8FB; /* admin 底 */ --surface: #FFFFFF; --surface-warm:#F3F4F8; /* —— 前景 —— */ --fg: #14161C; --fg-2: #343946; --muted:#6A7183; --meta: #8B92A3; /* —— 边框 —— */ --border: #E5E8EF; --border-soft: #EEF0F4; --grid-line: #EFF1F6; /* —— 语义色 —— */ --success: #178A5C; --success-bg: #E5F5ED; --warn: #B5720C; --warn-bg: #FBF1DC; --danger: #C0392B; --danger-bg: #FCEAE7; --info: #2E3DB8; --info-bg: #EEF0FE; --gold: #9A7517; /* —— 生命周期六态灯（徽章/圆点唯一取色处） —— */ --st-trial-fg: #2E3DB8; --st-trial-bg: #EEF0FE; --st-active-fg: #178A5C; --st-active-bg: #E5F5ED; --st-expiring-fg: #B5720C; --st-expiring-bg: #FBF1DC; --st-grace-fg: #C2410C; --st-grace-bg: #FDEDE3; --st-locked-fg: #C0392B; --st-locked-bg: #FCEAE7; --st-archived-fg: #6A7183; --st-archived-bg: #EEF0F4; /* —— 效果 —— */ --glow-brand: 0 6px 16px rgba(59,79,224,0.28); /* —— 图表 B-slot 别名（P1-3 看板；全部 var() 派生，零新增 hex） —— */ --chart-line: var(--brand-600); /* 折线主线 */ --chart-line-soft: var(--brand-500); /* 折线次线 */ --chart-area: var(--brand-50); /* 折线淡填充面积 */ --chart-bar: var(--brand-500); /* 柱状默认柱 */ --chart-bar-peak: var(--brand-600); /* 峰值柱强调 */ --chart-bar-dim: var(--brand-50); /* 低谷柱弱化 */ --chart-grid: var(--grid-line); /* 图表网格线 */ --chart-ring-track: var(--surface-warm);/* 环形进度底轨 */ /* —— 金额语义（P1-1 明细页） —— */ --amt-in: var(--success); /* 入账：充值/退回 */ --amt-out: var(--fg); /* 消费：中性（非红） */ --amt-revoke: var(--warn); /* 撤销 */ /* —— 字体 —— */ --font-body: Inter, 'Noto Sans SC', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 32px; --fw-read: 400; --fw-emphasize: 510; --fw-announce: 590; /* —— 间距 —— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* —— 圆角 —— */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; /* —— 阴影 —— */ --shadow-1: 0 1px 2px rgba(20,22,28,0.06), 0 1px 3px rgba(20,22,28,0.04); --shadow-2: 0 4px 12px rgba(20,22,28,0.07), 0 2px 4px rgba(20,22,28,0.04); --shadow-3: 0 12px 32px rgba(20,22,28,0.12), 0 4px 8px rgba(20,22,28,0.06); /* —— 动效 —— */ --motion-fast: 150ms; --motion-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* —— 布局 —— */ --sidebar-w: 248px; --topbar-h: 56px; --container-max: 1200px; --table-row-h: 44px; --table-row-compact: 36px; --phone-w: 360px; } * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html, body { height:100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--fg); font-size: var(--fs-md); font-weight: var(--fw-read); line-height: 1.6; -webkit-font-smoothing: antialiased; } .tnum { font-variant-numeric: tabular-nums; } /* —— 图标：sprite 唯一通路，全项目零 emoji —— */ .icn { width:20px; height:20px; stroke-width:1.75; flex-shrink:0; display:block; } .icn-14 { width:14px; height:14px; stroke-width:2; flex-shrink:0; display:block; } .icn-16 { width:16px; height:16px; stroke-width:1.9; flex-shrink:0; display:block; } .icn-24 { width:24px; height:24px; stroke-width:1.7; flex-shrink:0; display:block; } /* —— batch 1 骨架占位（batch 2 渲染层接入后移除） —— */ .bootstrap-hint { max-width: 560px; margin: 12vh auto; padding: var(--sp-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .bootstrap-hint h1 { font-size: var(--fs-2xl); font-weight: var(--fw-announce); letter-spacing:-0.01em; display:flex; align-items:center; gap: var(--sp-3); } .bootstrap-hint .mark { width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink:0; background: var(--brand-600); color:#fff; display:flex; align-items:center; justify-content:center; } .bootstrap-hint p { color: var(--muted); margin-top: var(--sp-3); font-size: var(--fs-sm); } .bootstrap-hint .ok { color: var(--success); font-weight: var(--fw-emphasize); } /* ============================================================ 登录后顶条 TopBar（h48 常驻：当前身份 / 店铺上下文 / TimeTravel / 退出） 角色隔离：平台管理端与商家三端分别从登录入口页进入，顶条不再提供角色切换 ============================================================ */ #stageBar { position: sticky; top:0; z-index: 500; height:48px; display:flex; align-items:center; gap: var(--sp-4); padding: 0 var(--sp-5); background: var(--surface); border-bottom: 1px solid var(--border); } .top-identity { display:flex; align-items:center; gap: var(--sp-2); font-weight: var(--fw-emphasize); font-size: var(--fs-sm); white-space:nowrap; } .top-identity .ti-ic { width:26px; height:26px; border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .top-exit { display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius: var(--r-sm); border:1px solid var(--border); background: var(--surface); font-size: var(--fs-xs); color: var(--muted); cursor:pointer; font-family:inherit; transition: var(--motion-fast) var(--ease-standard); } .top-exit:hover { color: var(--danger); border-color: var(--danger); } .stage-ctx { display:flex; align-items:center; gap: var(--sp-2); min-width:0; } .stage-ctx .ctx-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .stage-ctx .ctx-name { font-weight: var(--fw-emphasize); font-size: var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stage-ctx .ctx-sub { font-size: var(--fs-xs); color: var(--meta); white-space:nowrap; } .stage-right { margin-left:auto; display:flex; align-items:center; gap: var(--sp-3); } /* ---------- 登录入口页（短信登录主通道 + 「一键继续」恢复条） ---------- */ .auth-wrap { max-width: 1180px; margin: 0 auto; padding: var(--sp-8) var(--sp-5) var(--sp-10); } .auth-brand { display:flex; align-items:center; gap: var(--sp-4); margin-bottom: var(--sp-6); } .auth-logo { width:52px; height:52px; display:block; flex-shrink:0; } .auth-brand h1 { font-size: 22px; margin: 0; letter-spacing: 1px; } .auth-brand p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); } /* ---------- 「一键继续」恢复条（v3.2.11：每次加载先回入口页，旧会话一键回现场） ---------- */ .auth-resume { display:flex; align-items:center; gap: var(--sp-4); margin-bottom: var(--sp-5); padding: 12px var(--sp-4); border:1px dashed var(--brand-500); border-radius: var(--r-lg); background: var(--brand-50); } .auth-resume .ar-ic { width:34px; height:34px; border-radius: var(--r-sm); background: var(--surface); color: var(--brand-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .auth-resume .ar-t { display:flex; flex-direction:column; gap:1px; min-width:0; } .auth-resume .ar-t b { font-size: 13px; color: var(--fg); } .auth-resume .ar-t span { font-size: 11.5px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .auth-resume .ar-go { margin-left:auto; flex-shrink:0; display:flex; align-items:center; gap:5px; padding:8px 16px; border:none; border-radius: var(--r-sm); background: var(--brand-600); color:#fff; font-size: 12.5px; font-weight: var(--fw-emphasize); cursor:pointer; font-family:inherit; transition: var(--motion-fast) var(--ease-standard); } .auth-resume .ar-go:hover { background: var(--brand-500); } @media (max-width: 640px) { .auth-resume { flex-wrap:wrap; } .auth-resume .ar-go { margin-left:0; width:100%; justify-content:center; } } .auth-foot { margin-top: var(--sp-6); text-align:center; font-size: 11.5px; color: var(--meta); } /* ---------- 短信登录（主登录通道；测试期由内置模拟短信网关发码，接服务商后替换为真实 SMS API） ---------- */ .auth-login { max-width: 520px; margin: 0 auto var(--sp-6); padding: var(--sp-6); border:1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); } .auth-login h2 { margin:0 0 4px; font-size:16px; } .auth-login .al-sub { font-size:12px; color: var(--muted); margin-bottom: var(--sp-4); } .sms-scene { display:flex; background: var(--surface-warm); border-radius: var(--r-sm); padding:3px; gap:2px; margin-bottom: var(--sp-4); } .sms-scene button { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 10px; border:none; border-radius: var(--r-sm); background:transparent; font-size: var(--fs-sm); color: var(--muted); cursor:pointer; font-family:inherit; transition: var(--motion-fast) var(--ease-standard); } .sms-scene button.active { background: var(--surface); color: var(--brand-600); font-weight: var(--fw-emphasize); box-shadow: var(--shadow-1); } .sms-row { display:flex; gap:8px; } .sms-row .input { flex:1; min-width:0; } .sms-cd { flex-shrink:0; padding:0 14px; border-radius: var(--r-sm); border:1px solid var(--border); background: var(--surface-warm); font-size: 12.5px; color: var(--muted); cursor:pointer; font-family:inherit; } .sms-cd:not(:disabled):hover { border-color: var(--brand-500); color: var(--brand-600); } .sms-cd:disabled { cursor:not-allowed; color: var(--meta); } .sms-captcha { display:flex; gap:8px; align-items:stretch; margin-bottom:10px; } .sms-captcha .sc-img { flex-shrink:0; height:38px; border-radius: var(--r-sm); overflow:hidden; border:1px solid var(--border); display:flex; } .sms-captcha .sc-img svg { height:38px; width:auto; display:block; } .sms-captcha .input { flex:1; min-width:0; } .sc-refresh { flex-shrink:0; width:34px; border-radius: var(--r-sm); border:1px solid var(--border); background: var(--surface-warm); color: var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; } .sc-refresh:hover { border-color: var(--brand-500); color: var(--brand-600); } .auth-login .btn { width:100%; justify-content:center; margin-top:2px; } .al-hint { margin-top:10px; font-size:11.5px; color: var(--meta); line-height:1.6; } /* v3.4.30：登录页「我要开店」自助开店引流入口（此前登录页无注册/开通引导，未注册访客无路可走） */ .al-selfopen { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); font-size:13px; color: var(--muted); } .al-selfopen .aso-go { display:inline-flex; align-items:center; gap:3px; color: var(--brand-600); font-weight: var(--fw-emphasize); cursor:pointer; text-decoration:none; } .al-selfopen .aso-go svg { width:14px; height:14px; } .al-selfopen .aso-go:hover { text-decoration:underline; } /* 收银台开卡页（引流工具箱 G3）：到店礼提示条——暖底 + 品牌色图标，与登录表单同视觉语言 */ .eg-gift { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; margin-bottom:12px; border-radius: var(--r-sm); background: var(--surface-warm); border:1px solid var(--border-soft); font-size:12.5px; color: var(--fg-2); line-height:1.6; } .eg-gift svg { flex-shrink:0; margin-top:1px; color: var(--brand-600); } /* 拟真短信浮层（测试期：模拟"短信到达"，接服务商后由真实短信替代） */ .sms-toast { position: fixed; right: 20px; bottom: 20px; z-index: 1200; width: 320px; background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 12px 14px; animation: smsIn var(--motion-normal) var(--ease-standard); } @keyframes smsIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } } .sms-toast .st-head { display:flex; align-items:center; gap:6px; font-size:11px; color: var(--meta); padding-bottom:6px; border-bottom:1px solid var(--border); margin-bottom:8px; } .sms-toast .st-body { font-size:13px; line-height:1.7; color: var(--fg); } .sms-toast .st-body b { color: var(--brand-600); font-size:15px; letter-spacing:1px; } .sms-toast .st-x { margin-left:auto; border:none; background:transparent; color: var(--meta); cursor:pointer; display:flex; padding:2px; font-family:inherit; } .sms-toast .st-x:hover { color: var(--fg-2); } .tt-pill { display:flex; align-items:center; gap: var(--sp-2); padding:5px 12px; border-radius: 999px; border:1px solid var(--border); background: var(--surface-warm); font-size: var(--fs-xs); color: var(--muted); cursor:pointer; font-family:inherit; } .tt-pill.offset { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); font-weight: var(--fw-emphasize); } .tt-steps { display:flex; gap:2px; } .tt-steps button { border:none; background:transparent; padding:3px 7px; border-radius: var(--r-sm); font-size: 11px; color: var(--muted); cursor:pointer; font-family:inherit; } .tt-steps button:hover { background: var(--surface); color: var(--brand-600); } /* ============================================================ 平台管理员端（桌面全宽：侧边栏 + 内容区） ============================================================ */ .admin-shell { display:flex; min-height: calc(100vh - 48px); background: var(--bg-admin); } .admin-side { width: var(--sidebar-w); flex-shrink:0; padding: var(--sp-4) var(--sp-3); border-right:1px solid var(--border); background: var(--surface); display:flex; flex-direction:column; gap:2px; } .admin-side .nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--fg-2); cursor:pointer; border:none; background:transparent; font-family:inherit; text-align:left; width:100%; } .admin-side .nav-item:hover { background: var(--surface-warm); } .admin-side .nav-item.active { background: var(--brand-50); color: var(--brand-600); font-weight: var(--fw-emphasize); } .admin-side .nav-item .nav-badge { margin-left:auto; font-size:10.5px; padding:1px 7px; border-radius:999px; background: var(--warn-bg); color: var(--warn); font-weight: var(--fw-emphasize); } .admin-side .nav-sec { font-size:11px; color:var(--meta); padding: var(--sp-3) var(--sp-3) var(--sp-1); letter-spacing:.05em; } .admin-main { flex:1; min-width:0; padding: var(--sp-6) var(--sp-8); max-width: var(--container-max); } .admin-head { display:flex; align-items:flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); } .admin-head h1 { font-size: var(--fs-3xl); font-weight: var(--fw-announce); letter-spacing:-0.01em; } .admin-head .sub { color: var(--muted); font-size: var(--fs-sm); margin-top:2px; } .admin-head .actions { margin-left:auto; display:flex; gap: var(--sp-2); } /* —— 按钮 —— */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; border-radius: var(--r-sm); border:1px solid transparent; font-size: var(--fs-sm); font-weight: var(--fw-emphasize); cursor:pointer; font-family:inherit; transition: var(--motion-fast) var(--ease-standard); white-space:nowrap; } .btn-primary { background: var(--brand-600); color:#fff; box-shadow: var(--glow-brand); } .btn-primary:hover { background: var(--brand-700); } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--fg-2); } .btn-ghost:hover { border-color: var(--brand-500); color: var(--brand-600); } .btn-brand-text { background: var(--brand-50); color: var(--brand-600); } .btn-brand-text:hover { background: var(--brand-500); color:#fff; } .btn-danger { background: var(--danger); color:#fff; } .btn-sm { padding:5px 10px; font-size: var(--fs-xs); } .btn:disabled { opacity:.5; cursor:not-allowed; } /* —— 统计卡（阴影无边框，Mercury 原则）—— */ .stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap: var(--sp-4); margin-bottom: var(--sp-5); } .stat-card { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: var(--sp-4) var(--sp-5); } .stat-card .sc-l { display:flex; align-items:center; gap:6px; font-size: var(--fs-xs); color: var(--muted); } .stat-card .sc-l .icn-14 { color: var(--meta); } .stat-card .sc-v { font-size:28px; font-weight: var(--fw-announce); letter-spacing:-0.02em; margin-top:4px; } .stat-card .sc-v.amber { color: var(--warn); } .stat-card .sc-d { font-size: var(--fs-xs); color: var(--meta); margin-top:2px; display:flex; align-items:center; gap:4px; } /* —— 卡片与表格 —— */ .panel { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow:hidden; margin-bottom: var(--sp-5); } .panel-head { display:flex; align-items:center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border-soft); } .panel-head h3 { font-size: var(--fs-md); font-weight: var(--fw-emphasize); display:flex; align-items:center; gap:7px; } .panel-head .more { margin-left:auto; font-size: var(--fs-xs); color: var(--muted); } .panel-body { padding: var(--sp-4) var(--sp-5); } .data-table { width:100%; border-collapse:collapse; } .data-table th { text-align:left; font-size:11px; color:var(--meta); font-weight: var(--fw-emphasize); letter-spacing:.04em; padding:10px var(--sp-5); border-bottom:1px solid var(--border-soft); background: var(--surface); } .data-table td { padding:10px var(--sp-5); border-bottom:1px solid var(--border-soft); font-size: var(--fs-sm); height: var(--table-row-h); } .data-table tr:last-child td { border-bottom:none; } .data-table tbody tr:hover { background: var(--surface-warm); } .data-table .num { text-align:right; } .data-table .rowlink { color: var(--brand-600); font-weight: var(--fw-emphasize); cursor:pointer; background:none; border:none; font-family:inherit; font-size:inherit; padding:0; } .data-table .rowlink:hover { text-decoration:underline; } /* —— 六态徽章（DESIGN §2.1：图标+文字同色，24px）—— */ .lc-badge { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius: var(--r-sm); font-size:11.5px; font-weight: var(--fw-emphasize); white-space:nowrap; } .lc-badge.trial { background: var(--st-trial-bg); color: var(--st-trial-fg); } .lc-badge.active { background: var(--st-active-bg); color: var(--st-active-fg); } .lc-badge.expiring { background: var(--st-expiring-bg); color: var(--st-expiring-fg); } .lc-badge.grace { background: var(--st-grace-bg); color: var(--st-grace-fg); } .lc-badge.locked { background: var(--st-locked-bg); color: var(--st-locked-fg); } .lc-badge.archived { background: var(--st-archived-bg); color: var(--st-archived-fg); } .lc-dot { width:8px; height:8px; border-radius:50%; display:inline-block; } .lc-dot.trial{background:var(--st-trial-fg)} .lc-dot.active{background:var(--st-active-fg)} .lc-dot.expiring{background:var(--st-expiring-fg)} .lc-dot.grace{background:var(--st-grace-fg)} .lc-dot.locked{background:var(--st-locked-fg)} .lc-dot.archived{background:var(--st-archived-fg)} /* —— 到期甘特时间轴（未来 60 天；色点只有蓝/绿/琥珀——红色纪律由结构达成）—— */ .gantt { padding: var(--sp-4) var(--sp-5) var(--sp-5); } .gantt-scale { display:flex; justify-content:space-between; font-size:10.5px; color:var(--meta); margin-bottom:8px; padding-left:120px; } .gantt-row { display:flex; align-items:center; gap: var(--sp-3); padding:6px 0; } .gantt-row .g-name { width:120px; flex-shrink:0; display:flex; align-items:center; gap:7px; font-size: var(--fs-xs); } .gantt-row .g-name b { font-weight: var(--fw-emphasize); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gantt-track { position:relative; flex:1; height:10px; border-radius:999px; background: var(--surface-warm); } .gantt-bar { position:absolute; top:0; height:10px; border-radius:999px; opacity:.9; } .gantt-bar.active { background: var(--brand-500); } .gantt-bar.expiring { background: var(--warn); } .gantt-marker { position:absolute; top:-3px; width:2px; height:16px; background: var(--fg); opacity:.5; } /* —— 开店向导 —— */ .wizard-steps { display:flex; align-items:center; gap: var(--sp-2); margin-bottom: var(--sp-6); } .wz-step { display:flex; align-items:center; gap:8px; font-size: var(--fs-sm); color: var(--muted); } .wz-step .wz-n { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--surface-warm); font-size:12px; font-weight: var(--fw-emphasize); color: var(--muted); } .wz-step.active { color: var(--brand-600); font-weight: var(--fw-emphasize); } .wz-step.active .wz-n { background: var(--brand-600); color:#fff; } .wz-step.done .wz-n { background: var(--success-bg); color: var(--success); } .wz-line { width:48px; height:1px; background: var(--border); } .tpl-cards { display:grid; grid-template-columns:repeat(2,1fr); gap: var(--sp-4); } .tpl-card { border:1.5px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); cursor:pointer; background: var(--surface); transition: var(--motion-fast) var(--ease-standard); } .tpl-card:hover { border-color: var(--brand-500); box-shadow: var(--shadow-2); } .tpl-card.active { border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-50); } .tpl-card .tc-ic { width:44px; height:44px; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom: var(--sp-3); } .tpl-card h4 { font-size: var(--fs-lg); font-weight: var(--fw-announce); } .tpl-card .tc-sub { font-size: var(--fs-xs); color: var(--muted); margin-top:4px; line-height:1.6; } .plan-cards { display:grid; grid-template-columns:repeat(4,1fr); gap: var(--sp-3); } .plan-card { border:1.5px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); cursor:pointer; background:var(--surface); } .plan-card.active { border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-50); } .plan-card .pc-name { font-weight: var(--fw-emphasize); font-size: var(--fs-sm); } .plan-card .pc-price { font-size: var(--fs-2xl); font-weight: var(--fw-announce); margin:6px 0 2px; } .plan-card .pc-price small { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-read); } .plan-card .pc-feat { font-size:11px; color: var(--muted); line-height:1.7; margin-top:6px; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-4); } .f-field label { display:block; font-size: var(--fs-xs); font-weight: var(--fw-emphasize); color: var(--fg-2); margin-bottom:6px; } .f-field input, .f-field select { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-sm); font-family:inherit; background:var(--surface); color:var(--fg); } .f-field input:focus, .f-field select:focus { outline:2px solid var(--brand-500); outline-offset:1px; border-color: var(--brand-500); } .f-hint { font-size:11px; color: var(--meta); margin-top:5px; } /* 文本长度实时计数（v3.3.3）：平时低调藏在右侧，接近上限才变色提醒，到顶变警示色。 为什么不一上来就红：满屏红字反而让用户焦虑，只在"快满了/满了"时才需要被看见。 */ .char-count { float:right; font-size:10.5px; color:var(--meta); font-variant-numeric:tabular-nums; line-height:1.6; } .char-count.near-max { color: var(--warn); } .char-count.at-max { color: var(--danger); font-weight: var(--fw-emphasize); } .confirm-box { background: var(--surface-warm); border:1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); } .confirm-box .cb-row { display:flex; justify-content:space-between; padding:5px 0; font-size: var(--fs-sm); } .confirm-box .cb-row .k { color: var(--muted); } .confirm-box .cb-row .v { font-weight: var(--fw-emphasize); } .confirm-box .cb-total { border-top:1px dashed var(--border); margin-top:6px; padding-top:10px; } /* —— 续费抽屉 / 通用抽屉 —— */ .drawer-mask { position:fixed; inset:0; background: rgba(20,22,28,.4); z-index:800; display:none; } .drawer-mask.show { display:block; } .drawer { position:fixed; top:0; right:-420px; width:420px; height:100vh; z-index:810; background:var(--surface); box-shadow: var(--shadow-3); display:flex; flex-direction:column; transition: right var(--motion-base) var(--ease-standard); } .drawer.show { right:0; } .drawer-head { display:flex; align-items:center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border-soft); } .drawer-head h3 { font-size: var(--fs-lg); font-weight: var(--fw-announce); flex:1; } .drawer-head .dx { border:none; background:transparent; color:var(--muted); cursor:pointer; padding:4px; border-radius: var(--r-sm); } .drawer-head .dx:hover { background: var(--surface-warm); color: var(--fg); } .drawer-body { flex:1; overflow-y:auto; padding: var(--sp-5); } .drawer-foot { display:flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top:1px solid var(--border-soft); } .drawer-foot .btn { flex:1; } .grace-note { display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius: var(--r-sm); background: var(--st-grace-bg); font-size:12px; color: var(--st-grace-fg); line-height:1.6; } /* —— 守卫弹窗 / 确认框（写操作冻结说明，绝不灰按钮）—— */ .modal-mask { position:fixed; inset:0; background: rgba(20,22,28,.4); z-index:850; display:none; align-items:center; justify-content:center; } .modal-mask.show { display:flex; } .modal-box { width:360px; background:var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-3); overflow:hidden; display:flex; flex-direction:column; max-height: min(86vh, 100%); } .modal-box .mb-head { display:flex; align-items:center; gap:8px; padding: var(--sp-4) var(--sp-5) 0; font-weight: var(--fw-announce); font-size: var(--fs-md); flex-shrink:0; } .modal-box .mb-body { padding: var(--sp-3) var(--sp-5) var(--sp-4); font-size: var(--fs-sm); color: var(--fg-2); line-height:1.7; overflow-y:auto; min-height:0; overscroll-behavior:contain; } .modal-box .mb-foot { display:flex; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-4); flex-shrink:0; } .modal-box .mb-foot .btn { flex:1; } /* —— 空态 —— */ .empty-state { text-align:center; padding: var(--sp-10) var(--sp-6); color: var(--muted); } .empty-state .icn-24 { width:40px; height:40px; margin:0 auto var(--sp-3); color: var(--meta); } .empty-state p { font-size: var(--fs-sm); } .empty-state .btn { margin-top: var(--sp-4); } /* —— 聚合页迷你图 —— */ .mini-bars { display:flex; align-items:flex-end; gap:2px; height:56px; } .mini-bars i { flex:1; background: var(--brand-500); border-radius:2px 2px 0 0; min-height:2px; opacity:.85; } .dist-row { display:flex; align-items:center; gap: var(--sp-3); padding:7px 0; font-size: var(--fs-sm); } .dist-row .d-name { width:110px; flex-shrink:0; display:flex; align-items:center; gap:7px; } .dist-row .d-track { flex:1; height:8px; background: var(--surface-warm); border-radius:999px; overflow:hidden; } .dist-row .d-fill { height:100%; background: var(--brand-500); border-radius:999px; } .dist-row .d-n { width:60px; text-align:right; color: var(--muted); font-size: var(--fs-xs); } /* —— 区域代理统一入口：页内子导航（3c 整改，侧栏五合一，样式对齐平台端导航质感） —— */ .agency-tabs { display:flex; gap:8px; margin:0 0 14px; overflow-x:auto; padding-bottom:2px; } .agency-tab { flex:0 0 auto; padding:7px 16px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--fg-2); font-size:var(--fs-sm); cursor:pointer; white-space:nowrap; transition:border-color .15s, color .15s, background .15s; } .agency-tab:hover { border-color:var(--brand-600); color:var(--brand-600); } .agency-tab.is-active { background:var(--brand-600); border-color:var(--brand-600); color:#fff; } /* —— 推广员门户（/agent 入口，方案 D1/D2：阶段一「我的返点」空看板） —— */ .agent-wrap { max-width:880px; margin:0 auto; padding:var(--sp-6) var(--sp-4) var(--sp-10); display:flex; flex-direction:column; gap:var(--sp-4); } .agent-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; } .agent-head .ah-id { display:flex; align-items:center; gap:12px; } .agent-head .ah-ic { width:42px; height:42px; border-radius:var(--r-md); background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .agent-head b { display:block; font-size:var(--fs-lg); } .agent-head span { font-size:var(--fs-xs); color:var(--muted); } .agent-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); } @media (max-width:760px) { .agent-grid { grid-template-columns:1fr; } } .agent-card { background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:var(--sp-5); } .agent-card .ac-k { font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px; } .agent-card .ac-v { font-size:26px; font-weight:var(--fw-announce); color:var(--text); } .agent-card .ac-v-sm { font-size:19px; } .agent-card .ac-v i { font-style:normal; color:var(--meta); margin:0 2px; } .agent-card .ac-s { margin-top:8px; font-size:var(--fs-xs); color:var(--muted); line-height:1.7; } .agent-card .ac-link { font-size:var(--fs-xs); color:var(--brand-600); word-break:break-all; background:var(--surface-warm); border-radius:var(--r-sm); padding:8px 10px; } .agent-note { font-size:var(--fs-xs); color:var(--meta); line-height:1.7; } /* 推广员门户页签（阶段二/三：#285）：返点/门店/开店/续费四页 —— 移动端横滑，桌面等分 */ .agent-tabs { display:flex; gap:6px; background:var(--surface-warm); border-radius:var(--r-md); padding:4px; overflow-x:auto; } .agent-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; padding:9px 10px; border:none; border-radius:calc(var(--r-md) - 3px); background:transparent; font-family:inherit; font-size:var(--fs-xs); color:var(--muted); cursor:pointer; } .agent-tab.active { background:var(--surface); color:var(--brand-600); font-weight:var(--fw-emphasize); box-shadow:var(--shadow-1); } /* 门店/申请行：主信息左、状态动作右（窄屏换行） */ .agent-shop { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 2px; border-bottom:1px solid var(--border-soft); } .agent-shop:last-child { border-bottom:none; } .agent-shop .as-main { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; } .agent-shop .as-main b { font-size:var(--fs-sm); } .agent-shop .as-main span { font-size:var(--fs-xs); color:var(--muted); } .agent-shop .as-side { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } /* 激活概览条（待激活催活闭环 2026-10-23）：四桶计数，有待激活时数字强调 */ .as-summary { display:flex; gap:14px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .as-summary b { color:var(--fg); font-size:var(--fs-sm); } .as-summary .as-pending b { color:var(--st-expiring-fg, #b45309); } /* 语义徽章（本页签新增；未覆写 lc-badge 的店铺状态色板） */ .badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; line-height:1.7; font-weight:var(--fw-emphasize); } .badge-warn { background:var(--st-expiring-bg, #fff4e6); color:var(--st-expiring-fg, #b45309); } .badge-success { background:var(--st-active-bg, #e8f8ef); color:var(--st-active-fg, #1a7f4b); } .badge-danger { background:#fdecec; color:#c02626; } .badge-muted { background:var(--surface-warm); color:var(--muted); } /* 「消息」页签未读红点（🟡-7 R7：站内信箱入口信号） */ .agent-tab { position:relative; } .agent-tab-badge { position:absolute; top:4px; right:8px; min-width:16px; height:16px; padding:0 4px; background:var(--st-danger, #e5484d); color:#fff; border-radius:999px; font-size:10px; line-height:16px; text-align:center; font-weight:var(--fw-emphasize); box-shadow:0 0 0 2px var(--surface-warm); } /* 消息列表行：未读加左侧强调条 + 标题加粗 + 未读圆点 */ .agent-notif { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px 10px; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer; } .agent-notif + .agent-notif { border-top:1px solid var(--border-soft); border-radius:0; border-left:none; border-right:none; border-bottom:none; } .agent-notif.unread { background:var(--brand-50, #eef4ff); } .agent-notif .an-main { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; } .agent-notif .an-main b { font-size:var(--fs-sm); } .agent-notif .an-main span { font-size:var(--fs-xs); color:var(--muted); line-height:1.6; } .agent-notif .an-dot { width:8px; height:8px; border-radius:50%; background:var(--brand-600, #2f6fed); flex-shrink:0; margin-top:6px; } /* 费率「默认」角标：该代理未单独设置、使用平台默认费率（D5 回落链可视化） */ .rate-src { font-style:normal; display:inline-block; margin-left:5px; padding:1px 6px; border-radius:999px; background:var(--surface-warm); color:var(--muted); font-size:11px; vertical-align:1px; } /* ============================================================ 手机端（owner / member）：机身 + 底部导航 ============================================================ */ .phone-stage { display:flex; gap: var(--sp-8); justify-content:center; padding: var(--sp-6) 0; flex-wrap:wrap; } /* 店铺管理：行业分组 + 店铺行 + 展开的店员/会员管理 */ .tpl-group { border:1px solid var(--border-soft); border-radius: var(--rd-lg); margin-bottom: var(--sp-4); overflow:hidden; } .tpl-group + .tpl-group { margin-top: 0; } .tg-head { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface-warm); border-bottom:1px solid var(--border-soft); } .tg-ic { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .tg-head b { font-size:13.5px; } .tg-sub { font-size:12px; color:var(--muted); margin-left:auto; } .tg-shop { border-bottom:1px solid var(--border-soft); } .tg-shop:last-child { border-bottom:none; } .tgs-main { display:flex; align-items:center; gap:14px; padding:11px 16px; flex-wrap:wrap; } /* v3.4.7：店铺名是原生 button，必须显式 reset（边框/背景/内边距），否则露出灰边框方块默认样式 */ .tgs-name { font-weight: var(--fw-emphasize); font-size:13.5px; color:var(--brand-600); background:none; border:none; padding:0; font-family:inherit; cursor:pointer; } .tgs-name:hover { text-decoration:underline; } .tgs-owner { font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; min-width:170px; } .tgs-meta { font-size:12px; color:var(--fg-2); } .tgs-ops { margin-left:auto; display:flex; gap:6px; align-items:center; white-space:nowrap; } .tgs-manage { display:grid; grid-template-columns:1fr 1.3fr; gap:14px; padding:4px 16px 14px; background:var(--bg); } .tgm-col { border:1px solid var(--border-soft); border-radius: var(--rd-md); background:var(--surface); padding:10px 12px; min-width:0; } .tgm-head { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:var(--fw-emphasize); margin-bottom:8px; } .tgm-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px dashed var(--border-soft); font-size:12.5px; } .tgm-row .n { font-weight: var(--fw-emphasize); } .tgm-row .p { color:var(--muted); font-size:11.5px; } .tgm-row .sp { margin-left:auto; display:flex; gap:4px; align-items:center; } @media (max-width: 1100px) { .tgs-manage { grid-template-columns:1fr; } } .phone-col { display:flex; flex-direction:column; align-items:center; gap: var(--sp-3); } .phone-col .ph-label { font-size: var(--fs-xs); color: var(--muted); display:flex; align-items:center; gap:6px; } .phone { width: var(--phone-w); height: 720px; background: var(--bg); border-radius: 30px; border:8px solid var(--fg); overflow:hidden; position:relative; display:flex; flex-direction:column; box-shadow: var(--shadow-3); } .phone .ph-status { height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 18px; font-size:11px; color:var(--fg-2); font-weight: var(--fw-emphasize); background:transparent; } .phone .ph-body { flex:1; overflow-y:auto; overflow-x:hidden; } .phone .ph-tabbar { flex-shrink:0; display:flex; background:var(--surface); border-top:1px solid var(--border-soft); padding:6px 4px 10px; } /* 二级页返回条（ADR-017）：粘顶、返回按钮 + 页标题 */ .phone .sub-head { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px; background:var(--surface); padding:10px 14px 8px; border-bottom:1px solid var(--border-soft); } .phone .sub-head .sub-back { display:inline-flex; align-items:center; gap:4px; border:none; background:none; color:var(--brand-600); font-size:13px; cursor:pointer; padding:4px 6px; border-radius:8px; flex-shrink:0; } .phone .sub-head .sub-back:active { background:var(--brand-50); } .phone .sub-head .sub-title { font-size:14px; font-weight:var(--fw-emphasize); color:var(--fg-1); } .phone .ph-tabbar .tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--meta); cursor:pointer; padding:4px 0; border:none; background:none; font-family:inherit; } .phone .ph-tabbar .tab.active { color: var(--brand-600); font-weight: var(--fw-emphasize); } .phone .ph-tabbar .tab .icn-16 { width:18px; height:18px; } /* —— 手机内通用（延续两原型语言，Token 化）—— */ .m-top { padding:14px 16px 4px; display:flex; align-items:center; gap:10px; } .m-top .mt-av { width:40px; height:40px; border-radius:13px; background:var(--brand-600); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:var(--fw-announce); } .m-top .mt-n { font-weight:var(--fw-announce); font-size:var(--fs-md); } .m-top .mt-s { font-size:11px; color:var(--meta); } .m-banner { margin:10px 16px; padding:16px; border-radius:var(--r-lg); background:var(--brand-600); color:#fff; box-shadow: var(--glow-brand); } .m-banner .mb-lbl { font-size:11px; opacity:.85; display:flex; align-items:center; gap:5px; } .m-banner .mb-amt { font-size:30px; font-weight:var(--fw-announce); margin-top:2px; } .m-banner .mb-row { display:flex; margin-top:10px; } .m-banner .mb-row .st { flex:1; } .m-banner .mb-row .st .n { font-weight:var(--fw-announce); font-size:var(--fs-md); } .m-banner .mb-row .st .t { font-size:10.5px; opacity:.8; } /* —— 实体会员卡（扫码核销 ADR-023）：品牌纯色卡面 + 白底二维码 + 卡号/余额行 —— */ .vcard { margin:12px 16px 4px; padding:14px 16px 12px; border-radius:var(--r-xl); background:var(--brand-600); color:#fff; box-shadow:var(--glow-brand); position:relative; overflow:hidden; } .vcard .vc-head { display:flex; align-items:center; justify-content:space-between; } .vcard .vc-shop { display:flex; align-items:center; gap:5px; font-size:11.5px; opacity:.92; min-width:0; } .vcard .vc-shop .icn-14 { flex-shrink:0; } .vcard .vc-level { font-size:10px; font-weight:var(--fw-emphasize); letter-spacing:.06em; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.18); flex-shrink:0; } .vcard .vc-main { display:flex; align-items:center; gap:12px; margin-top:12px; } .vcard .vc-info { flex:1; min-width:0; display:flex; align-items:center; gap:10px; } .vcard .vc-av { width:38px; height:38px; border-radius:12px; flex-shrink:0; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-weight:var(--fw-announce); font-size:var(--fs-lg); } .vcard .vc-n { font-weight:var(--fw-announce); font-size:var(--fs-md); line-height:1.35; } .vcard .vc-s { font-size:11px; opacity:.82; } .vcard .vc-no { font-size:10px; opacity:.72; letter-spacing:.08em; margin-top:1px; } /* 卡面仅放小图标按钮（ADR-023 交互修订）：点击弹大码，卡面保持轻量 */ .vcard .vc-qr { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); border-radius:var(--r-md); padding:7px 11px 5px; color:#fff; font-family:inherit; cursor:pointer; } .vcard .vc-qr .icn-24 { width:21px; height:21px; } .vcard .vc-qr-t { font-size:9px; letter-spacing:.14em; } .vcard .vc-qr:active { background:rgba(255,255,255,.28); } .vcard .vc-row { display:flex; margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.22); } .vcard .vc-row .st { flex:1; min-width:0; } .vcard .vc-row .st .n { font-weight:var(--fw-announce); font-size:var(--fs-sm); } .vcard .vc-row .st .t { font-size:9.5px; opacity:.78; } /* —— 核销码弹层（ADR-023 交互修订）：白卡大码 + 会员信息，供老板扫码 —— */ .qr-sheet { text-align:center; } .qr-sheet .qs-card { display:inline-block; background:var(--surface); border-radius:var(--r-lg); padding:16px 16px 12px; box-shadow:var(--shadow-2); color:var(--fg); } .qr-sheet .qr-svg { display:block; } .qr-sheet .qs-name { font-weight:var(--fw-announce); font-size:var(--fs-md); margin-top:8px; } .qr-sheet .qs-no { font-size:11px; color:var(--meta); letter-spacing:.1em; } .qr-sheet .f-hint { margin-top:12px; } /* —— 扫码核销页（ADR-023）：取景框 + 手动降级输入 —— */ .scan-box { margin:4px 16px 0; height:216px; border-radius:var(--r-lg); overflow:hidden; background:var(--fg); position:relative; } .scan-box video { width:100%; height:100%; object-fit:cover; display:block; } .scan-frame { position:absolute; left:50%; top:50%; width:168px; height:168px; transform:translate(-50%,-50%); pointer-events:none; } .sf-c { position:absolute; width:26px; height:26px; border:3px solid #fff; opacity:.92; } .sf-c.tl { left:0; top:0; border-right:none; border-bottom:none; border-radius:10px 0 0 0; } .sf-c.tr { right:0; top:0; border-left:none; border-bottom:none; border-radius:0 10px 0 0; } .sf-c.bl { left:0; bottom:0; border-right:none; border-top:none; border-radius:0 0 0 10px; } .sf-c.br { right:0; bottom:0; border-left:none; border-top:none; border-radius:0 0 10px 0; } .scan-beam { position:absolute; left:10px; right:10px; height:2px; border-radius:1px; background:rgba(255,255,255,.85); animation:scan-beam 2.2s linear infinite alternate; } @keyframes scan-beam { from { top:14px; } to { top:152px; } } .scan-box .scan-msg { position:absolute; left:0; right:0; bottom:0; padding:7px 12px; font-size:11px; color:#fff; background:rgba(20,22,28,.62); text-align:center; } .scan-box.shake { animation: scan-shake .32s var(--ease-standard); } @keyframes scan-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-6px); } 55% { transform:translateX(5px); } 80% { transform:translateX(-3px); } } .scan-input-row { display:flex; gap:8px; align-items:center; } .scan-input-row .input { flex:1; min-width:0; } .scan-input-row .btn { flex-shrink:0; } .sec-t { display:flex; align-items:center; gap:6px; padding:12px 16px 6px; font-size:12.5px; font-weight:var(--fw-announce); color:var(--fg-2); } .sec-t .more { margin-left:auto; font-size:11px; color:var(--meta); font-weight:var(--fw-read); } .m-card { margin:0 16px 8px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:12px 14px; display:flex; align-items:center; gap:11px; } .m-card .mc-ic { width:36px; height:36px; border-radius:11px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .m-card .mc-info { flex:1; min-width:0; } .m-card .mc-t { font-size:13px; font-weight:var(--fw-emphasize); } .m-card .mc-s { font-size:11px; color:var(--meta); margin-top:1px; } .m-card .mc-tail { text-align:right; } .m-card .mc-b { font-weight:var(--fw-announce); font-size:var(--fs-md); } .m-card .mc-c { font-size:10.5px; color:var(--meta); } .m-empty { text-align:center; padding:36px 20px; color:var(--meta); font-size:12.5px; } .m-empty .icn-24 { width:34px; height:34px; margin:0 auto 10px; color:var(--meta); } .m-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:4px 12px 12px; } .m-grid4 .q { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border-soft); cursor:pointer; border-style:solid; font-family:inherit; } .m-grid4 .q:hover { border-color:var(--brand-500); } .m-grid4 .q .qi { width:34px; height:34px; border-radius:11px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; } .m-grid4 .q span { font-size:11px; color:var(--fg-2); font-weight:var(--fw-emphasize); } .m-flow { display:flex; align-items:center; gap:10px; margin:0 16px 8px; padding:11px 13px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-md); } .m-flow .mf-ic { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .m-flow .mf-info { flex:1; min-width:0; } .m-flow .mf-t { font-size:12.5px; font-weight:var(--fw-emphasize); } .m-flow .mf-s { font-size:10.5px; color:var(--meta); margin-top:1px; } .m-flow .mf-amt { font-weight:var(--fw-announce); font-size:var(--fs-sm); } .m-flow .up { color:var(--success); } .m-flow .down { color:var(--fg); } .m-flow.is-revoked { opacity:.55; } .rec-revoke { border:1px solid var(--danger); color:var(--danger); background:var(--surface); font-size:11px; padding:4px 9px; border-radius:var(--r-sm); cursor:pointer; display:inline-flex; align-items:center; gap:4px; font-family:inherit; } .rec-revoke:hover { background:var(--danger-bg); } .lc-strip { margin:6px 16px 10px; padding:10px 12px; border-radius:var(--r-md); font-size:11.5px; display:flex; align-items:center; gap:8px; line-height:1.5; } .lc-strip.grace { background:var(--st-grace-bg); color:var(--st-grace-fg); } .lc-strip.locked { background:var(--st-locked-bg); color:var(--st-locked-fg); } .lc-strip.expiring { background:var(--st-expiring-bg); color:var(--st-expiring-fg); } /* —— 手机内抽屉（sheet）—— */ #sheetMask { position:absolute; inset:0; background:rgba(20,22,28,.4); z-index:40; display:none; align-items:flex-end; } #sheetMask.show { display:flex; } #sheetBox { width:100%; max-height:82%; background:var(--surface); border-radius:20px 20px 0 0; overflow-y:auto; } /* —— 壳模式（owner / staff / member）：全屏弹层被搬进 .phone 机身内，改以机身定位 —— JS 在 openModal / openDrawer 时把 #modalMask / #drawerMask / #drawer 移入 .phone， 并加 .in-shell 标记；此处把它们的 fixed 覆写为 absolute，遮罩/抽屉即贴着手机壳边缘， 不再盖满整屏、也不再从浏览器右缘滑入。admin 平台端无 .phone，保持全屏 fixed 不动。 */ .phone > .modal-mask, .phone > .drawer-mask { position:absolute; } .phone > .drawer { position:absolute; top:0; right:auto; left:0; width:100%; height:100%; transform:translateX(100%); transition: transform var(--motion-base) var(--ease-standard); } .phone > .drawer.show { transform:translateX(0); } .phone > .modal-mask { align-items:center; justify-content:center; } .sheet-head { display:flex; align-items:center; padding:14px 16px 10px; border-bottom:1px solid var(--border-soft); position:sticky; top:0; background:var(--surface); z-index:2; } .sheet-head h3 { font-size:14.5px; font-weight:var(--fw-announce); flex:1; display:flex; align-items:center; gap:7px; } .sheet-close { border:none; background:var(--surface-warm); width:28px; height:28px; border-radius:50%; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; } .sheet-body { padding:14px 16px; } .sheet-foot { display:flex; gap:10px; padding:10px 16px 20px; border-top:1px solid var(--border-soft); position:sticky; bottom:0; background:var(--surface); } .sheet-foot .btn { flex:1; } /* 预约详情行（v3.2.12：会员端点预约条进详情弹层） */ .ap-detail { border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; } .ap-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border-bottom:1px solid var(--border-soft); font-size:13px; } .ap-row:last-child { border-bottom:none; } .ap-row span { color:var(--meta); flex-shrink:0; min-width:68px; } .ap-row b { margin-left:auto; font-weight:var(--fw-emphasize); color:var(--fg); text-align:right; min-width:0; } .form-row { margin-bottom:13px; } .form-row label { display:block; font-size:11.5px; font-weight:var(--fw-emphasize); color:var(--fg-2); margin-bottom:6px; } .input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-sm); font-size:13px; font-family:inherit; background:var(--surface); color:var(--fg); } .input:focus { outline:2px solid var(--brand-500); outline-offset:1px; } .seg { display:flex; background:var(--surface-warm); border-radius:var(--r-sm); padding:3px; gap:2px; } .seg-item { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 4px; border-radius:5px; font-size:12px; color:var(--muted); cursor:pointer; border:none; background:transparent; font-family:inherit; } .seg-item.active { background:var(--surface); color:var(--brand-600); font-weight:var(--fw-emphasize); box-shadow:var(--shadow-1); } .svc-picker { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .svc-opt { border:1.5px solid var(--border); border-radius:var(--r-md); padding:10px; cursor:pointer; display:flex; gap:8px; align-items:center; background:var(--surface); } .svc-opt.active { border-color:var(--brand-600); background:var(--brand-50); } .svc-opt .so-ic { color:var(--brand-600); } .svc-opt .so-n { font-size:12px; font-weight:var(--fw-emphasize); } .svc-opt .so-p { font-size:10.5px; color:var(--meta); } .staff-scroll { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; } .staff-pill { flex-shrink:0; display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; font-size:12px; } .staff-pill.active { border-color:var(--brand-600); background:var(--brand-50); color:var(--brand-600); font-weight:var(--fw-emphasize); } .staff-pill.is-full { opacity:.55; cursor:not-allowed; border-style:dashed; color:var(--meta); background:var(--muted); } .staff-pill.is-full:hover { border-color:var(--border); } .sp-full { font-size:10px; color:#e03131; font-weight:var(--fw-emphasize); margin-left:2px; } .cb-warn { color:#e03131; } .staff-pill .sp-av { width:22px; height:22px; border-radius:50%; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:var(--fw-emphasize); } .amount-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; } .chip { padding:5px 11px; border-radius:999px; border:1px solid var(--border); font-size:11.5px; color:var(--fg-2); cursor:pointer; background:var(--surface); font-family:inherit; } .chip.active { background:var(--brand-600); color:#fff; border-color:var(--brand-600); } .hidden { display:none !important; } /* —— 胶囊搜索栏（收银/会员高频入口：内嵌图标 + 聚焦品牌色 + 可清空，ADR-021 配套） —— */ .search-bar { display:flex; align-items:center; gap:8px; padding:0 12px; height:40px; border:1.5px solid var(--border); border-radius:999px; background:var(--surface-warm); transition:border-color .15s ease, background .15s ease; margin-bottom:10px; } .search-bar:focus-within { border-color:var(--brand-500); background:var(--surface); } .search-bar > svg { color:var(--meta); flex-shrink:0; } .search-bar input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-size:13px; font-family:inherit; color:var(--fg); padding:0; height:100%; } .search-bar input::placeholder { color:var(--meta); } .sb-clear { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border:none; border-radius:999px; background:var(--border-soft); color:var(--muted); cursor:pointer; padding:0; } .sb-clear:hover { background:var(--border); color:var(--fg-2); } .sb-clear svg { width:12px; height:12px; } .sb-clear.sb-hidden { visibility:hidden; pointer-events:none; } /* —— 套餐功能锁定卡（基础版店铺总览经营看板位，ADR-021） —— */ .dash-locked { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:22px 16px; } .dash-locked > svg { color:var(--meta); } .dash-locked .dl-t { font-size:13.5px; font-weight:var(--fw-emphasize); color:var(--fg-2); } .dash-locked .dl-s { font-size:11.5px; color:var(--muted); line-height:1.7; } .dash-locked .dl-hint { font-size:10.5px; color:var(--meta); } /* —— 数据导出：按钮内进度条（ADR-022 导出服务端化，fetch 流式真进度） —— */ .exp-prog { display:flex; flex-direction:column; align-items:stretch; gap:4px; width:100%; min-width:56px; } .exp-prog-t { font-size:10.5px; color:var(--fg-2); text-align:center; line-height:1.2; } .exp-bar { display:block; height:5px; border-radius:3px; background:var(--surface-warm); overflow:hidden; } .exp-bar > i { display:block; height:100%; width:0; background:var(--brand-600); border-radius:3px; transition:width .2s ease; } /* —— 触达参数：自动化开关行（引流工具箱 G1/G2，v3.3.7） —— */ .cfg-check { display:flex; align-items:flex-start; gap:10px; padding:11px 12px; margin-bottom:8px; background:var(--surface-warm); border:1px solid var(--border-soft); border-radius:var(--r-sm); cursor:pointer; } .cfg-check input { margin-top:2px; width:16px; height:16px; accent-color:var(--brand-600); flex-shrink:0; cursor:pointer; } .cfg-check span { font-size:12.5px; color:var(--fg-2); line-height:1.55; } .cfg-check b { color:var(--fg); } /* 收银台会员码卡（引流工具箱 G3）：白底 QR + 静区 + 链接兜底展示 */ .ce-qr { display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 12px; background:var(--surface-warm); border:1px solid var(--border-soft); border-radius:var(--r-md); } .ce-qr .qr-svg { color:var(--fg); border-radius:var(--r-sm); } .ce-url { font-size:11px; color:var(--meta); word-break:break-all; text-align:center; line-height:1.6; } /* ============================================================ P1-3 店主端经营数据看板（renderShopHome 扩展） 图表全部原生内联 SVG，viewBox 等比自适应，零外部库 ============================================================ */ .dash-dim { display:flex; gap:7px; padding:0 16px 2px; } .dash-card { margin:0 16px 10px; padding:14px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); } .dash-hd { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:var(--fw-announce); color:var(--fg-2); } .dash-hd .dash-v { margin-left:auto; font-weight:var(--fw-announce); font-size:var(--fs-lg); color:var(--fg); letter-spacing:-0.01em; } .dash-hd .dash-u { font-size:10.5px; color:var(--meta); font-weight:var(--fw-read); } .dash-cap { font-size:10.5px; color:var(--meta); margin-top:2px; } .dash-svg { display:block; width:100%; height:auto; margin-top:10px; overflow:visible; } .dash-grid-line { stroke:var(--chart-grid); stroke-width:1; } .dash-bar { transition: height var(--motion-base) var(--ease-standard); } .dash-line { fill:none; stroke:var(--chart-line); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .dash-area { fill:var(--chart-area); stroke:none; } .dash-dot { fill:var(--surface); stroke:var(--chart-line); stroke-width:2; } .dash-dot-peak { fill:var(--chart-line); stroke:var(--surface); stroke-width:2; } .dash-xlabel { fill:var(--meta); font-size:10px; } .dash-split { display:flex; align-items:center; gap:14px; margin-top:12px; } .dash-ring { position:relative; width:92px; height:92px; flex-shrink:0; } .dash-ring svg { display:block; width:92px; height:92px; } .dash-ring .ring-track { fill:none; stroke:var(--chart-ring-track); stroke-width:9; } .dash-ring .ring-val { fill:none; stroke:var(--chart-line); stroke-width:9; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; } .dash-ring .ring-txt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .dash-ring .ring-num { font-size:18px; font-weight:var(--fw-announce); color:var(--fg); line-height:1.1; } .dash-ring .ring-lbl { font-size:9.5px; color:var(--meta); } .dash-legend { flex:1; min-width:0; } .dash-legend .lg-row { display:flex; align-items:baseline; gap:6px; } .dash-legend .lg-n { font-size:22px; font-weight:var(--fw-announce); letter-spacing:-0.02em; } .dash-legend .lg-t { font-size:11px; color:var(--muted); } .dash-legend .lg-s { font-size:10.5px; color:var(--meta); margin-top:4px; } .dash-empty { text-align:center; padding:22px 16px; color:var(--meta); font-size:12px; } .dash-empty .icn-24 { width:30px; height:30px; margin:0 auto 8px; color:var(--meta); } /* ============================================================ P1-1 会员端余额变动明细页（renderMiniBody 扩展） ============================================================ */ .mx-net { display:flex; align-items:center; gap:6px; margin:-4px 16px 4px; padding:9px 13px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-md); font-size:12px; color:var(--muted); } .mx-net .mx-net-v { margin-left:auto; font-weight:var(--fw-announce); color:var(--fg); } .mx-net .mx-net-v.up { color:var(--amt-in); } .mx-net .mx-net-v.down { color:var(--amt-out); } .mx-filters { display:flex; gap:7px; padding:0 16px 6px; flex-wrap:wrap; } .mx-filters .chip { display:inline-flex; align-items:center; gap:5px; } .mx-filters .cnt { font-size:10px; font-weight:var(--fw-announce); color:var(--meta); background:var(--surface-warm); border-radius:999px; padding:0 6px; min-width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; } .mx-filters .chip.active .cnt { color:var(--brand-600); background:var(--surface); } .mx-day { display:flex; align-items:center; gap:6px; padding:10px 16px 4px; font-size:11px; color:var(--meta); font-weight:var(--fw-emphasize); } .mx-day .mx-day-sum { margin-left:auto; font-weight:var(--fw-read); } .mx-row .mf-amt-wrap { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:1px; } .mx-row .mf-amt.tabnum { font-variant-numeric:tabular-nums; } .mx-row .mf-bal { font-size:10px; color:var(--meta); font-variant-numeric:tabular-nums; } .mx-row .mf-amt.rev { color:var(--amt-revoke); } .mx-row .mf-amt.in { color:var(--amt-in); } .mx-row .mf-amt.out { color:var(--amt-out); } .mx-clear { margin:4px auto 0; display:flex; align-items:center; gap:5px; padding:7px 14px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); color:var(--brand-600); font-size:12px; font-family:inherit; cursor:pointer; } /* —— toast 存根（[10] BOOT，batch 2 移入 [05] 共享组件后沿用此样式） —— */ #toasts { position: fixed; right: var(--sp-4); bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 900; pointer-events: none; } .toast { display:flex; align-items:center; gap: var(--sp-2); min-height: 40px; padding: var(--sp-2) var(--sp-4); background: var(--fg); color: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-2); font-size: var(--fs-sm); font-weight: var(--fw-emphasize); animation: toast-in var(--motion-base) var(--ease-standard); } .toast.error { background: var(--danger); color:#fff; } .toast.success { background: var(--success); color:#fff; } .toast.warn { background: var(--warn); color:#fff; } @keyframes toast-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ 真实手机窄屏适配（≤480px）：手机壳模拟器退化为全屏 App 桌面端保留「手机壳居中」演示形态；真机上壳 = 视口，去边框圆角， 隐藏假状态栏与桌面专用 TimeTravel 步进条，防止 376px 壳宽溢出。 ============================================================ */ @media (max-width: 480px) { #stageBar { height:44px; padding:0 12px; gap:8px; } .stage-ctx { display:none; } /* 店铺状态副标题让位（壳内 ph-label 已有） */ .tt-steps, .tt-pill { display:none; } /* 时间模拟为桌面演示功能，手机端整体隐藏 */ .stage-right { gap:6px; } .stage-right select.input { max-width:110px; font-size:12px; } .top-identity { font-size:12px; min-width:0; overflow:hidden; text-overflow:ellipsis; } .top-exit { padding:5px 8px; white-space:nowrap; flex-shrink:0; } .sms-toast { left:12px; right:12px; width:auto; } /* 收起态抽屉从「右侧视口外」改为「transform 移出」，避免 fixed 离屏元素撑宽文档 */ .drawer { right:auto; left:0; width:100%; transform:translateX(100%); transition: transform var(--motion-base) var(--ease-standard); } .drawer.show { transform:translateX(0); } .auth-wrap { padding: var(--sp-6) 16px var(--sp-8); } .phone-stage { padding: 8px 0 0; gap: 0; } .phone-col { width:100%; gap:6px; } .phone-col .ph-label { padding:0 14px; } .phone { width:100%; height: calc(100vh - 52px); /* v3.2.7：顶栏实测 52px；标签行已移除、tabbar 自带 safe-area 内边距，不再多余预留 */ height: calc(100dvh - 52px); /* 支持 dvh 的浏览器用动态视口（移动地址栏收缩） */ border:none; border-radius:0; box-shadow:none; } .phone .ph-status { display:none; } /* 假状态栏：真机有自己的系统状态栏 */ .phone .ph-tabbar { padding:6px 4px calc(10px + env(safe-area-inset-bottom, 0px)); } /* 壳内弹层在窄屏的余量：modal 不要顶满，sheet 底部避开手势条 */ .phone > .modal-mask { padding: 12px; } .modal-box { width:100%; max-width:360px; } #sheetBox { max-height:88%; } .sheet-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } /* ---------- 平台管理端（/admin）窄屏适配 ---------- 背景：admin 端原为桌面全宽布局（侧边栏 + 内容区），在 ≤480px 出现横向溢出： ① .drawer 用 right:-420px 藏在视口外，420>390 撑宽文档； ② .data-table 宽表格不收缩；③ 固定 4 列网格（stat-row/plan-cards）挤压。 修法：容器夹溢出 + 表格横滑 + 网格降列，全部在窄屏断点内生效，不影响桌面端。 */ .admin-shell { overflow-x: clip; } /* 夹住离屏 drawer，不产生滚动容器 */ .admin-side { width: 60px; padding: var(--sp-3) 6px; } /* 侧边栏窄屏收成图标条 */ .admin-side .nav-item { justify-content:center; padding:9px 4px; } .admin-side .nav-item span:not(.nav-badge) { display:none; } /* 仅留图标 */ .admin-side .nav-sec { display:none; } .admin-main { padding: var(--sp-4) 12px; } .admin-head { flex-wrap:wrap; gap: var(--sp-2); } .admin-head h1 { font-size: var(--fs-xl); } .admin-head .actions { margin-left:0; width:100%; flex-wrap:wrap; } .stat-row { grid-template-columns:repeat(2,1fr); gap: var(--sp-3); } .plan-cards, .tpl-cards, .form-grid { grid-template-columns:1fr; } .m-grid4 { grid-template-columns:repeat(2,1fr); } .drawer { width:100%; right:-100%; } /* 抽屉改满宽 + 百分比移出 */ .drawer.show { right:0; } /* 宽表格：窄屏改为容器内横滑，不撑宽文档 */ .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; } .data-table { min-width:520px; } } /* ============================================================ 平台管理端（/admin）响应式适配 —— 手机与窄浏览器窗口同样生效 判定一律走「视口宽度」而非 UA：桌面把窗口拖窄同样进入窄屏布局， 不做两套代码，避免手机与桌面表现分叉。 体检发现的真实问题（375px 实测）： ① 侧边栏 248px 被挤成 60px 图标条，导航文字丢失，只能盲点 ② 触控目标偏小：退出 61×29、开新店 93×37、店铺名 66×24（iOS 建议 ≥44） ③ 面板标题与内联搜索框（内联 width:230px）挤在一行，右侧被裁切 ④ 统计卡 4 列在窄屏下每列不足 90px ============================================================ */ /* ---- 平板 / 窄窗口（≤768px）：先做温和降级 ---- */ @media (max-width: 768px) { .admin-main { padding: var(--sp-4); } .stat-row { grid-template-columns: repeat(2, 1fr); } .admin-head { flex-direction: column; gap: var(--sp-3); } .admin-head .actions { margin-left: 0; flex-wrap: wrap; } .admin-head .actions .btn { flex: 1 1 auto; } .panel-head { flex-wrap: wrap; row-gap: 8px; } } /* ---- 手机（≤480px）：侧栏转顶部横滑 Tab + 触控目标放大 ---- */ @media (max-width: 480px) { /* ① 侧边栏 → 顶部可横滑的 Tab 条：保留导航文字，不再挤成无字图标条 */ .admin-shell { flex-direction: column; } .admin-side { width: 100%; flex-direction: row; flex-shrink: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-right: none; border-bottom: 1px solid var(--border); padding: var(--sp-2); gap: 4px; } .admin-side .nav-sec { display: none; } /* 分组标题在横条里无意义 */ .admin-side .nav-item { width: auto; flex-shrink: 0; white-space: nowrap; padding: 8px 12px; min-height: 44px; /* ② 触控目标 */ } .admin-side .nav-item .nav-badge { margin-left: auto; } .admin-main { padding: var(--sp-4) var(--sp-3); } .stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } /* ② 触控目标统一抬到 44px（iOS HIG 下限） */ .btn, .btn-sm, .top-exit, .acct, .lc-badge, .tg-head, .plan-card, .tpl-card { min-height: 44px; } .top-exit { padding: 8px 12px; } /* 店铺名（.tgs-name）是进入详情的主入口，默认仅 66×24，窄屏必须放大到可点 */ .tgs-name { min-height: 44px; display: inline-flex; align-items: center; } .tgs-ops { flex-wrap: wrap; } /* ③ 内联搜索框（页面里写死 width:230px）在窄屏撑满一行，避免右侧被裁切 */ .panel-head .input, .panel-head input.input { width: 100% !important; max-width: 100%; } .panel-head .more { width: 100%; } .admin-head .actions { width: 100%; } .admin-head .actions .btn { flex: 1 1 100%; justify-content: center; } /* ④ 多列确认框 / 分布行改单列，窄屏不挤压 */ .confirm-box { grid-template-columns: 1fr !important; } .dist-row { flex-wrap: wrap; } .dist-row .d-name { width: 100%; } /* 弹窗与抽屉满宽：窄屏下侧滑距离按百分比已在 480 块处理，这里补圆角与内边距 */ .modal { width: calc(100vw - 24px); max-width: calc(100vw - 24px); border-radius: var(--r-md); } .panel { border-radius: var(--r-md); } } /* ---------- v3.0.8 多店切换器（自绘按钮 + 浮层）：原生 select 弹出层是系统 UI 无法定制， 移动端观感差，故自绘 dropdown。全部走 Token（无硬编码色、无渐变、无 emoji，图标用 SVG sprite） ---------- */ .shop-switcher { display:flex; align-items:center; gap: var(--sp-2); max-width: 160px; padding:5px 12px; border-radius: 999px; border:1px solid var(--border); background: var(--surface-warm); color: var(--fg-2); font-size: var(--fs-xs); cursor:pointer; font-family:inherit; transition: var(--motion-fast) var(--ease-standard); } .shop-switcher:hover { border-color: var(--brand-500); color: var(--brand-600); } .shop-switcher .ss-cur { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight: var(--fw-emphasize); } .shop-switcher .icn-14 { flex-shrink:0; color: var(--meta); } /* 浮层容器：mask 全屏透明点击层（点空白收起），pop 定位由 JS 按按钮 rect 计算 top/right */ #ssPopMask { position: fixed; inset: 0; z-index: 1400; } .ss-mask { position: fixed; inset: 0; background: transparent; } .ss-pop { position: fixed; z-index: 1401; min-width: 220px; max-width: 78vw; max-height: 60vh; overflow-y:auto; background: var(--surface); border:1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: var(--sp-2); animation: ssIn var(--motion-fast) var(--ease-standard); } @keyframes ssIn { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform:none; } } .ss-head { padding: 6px 10px 8px; margin-bottom: 4px; font-size: 11px; color: var(--meta); border-bottom: 1px solid var(--border-soft); letter-spacing: 0.01em; } .ss-item { display:flex; align-items:center; gap: var(--sp-2); width:100%; padding: 9px 10px; border:none; border-radius: var(--r-sm); background: transparent; cursor:pointer; font-family:inherit; font-size: var(--fs-sm); color: var(--fg-2); text-align:left; transition: var(--motion-fast) var(--ease-standard); } .ss-item:hover { background: var(--surface-warm); color: var(--fg); } .ss-item.active { background: var(--brand-50); color: var(--brand-600); font-weight: var(--fw-emphasize); } .ss-item .ss-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ss-item .icn-16 { flex-shrink:0; color: var(--brand-600); } @media (prefers-reduced-motion: reduce) { .ss-pop { animation: none; } } /* ============================================================ 业绩指标（P1-4）：老板可配目标 + 完成度追踪 全部 var() 引用，零新增 hex；视觉语言延续 dash-* / m-card ============================================================ */ /* 总览页「业绩指标」设置入口（.m-top 尾部右侧） */ .m-top .goal-entry { margin-left:auto; flex-shrink:0; width:34px; height:34px; border:none; border-radius:var(--r-md); background:var(--surface-warm); color:var(--brand-600); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--motion-fast) var(--ease-standard); } .m-top .goal-entry:hover { background:var(--brand-50); } /* 看板：未设目标的引导块（区别纯空态 dash-empty：带 CTA） */ .dash-goalset { text-align:center; padding:18px 16px 4px; } .dash-goalset .icn-24 { width:28px; height:28px; margin:0 auto 8px; color:var(--meta); } .dash-goalset .dgs-t { font-size:12.5px; font-weight:var(--fw-emphasize); color:var(--fg-2); } .dash-goalset .dgs-s { font-size:11px; color:var(--meta); margin-top:3px; } .dash-goalset .btn { margin-top:12px; } /* 配置页：表单卡片（弹窗内复用）与概要卡（v3.1.2：页面只读概要，表单移入弹窗） */ .goal-card { margin:0 16px 10px; padding:14px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); } .gs-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:var(--fs-sm); } .gs-row .k { color:var(--muted); } .gs-row .v { font-weight:var(--fw-emphasize); } /* 配置页：空态引导卡（v3.1.2：未设置目标时显示，虚线边框与储值方案空态同语言） */ .goals-empty { margin:0 16px 10px; padding:26px 16px; text-align:center; border:1.5px dashed var(--border); border-radius:var(--r-lg); background:var(--surface); } .goals-empty .icn-24 { color:var(--meta); } .goals-empty .ge-t { font-size:var(--fs-sm); font-weight:var(--fw-emphasize); margin-top:8px; } .goals-empty .ge-s { font-size:11.5px; color:var(--meta); margin-top:4px; line-height:1.6; } /* 配置页：员工逐人目标行（m-card 视觉语言） */ .staff-goal-list { display:flex; flex-direction:column; } .sg-row { display:flex; align-items:center; gap:10px; padding:10px 0; } .sg-row + .sg-row { border-top:1px solid var(--border-soft); } .sg-row .sg-av { width:32px; height:32px; border-radius:10px; flex-shrink:0; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; font-weight:var(--fw-announce); font-size:13px; } .sg-row .sg-info { flex:1; min-width:0; } .sg-row .sg-input { display:flex; align-items:center; gap:4px; flex-shrink:0; width:118px; } .sg-row .sg-input .sg-unit { font-size:12px; color:var(--meta); } .sg-row .sg-input .input { padding:8px 10px; text-align:right; } /* 排名区（v3.1.1：融入 dash-card——卡内轻量行，排版参数与 m-card 一致，虚线分隔同储值方案操作行） */ .rank-list { margin-top:10px; display:flex; flex-direction:column; } .rank-list .rank-row { display:flex; align-items:center; gap:11px; padding:10px 0; } .rank-list .rank-row + .rank-row { border-top:1px dashed var(--border); } .rank-list .rank-row .mc-info { flex:1; min-width:0; } .rank-list .rank-row .mc-t { font-size:13px; font-weight:var(--fw-emphasize); } .rank-list .rank-row .mc-s { font-size:11px; color:var(--meta); margin-top:1px; } .rank-list .rank-row .mc-tail { text-align:right; } .rank-list .rank-row .mc-b { font-weight:var(--fw-announce); font-size:var(--fs-md); } .rank-list .rank-row .mc-c { font-size:10.5px; color:var(--meta); } .rank-no { width:20px; height:20px; border-radius:6px; font-size:11px; font-weight:var(--fw-announce); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--surface-warm); color:var(--meta); } .rank-no--1 { background:var(--brand-600); color:#fff; } .rank-no--2, .rank-no--3 { background:var(--brand-50); color:var(--brand-600); } .rank-row .rk-av { width:34px; height:34px; border-radius:11px; flex-shrink:0; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; font-weight:var(--fw-announce); font-size:13px; } .rank-row .rk-bar { height:4px; border-radius:2px; background:var(--surface-warm); margin-top:6px; overflow:hidden; } .rank-row .rk-bar > i { display:block; height:100%; background:var(--brand-600); border-radius:2px; transition:width var(--motion-base) var(--ease-standard); } /* ---------- v3.1.6 会员选择器：搜索 + 竖排单选列表（替代原生 select） ---------- 原生