/* ========================================================== 工作台外壳样式（截图风格窄侧边栏） —— 基础组件（卡片/表格/按钮/弹窗）仍由 _theme.css 提供 ========================================================== */ :root{ --wb-sidebar:#ffffff; --wb-bg:#f5f5f7; --wb-text:#1f2937; --wb-muted:#6b7280; --wb-line:#e5e7eb; --wb-green:#16a34a; --wb-green-bg:#e6f7ed; } *{ margin:0; padding:0; box-sizing:border-box; } html,body{ height:100%; } body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--wb-bg); color:var(--wb-text); -webkit-font-smoothing:antialiased; } .hidden{ display:none !important; } /* ---------- 登录（Apple 浅色风：苹果灰底 + 磨砂卡片 + 系统蓝点缀） ---------- */ .wb-login{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: radial-gradient(1100px 620px at 18% -12%, #e9eefb 0%, rgba(233,238,251,0) 62%), radial-gradient(900px 520px at 100% 0%, #eef1f6 0%, rgba(238,241,246,0) 58%), linear-gradient(180deg, #fbfcfd 0%, #f2f3f7 100%); } .wb-login-box{ background:rgba(255,255,255,.82); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(255,255,255,.75); border-radius:20px; padding:40px; width:360px; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 32px -8px rgba(16,24,40,.10), 0 32px 64px -24px rgba(16,24,40,.14); } .wb-brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:26px; } .wb-brand img{ width:38px; height:38px; border-radius:9px; background:#fff; padding:2px; box-shadow:0 1px 3px rgba(16,24,40,.06); } .wb-brand h1{ font-size:20px; font-weight:600; letter-spacing:.4px; color:#1d1d1f; } .wb-login-box input{ width:100%; height:46px; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:0 14px; margin-bottom:14px; font-size:14px; outline:none; color:#1d1d1f; background:rgba(255,255,255,.9); transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; } .wb-login-box input::placeholder{ color:#a1a1a6; } .wb-login-box input:focus{ border-color:#0071e3; background:#fff; box-shadow:0 0 0 3px rgba(0,113,227,.14); } .wb-login-btn{ width:100%; height:46px; background:#0071e3; color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; letter-spacing:3px; box-shadow:0 4px 14px -2px rgba(0,113,227,.35); transition:background .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1); } .wb-login-btn:hover{ background:#0077ed; box-shadow:0 8px 20px -4px rgba(0,113,227,.42); transform:translateY(-1px); } .wb-login-btn:active{ background:#006edb; transform:translateY(0); box-shadow:0 2px 8px -2px rgba(0,113,227,.35); } .wb-login-box .err{ color:#d93025; font-size:13px; margin-bottom:12px; text-align:center; } /* ---------- 布局 ---------- */ .wb-layout{ display:flex; height:100vh; overflow:hidden; } .wb-sidebar{ width:92px; background:var(--wb-sidebar); border-right:1px solid var(--wb-line); flex-shrink:0; display:flex; flex-direction:column; align-items:center; padding:18px 8px 12px; gap:14px; overflow-y:auto; } .wb-avatar{ width:46px; height:46px; border-radius:50%; overflow:hidden; background:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.06); } .wb-avatar img{ width:100%; height:100%; object-fit:contain; } .wb-nav{ display:flex; flex-direction:column; gap:4px; width:100%; } .wb-bottom{ margin-top:auto; width:100%; border-top:1px solid #f3f4f6; padding-top:8px; display:flex; flex-direction:column; gap:4px; } .wb-navitem{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 2px; border-radius:14px; cursor:pointer; color:var(--wb-muted); font-size:12px; font-weight:500; border:none; background:transparent; transition:.18s; font-family:inherit; } .wb-navitem:hover{ background:#f3f4f6; color:var(--wb-text); } .wb-navitem.active{ background:var(--wb-green-bg); color:var(--wb-green); } .wb-navitem svg{ width:22px; height:22px; } .wb-navitem span{ white-space:nowrap; } .wb-main{ flex:1; min-width:0; display:flex; flex-direction:column; } .wb-topbar{ height:60px; background:#fff; border-bottom:1px solid var(--wb-line); flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 24px; gap:16px; } .wb-topbar h2{ font-size:17px; font-weight:700; white-space:nowrap; } .wb-topbar-right{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--wb-muted); } .wb-user{ font-weight:600; color:var(--wb-text); } .wb-lang{ height:30px; border:1px solid var(--wb-line); border-radius:8px; padding:0 6px; font-size:12px; background:#fff; color:var(--wb-text); outline:none; } .wb-ghost{ height:30px; padding:0 12px; border:1px solid var(--wb-line); border-radius:8px; background:#fff; color:var(--wb-text); font-size:12px; cursor:pointer; transition:.18s; } .wb-ghost:hover{ background:#f3f4f6; } .wb-content{ flex:1; overflow:auto; padding:22px 24px 40px; } /* ---------- 修正 _theme.css 与外壳的冲突 ---------- _theme.css 的表头 sticky(top:73px) 和 .card 上边距 是为旧版 index.html 的置顶大标题预留的，这里改为内容区内聚 */ .wb-content thead th{ position:static; } .wb-content .card{ margin:0 0 16px; } .wb-content .stat-grid{ margin:0 0 16px; } .wb-content .subtabs{ margin:0 0 16px; } .wb-content .toolbar{ margin:0 0 16px; } .wb-content .tab-panel > h2{ display:none; } /* ---------- 商品模块 · 板块标识条（阶段九） ---------- 三个板块（京都好物 / 古美术鉴赏 / 苔藓微景）共用一份商品面板 DOM， 切二级 TAB 时靠这条说明让人一眼看出「现在在哪、走什么链路」， 它替代了原来那个「业务板块」下拉框（已删除，状态源统一收敛到二级 TAB）。 */ .biz-head{ display:flex; align-items:center; gap:9px; padding:11px 15px; margin:0 0 16px; background:#fff; border:1px solid var(--wb-line); border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); } .biz-head .bh-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:#0071e3; } .biz-head .bh-dot[data-biz="crossborder"]{ background:#0071e3; } .biz-head .bh-dot[data-biz="antique"]{ background:#8a6d3b; } .biz-head .bh-dot[data-biz="moss"]{ background:#6f8f6a; } .biz-head .bh-dot[data-biz="vegan"]{ background:#93a253; } .biz-head .bh-name{ font-size:15px; font-weight:600; color:#1d1d1f; white-space:nowrap; } .biz-head .bh-desc{ font-size:12.5px; color:var(--wb-muted); line-height:1.5; } /* 弹窗里的一行板块说明（商品板块提示 / 分类板块提示） */ .form-hint{ font-size:12.5px; color:#6b7280; line-height:1.6; margin:-4px 0 12px; padding:8px 11px; background:#f7f8fa; border-radius:9px; } /* 商品分类页的「分类板块」次级选择器： 和顶部二级 TAB 是同样三个板块名，若长得一模一样会让人分不清层级 —— 这里改用更小的内嵌胶囊 + 「分类板块」前缀标签，视觉上明确是「挑一个板块看它的分类」。 */ .biz-seg-row{ display:flex; align-items:center; gap:10px; margin:2px 0 16px; flex-wrap:wrap; } .biz-seg-label{ font-size:12.5px; color:#8e8e93; white-space:nowrap; } .subtabs.biz-seg{ margin:0; padding:3px; gap:2px; background:#f2f3f5; box-shadow:inset 0 1px 2px rgba(16,24,40,.05); } .subtabs.biz-seg .subtab{ padding:6px 13px; font-size:12.5px; border-radius:999px; } .subtabs.biz-seg .subtab.active{ color:#0071e3; box-shadow:0 1px 3px rgba(16,24,40,.13); } @media (max-width: 900px){ .biz-head{ flex-wrap:wrap; gap:3px 8px; padding:11px 13px; } .biz-head .bh-desc{ width:100%; font-size:12px; } .form-hint{ font-size:12px; } .biz-seg-row{ gap:6px; } } /* ---------- 帮助页 ---------- */ .wb-help{ max-width:760px; line-height:1.9; } .wb-help h3{ font-size:16px; margin-bottom:10px; } .wb-help p{ font-size:14px; color:#374151; margin-bottom:6px; } /* ---------- 首页常用功能（可自定义） ---------- */ .wb-shortcuts{ padding:18px 20px; } .wb-sc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .wb-sc-head h3{ font-size:15px; font-weight:700; } .wb-sc-edit{ height:30px; padding:0 12px; border:1px solid var(--wb-line); border-radius:8px; background:#fff; font-size:12px; cursor:pointer; color:var(--wb-text); transition:.18s; } .wb-sc-edit:hover{ background:#f3f4f6; border-color:#d1d5db; } .wb-sc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:12px; } .wb-sc-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 8px; border:1px solid var(--wb-line); border-radius:14px; background:#fff; cursor:pointer; transition:.18s; color:var(--wb-text); font-size:13px; font-weight:500; text-align:center; } .wb-sc-item:hover{ border-color:var(--wb-green); color:var(--wb-green); background:var(--wb-green-bg); transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(22,163,74,.55); } .wb-sc-item svg{ width:24px; height:24px; } .wb-sc-item small{ display:block; font-size:11px; color:var(--wb-muted); font-weight:400; margin-top:2px; } .wb-sc-empty{ padding:26px; text-align:center; color:var(--wb-muted); font-size:13px; } /* 自定义弹窗 */ .wb-sc-tip{ font-size:12px; color:var(--wb-muted); margin-bottom:10px; line-height:1.6; } .wb-sc-list{ max-height:38vh; overflow:auto; margin-bottom:6px; } .wb-sc-row{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; } .wb-sc-row:hover{ background:#f7f8fa; } .wb-sc-row input[type=checkbox]{ width:16px; height:16px; cursor:pointer; } .wb-sc-row .nm{ flex:1; font-size:13px; } .wb-sc-row .cat{ font-size:12px; color:var(--wb-muted); } .wb-sc-order{ display:flex; gap:4px; } .wb-sc-order button{ width:24px; height:24px; border:1px solid var(--wb-line); border-radius:6px; background:#fff; cursor:pointer; font-size:12px; line-height:1; color:var(--wb-text); } .wb-sc-order button:hover{ background:#f3f4f6; } /* ---------- 手机端：自定义常用功能 iOS 卡片样式 ---------- initShortcuts 默认就在两种端都渲染（共用 DOM），仅通过此处的媒体查询调样式， 不再有第二个"常用功能"块。 */ @media (max-width: 900px){ .wb-shortcuts{ padding:11px 11px 13px; background:rgba(255,255,255,.85); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border:0.5px solid rgba(0,0,0,.06); border-radius:11px; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 5px 14px -8px rgba(0,0,0,.10); margin-top:3px; } .wb-sc-head h3{ font-size:16px; font-weight:700; color:#1d1d1f; letter-spacing:-0.15px; } .wb-sc-edit{ height:24px; padding:0 11px; border-radius:12px; font-size:12px; } .wb-sc-grid{ grid-template-columns:repeat(4, 1fr) !important; gap:9px; } .wb-sc-item{ padding:4px 1px 3px !important; border:none !important; background:transparent !important; font-size:13px; color:#1d1d1f; gap:4px; box-shadow:none !important; transform:none !important; border-radius:7px; } .wb-sc-item:hover, .wb-sc-item:active{ border:none !important; color:#1d1d1f !important; background:rgba(0,0,0,.04) !important; transform:none !important; box-shadow:none !important; } .wb-sc-item:active{ transform:scale(.96) !important; } .wb-sc-item svg{ width:19px !important; height:19px !important; } .wb-sc-item small{ font-size:10px !important; color:#8e8e93 !important; margin-top:1px !important; } .wb-sc-empty{ font-size:12px !important; padding:30px 15px !important; } } /* ---------- 全站列表自动分页 ---------- */ .wb-pager{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:14px; font-size:13px; color:var(--wb-muted); } .wb-pager button{ min-width:30px; height:30px; padding:0 9px; border:1px solid var(--wb-line); border-radius:8px; background:#fff; color:var(--wb-text); font-size:12px; cursor:pointer; transition:.15s; font-family:inherit; } .wb-pager button:hover:not([disabled]):not(.cur){ background:#f3f4f6; border-color:#d1d5db; } .wb-pager button.cur{ background:var(--wb-green); border-color:var(--wb-green); color:#fff; font-weight:600; } .wb-pager button[disabled]{ opacity:.4; cursor:not-allowed; } .wb-pager .wb-pager-info{ margin-right:4px; } /* ========================================================== 手机端布局：苹果风格浅色 + iOS 底部 Tab ========================================================== */ /* 手机端表格横向滚动包装（默认不显示） */ .wb-tbl-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .wb-tbl-scroll::-webkit-scrollbar{ height:3px; } /* ---------- 后台表格通用：保证横滑时可读 ---------- */ .wb-content table{ border-collapse:separate; border-spacing:0; width:100%; min-width:380px; /* 桌面列宽最小需要；手机端触发横滑 */ } .wb-content table th, .wb-content table td{ white-space:nowrap; vertical-align:middle; /* 不再被压成竖排 */ } .wb-content table td img.thumb{ width:40px; height:40px; border-radius:4px; object-fit:cover; background:#f5f5f7; } /* ---------- 手机端商品列表：iOS 卡片视图（仅 mobile-*-dom 渲染区可见） ---------- */ .mobile-product-list{ display:none; } body.wb-mobile .mobile-product-list{ display:block; } body.wb-mobile .desktop-only-table{ display:none !important; } .mpl-toolbar{ position:sticky; top:-7px; z-index:5; background:rgba(245,245,247,.92); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); padding:6px 0 7px; margin-bottom:8px; } .mpl-search-row{ display:flex; gap:6px; align-items:center; margin-bottom:6px; } .mpl-input{ flex:1; height:34px; border-radius:9px; background:#fff; border:0.5px solid rgba(0,0,0,.12); padding:0 11px; font-size:13px; color:#1d1d1f; font-family:inherit; } .mpl-search-btn{ height:34px; padding:0 14px; border-radius:9px; border:none; background:#0071e3; color:#fff; font-size:13px; } .mpl-pills{ display:flex; gap:5px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .mpl-pills::-webkit-scrollbar{ display:none; } .mpl-pill{ height:24px; padding:0 11px; border-radius:12px; background:#fff; border:0.5px solid rgba(0,0,0,.10); color:#1d1d1f; font-size:12px; display:flex; align-items:center; white-space:nowrap; flex-shrink:0; } .mpl-pill.on{ background:#0071e3; color:#fff; border-color:#0071e3; } /* 手机端商品页「新增入口」操作行（新建商品 / 批量导入）。 ⚠️ 桌面工具栏 <#tab-products .toolbar> 在手机端被整条 display:none 隐藏， 这两个入口只能由 renderMobileToolbar() 渲染，删掉它手机端就再也建不了商品。 */ .mpl-acts{ display:flex; gap:8px; margin:0 0 10px; } .mpl-act{ flex:1; height:38px; border-radius:10px; padding:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; font-family:inherit; background:#fff; color:#1d1d1f; border:0.5px solid rgba(0,0,0,.12); cursor:pointer; user-select:none; -webkit-appearance:none; appearance:none; } .mpl-act:active{ opacity:.66; } .mpl-act.primary{ background:linear-gradient(135deg,#6cb8ff,#0071e3); color:#fff; border:none; } .mpl-cards{ display:flex; flex-direction:column; gap:8px; padding-bottom:20px; } .mpl-card{ background:#fff; border-radius:10px; padding:10px 11px; display:flex; flex-direction:column; gap:7px; } .mpl-head{ display:flex; gap:9px; align-items:center; } .mpl-thumb{ width:65px; height:65px; border-radius:8px; background:#f5f5f7; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; } .mpl-thumb img{ width:100%; height:100%; object-fit:cover; } .mpl-info{ flex:1; min-width:0; } .mpl-title{ font-size:14px; font-weight:600; color:#1d1d1f; line-height:1.35; } .mpl-meta{ font-size:11px; color:#8e8e93; margin-top:4px; display:flex; flex-wrap:wrap; gap:3px 7px; } .mpl-meta .sep{ color:#d2d2d7; } .mpl-tag{ flex-shrink:0; font-size:11px; padding:0 7px; height:19px; border-radius:4.5px; display:inline-flex; align-items:center; } .mpl-tag.on{ background:rgba(46,184,79,.10); color:#1e9b3b; } .mpl-tag.off{ background:rgba(0,0,0,.06); color:#8e8e93; } .mpl-tag.recycle{ background:rgba(232,69,69,.10); color:#e84545; } .mpl-stats{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-top:0.5px solid rgba(0,0,0,.06); border-bottom:0.5px solid rgba(0,0,0,.06); } .mpl-price{ font-size:17px; font-weight:700; color:#e84545; line-height:1.1; } .mpl-price .ccy{ font-size:11px; font-weight:500; margin-right:2px; } .mpl-stat-row{ display:flex; gap:12px; } .mpl-stat{ font-size:12px; color:#1d1d1f; } .mpl-stat .muted{ color:#8e8e93; margin-right:3px; font-weight:400; font-size:11px; } .mpl-stat b{ font-weight:600; } .mpl-actions{ display:flex; gap:6px; } .mpl-btn{ flex:1; height:33px; border-radius:16.5px; font-size:13px; display:flex; align-items:center; justify-content:center; border:0.5px solid rgba(0,0,0,.10); background:#fff; color:#1d1d1f; cursor:pointer; user-select:none; } .mpl-btn.warn{ background:linear-gradient(135deg,#ffaa6e,#ff6a3e); color:#fff; border:none; } .mpl-btn.success{ background:linear-gradient(135deg,#7ad99a,#34c759); color:#fff; border:none; } .mpl-btn.danger{ background:linear-gradient(135deg,#ff7066,#ff3b30); color:#fff; border:none; } .mpl-btn.primary{ background:linear-gradient(135deg,#6cb8ff,#0071e3); color:#fff; border:none; } .mpl-empty{ text-align:center; padding:60px 15px; color:#8e8e93; font-size:13px; background:#fff; border-radius:9px; } .wb-tbl-scroll::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:1.5px; } /* ---------- 断点 ≤ 900px 触发手机端样式 ---------- */ /*★★ 桌面端「核心指标」铺满整行（2026-10-11店主：「电脑端可以丰富一些」）： 原来 _theme.css 用 repeat(auto-fill, minmax(190px,1fr))。 auto-fill 会「按 190px 尽量多排列」—— 1108px 宽排出 **5 列**， 而核心指标每组只有 3 张卡 ⇒ 后面 2 列永远空着。 实测：1280px 视口下网格 1108 / 卡宽 210 / **右侧空 449px（只用 59%）**； 1080px 视口下网格 908 / 卡宽 217 / 右侧空 230px（只用 75%）。 ⇒ 改 **auto-fit**：空列自动折叠，3 张卡按 1fr 均分铺满整行。 ★ 为什么不用 auto-fill + 固定列数：卡数会变（core 3 张、别的组可能 4/6）， auto-fit 对任意卡数都自动折叠空列，不用为每种卡数各写一条规则。 ★ 只限定 .bd-group：后台其他模块的 stat-grid 卡数不定（2/4/6）， 全局改 auto-fit 会把「4 张卡排 2 列」之类布局一起改掉。 */ /* ★ 2026-10-11 电脑端加到 6 张/组：minmax 从 190 收到 172， 1080px 内容区（扣左导航与padding 约 990px）能排 5 列 + 换行 1 个， 1300px+ 正好 6 列一行铺满。190 时只能排 5 列、每张卡 360px 过宽。 */ .wb-content .bd-group .stat-grid{ grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; } /* 6 张时数字与副标题要更紧凑，否则卡内换行 */ .wb-content .bd-group .stat-grid:has(> .pc-only){ gap:12px; } /* ★★ 窄屏（<1200px）只显示 5 张/组（第 6 张标.pc-wide）—— 实拍 1080px：6 张排成 5+1、第二行空 4 格，比 4+2 更难看； 而 6 列物理下限需 1092px > 实测网格 908px，压阈值只会让数字折行/溢出。 ⇒ 这一档宁可少显示一张，也要"一行铺满、没有空槽"。 */ @media (min-width: 901px) and (max-width: 1199px){ /* 只藏**卡片**的第 6 张。文案由下面的 :not() 规则单独控制，别在这里藏文案 —— v57修：这里原先写成 .bd-group-hd > .pc-wide-only{display:none !important}， 把窄屏**该显示**的那份文案也藏了，且 !important 压过下面的 display:inline ⇒ 两份都不显示。 */ .wb-content .bd-group .stat-grid > .pc-wide{ display:none !important; } } /* ★ 提示文案跟随：宽屏（≥1200px）显示「另有 3 项」，窄屏（901~1199px）显示「另有 2 项」。 两份文案都在 DOM 里，靠 CSS 二选一 —— 不在 JS 里量 window.innerWidth （那会引入手动 resize 监听，且截图/打印与实际宽度可能不一致）。 ★★ 选择器必须用 :not() 区分两份，否则会出现「两份都显示」或「两份都隐藏」： 两份都带 .pc-only（都在电脑端才显示），所以**只靠 .pc-only 区分不开**。 ⇒ 约定：第一份（宽屏文案）**不带** .pc-wide-only，第二份（窄屏文案）**带** .pc-wide-only。 宽屏：隐藏带 .pc-wide-only 的那份； 窄屏：隐藏**不带** .pc-wide-only 的那份（:not(.pc-wide-only)），显示带的那份。 */ @media (min-width: 901px){ /* 宽屏：藏「另有 2 项」那份 */ .wb-content .bd-group .bd-group-hd > .pc-wide-only{ display:none; } } @media (min-width: 901px) and (max-width: 1199px){ /* 窄屏：藏「另有 3 项」那份，放「另有 2 项」那份。 ⚠ 上面的 max-width 块里还有一条 .pc-wide-only{display:none !important}（给卡片用的）， 它的选择器是 .stat-grid > .pc-wide，不同于 .bd-group-hd > .pc-wide-only，不冲突。 */ .wb-content .bd-group .bd-group-hd > .pc-only:not(.pc-wide-only){ display:none; } .wb-content .bd-group .bd-group-hd > .pc-wide-only{ display:inline; } } /* ★ padding / .num 字号不在这里设 —— 下面已有同优先级的声明（同优先级后写者赢， 在这里追加只会白写一遍然后被覆盖。统一改下面那处。 */ .wb-content .bd-group .stat-card .label{ font-size:12.5px; } /*★★ 桌面端字号收小（同一诉求：卡片变宽后数字显得空且抢戏） v49：单卡约 350px 宽时 30px 的「¥7983.00」只占三成 ⇒ 收到 24px / padding 18px。 v53（2026-10-11）：每组 3 → 6 张，单卡降到 190~240px，24px 会顶到卡宽、 「¥7986.00 / 18.18% / 40.09%」这类 8~9 字符串会折行 ⇒ 再收一档 21px / padding 16px。 ★ 手机端 17px 是为「3 列不溢出」定的，**一个字都不要动**（动了会重新溢出）。 ★ 教训：这个选择器在本文件里有**多处同优先级声明**，只改一处会被后面覆盖 （同优先级后写者赢）。要改必须先 grep 全部同名选择器、只改最后生效的那处， **不要往后追加新规则**。 */ .wb-content .bd-group .stat-card{ padding:16px 15px; } .wb-content .bd-group .stat-card .num{ font-size:21px; margin-top:6px; } @media (max-width: 900px){ /* 登录页：填满手机宽度 */ .wb-login-box{ width:88vw; max-width:360px; padding:32px 24px; } .wb-login-box h1{ font-size:18px; } /* 主体：取消左右布局，sidebar 变成底部 Tab */ body.wb-mobile .wb-layout{ display:block; height:auto; min-height:100vh; overflow:visible; } /* 底部 Tab Bar（iOS 风格：磨砂白 + 顶光照 + 多层柔影 + 安全区） */ body.wb-mobile .wb-sidebar{ position:fixed; left:0; right:0; bottom:0; z-index:1000; width:100%; height:calc(63px + env(safe-area-inset-bottom)); padding:5px 0 calc(4px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.88); backdrop-filter:blur(28px) saturate(200%); -webkit-backdrop-filter:blur(28px) saturate(200%); border-top:none; border-right:none; border-radius:0; flex-direction:row; align-items:stretch; gap:0; overflow:visible; box-shadow: 0 -5px 18px rgba(0,0,0,.10), 0 -1px 5px rgba(0,0,0,.06), inset 0 0.5px 0 rgba(255,255,255,.95); } /* 顶光照线（两端淡出，模拟玻璃边缘） */ body.wb-mobile .wb-sidebar::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.12) 82%, rgba(0,0,0,0) 100%); pointer-events:none; } body.wb-mobile .wb-avatar, body.wb-mobile .wb-bottom{ display:none; } body.wb-mobile .wb-nav{ flex-direction:row; justify-content:space-around; align-items:stretch; width:100%; gap:0; } body.wb-mobile .wb-navitem{ display:none; } body.wb-mobile .wb-navitem[data-mob]{ position:relative; display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:7px 1px 4px; font-size:11px; color:#8e8e93; transition:color .18s ease; } body.wb-mobile .wb-navitem[data-mob]:active{ transform:none; } body.wb-mobile .wb-navitem[data-mob] svg{ width:21px; height:21px; padding:0; color:#8e8e93; border-radius:7px; transition:all .18s ease; } body.wb-mobile .wb-navitem[data-mob] span{ font-size:11px; line-height:1; } body.wb-mobile .wb-navitem[data-mob].active{ background:transparent; color:#0071e3; } /* 激活态：图标上圆角浅蓝背板，文字加粗 + 蓝色 */ body.wb-mobile .wb-navitem[data-mob].active svg{ color:#fff; background:linear-gradient(135deg, #6cb8ff 0%, #0071e3 100%); box-shadow:0 3px 8px -2px rgba(0,113,227,.55), 0 1px 2px -0.5px rgba(0,113,227,.30); } body.wb-mobile .wb-navitem[data-mob].active span{ color:#0071e3; font-weight:600; } /* 激活态顶部小圆点（iOS 风格指示器） */ body.wb-mobile .wb-navitem[data-mob].active::before{ content:''; position:absolute; top:2px; left:50%; transform:translateX(-50%); width:3px; height:3px; border-radius:50%; background:#0071e3; box-shadow:0 0 3px rgba(0,113,227,.6); } /* 主区：占满宽，下方留出底栏高度 */ body.wb-mobile .wb-main{ width:100%; min-height:100vh; padding-bottom:calc(63px + env(safe-area-inset-bottom)); } body.wb-mobile .wb-topbar{ position:sticky; top:0; z-index:50; height:44px; padding:0 12px; background:rgba(255,255,255,.85); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid rgba(0,0,0,.05); } body.wb-mobile .wb-topbar h2{ font-size:16px; font-weight:600; letter-spacing:.1px; } body.wb-mobile .wb-topbar-right .wb-lang, body.wb-mobile .wb-topbar-right .wb-ghost, body.wb-mobile .wb-topbar-right .wb-shop{ display:none; } body.wb-mobile .wb-topbar-right{ gap:3px; } body.wb-mobile .wb-user{ font-size:12px; } body.wb-mobile .wb-content{ padding:14px 14px 20px; } body.wb-mobile .wb-content .tab-panel > h2{ display:none; } body.wb-mobile .wb-content .card{ margin:0 0 12px; padding:12px; border-radius:12px; } /*★★ 看板核心指标组改 3 列（2026-10-11 手机端「不整齐」修复）： 原来是 repeat(2,1fr) 固定两列，而**每组正好 3 张卡**（成交3 / 访问3 / 推广3） ⇒ 3 张按 2 列排必然是「2+1」，落单那张右侧空出整整一格。 实测：网格宽 315px，卡宽 153px，落单卡右边缘 184px vs 网格右边缘 346px ⇒ **空 162px**， 视觉上就是「缺了一块」，这是硬伤、不是观感偏好问题。 ⇒ 改 3 列：每组 3 张一行排满，零空格。 ★ 为什么不用「第 3 张跨两列」补法：那会让最后一行变成一张超宽卡， 反而与上面两列不对齐，比现在更乱。 ★ 为什么不用桌面端的 auto-fill+minmax(190px)：315px 宽放不下两张 190px 的卡， 会退化成 1 列 —— 手机上 3 张卡竖排要滑很久。 ★ 只对 .bd-group 内的网格改 3 列；后台其他模块的 stat-grid 卡数不定（2/4/6）， 保持 2 列不动，避免波及其他页面。 */ body.wb-mobile .wb-content .stat-grid{ grid-template-columns:repeat(2,1fr); gap:9px; margin:0 0 12px; } body.wb-mobile .wb-content .bd-group .stat-grid{ grid-template-columns:repeat(3,1fr); gap:7px; } body.wb-mobile .wb-content .stat-grid > *{ border-radius:8px; } /*★★ 3 列后卡片只有 100px，必须同步收字号与内边距，否则长数字会压出卡外。 实测：桌面 30px 时「¥1806.00」需要 131px，卡内可用仅 60px（100 − 左右各 20px）， 而 .num 带 white-space:nowrap ⇒ 直接溢出（numFits=false）。 ⇒ 手机端该组卡片：内边距 20→10px、字号 30→17px、数字行距收窄。 17px 下「¥1806.00」约 74px，可用宽 80px，放得下。*/ body.wb-mobile .wb-content .bd-group .stat-card{ padding:12px 10px; } body.wb-mobile .wb-content .bd-group .stat-card .num{ font-size:17px; margin-top:6px; letter-spacing:-.3px; } body.wb-mobile .wb-content .bd-group .stat-card .label{ font-size:11.5px; } body.wb-mobile .wb-content .bd-group .stat-card .label[style*="11px"]{ font-size:10.5px; } /*★★ 同行三卡等高：grid 默认 stretch 已让卡片本身等高，但内容是块级流、 副标题长短不一会让**数字行不在同一水平线**（"含取消共4 单"比"已收款未取消"矮一行）。 ⇒ 把卡片改成 flex 纵向、数字与副标题靠上对齐，卡片底部留白由 padding 吃掉， 三张卡的标题/数字基线就对齐了。 ★ 判据要量「同排卡的 .num 顶部差」而不是「卡高差」（卡高本来就等于）—— 数字不在一条线上才是肉眼看到的"不整齐"。 */ /* ★ 2026-11 电脑端每组加到 6 张后，手机端要"只显示前 3 张"且**一字不改原布局**： 新增卡带 .pc-only，手机端整体 display:none（display:none 优先于 display:contents， 不占格子）⇒ 3 列 / 17px 字号 / flex 纵向 / label 贴底 全部原样保留。 */ body.wb-mobile .wb-content .bd-group .stat-grid > .pc-only{ display:none !important; } body.wb-mobile .wb-content .bd-group .bd-group-hd > .pc-only{ display:none !important; } body.wb-mobile .wb-content .bd-group .stat-card{ display:flex; flex-direction:column; } body.wb-mobile .wb-content .bd-group .stat-card .num{ margin-top:6px; } body.wb-mobile .wb-content .bd-group .stat-card > .label:last-child{ margin-top:auto; padding-top:4px; } /* 工具栏：手机端横向换行，输入框独占一行，按钮两列紧凑排 */ body.wb-mobile .wb-content .toolbar{ flex-direction:row; flex-wrap:wrap; align-items:stretch; gap:6px; margin:0 0 8px; } body.wb-mobile .wb-content .toolbar input, body.wb-mobile .wb-content .toolbar select{ width:100%; height:40px; font-size:15px; } body.wb-mobile .wb-content .toolbar .btn, body.wb-mobile .wb-content .toolbar button{ flex:1; min-width:calc(50% - 3px); height:40px; font-size:14px; font-weight:500; border-radius:10px; background:#fff !important; color:#1d1d1f !important; border:0.5px solid rgba(0,0,0,.14) !important; -webkit-appearance:none; appearance:none; } body.wb-mobile .wb-content .toolbar .btn:first-of-type, body.wb-mobile .wb-content .toolbar button:first-of-type{ background:#0071e3 !important; color:#fff !important; border-color:#0071e3 !important; font-weight:600; } body.wb-mobile .wb-content .toolbar select{ width:100%; height:48px !important; font-size:17px !important; background:#fff !important; background-image:linear-gradient(45deg,transparent 50%,#8e8e93 50%),linear-gradient(135deg,#8e8e93 50%,transparent 50%) !important; background-position:calc(100% - 14px) 50%,calc(100% - 10px) 50% !important; background-size:6px 6px !important; background-repeat:no-repeat !important; padding-right:36px !important; border-radius:12px !important; border:0.5px solid rgba(0,0,0,.14) !important; color:#1d1d1f !important; } body.wb-mobile .wb-content .toolbar .btn.btn-primary, body.wb-mobile .wb-content .toolbar button.btn-primary, body.wb-mobile .wb-content .toolbar .btn.btn-success, body.wb-mobile .wb-content .toolbar button.btn-success{ background:#0071e3 !important; color:#fff !important; border-color:#0071e3 !important; } body.wb-mobile .wb-content .toolbar .btn.btn-danger, body.wb-mobile .wb-content .toolbar button.btn-danger{ background:#ff3b30 !important; color:#fff !important; border-color:#ff3b30 !important; } body.wb-mobile .wb-content .toolbar .btn{ font-weight:600; } /* 商品页：手机端使用独立卡片搜索区，隐藏「出售中/仓库中/回收站」三个状态面板的桌面 toolbar。 ⚠️ 必须**逐个面板点名**，不能写成 #tab-products .toolbar —— 那会把「商品素材」面板 ( #ppanel-materials ) 的工具栏一起隐藏，而那里有它**唯一的上传入口** （＋ 上传素材 / 批量删除 / 搜索框），隐藏了手机端就再也传不了素材。 #tab-products 内共 4 个 .toolbar：selling / warehouse / recycle / materials，只隐藏前三个。 */ body.wb-mobile #tab-products #ppanel-selling > .toolbar, body.wb-mobile #tab-products #ppanel-warehouse > .toolbar, body.wb-mobile #tab-products #ppanel-recycle > .toolbar{ display:none; } /* 覆盖 toolbar 里带内联宽度的输入框 */ body.wb-mobile .wb-content .toolbar input[style*="width"]{ width:100% !important; } /* 卡片内说明文字：手机端收小 */ body.wb-mobile .wb-content .card > .muted{ font-size:13px !important; color:#8e8e93 !important; line-height:1.45 !important; } /* 顶部二级 tabs：★ 2026-10-11 改为「按内容宽度紧凑排列，项数多时才等分铺满」。 两轮反复后的最终口径： ① 之前是 nowrap + overflow-x:auto（横滚）→ 项数一多末尾几项藏在屏幕外， 用户只能左右滑才知道还有别的页签，等于「找不到」。 ② 中间试过「无条件 flex:1 1 0 等分」→ 只有 2 项时两项各占一半宽， 右边空出一大片，「销售看板/访问分析」被拉得又宽又散，不好看（店主反馈）。 ③ 现在：**项数少就按内容宽度（flex:none）紧凑靠左**，项数多（buildSubTabs 打 data-many="1"，≥5 项）才切等分铺满 —— 既不横滚、也不会把两项撑开。 用 flex-wrap:wrap 而非 nowrap：万一有超长名字，宁可换行也不溢出。 */ body.wb-mobile .wb-content .subtabs{ display:flex; flex-wrap:wrap; gap:4px; background:#eef1f7; padding:4px; border-radius:12px; box-shadow:inset 0 1px 2px rgba(16,24,40,.06); margin:0 0 14px; overflow:hidden; } body.wb-mobile .wb-content .subtabs::-webkit-scrollbar{ display:none; } body.wb-mobile .wb-content .subtab{ /* 默认按内容宽度（紧凑靠左）；data-many 时才等分 —— 见下面的 [data-many] 规则。 */ flex:none; white-space:nowrap; text-align:center; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; height:36px; padding:0 16px; border-radius:9px; background:transparent; border:none; color:#6b7280; font-size:13.5px; font-weight:600; line-height:36px; } /* 项数多时（buildSubTabs 会给容器打 data-many="1"）才等分铺满并收字号， 优先保证「商品」这类 6 项的模块在窄屏也能一屏放下 */ /*★ 4 项专用（2026-10-11「TAB 上移合并」后工作台变成 4 项）： 实拍 375px 时 4 项按内容宽度是 356px，比容器 347px 多 9px ⇒ 第 4 项换行成孤行， 右边空一大片（414px 则刚好 344px 单行，很整齐）。 ⇒ 只在这一个档位收一点水平内边距（86→约 78px），不改成等分 —— 等分要把字号压到 12.5px、padding 收到 2px，实拍对比反而不如现在好看。 */ body.wb-mobile .wb-content .subtabs[data-four="1"] .subtab{ padding:0 11px; letter-spacing:-.2px; } body.wb-mobile .wb-content .subtabs[data-four="1"] .subtab.active{ padding:0 11px; } body.wb-mobile .wb-content .subtabs[data-many="1"]{ flex-wrap:nowrap; } body.wb-mobile .wb-content .subtabs[data-many="1"] .subtab{ flex:1 1 0; min-width:0; padding:0 2px; letter-spacing:-.2px; font-size:12.5px; } body.wb-mobile .wb-content .subtab.active{ background:#fff; color:#0071e3; box-shadow:0 1px 3px rgba(16,24,40,.12); } /* 表格：横向滚动包装（由 JS 套 .wb-tbl-scroll） */ body.wb-mobile .wb-content .card table{ font-size:14px; } body.wb-mobile .wb-content .card th, body.wb-mobile .wb-content .card td{ padding:9px 11px; } body.wb-mobile .wb-content .card .btn{ min-height:34px; padding:0 14px; font-size:13.5px; } /* ==================== 弹窗（2026-10-09 手机端专项重做）==================== 店主反馈：「手机端弹窗后铺满全屏，在最上层不被遮挡，排版优化一下，适合手机操作。」 两个真问题： ① **被底部 Tab Bar 压住** —— 本文件上方 `.wb-sidebar` 是 z-index:1000， 而 `.modal-mask` 在 _theme.css 只有 100 → 弹窗底部那颗「保存」正好被导航条盖住。 ② **大弹窗只是一张 92vw×88vh 的小卡片** —— 商品编辑 30+ 行字段在里面滚， 一屏看不到几行；页签条还会被推出视野，切页签得先滚回顶部再切。 做法：层级抬到 tabbar 之上；重型弹窗（.modal-lg 商品编辑·批量导入 / .modal-xl 订单详情） 改成**整屏 + 纵向三段**（吸顶标题 / 滚动内容 / 吸底按钮），小弹窗维持居中卡片。 ⚠️ 本次已**删除**旧规则 `body.wb-mobile .modal.modal-xl{ width:96vw !important; padding:20px 14px; }` （那是"卡片尽量宽"的旧思路，专为订单详情把 92vw 顶到 96vw）； ③ 的 `width:100vw !important` 已完全覆盖它，留着只会让两条规则互相打架。 回滚办法：从 `项目代码-备份/2026-10-09k/files/wb_shell.css`（md5 2c543ab2…）整文件取回。 */ /* ① 层级：遮罩抬到 tabbar(1000) 之上、全局 toast(9999) 之下 */ body.wb-mobile .modal-mask{ z-index:2000; } /* 二级弹窗（素材库选图 / 设置链接 / 物流轨迹）桌面档靠 .modal-top 抬到 200； 手机档必须跟着抬 —— 「素材库」正是在商品弹窗（2000）里打开的，不抬就被整块盖住。 */ body.wb-mobile .modal-mask.modal-top{ z-index:2100; } /* ② 小弹窗（无 modal-lg / modal-xl，如确认框、分类、活动）：仍是居中卡片，只把圆角放大一点 */ body.wb-mobile .modal{ width:92vw !important; max-width:none; max-height:88vh; border-radius:14px; } /* ③ 重型弹窗：整屏。选择器比 ② 多一个类，压掉它的 92vw 与 _theme.css 的 88vh */ body.wb-mobile .modal.modal-lg, body.wb-mobile .modal.modal-xl{ width:100vw !important; max-width:100vw !important; height:100vh; height:100dvh; max-height:100vh !important; border-radius:0; padding:0; border:none; background:#fff; /* 半透明 + 大半径模糊在整屏下只会让长表单发灰，还掉帧 */ backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; animation:none; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; } /* 吸顶标题：滚长表单时「新建商品」一直看得见 */ body.wb-mobile .modal.modal-lg > h3, body.wb-mobile .modal.modal-xl > h3{ position:sticky; top:0; z-index:3; margin:0; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; font-size:16.5px; line-height:1.35; background:rgba(255,255,255,.94); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%); border-bottom:1px solid var(--line-soft); } /* 除标题外统一左右留白（③ 已把 .modal 的 padding 清零） */ body.wb-mobile .modal.modal-lg > *:not(h3), body.wb-mobile .modal.modal-xl > *:not(h3){ padding-left:16px; padding-right:16px; } /* ④ 商品弹窗（内含 .ppane 页签面板）：标题 + 页签固定，只让中间那块滚。 为什么单独处理：它有 4 个页签，整页滚动会把页签推走，切页签得先滚回顶部。 用 :has() 精准命中；浏览器不支持时自动退化成 ③ 的整页滚动，不会坏。 */ body.wb-mobile .modal.modal-lg:has(> .ppane){ display:flex; flex-direction:column; overflow:hidden; } body.wb-mobile .modal.modal-lg:has(> .ppane) > h3, body.wb-mobile .modal.modal-lg:has(> .ppane) > .subtabs, body.wb-mobile .modal.modal-lg:has(> .ppane) > .modal-footer{ flex:0 0 auto; } body.wb-mobile .modal.modal-lg:has(> .ppane) > .ppane{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* ★ 页签行：4 个页签 + 2 个开关在窄屏挤成 3 行（店主截图里的「乱」就是这个）。 解法：页签等分成一行（各 1/4 宽）、两个开关落到第二行靠右； 那个 `flex:1` 的占位 span 在手机上改成「独占一行」当换行器用（高 0，不占空间）。 */ body.wb-mobile #prodSubTabs{ flex-wrap:wrap; gap:8px; margin:0; padding:10px 16px; background:#fff; border-radius:0; box-shadow:none; border-bottom:1px solid var(--line-soft); } body.wb-mobile #prodSubTabs > span{ flex:0 0 100% !important; height:0; } body.wb-mobile #prodSubTabs .subtab{ flex:1 1 0; min-width:0; padding:9px 4px; font-size:13.5px; text-align:center; white-space:nowrap; background:#f1f2f5; border-radius:10px; } body.wb-mobile #prodSubTabs .subtab.active{ background:var(--accent); color:#fff; box-shadow:none; } /* 开关留在第二行**左对齐**（与 h3 / 页签同一条 16px 左边线）； 不右对齐的原因：占位的 `> span` 已把开关挤到独立一行，此时右对齐反会把左边线打断。 （曾写过 `.ptoggle:first-of-type{margin-left:auto}`，但页签也是 `