/* ============================================================ 生活圈 · 五模块高保真原型 设计令牌 + 手机壳 + 通用组件 ============================================================ */ :root{ --brand:#2b6df6; --brand-2:#7c5cff; --brand-soft:#eef3ff; --ok:#12b76a; --warn:#f79009; --danger:#f04438; --pink:#f2509b; --bg:#f4f5f8; --card:#ffffff; --text:#101828; --sub:#667085; --mute:#98a2b3; --line:#eef0f4; --r-s:8px; --r-m:14px; --r-l:20px; --shadow-s:0 1px 2px rgba(16,24,40,.06); --shadow-m:0 6px 20px rgba(16,24,40,.08); --shadow-l:0 20px 60px rgba(16,24,40,.18); --fs-base:14px; --tap:44px; --head-h:48px; --tab-h:56px; } /* 低知识人群版：整站放大 + 高对比 */ body.lowk{ --fs-base:18px; --text:#000000; --sub:#3d4451; --line:#d6dae2; --tap:56px; --head-h:56px; --tab-h:66px; } body.lowk .hide-lowk{display:none !important} body.lowk .card{border-width:2px} body.lowk .list-item{padding:18px 14px} body.lowk .tabbar-item span{font-size:12px} body.lowk .badge{font-size:12px} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{ font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:var(--fs-base); color:var(--text); background:#eef0f3; min-height:100vh; } button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select{font-family:inherit;font-size:inherit} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} /* ---------------- 桌面演示壳 ---------------- */ .stage{ display:flex;gap:36px;align-items:flex-start;justify-content:center; padding:34px 28px 60px;max-width:1240px;margin:0 auto; } .stage-side{width:300px;flex:0 0 300px;position:sticky;top:34px} .brand{display:flex;gap:12px;align-items:center;margin-bottom:22px} .brand-logo{ width:44px;height:44px;border-radius:13px;flex:0 0 44px; /* ★ 修复：原被误换成顶栏浅灰 #eef0f3（白字看不见）→ 还原品牌蓝 */ background:var(--brand); color:#fff;font-weight:700;font-size:22px;display:grid;place-items:center; box-shadow:var(--shadow-m); } .brand h1{font-size:19px;letter-spacing:.5px} .brand p{font-size:12px;color:var(--sub);margin-top:3px} .ver{background:var(--brand-soft);color:var(--brand);padding:1px 6px;border-radius:6px;font-weight:600} .side-block{background:rgba(255,255,255,.78);border:1px solid #fff;border-radius:var(--r-m); padding:14px;margin-bottom:14px;box-shadow:var(--shadow-s);backdrop-filter:blur(6px)} .side-block h2{font-size:12px;color:var(--mute);font-weight:600;letter-spacing:1px;margin-bottom:10px} .side-map li{display:flex;justify-content:space-between;align-items:center;gap:8px; padding:7px 8px;border-radius:9px;cursor:pointer;transition:.15s} .side-map li:hover{background:var(--brand-soft)} .side-map li.active{background:var(--brand);color:#fff} .side-map li.active span{color:rgba(255,255,255,.82)} .side-map b{font-size:13.5px;font-weight:600} .side-map span{font-size:11.5px;color:var(--sub)} .side-note{font-size:11.5px;color:var(--sub);line-height:1.7;margin-top:6px} .dot-demo{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);vertical-align:1px} .switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:8px 4px;cursor:pointer;font-size:13px} .switch-row input{display:none} .switch{width:42px;height:24px;border-radius:12px;background:#d7dbe4;position:relative;transition:.2s;flex:0 0 42px} .switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:var(--shadow-s);transition:.2s} .switch-row input:checked + .switch{background:var(--brand)} .switch-row input:checked + .switch::after{transform:translateX(18px)} .side-links{display:flex;flex-wrap:wrap;gap:7px} .side-links button{font-size:12px;padding:7px 10px;border-radius:9px;background:var(--brand-soft); color:var(--brand);font-weight:600;transition:.15s} .side-links button:hover{background:var(--brand);color:#fff} /* ---------------- 手机 ---------------- */ .stage-phone{display:flex;flex-direction:column;align-items:center} .phone{ width:390px;height:800px;border-radius:44px;background:#0d1117; padding:11px;box-shadow:var(--shadow-l);position:relative;flex:0 0 auto; } .phone-notch{ position:absolute;top:11px;left:50%;transform:translateX(-50%); width:126px;height:26px;background:#0d1117;border-radius:0 0 16px 16px;z-index:20; } .phone-screen{ width:100%;height:100%;border-radius:34px;background:var(--bg); overflow:hidden;display:flex;flex-direction:column;position:relative; } .phone-hint{font-size:12px;color:var(--sub);margin-top:14px;text-align:center} .status-bar{ height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:space-between; /* ★ 业务方：浅灰底配白字不醒目 → 改深色文字 */ padding:0 22px;font-size:13px;font-weight:600;color:#1f2329; background:#eef0f3; } .status-right{display:flex;gap:6px;align-items:center;font-size:11px;font-weight:600} .bat{width:23px;height:11px;border-radius:3px;border:1.5px solid rgba(31,35,41,.72); position:relative;padding:1.5px} .bat::before{content:"";display:block;height:100%;width:72%;background:#1f2329;border-radius:1px} .bat::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px; background:rgba(31,35,41,.72);border-radius:0 2px 2px 0} .app-header{ flex:0 0 var(--head-h);height:var(--head-h);display:flex;align-items:center;gap:8px; /* ★ 业务方：浅灰底配白字不醒目 → 改深色文字 #1f2329 */ padding:0 12px;background:#eef0f3;color:#1f2329; position:relative;z-index:10; } .app-header .h-back{ width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:rgba(15,23,42,.06);color:#1f2329;font-size:17px;flex:0 0 30px } .app-header .h-title{font-size:16.5px;font-weight:600;flex:1;text-align:center; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .app-header .h-right{display:flex;gap:6px;align-items:center;min-width:30px;justify-content:flex-end} .app-header .h-btn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:rgba(15,23,42,.06);color:#1f2329;font-size:14px} /* 当前身份标识（点击切换角色） */ .app-header .h-role{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600; background:rgba(15,23,42,.06);padding:4px 9px;border-radius:11px;color:#1f2329; flex:0 0 auto;max-width:88px;overflow:hidden;white-space:nowrap} .app-header .h-role-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px; box-shadow:0 0 0 1.5px rgba(255,255,255,.5)} .app-header.no-back .h-back{visibility:hidden} .app-body{ flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch; background:var(--bg);position:relative; } .app-body::-webkit-scrollbar{width:0} .app-body.dark{background:#0b0d12} .app-body.nopad{padding:0} /* ---------------- 底部 Tab ---------------- */ .tabbar{ flex:0 0 var(--tab-h);height:var(--tab-h);display:flex;background:#fff; border-top:1px solid var(--line);padding-bottom:2px; } .tabbar-item{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; color:var(--mute);font-size:10.5px;position:relative;transition:.15s;padding-top:4px; } .tabbar-item svg{width:23px;height:23px;fill:currentColor} .tabbar-item.active{color:var(--brand);font-weight:600} .tabbar-item .tab-dot{ position:absolute;top:4px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px; border-radius:8px;background:var(--danger);color:#fff;font-size:10px;line-height:16px;text-align:center; font-weight:600; } /* ---------------- 通用组件 ---------------- */ .page{padding:12px 12px 26px;animation:fade .18s ease} @keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}} .card{background:var(--card);border-radius:var(--r-m);box-shadow:var(--shadow-s); padding:14px;margin-bottom:12px;border:1px solid var(--line)} .card.flat{box-shadow:none} .card-t{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .card-t h3{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px} .card-t .more{font-size:12px;color:var(--sub)} .card-sub{font-size:12px;color:var(--sub);line-height:1.65} .sec-title{display:flex;align-items:center;justify-content:space-between; padding:6px 2px 8px;font-size:13px;color:var(--sub);font-weight:600} .sec-title .bar{width:3px;height:13px;border-radius:2px;background:var(--brand); display:inline-block;margin-right:6px;vertical-align:-1px} .list{background:var(--card);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-s); border:1px solid var(--line)} .list-item{display:flex;gap:11px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--line); transition:.15s;cursor:pointer;position:relative} .list-item:last-child{border-bottom:none} .list-item:active{background:#f8f9fc} .list-item .li-main{flex:1;min-width:0} .list-item .li-title{font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:6px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .list-item .li-desc{font-size:12px;color:var(--sub);margin-top:3px;line-height:1.5; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .list-item .li-right{font-size:12px;color:var(--mute);flex:0 0 auto;text-align:right} .li-arrow{color:#c8cdd8;font-size:15px;flex:0 0 auto} .avatar{width:44px;height:44px;border-radius:11px;flex:0 0 44px;display:grid;place-items:center; color:#fff;font-weight:600;font-size:15px; /* ★ 修复：默认底色原被误换成顶栏浅灰 #eef0f3（白字看不见）→ 还原品牌蓝 */ background:var(--brand); position:relative} .avatar.round{border-radius:50%} .avatar.sm{width:34px;height:34px;flex:0 0 34px;font-size:12.5px;border-radius:9px} .avatar.lg{width:60px;height:60px;flex:0 0 60px;font-size:20px;border-radius:16px} .avatar .corner{ position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:6px; background:var(--warn);color:#fff;font-size:9px;display:grid;place-items:center; border:2px solid #fff;font-weight:700 } .badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600; padding:1.5px 6px;border-radius:6px;background:var(--brand-soft);color:var(--brand);line-height:1.5; white-space:nowrap} .badge.gray{background:#f2f4f7;color:var(--sub)} .badge.ok{background:#e7f8f0;color:var(--ok)} .badge.warn{background:#fff4e5;color:var(--warn)} .badge.danger{background:#fdeceb;color:var(--danger)} .badge.pink{background:#fdecf4;color:var(--pink)} .badge.solid{background:var(--danger);color:#fff} .chips{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip{flex:0 0 auto;padding:6px 13px;border-radius:16px;background:#fff;border:1px solid var(--line); font-size:12.5px;color:var(--sub);transition:.15s;white-space:nowrap} .chip.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} .chip.ghost{background:transparent} .segmented{display:flex;background:#eef0f5;border-radius:11px;padding:3px;margin-bottom:12px} .segmented button{flex:1;padding:8px 4px;border-radius:9px;font-size:13px;color:var(--sub); transition:.15s;font-weight:500} .segmented button.active{background:#fff;color:var(--text);font-weight:600;box-shadow:var(--shadow-s)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:var(--tap);padding:0 16px;border-radius:11px;font-size:14px;font-weight:600; background:#f2f4f7;color:var(--text);transition:.15s} /* ★ 修复：原为 background:#eef0f3（顶栏浅灰）+白字 → 44 个主按钮文字全看不见 */ .btn.primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-m)} .btn.ghost{background:var(--brand-soft);color:var(--brand)} .btn.danger{background:#fdeceb;color:var(--danger)} .btn.block{width:100%} .btn.sm{min-height:32px;padding:0 11px;font-size:12.5px;border-radius:9px} .btn:active{transform:scale(.98)} .grid{display:grid;gap:10px} .grid.g3{grid-template-columns:repeat(3,1fr)} .grid.g4{grid-template-columns:repeat(4,1fr)} .grid.g2{grid-template-columns:repeat(2,1fr)} .app-tile{background:#fff;border-radius:var(--r-m);padding:12px 6px;text-align:center; box-shadow:var(--shadow-s);border:1px solid var(--line);transition:.15s;position:relative} .app-tile:active{transform:scale(.97)} .app-tile .ti{width:42px;height:42px;border-radius:12px;margin:0 auto 7px;display:grid;place-items:center; /* ★ 修复：原被误换成顶栏浅灰 → 还原品牌蓝 */ font-size:19px;color:#fff;background:var(--brand)} .app-tile .tn{font-size:12px;line-height:1.35;font-weight:500; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .app-tile .new-flag{position:absolute;top:6px;right:6px;background:var(--danger);color:#fff; font-size:9px;font-weight:700;padding:1px 5px;border-radius:5px} /* 置前区（非置顶） */ .ahead{background:#fff8ec;border:1px solid #ffe4bd; border-radius:var(--r-m);padding:12px;margin-bottom:12px;position:relative;overflow:hidden} .ahead::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--warn)} .ahead-h{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--warn);font-weight:700; margin-bottom:9px} .ahead-h .badge{margin-left:auto} .ahead-item{background:#fff;border-radius:11px;padding:11px 12px;margin-bottom:8px; border:1px solid #f2e3cd;display:flex;gap:10px;align-items:flex-start} .ahead-item:last-child{margin-bottom:0} .ahead-item .ai-body{flex:1;min-width:0} .ahead-item .ai-t{font-size:13.5px;font-weight:600;line-height:1.45;margin-bottom:3px} .ahead-item .ai-d{font-size:11.5px;color:var(--sub);line-height:1.6} .ahead-item .ai-act{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap} .ahead-fold{font-size:12px;color:var(--warn);text-align:center;padding:6px 0 2px;font-weight:600} .progress{height:6px;border-radius:3px;background:#eef0f5;overflow:hidden;margin-top:7px} .progress i{display:block;height:100%;border-radius:3px;background:#eef0f3} .progress.warn i{background:#fdb022} /* 表格（授权矩阵） */ .matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:11.5px;background:#fff; border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-s);border:1px solid var(--line)} .matrix th,.matrix td{padding:9px 6px;text-align:center;border-bottom:1px solid var(--line);border-right:1px solid var(--line)} .matrix th:last-child,.matrix td:last-child{border-right:none} .matrix thead th{background:#f7f8fb;font-weight:600;color:var(--sub);font-size:11px;line-height:1.35} .matrix tbody th{text-align:left;font-weight:500;background:#fff;padding-left:10px;color:var(--text)} .matrix tr:last-child td,.matrix tr:last-child th{border-bottom:none} .cell{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:11px; font-weight:700;cursor:pointer;transition:.15s} .cell.on{background:#e7f8f0;color:var(--ok)} .cell.mask{background:#fff4e5;color:var(--warn)} .cell.off{background:#f4f5f8;color:#c3c9d4} .cell:active{transform:scale(.9)} /* 组织树 */ .tree{font-size:13px} .tree-node{padding:9px 11px;border-radius:10px;margin-bottom:6px;background:#fff;border:1px solid var(--line); display:flex;align-items:center;gap:8px} .tree-node.l1{border-left:3px solid var(--brand)} .tree-node.l2{margin-left:16px;border-left:3px solid var(--brand-2)} .tree-node.l3{margin-left:32px;border-left:3px solid #c7d2fe} .tree-node .tn-name{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 地图 */ .map{height:210px;border-radius:var(--r-m);position:relative;overflow:hidden; background: #2b6df6, repeating-#e9eef7, repeating-#e9eef7, #f7f9fc; border:1px solid var(--line)} .map .road{position:absolute;background:#fff;border-radius:3px;box-shadow:0 0 0 1px #dde4ef} .map .pin{position:absolute;transform:translate(-50%,-100%);text-align:center;font-size:10px;font-weight:700} .map .pin i{display:block;width:24px;height:24px;border-radius:50% 50% 50% 4px;transform:rotate(45deg); background:var(--brand);margin:0 auto 4px;box-shadow:var(--shadow-m)} .map .pin.me i{background:var(--danger)} .map .pin em{font-style:normal;background:#fff;padding:1px 5px;border-radius:5px;box-shadow:var(--shadow-s); white-space:nowrap;color:var(--text)} .map .maplabel{position:absolute;left:10px;top:10px;background:#fff;border-radius:9px;padding:5px 9px; font-size:11px;color:var(--sub);box-shadow:var(--shadow-s);font-weight:600} /* 商品 */ .prod{background:#fff;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-s);border:1px solid var(--line)} .prod .pimg{height:104px;background:#e8eeff;display:grid;place-items:center;font-size:30px} .prod .pbody{padding:9px 10px} .prod .pname{font-size:12.5px;line-height:1.4;height:35px;overflow:hidden;font-weight:500} .prod .pprice{color:var(--danger);font-weight:700;font-size:15px;margin-top:5px} .prod .pprice small{font-size:10px;font-weight:500} .prod .porig{font-size:10.5px;color:var(--mute);text-decoration:line-through;margin-left:4px} .prod .pmeta{font-size:10.5px;color:var(--sub);margin-top:3px;display:flex;justify-content:space-between} /* 视频 */ .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px} .vcard{position:relative;border-radius:9px;overflow:hidden;aspect-ratio:9/13; background:#44547e;display:flex;flex-direction:column;justify-content:flex-end} .vcard .vcover{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;opacity:.5} .vcard .vmeta{position:relative;padding:9px;color:#fff;z-index:2; /* ★ 修复：原为顶栏浅灰（白字压浅灰不可读）→ 改深色渐变遮罩 */ background:linear-gradient(180deg,rgba(15,23,42,0) 0%,rgba(15,23,42,.55) 100%)} .vcard .vt{font-size:12px;line-height:1.4;font-weight:500; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .vcard .vs{font-size:10.5px;opacity:.86;margin-top:4px;display:flex;gap:8px;align-items:center} .vcard .live-flag{position:absolute;top:8px;left:8px;background:var(--danger);color:#fff; font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;z-index:3;display:flex;gap:4px;align-items:center} .vcard .live-flag::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff; animation:blink 1.1s infinite} @keyframes blink{50%{opacity:.25}} .vcard .fair-flag{position:absolute;top:8px;right:8px;background:rgba(18,183,106,.92);color:#fff; font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:6px;z-index:3} /* 直播间 */ .live-stage{height:290px;background:#344162;position:relative; display:grid;place-items:center;color:#fff} .live-stage .big{font-size:56px;opacity:.85} .live-topbar{position:absolute;top:0;left:0;right:0;padding:10px 12px;display:flex;gap:8px;align-items:center; background:#242424;color:#fff} .live-host{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.36);border-radius:20px; padding:4px 12px 4px 4px;font-size:12.5px} .live-host .avatar{width:28px;height:28px;flex:0 0 28px;font-size:11px} .live-comments{position:absolute;left:10px;right:10px;bottom:88px;max-height:120px;overflow:hidden; display:flex;flex-direction:column;gap:6px;justify-content:flex-end} .live-comment{background:rgba(0,0,0,.42);border-radius:12px;padding:5px 10px;font-size:11.5px;color:#fff; align-self:flex-start;max-width:86%;line-height:1.5} .live-comment b{color:#8ab4ff} .live-bottom{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;display:flex;gap:8px;align-items:center; background:#eef0f3} .live-bottom .fake-input{flex:1;height:36px;border-radius:18px;background:rgba(255,255,255,.18); color:rgba(255,255,255,.72);font-size:12.5px;display:flex;align-items:center;padding:0 14px} .goods-bar{background:#fff;border-radius:var(--r-m);padding:11px;box-shadow:var(--shadow-s); border:1px solid var(--line);display:flex;gap:10px;align-items:center} .goods-bar .gimg{width:46px;height:46px;border-radius:11px;background:#fff0f0; display:grid;place-items:center;font-size:22px;flex:0 0 46px} /* 朋友圈 */ .moment{display:flex;gap:10px;padding:14px 12px;border-bottom:1px solid var(--line);background:#fff} .moment .m-body{flex:1;min-width:0} .moment .m-name{font-size:13.5px;font-weight:600;color:#3a5f9e} .moment .m-text{font-size:13.5px;line-height:1.62;margin:5px 0 8px;white-space:pre-wrap} .moment .m-media{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:230px} .moment .m-media div{aspect-ratio:1;border-radius:7px;background:#e8eeff; display:grid;place-items:center;font-size:19px} .moment .m-foot{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--mute);margin-top:8px} .moment .m-foot .sp{flex:1} .moment .m-like{background:#f7f8fb;border-radius:8px;padding:6px 9px;font-size:11.5px;color:#3a5f9e;margin-top:8px} .moment .m-scope{font-size:10.5px;color:var(--mute)} /* 杂项 */ .kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:13px;border-bottom:1px solid var(--line)} .kv:last-child{border-bottom:none} .kv .k{color:var(--sub);flex:0 0 auto} .kv .v{text-align:right;font-weight:500;word-break:break-all} .steps{position:relative;padding-left:22px} .steps::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)} .step{position:relative;padding-bottom:14px} .step:last-child{padding-bottom:0} .step::before{content:"";position:absolute;left:-21px;top:4px;width:10px;height:10px;border-radius:50%; background:#fff;border:2px solid var(--brand)} .step.done::before{background:var(--brand)} .step.now::before{box-shadow:0 0 0 4px rgba(43,109,246,.16)} .step.reject::before{border-color:var(--danger);background:var(--danger)} .step .st{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px} .step .sd{font-size:11.5px;color:var(--sub);margin-top:3px;line-height:1.6} .hintbox{background:var(--brand-soft);border-radius:11px;padding:10px 12px;font-size:12px; color:#2c4a8f;line-height:1.7;margin-bottom:12px} .hintbox.warn{background:#fff8ec;color:#8a5a00} .hintbox.ok{background:#e7f8f0;color:#0a6b41} /* 泳道（D 需求端 / S 供给端） */ .swim{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .swim-lane{background:#fff;border-radius:11px;padding:10px 12px;border-left:4px solid var(--brand); box-shadow:var(--shadow-s);border-top:1px solid var(--line);border-right:1px solid var(--line); border-bottom:1px solid var(--line)} .swim-lane.s{border-left-color:var(--brand-2)} .swim-lane b{display:block;font-size:12.5px;margin-bottom:3px} .swim-lane span{font-size:11.5px;color:var(--sub);line-height:1.65} .lane{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px; font-size:11px;font-weight:700;color:#fff;flex:0 0 20px} .lane.d{background:var(--brand)} .lane.s{background:var(--brand-2)} .handoff{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border-radius:10px; background:#fff8ec;border:1px dashed #f0c98a;margin:2px 0 12px} .handoff .st{font-size:12.5px;font-weight:700;color:#8a5a00} .handoff .sd{font-size:11.5px;color:#8a5a00;opacity:.9;margin-top:3px;line-height:1.6} .empty{text-align:center;padding:40px 20px;color:var(--mute);font-size:13px} .empty .ei{font-size:40px;display:block;margin-bottom:10px;opacity:.6} .boom{position:absolute;left:0;right:0;bottom:0;top:0;background:#0b0d12;display:flex; flex-direction:column;color:#fff;z-index:30;overflow-y:auto} .boom .b-head{padding:12px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600} .boom .b-stage{flex:1;display:grid;place-items:center;font-size:64px} .boom .b-foot{padding:16px;display:flex;gap:10px;justify-content:center} .boom .b-comment{position:absolute;right:12px;bottom:120px;display:flex;flex-direction:column;gap:18px; align-items:center;font-size:11px;opacity:.9} .boom .b-comment div{text-align:center} .boom .b-comment span{display:block;font-size:22px} /* 浮层 */ .toast{position:fixed;left:50%;bottom:80px;transform:translate(-50%,20px);background:rgba(16,24,40,.92); color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;opacity:0;pointer-events:none; transition:.24s;z-index:999;max-width:74vw;text-align:center;line-height:1.5} .toast.show{opacity:1;transform:translate(-50%,0)} .sheet-mask,.dialog-mask{position:fixed;inset:0;background:rgba(16,24,40,.45);display:none; align-items:flex-end;justify-content:center;z-index:900;backdrop-filter:blur(2px)} .dialog-mask{align-items:center} .sheet-mask.show,.dialog-mask.show{display:flex} .sheet{width:min(390px,92vw);background:#fff;border-radius:20px 20px 0 0;padding:16px 16px 22px; max-height:76vh;overflow-y:auto;animation:up .22s ease} @keyframes up{from{transform:translateY(30px)}to{transform:none}} .sheet h3{font-size:16px;font-weight:600;margin-bottom:4px} .sheet .sheet-sub{font-size:12px;color:var(--sub);margin-bottom:14px;line-height:1.6} .dialog{width:min(320px,88vw);background:#fff;border-radius:16px;padding:20px;text-align:center; animation:pop .2s ease} @keyframes pop{from{transform:scale(.94);opacity:.6}to{transform:none;opacity:1}} .dialog h3{font-size:16.5px;font-weight:600;margin-bottom:8px} .dialog p{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:18px} .dialog .d-acts{display:flex;gap:10px} .dialog .d-acts .btn{flex:1} .field{margin-bottom:13px} .field label{display:block;font-size:12.5px;color:var(--sub);margin-bottom:6px;font-weight:500} .field input,.field select{width:100%;height:var(--tap);border-radius:11px;border:1px solid var(--line); padding:0 12px;background:#fafbfd;color:var(--text)} .field input:focus,.field select:focus{outline:none;border-color:var(--brand);background:#fff} .field .fh{font-size:11px;color:var(--mute);margin-top:5px;line-height:1.55} .num-stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:11px; overflow:hidden;height:var(--tap);background:#fafbfd} .num-stepper button{width:44px;height:100%;font-size:19px;color:var(--brand);background:#fff;font-weight:600} .num-stepper input{flex:1;height:100%;border:none;text-align:center;background:transparent;font-weight:700;font-size:16px} @media (max-width:1080px){ .stage{flex-direction:column;align-items:center} .stage-side{width:min(390px,92vw);flex:0 0 auto;position:static} } /* ============================================================ 社群 Table：首页首行 + 5613 列表结构 ============================================================ */ /* ---- 首行：重要信息入口 / 名称+未读数 / 搜索 / 更多 ---- */ .tbl-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fff; border-bottom:1px solid var(--line);position:sticky;top:0;z-index:8} .tbl-head .th-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center; background:#f2f4f7;font-size:16px;flex:0 0 32px;position:relative;cursor:pointer} .tbl-head .th-icon .th-dot{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 4px; border-radius:8px;background:var(--danger);color:#fff;font-size:9.5px;line-height:15px; text-align:center;font-weight:700} .tbl-head .th-name{font-size:16.5px;font-weight:700;display:flex;align-items:center;gap:6px;flex:0 0 auto} .tbl-head .th-unread{background:var(--danger);color:#fff;font-size:10.5px;font-weight:700; padding:1px 6px;border-radius:9px;line-height:1.5} .tbl-head .th-search{flex:1;min-width:0;height:30px;border-radius:15px;background:#f2f4f7; color:var(--mute);font-size:12px;display:flex;align-items:center;gap:6px;padding:0 11px; overflow:hidden;white-space:nowrap;cursor:pointer} .tbl-head .th-more{width:32px;height:32px;border-radius:10px;display:grid;place-items:center; background:#f2f4f7;font-size:16px;flex:0 0 32px;cursor:pointer;color:var(--sub);font-weight:700} /* ---- 5613 结构：5 行 6 区 13 信息点 ---- 列：1=头像区 2=名称区(半) 3=发布区(半) 4=日期时间/免打扰 名称区与发布区各占微信昵称区的一半（物理中点线）， 日期时间占位变宽时只挤压发布区（相邻），不挤压名称区。 */ .li5613{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1fr) auto; grid-template-areas: "ava org pub time" "ava org pub mute" "ava org pub mute" "nick last last last" "tel last last last"; column-gap:7px;row-gap:0;padding:9px 12px;background:#fff; border-bottom:1px solid var(--line);cursor:pointer;position:relative} .li5613:active{background:#f8f9fc} .li5613.pinned{background:#fffdf8} .li5613 .z-ava{grid-area:ava;position:relative;height:44px} .li5613 .z-ava .avatar{width:44px;height:44px;flex:0 0 44px;border-radius:11px;font-size:15px} .li5613 .z-ava .z-badge{position:absolute;top:-5px;right:2px;min-width:17px;height:17px;padding:0 5px; border-radius:9px;background:var(--danger);color:#fff;font-size:10px;line-height:17px; text-align:center;font-weight:700;border:1.5px solid #fff} .li5613 .z-nick{grid-area:nick;font-size:10.5px;font-weight:700;line-height:15px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 群名称：只显示简称，点击可看全称 */ .li5613 .z-nick.tap{cursor:pointer} .li5613 .z-nick .info{color:var(--brand);font-size:9.5px;font-weight:400} .li5613 .z-nick .pinmark{color:var(--warn);font-size:9px;font-weight:700} .li5613 .z-tel{grid-area:tel;font-size:9px;color:var(--sub);line-height:14px;letter-spacing:-.3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .li5613 .z-org,.li5613 .z-pub{display:flex;flex-direction:column;justify-content:flex-start;min-width:0} .li5613 .z-org{grid-area:org} .li5613 .z-pub{grid-area:pub} .li5613 .z-line{font-size:10px;line-height:15px;color:var(--sub);letter-spacing:-.2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .li5613 .z-line.strong{color:var(--text);font-weight:600} .li5613 .z-line .n{color:var(--brand);font-weight:700} .li5613 .z-line .n.warn{color:var(--warn)} .li5613 .z-time{grid-area:time;font-size:9.5px;color:var(--mute);text-align:right; line-height:15px;white-space:nowrap} .li5613 .z-mute{grid-area:mute;text-align:right;font-size:10px;color:var(--mute);line-height:15px} .li5613 .z-last{grid-area:last;display:flex;flex-direction:column;justify-content:flex-start; min-width:0;padding-top:1px} .li5613 .z-last>div{font-size:11px;color:var(--sub);line-height:16px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .li5613 .z-last>div.loc{font-size:9.5px;color:var(--mute);line-height:15px;letter-spacing:-.2px} .li5613 .z-last b{color:var(--text);font-weight:600} .li5613 .z-last .tagline{font-size:9.5px;color:var(--mute);margin-left:5px} /* 自建群：沿用微信式 */ .li-wx{display:flex;gap:11px;align-items:center;padding:11px 12px;background:#fff; border-bottom:1px solid var(--line);cursor:pointer} .li-wx:active{background:#f8f9fc} .li-wx .li-main{flex:1;min-width:0} .li-wx .w-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .li-wx .w-last{font-size:11.5px;color:var(--sub);margin-top:2px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .li-wx .w-right{text-align:right;flex:0 0 auto;font-size:10px;color:var(--mute)} /* 六类社群 */ .cat6{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px} .cat6 .c6{background:#fff;border-radius:13px;padding:11px 8px;text-align:center; box-shadow:var(--shadow-s);border:1px solid var(--line);position:relative;cursor:pointer} .cat6 .c6:active{transform:scale(.97)} .cat6 .c6 .ic{font-size:21px} .cat6 .c6 .nm{font-size:12.5px;font-weight:600;margin-top:5px} .cat6 .c6 .cnt{font-size:10px;color:var(--sub);margin-top:2px} .cat6 .c6 .pin{position:absolute;top:5px;right:5px;font-size:9px;color:var(--warn);font-weight:700} /* 列表结构解剖图 */ .anatomy{border:2px dashed var(--brand);border-radius:14px;overflow:hidden;background:#fff; position:relative;margin-bottom:12px} .anatomy .zone-label{position:absolute;font-size:9px;font-weight:700;color:#fff; background:var(--brand);padding:1px 5px;border-radius:5px;z-index:3} .anatomy .zline{position:absolute;left:0;right:0;border-top:1px dashed #f0c98a;z-index:2} .anatomy .midline{position:absolute;top:0;bottom:0;border-left:1px dashed #f0c98a;z-index:2} .anatomy-scale{transform:scale(1.35);transform-origin:top left;width:74%} /* 群聊双模式 */ .chatmode{display:flex;gap:6px;align-items:center;padding:8px 12px;background:#fff; border-bottom:1px solid var(--line);position:sticky;top:0;z-index:7} .thread{background:#fff;border-radius:var(--r-m);border:1px solid var(--line); box-shadow:var(--shadow-s);padding:12px;margin-bottom:10px} .thread .th-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .thread .th-t{font-size:14px;font-weight:600;flex:1;min-width:0} .thread .th-m{font-size:11px;color:var(--sub);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap} .water{background:#fbfcfe;border:1px dashed #d6dae2;border-radius:var(--r-m);padding:11px; margin-top:4px} .water .w-h{font-size:11px;color:var(--sub);font-weight:600;display:flex;gap:6px;align-items:center} .water .w-msg{font-size:12.5px;line-height:1.7;margin-top:8px;color:#344054} .water .w-msg b{color:var(--brand)} .pierce{background:#fff4e5;border:1px solid #ffe4bd;border-radius:11px;padding:10px 12px; font-size:12px;color:#8a5a00;line-height:1.7;margin-bottom:10px} .pierce b{font-weight:700} code{font-family:Consolas,Monaco,monospace;font-size:11.5px;background:#f2f4f7; padding:1px 5px;border-radius:5px;color:#b02828} /* ============================================================ 分角色呈现 ============================================================ */ .side-role{display:flex;gap:9px;align-items:center;padding:7px 8px;border-radius:9px; cursor:pointer;transition:.15s} .side-role:hover{background:var(--brand-soft)} .side-role.active{background:var(--brand);color:#fff} .side-role.active i{color:rgba(255,255,255,.82)} .side-role .sr-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px} .side-role b{font-size:13px;font-weight:600;display:block} .side-role i{font-style:normal;font-size:10.5px;color:var(--sub);display:block;margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px} /* 角色卡 */ .role-card{background:#fff;border-radius:var(--r-m);padding:13px;margin-bottom:11px; box-shadow:var(--shadow-s);border:1px solid var(--line);cursor:pointer;transition:.15s; display:flex;gap:11px;align-items:flex-start;position:relative} .role-card:active{transform:scale(.99)} .role-card.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(43,109,246,.14)} .role-card .rc-ico{width:42px;height:42px;border-radius:12px;flex:0 0 42px;display:grid; place-items:center;font-size:19px;color:#fff;font-weight:700} .role-card .rc-b{flex:1;min-width:0} .role-card .rc-n{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:6px} .role-card .rc-t{font-size:11px;color:var(--sub);margin-top:3px;line-height:1.6} .role-card .rc-d{font-size:11.5px;color:#667085;margin-top:6px;line-height:1.65} .role-card .rc-check{position:absolute;right:12px;top:12px;color:var(--brand);font-size:15px} /* 无权限 */ .noacc{text-align:center;padding:34px 18px} .noacc .na-ico{font-size:46px;opacity:.85} .noacc h3{font-size:16.5px;margin-top:12px} .noacc p{font-size:13px;color:var(--sub);line-height:1.8;margin-top:9px} .noacc .na-box{background:#fff8ec;border:1px solid #ffe4bd;border-radius:12px;padding:12px; margin-top:16px;text-align:left;font-size:12px;color:#8a5a00;line-height:1.7} /* 角色落地页头部 */ .rolebanner{border-radius:var(--r-m);padding:14px;color:#fff;margin-bottom:12px} .rolebanner h3{font-size:16px;font-weight:700} .rolebanner p{font-size:11.5px;opacity:.9;margin-top:5px;line-height:1.65} .rolebanner .rb-chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap} .rolebanner .rb-chips span{background:rgba(255,255,255,.22);border-radius:8px; padding:3px 8px;font-size:10.5px;font-weight:600} /* ============================================================================ 登录页（依据参考原型【登录页】截图 + XD 提取文案「登录与安全」） 四种方式：本机号码一键登录 / 验证码登录 / 指纹登录 / 刷脸登录 ============================================================================ */ .login{min-height:100%;background:#fff;display:flex;flex-direction:column;padding:38px 26px 22px} .lg-top{text-align:center;margin-bottom:34px} .lg-logo{width:76px;height:76px;margin:0 auto 12px;border-radius:20px; background:#9ec5ff; display:grid;place-items:center;font-size:30px;color:#fff;font-weight:700; box-shadow:0 8px 22px rgba(120,140,255,.22)} .lg-name{font-size:17px;font-weight:600;color:#1f2329;letter-spacing:.04em} .lg-sub{font-size:11.5px;color:#98a2b3;margin-top:4px} .lg-phone{text-align:center;font-size:25px;font-weight:600;letter-spacing:.06em;color:#1f2329} .lg-hint{text-align:center;font-size:11px;color:#a8b0bd;margin-top:7px} .lg-main{margin-top:22px} .lg-agree{display:flex;gap:8px;align-items:flex-start;margin-top:16px; font-size:11.5px;color:#86909c;line-height:1.6;cursor:pointer} .lg-agree b{color:#2b6df6;font-weight:500} .lg-agree .cb{flex:0 0 auto;width:15px;height:15px;border-radius:50%;border:1px solid #c9cdd4; display:grid;place-items:center;font-size:10px;color:#fff;margin-top:1px} .lg-agree.on .cb{background:#2b6df6;border-color:#2b6df6} .lg-or{display:flex;align-items:center;gap:10px;margin:26px 0 14px;color:#a8b0bd;font-size:11.5px} .lg-or::before,.lg-or::after{content:'';flex:1;height:1px;background:#f0f1f3} .lg-foot{margin-top:auto;padding-top:22px;text-align:center;font-size:11.5px;color:#a8b0bd} .lg-foot span{cursor:pointer} .lg-foot .dot{margin:0 8px} .bio{text-align:center;padding:14px 6px 6px} .bio-ic{font-size:52px;line-height:1;margin-bottom:14px} .bio-t{font-size:15px;font-weight:600;color:#1f2329} .bio-s{font-size:11.5px;color:#98a2b3;margin-top:6px;line-height:1.6} /* ============================================================================ 商城首页（按业务方参考原型【商城首页】截图重做） 定位行 → 搜索行 → 5 分类 → 周边打折/为你推荐 → 附近店铺 → 店铺卡片 → 悬浮购物车 ============================================================================ */ .ml-page{padding-bottom:80px} .ml-loc{display:flex;align-items:center;gap:6px;padding:10px 14px 6px;background:#fff} .ml-pin{font-size:14px} .ml-city{font-size:15px;font-weight:600;color:#1f2329} .ml-arrow{color:#86909c;font-size:13px;margin-top:-1px} .ml-sp{flex:1} .ml-ic{border:none;background:none;font-size:17px;color:#4e5969;cursor:pointer;padding:2px 4px} .ml-search{display:flex;align-items:center;gap:8px;padding:6px 14px 12px;background:#fff} .ml-si{font-size:14px;color:#98a2b3;margin-right:-26px;margin-left:11px;z-index:1} .ml-input{flex:1;min-width:0;height:38px;border:1px solid #f0d9b5;border-radius:9px; background:#fffdf7;padding:0 12px 0 34px;font-size:13.5px;font-family:inherit;color:#1f2329;outline:none} .ml-input::placeholder{color:#c0a878} .ml-input:focus{border-color:#f79009;background:#fff} .ml-btn{flex:0 0 auto;height:38px;padding:0 18px;border:none;border-radius:9px; background:#f79009;color:#fff;font-size:14px;font-weight:600;cursor:pointer} .ml-btn:hover{background:#e0820a} .ml-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px 8px 14px;background:#fff} .ml-cat{display:flex;flex-direction:column;align-items:center;gap:6px;border:none;background:none;cursor:pointer;padding:4px 0} .ml-cat-ic{width:46px;height:46px;border-radius:14px;background:#fff1d6; display:grid;place-items:center;font-size:22px;border:1px solid #ffe4bb} .ml-cat-n{font-size:11.5px;color:#4e5969} .ml-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 12px;background:#fff} .ml-card{border-radius:12px;padding:11px 12px 10px;cursor:pointer;position:relative;min-height:104px; display:flex;flex-direction:column;background:#fff4ec;border:1px solid #ffe2d2} .ml-card:nth-child(2){background:#eef3ff;border-color:#dfe7ff} .ml-card-t{font-size:13.5px;font-weight:600;color:#1f2329} .ml-card-fig{flex:1;display:grid;place-items:center;font-size:26px;opacity:.85} .ml-card-go{font-size:11.5px;color:#f79009;font-weight:600} .ml-card-av{display:flex;align-items:center;gap:-6px} .ml-card-av i{width:19px;height:19px;border-radius:50%;background:#fff;display:grid;place-items:center; font-size:11px;font-style:normal;margin-right:-6px;border:1px solid #fff} .ml-card-av span{font-size:10.5px;color:#5b6b8c;margin-left:10px} .ml-near{display:flex;align-items:center;gap:7px;padding:12px 14px 8px;font-size:12.5px;color:#4e5969;background:#f7f8fa} .ml-near b{color:#f04438;font-size:14px;margin:0 2px} .ml-shop{display:flex;gap:11px;padding:12px 14px;background:#fff;border-bottom:8px solid #f4f5f7;cursor:pointer} .ml-simg{flex:0 0 78px;height:78px;border-radius:11px;display:grid;place-items:center;position:relative;overflow:hidden} .ml-simgi{font-size:32px} .ml-play{position:absolute;right:5px;bottom:5px;width:17px;height:17px;border-radius:50%; background:rgba(0,0,0,.45);color:#fff;font-size:8px;display:grid;place-items:center} .ml-sinfo{flex:1;min-width:0} .ml-srow1{display:flex;align-items:center;gap:6px} .ml-new{flex:0 0 auto;font-size:10px;background:#f04438;color:#fff;border-radius:4px;padding:0 4px;line-height:15px} .ml-sname{flex:1;min-width:0;font-size:14px;font-weight:600;color:#1f2329;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ml-dist{flex:0 0 auto;font-size:11.5px;color:#f04438;font-weight:600} .ml-srow2{font-size:11.5px;color:#86909c;margin-top:5px} .ml-srow3{font-size:11.5px;color:#f79009;margin-top:5px} .ml-goods{display:flex;gap:8px;margin-top:8px} .ml-g{display:flex;align-items:center;gap:5px;background:#f7f8fa;border-radius:7px;padding:4px 8px} .ml-g i{font-style:normal;font-size:13px} .ml-g b{font-size:12px;color:#f04438;font-weight:700} .ml-more{padding:12px 14px;font-size:12px;color:#86909c;background:#fff;text-align:center} .ml-extra{display:flex;gap:9px;padding:12px 14px 4px;background:#fff} .ml-ex{flex:1;border:1px solid #e5e6eb;background:#fff;border-radius:9px;padding:9px 0; font-size:12px;color:#4e5969;cursor:pointer} .ml-ex:hover{border-color:#f79009;color:#f79009} .ml-cart{position:fixed;right:16px;bottom:74px;width:52px;height:52px;border-radius:50%;border:none; background:#ffb44d;color:#fff;font-size:22px;cursor:pointer; box-shadow:0 6px 18px rgba(247,144,9,.4);z-index:20} .ml-cart-b{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;border-radius:10px; background:#f04438;color:#fff;font-size:11px;line-height:19px;text-align:center;font-weight:700;padding:0 4px} /* 其他登录方式 —— 横排小圆图标（对齐参考原型底部「短信登录」圆形图标形态） */ .lg-grid{display:flex;justify-content:center;gap:34px;margin-top:4px} .lgm{display:flex;flex-direction:column;align-items:center;gap:7px;border:none;background:none;cursor:pointer;padding:0} .lgm-ic{width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid #e5e6eb; display:grid;place-items:center;font-size:21px;transition:border-color .12s,background .12s} .lgm:hover .lgm-ic{border-color:#2b6df6;background:#f2f7ff} .lgm-n{font-size:11.5px;color:#86909c} .lgm:hover .lgm-n{color:#2b6df6} /* 5613 右列：私聊用**文字摘要**（群聊仍用数字）—— 单行截断 */ .z-line .z-lb{margin-right:4px} .z-line .z-tx{display:inline-block;max-width:96px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;vertical-align:bottom} /* ============================================================================ 首页：实时上新 + 服务动态（按业务方参考原型【首页】截图） ============================================================================ */ .hlNew{padding:12px 14px;background:#fff;border-top:8px solid #f4f5f7} .hlRow{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:#4e5969} .hlBadge{flex:0 0 auto;font-size:10px;background:#f9af4e;color:#fff; border-radius:5px;padding:1px 6px;line-height:15px} .hlTx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hlTx b{color:#f04438;font-weight:700} .hlGo{flex:0 0 auto;font-size:11.5px;color:#2b6df6;cursor:pointer} .hlEx{flex:0 0 auto;font-size:11px;color:#98a2b3} .hlFeed{padding:0 14px 12px;background:#fff} .hlF{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f4f5f7} .hlFtag{flex:0 0 auto;min-width:30px;max-width:46px;border-radius:6px;color:#fff;font-size:10.5px; display:grid;place-items:center;text-align:center;line-height:1.15;padding:6px 2px;writing-mode:vertical-rl} .hlFbd{flex:1;min-width:0} .hlFcost{flex:0 0 auto;font-size:10.5px;background:#eef3ff;color:#2b6df6;border-radius:5px;padding:1px 6px} /* ============================================================================ ★ 聊天用「微信配色」（业务方要求） 自己气泡 #95EC69 · 对方气泡 #fff · 双方深色文字 · 聊天底 #EDEDED · 主色 #07C160 ============================================================================ */ .chatBg{background:#EDEDED !important} .chatSend{background:#07C160 !important;color:#fff !important} /* ★ 商城用「美团配色」（业务方要求）：主黄 #FFD100、按钮黄底深字、强调橙 #FF8000 */ .ml-btn{background:#FFD100 !important;color:#1f2329 !important;font-weight:700} .ml-btn:hover{background:#FFC300 !important} .ml-cat-ic{background:#FFF7D6 !important;border-color:#FFE9A8 !important} .ml-input{border-color:#FFE9A8 !important;background:#FFFDF5 !important} .ml-input::placeholder{color:#c0b070 !important} .ml-cart{background:#FFD100 !important;color:#1f2329 !important;box-shadow:0 6px 18px rgba(255,209,0,.45) !important} .ml-card-go{color:#FF8000 !important} .ml-near b{color:#FF8000 !important} /* ============================================================================ ★ 发现（视播）—— 全屏沉浸式竖版视频流（按业务方墨刀原型【发现】） ============================================================================ */ .vd{position:relative;height:100%;min-height:560px;background:#111;overflow:hidden} .vd-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:16px; padding:12px 14px;background:linear-gradient(180deg,rgba(0,0,0,.42),transparent)} .vd-tab{border:none;background:none;color:rgba(255,255,255,.72);font-size:15px;cursor:pointer;padding:2px 0;position:relative} .vd-tab.on{color:#fff;font-weight:700} .vd-tab.on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-5px; width:18px;height:2.5px;border-radius:2px;background:#FFD100} .vd-sp{flex:1} .vd-ic{border:none;background:none;color:#fff;font-size:18px;cursor:pointer;padding:0 4px} .vd-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1a1a1a} .vd-bg{font-size:190px;line-height:1;filter:saturate(1.05)} .vd-acts{position:absolute;right:12px;bottom:150px;display:flex;flex-direction:column;gap:16px;z-index:3} .vd-act{display:flex;flex-direction:column;align-items:center;gap:3px;border:none;background:none;cursor:pointer;color:#fff} .vd-act-i{font-size:22px;line-height:1} .vd-act-n{font-size:11px;color:rgba(255,255,255,.9)} .vd-author{position:absolute;left:14px;bottom:92px;display:flex;align-items:center;gap:8px;z-index:3} .vd-ava{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px; color:#1f2329;font-weight:700;border:1.5px solid #fff} .vd-nm{font-size:13px;color:#fff;font-weight:600} .vd-follow{border:none;background:#2b6df6;color:#fff;font-size:11px;border-radius:11px;padding:2px 10px;cursor:pointer} .vd-shop{position:absolute;left:12px;right:12px;bottom:14px;z-index:3;display:flex;align-items:center;gap:9px; background:rgba(0,0,0,.5);border-radius:11px;padding:8px 10px;cursor:pointer} .vd-slogo{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:#fff;display:grid;place-items:center;font-size:17px} .vd-sinfo{flex:1;min-width:0} .vd-sn{font-size:12.5px;color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vd-dist{color:#FFD100;font-weight:700;margin-left:4px} .vd-sa{font-size:10.5px;color:rgba(255,255,255,.72);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vd-sthumb{flex:0 0 auto;font-size:22px} /* 服务动态：匹配属性 chips + 「去使用」入口 */ /* ★ 业务方：原「去使用 ›」的 58px 预留位已收回（那一块不能留在那里养鱼）。 .hlF 现在撑满整行，时间 float:right 落到最右。 */ .hlF{cursor:pointer} .hlF:hover{background:#fafbfd} /* ============================================================================ ★ 「没有模块 → 创建」入口（业务方流程图分支：没有模块就创建 = 小程序生成器） ============================================================================ */ .createCard{display:flex;align-items:center;gap:11px;margin:10px 12px 12px;padding:11px 13px; border:1px dashed #c9d8ff;border-radius:11px;background:#f8faff;cursor:pointer} .createCard:hover{border-color:#2b6df6;background:#f2f7ff} .cc-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:#2b6df6;color:#fff; display:grid;place-items:center;font-size:17px;font-weight:700} .cc-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .cc-t{font-size:13.5px;font-weight:600;color:#1f2329} .cc-s{font-size:11px;color:#86909c} .cc-go{flex:0 0 auto;font-size:12px;color:#2b6df6;font-weight:600} /* ============================================================================ ★ 生成器内嵌层（业务方流程图分支：没有模块 → 创建这个模块 = 小程序生成器） 全屏覆盖，带顶栏说明与关闭；关掉即回首页 —— 不再新开标签页。 ============================================================================ */ .genMask{position:fixed;inset:0;z-index:200;background:#0b1020;display:none;flex-direction:column} .genMask.on{display:flex} .genBar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 16px;background:#fff; border-bottom:1px solid #e5e6eb;flex-wrap:wrap} .genT{font-size:14px;font-weight:600;color:#1f2329;white-space:nowrap} .genS{font-size:11.5px;color:#86909c} .genSp{flex:1} .genX{border:1px solid #e5e6eb;background:#fff;border-radius:8px;padding:6px 13px;font-size:12.5px; cursor:pointer;color:#4e5969;white-space:nowrap} .genX:hover{border-color:#2b6df6;color:#2b6df6;background:#f2f7ff} .genX.primary{background:#2b6df6;color:#fff;border-color:#2b6df6;font-weight:600} .genX.primary:hover{background:#1f5fe0;color:#fff} .genMask iframe{flex:1 1 auto;width:100%;border:none;background:#f4f5f7} /* ============================================================================ ★ 首页按墨刀（业务方裁决第 1 项） 5 列应用入口 + 「更多」 ▏「新增产品 / 新增服务」两张卡 ▏服务动态方括号项 ============================================================================ */ .mkGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px 6px;padding:4px 12px 12px;background:#fff} .mkCell{display:flex;flex-direction:column;align-items:center;gap:5px;border:none;background:none;cursor:pointer;padding:0;min-width:0} .mkIc{width:52px;height:44px;border-radius:10px;background:#dbe7fb;display:grid;place-items:center; font-size:19px;border:1px solid #cfe0fb} .mkCell:hover .mkIc{border-color:#f79009;background:#fff6e0} .mkIc.mkMore{background:#f2f4f7;border-color:#e5e6eb;font-size:20px;color:#4e5969} .mkN{font-size:10.5px;color:#4e5969;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ★★ 首页模块空态（2026-10-13）：这几格必须由「小程序生成器」实际生成 —— 池为空时显示本空态，**不拿硬编码数据假装有** */ .mkGridEmpty{display:block;padding:6px 12px 14px} .mkEmpty{background:#f7f8fa;border:1px dashed #d8dbe0;border-radius:10px; padding:18px 16px;text-align:center} .mkEmptyIc{font-size:30px;line-height:1;margin-bottom:8px} .mkEmptyT{font-size:14px;font-weight:600;color:#1f2329;margin-bottom:6px} .mkEmptyD{font-size:12px;color:#667085;line-height:1.65} .mkEmptyD b{color:#1f2329} .mkTwo{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;background:#fff} .mkCard{border-radius:10px;background:#f7f8fa;padding:11px 12px;cursor:pointer;min-height:74px} .mkCard:hover{background:#f2f4f7} .mkCardT{font-size:13px;font-weight:600;color:#1f2329} .mkCardB{font-size:12px;color:#86909c;margin-top:8px;line-height:1.5} .mkCardB b{color:#f04438;font-weight:700} .mkBrk{display:inline-block;font-size:11.5px;color:#f79009;background:#fff4e6;border-radius:4px; padding:0 4px;margin:0 1px} /* ★ 顶栏「🔔 通知」带红点（按墨刀；业务方裁决第 1 项） */ .app-header .h-bell{position:relative;flex:0 0 auto;border:none;background:none;font-size:16px; cursor:pointer;padding:0 3px;line-height:1} .app-header .h-bell-dot{position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%; background:#f04438;border:1.5px solid #eef0f3} /* ============================================================================ ★ 认证模块（实名 / 企业认证 / 认领）—— 按墨刀（业务方裁决第 11 项） 实名认证照实拍：标题 + 说明 + 插图 + 两行输入 + 黄色大按钮 ============================================================================ */ .raTop{display:flex;align-items:center;gap:14px;padding:6px 2px 16px} .raTx{flex:1} .raT{font-size:22px;font-weight:700;color:var(--text)} .raS{font-size:12.5px;color:var(--mute);margin-top:6px;line-height:1.6} .raFig{flex:0 0 auto;font-size:54px;line-height:1} .raForm{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #f0f1f3} .raRow{display:flex;flex-direction:column;gap:6px;padding:13px 14px;border-bottom:1px solid #f4f5f7} .raRow:last-child{border-bottom:none} .raL{font-size:13px;color:var(--sub)} .raI{border:none;outline:none;font-size:14.5px;font-family:inherit;color:var(--text);background:none} .raI::placeholder{color:#c9cdd4} .raBtn{display:block;width:100%;margin-top:26px;height:48px;border:none;border-radius:10px; background:#FFD100;color:#1f2329;font-size:16px;font-weight:700;cursor:pointer} .raBtn:hover{background:#FFC300} /* ============================================================================ ★ 支付 4 步（按墨刀；业务方裁决第 8、12 项） 收银台：黄底实付金额 + 倒计时 + 支付方式单选 + 黄色立即支付 支付密码：6 个空位 + 自定义数字键盘 ============================================================================ */ .payWrap{min-height:100%;background:#f4f5f7;display:flex;flex-direction:column} .payTop{background:#FFD100;padding:18px 16px 22px;text-align:center} .payLbl{font-size:12.5px;color:#1f2329;opacity:.75} .payAmt{font-size:30px;font-weight:700;color:#1f2329;margin-top:6px} .payTimer{font-size:12px;color:#1f2329;opacity:.75;margin-top:10px} .payTimer b{font-weight:600} .payBody{flex:1;background:#fff;border-radius:12px 12px 0 0;margin-top:-8px;padding:16px 14px} .paySecT{font-size:13px;color:var(--sub);margin-bottom:8px} .payM{display:flex;align-items:center;gap:10px;padding:14px 4px;border-bottom:1px solid #f4f5f7;cursor:pointer} .payMIc{font-size:17px} .payMNm{flex:1;font-size:14.5px;color:var(--text)} .payAdd{font-size:12px;color:var(--mute)} .payAdd i{font-style:normal;font-size:10px} .payRadio{flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:1.5px solid #d0d3d9; display:grid;place-items:center;font-size:11px;color:#fff} .payRadio.on{background:#f04438;border-color:#f04438} .payBanks{padding:2px 4px 8px 30px} .payBank{display:flex;align-items:center;justify-content:space-between;padding:11px 2px; font-size:13.5px;color:var(--sub);cursor:pointer;border-bottom:1px solid #fafbfc} .payBank.on{color:var(--text);font-weight:500} .payBtn{display:block;width:calc(100% - 28px);margin:0 14px 20px;height:48px;border:none;border-radius:24px; background:#FFD100;color:#1f2329;font-size:16px;font-weight:700;cursor:pointer} .payBtn:hover{background:#FFC300} /* 支付密码 */ .pwWrap{min-height:calc(100% - 232px);background:#fff;padding:26px 22px 10px} .pwAmt{text-align:center;font-size:26px;font-weight:700;color:var(--text);margin-bottom:14px} .pwTitle{font-size:21px;font-weight:700;color:var(--text)} .pwSub{font-size:13px;color:var(--sub);margin-top:7px} .pwDots{display:flex;gap:9px;margin:26px 0 0} .pwDot{flex:1;height:46px;border-radius:7px;background:#f4f5f7} .pwDot.on{background:#e8eaed} .pwHint{font-size:12px;color:var(--mute);line-height:1.75;margin-top:24px} .kb{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d0d3d9} .kbK{height:54px;border:none;background:#fff;font-size:22px;color:var(--text);cursor:pointer;font-family:inherit} .kbK:active{background:#e8eaed} .kbE{background:#e8eaed} /* ============================================================================ ★ 社群层级管理（按墨刀；业务方裁决第 9 项） 社群 → 楼栋 → 楼层 → 户号 → 人员 ============================================================================ */ .ccForm{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #f0f1f3} .ccRow{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid #f4f5f7} .ccRow:last-child{border-bottom:none} .ccL{flex:0 0 88px;font-size:13.5px;color:var(--sub)} .ccI{flex:1;min-width:0;border:none;outline:none;font-size:14px;font-family:inherit;color:var(--text);background:none} .ccI::placeholder{color:#c9cdd4} .ccPick{flex:1;min-width:0;font-size:14px;color:#c9cdd4;display:flex;align-items:center;justify-content:space-between;cursor:pointer} .ccPick b{font-style:normal;color:var(--sub);font-weight:400} .ccTa{flex:1;min-width:0;border:none;outline:none;font-size:14px;font-family:inherit;color:var(--text); resize:none;height:92px;background:none;line-height:1.6} .ccTa::placeholder{color:#c9cdd4} .bdActs{display:flex;gap:10px;padding:4px 0 12px} .bdAct{flex:1;height:38px;border:none;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;color:#fff} .bdAct.blue{background:#2b6df6} .bdAct.blue:hover{background:#1f5fe0} .bdAct.orange{background:#f79009} .bdAct.orange:hover{background:#e0820a} .bdList{background:#fff;border-radius:12px;overflow:hidden} .bdItem{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid #f4f5f7;cursor:pointer} .bdItem:last-child{border-bottom:none} .bdItem:hover{background:#fafbfd} .bdIc{flex:0 0 38px;height:38px;border-radius:9px;background:#dbe7fb;color:#2b6df6; display:grid;place-items:center;font-size:19px} .bdBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .bdN{font-size:14px;font-weight:500;color:var(--text);display:flex;align-items:center;gap:6px} .bdS{font-size:11.5px;color:var(--mute)} .bdMore{flex:0 0 auto;border:none;background:none;color:var(--mute);font-size:17px;cursor:pointer; padding:0 4px;line-height:1} /* ============================================================================ ★ 店铺工作台（按墨刀；业务方裁决第 7 项） 顶部店铺头 ▏商品订单4格 ▏店铺数据3格 ▏店铺总览（4统计 + 9宫格） ============================================================================ */ .sdPage{min-height:100%;background:#f4f5f7;padding-bottom:16px} .sdTop{display:flex;align-items:center;gap:11px;background:#fff;padding:14px} .sdLogo{flex:0 0 52px;height:52px;border-radius:11px;background:#fdecec;display:grid;place-items:center;font-size:27px} .sdTx{flex:1;min-width:0} .sdN{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px} .sdBadge{font-size:10.5px;background:#FFD100;color:#1f2329;border-radius:5px;padding:1px 7px;font-weight:600} .sdSince{font-size:11.5px;color:var(--mute);margin-top:5px} .sdScan{flex:0 0 auto;font-size:18px;color:var(--sub)} .sdCard{background:#fff;border-radius:12px;margin:10px 12px 0;padding:14px 14px 12px} .sdSecT{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;color:var(--text)} .sdSecT i{display:inline-block;width:3px;height:14px;background:#FFD100;border-radius:2px; margin-right:7px;vertical-align:-2px} .sdMore{font-size:12px;color:var(--mute);font-weight:400;cursor:pointer} .sdRange{color:#f79009;background:#fff4e6;border-radius:5px;padding:1px 7px;margin-right:4px} .sdRow4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px} .sdRow3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px} .sdCell{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer} .sdNum{font-size:19px;font-weight:700;color:var(--text)} .sdNum.red{color:#f04438} .sdLbl{font-size:11.5px;color:var(--mute)} .sdGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px;margin-top:16px} .sdTile{display:flex;flex-direction:column;align-items:center;gap:6px;border:none;background:none;cursor:pointer;padding:0} .sdTi{font-size:22px;line-height:1} .sdTn{font-size:11.5px;color:var(--sub)} /* ============================================================================ ★ 「我的」页顶部（按墨刀；业务方裁决第 6 项） 渐变黄底头像区（认证标签 + 我的主页）▏三圆图标 ▏钱包 ▏订单5类 ▏服务4项 ▏店铺 ============================================================================ */ .meTop{background:linear-gradient(160deg,#FFE980,#FFD100 70%,#FFF0A8);padding:16px 14px 0; border-radius:0 0 16px 16px} .meHead{display:flex;align-items:center;gap:12px;padding-bottom:14px} .meAva{flex:0 0 52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center; font-size:26px;border:2px solid rgba(255,255,255,.8)} .meTx{flex:1;min-width:0} .meN{font-size:16px;font-weight:700;color:#1f2329;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .meAuth{font-size:10px;background:rgba(255,255,255,.75);color:#8a6d00;border-radius:4px;padding:1px 6px; font-weight:500} .mePh{font-size:12px;color:#6b5a12;margin-top:5px} .meHome{flex:0 0 auto;border:none;background:#fff;color:#1f2329;font-size:11.5px;font-weight:700; border-radius:14px;padding:6px 13px;cursor:pointer} .meHome:hover{background:#fff8dc} .meCircles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#fff;border-radius:12px; padding:14px 8px;margin-bottom:10px} .meCircle{display:flex;flex-direction:column;align-items:center;gap:7px;border:none;background:none;cursor:pointer} .meCi{font-size:23px;line-height:1} .meCn{font-size:12px;color:var(--sub)} .meWallet{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px; margin:0 12px 10px;padding:15px 14px;cursor:pointer} .meWl{flex:1;min-width:0} .meWt{font-size:13.5px;color:var(--sub)} .meWm{font-size:21px;font-weight:700;color:var(--text);margin-top:7px} .meWf{flex:0 0 auto;font-size:34px;line-height:1} .meSecT{display:flex;align-items:center;justify-content:space-between;background:#fff; padding:13px 14px 4px;font-size:14px;font-weight:700;color:var(--text)} .meMore{font-size:12px;color:var(--mute);font-weight:400;cursor:pointer} .meOrders{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:#fff;padding:10px 4px 14px; border-radius:0 0 12px 12px;margin-bottom:10px} .meOrd{display:flex;flex-direction:column;align-items:center;gap:7px;border:none;background:none;cursor:pointer} .meOi{position:relative;font-size:22px;line-height:1} .meOb{position:absolute;top:-5px;right:-9px;min-width:16px;height:16px;border-radius:8px;background:#f04438; color:#fff;font-size:10px;line-height:16px;text-align:center;font-style:normal;font-weight:700;padding:0 4px} .meOn{font-size:11.5px;color:var(--sub)} .meServs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#fff;padding:12px 4px 15px; border-radius:0 0 12px 12px;margin-bottom:10px} .meSrv{display:flex;flex-direction:column;align-items:center;gap:7px;border:none;background:none;cursor:pointer} .meSi{font-size:21px;line-height:1} .meSn{font-size:11.5px;color:var(--sub)} .meShop{display:flex;align-items:center;gap:10px;background:#fff;border-radius:0 0 12px 12px; padding:13px 14px;margin-bottom:12px;cursor:pointer} .meShop:hover{background:#fafbfd} .meShLogo{flex:0 0 40px;height:40px;border-radius:9px;background:#fdecec;display:grid;place-items:center;font-size:21px} .meShN{flex:1;min-width:0;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .meShTag{flex:0 0 auto;font-size:11.5px;color:#f79009;font-weight:600} /* ============================================================================ ★ 全部服务 / 添加服务（按墨刀「服务」模块） 每个服务 = 一对并排圆标（供方 + 需方），名称 & 或 / 连接；分组可折叠 ============================================================================ */ .app-header .svcAdd{color:#f04438 !important;font-weight:700;font-size:13px} .svcPage{background:#fff} .svcSec{display:flex;align-items:center;gap:7px;padding:15px 14px 9px;cursor:pointer} .svcT{font-size:15px;font-weight:700;color:var(--text)} .svcNew{font-size:9.5px;background:#f04438;color:#fff;border-radius:3px;padding:0 4px;line-height:14px;font-weight:700} .svcArrow{margin-left:auto;font-size:12px;color:var(--mute)} .svcGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 6px;padding:0 10px 10px} .svcTile{display:flex;flex-direction:column;align-items:center;gap:8px;border:none;background:none;cursor:pointer;padding:0} .svcIcons{position:relative;display:flex} .svcIc{width:37px;height:37px;border-radius:50%;color:#fff;font-size:11px;font-weight:600; display:grid;place-items:center;overflow:hidden;text-align:center;line-height:1.05; border:1.5px solid #fff} .svcIc + .svcIc{margin-left:-7px} .svcDot{position:absolute;right:-2px;top:0;width:8px;height:8px;border-radius:50%;background:#FFD100; border:1.5px solid #fff} .svcN{font-size:11.5px;color:var(--sub);text-align:center;line-height:1.3} /* 添加服务 */ .svcForm{background:#fff;border-radius:10px;padding:14px;border:1px solid #f0f1f3} .svcFL{font-size:13.5px;font-weight:600;color:var(--text)} .svcTa{width:100%;min-height:190px;border:none;outline:none;resize:none;font-size:14px; font-family:inherit;color:var(--text);line-height:1.7;margin-top:10px;background:none} .svcTa::placeholder{color:#c9cdd4} .svcSup{display:flex;align-items:baseline;gap:9px;padding:16px 2px 10px;flex-wrap:wrap} .svcSupS{font-size:11.5px;color:var(--mute)} .svcUp{width:74px;height:74px;border:1px dashed #d0d3d9;border-radius:10px;background:#fafbfd; display:grid;place-items:center;font-size:26px;color:#c9cdd4;cursor:pointer} .svcUp:hover{border-color:#2b6df6;color:#2b6df6} .svcSubmit{display:block;width:82%;margin:30px auto 0;height:48px;border:none;border-radius:24px; background:#2b6df6;color:#fff;font-size:16px;font-weight:700;cursor:pointer} .svcSubmit:hover{background:#1f5fe0} /* ★ 按墨刀「分类列表」：服务动态左色标两行（一级 / 二级） */ .hlFtag .hlFt1,.hlFtag .hlFtag .hlFtag /* ============================================================================ ★ 我的企业（按墨刀实拍） 已认领/认领中分组 ▏企业卡（名+徽章+三列信息+店铺行）▏蓝色「手动认领」 ============================================================================ */ .app-header .coClaim{color:#f04438 !important;font-weight:700;font-size:13px} .coSec{font-size:15px;font-weight:700;color:var(--text);padding:14px 2px 9px} .coCard{background:#fff;border:1px solid #eef0f3;border-radius:11px;padding:14px;margin-bottom:11px} .coTop{display:flex;align-items:center;gap:9px;margin-bottom:16px} .coN{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .coTr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center} .coTd{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0} .coK{font-size:11.5px;color:var(--mute)} .coV{font-size:13px;color:#2b6df6;font-weight:500} .coShop{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:13px;border-top:1px solid #f4f5f7} .coShopN{flex:1;min-width:0;font-size:12.5px;color:var(--sub); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .coShopN.coMute{color:var(--mute)} .coShopBtn{flex:0 0 auto;border:1px solid #cfe0fb;background:#fff;color:#2b6df6;font-size:12px; border-radius:16px;padding:5px 14px;cursor:pointer} .coShopBtn:hover{background:#f2f7ff} .coManual{display:block;width:100%;margin-top:26px;height:48px;border:none;border-radius:24px; background:#2b6df6;color:#fff;font-size:16px;font-weight:700;cursor:pointer} .coManual:hover{background:#1f5fe0} /* ★ 查询企业（认领企业）—— 顶部搜索框 + 企业卡里的「法定认领名单」入口 */ .csBar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #eef0f3; border-radius:10px;padding:0 12px;height:42px;margin-bottom:14px} .csIc{font-size:14px;color:var(--mute)} .csIn{flex:1;min-width:0;border:none;outline:none;font-size:14px;font-family:inherit;color:var(--text);background:none} .csIn::placeholder{color:#c9cdd4} .csClr{border:none;background:none;color:var(--mute);font-size:13px;cursor:pointer;padding:0 2px} .coLink{color:#2b6df6;cursor:pointer} /* ★ 认领名单（按实拍：两列 —— 左角色 / 右姓名） */ .app-header .csAddP{color:#f04438 !important;font-weight:700;font-size:13px} .clList{background:#fff;border-radius:11px;overflow:hidden;border:1px solid #f0f1f3} .clRow{display:flex;align-items:center;gap:18px;padding:15px 16px;border-bottom:1px solid #f4f5f7;cursor:pointer} .clRow:last-child{border-bottom:none} .clRow:hover{background:#fafbfd} .clRole{flex:0 0 74px;font-size:13.5px;color:var(--text)} .clName{flex:1;min-width:0;font-size:13.5px;color:var(--sub)} /* ★ 搜索（按墨刀实拍「搜索.png」）：服务卡 = logo + 名 + 描述 + N人使用 + 【】标签 */ .saCard{display:flex;gap:11px;background:#fff;border-radius:11px;padding:13px;margin-bottom:10px; border:1px solid #f0f1f3;cursor:pointer} .saCard:hover{background:#fafbfd} .saLogo{flex:0 0 54px;height:54px;border-radius:9px;background:#dbe7fb;color:#5b7bb5; display:grid;place-items:center;font-size:11.5px;font-weight:600} .saBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .saR1{display:flex;align-items:baseline;gap:10px} .saN{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text)} .saUse{flex:0 0 auto;font-size:11.5px;color:var(--mute)} .saD{font-size:12px;color:var(--mute)} .saTags{display:flex;flex-wrap:wrap;gap:6px} .saTag{font-size:11.5px;color:#f79009} /* ★ 按墨刀「支付中」：6 个空位是**方形**（不是圆点）+ 「取消支付」文字入口 */ .pwDot{border-radius:6px !important;border:1px solid #e5e6eb;background:#fff !important} .pwDot.on{background:#f2f4f7 !important} .pwActs{display:flex;gap:22px;justify-content:center;margin-top:26px} .pwAct{color:#f79009;font-size:13px;cursor:pointer} .pwAct:hover{text-decoration:underline} /* ★ 结构铺全批次用到的样式：开屏页 + 结构页标记条 */ .spWrap{min-height:100%;background:#FFD100;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:10px;position:relative;padding:0 30px} .spLogo{width:76px;height:76px;border-radius:20px;background:#fff;display:grid;place-items:center; font-size:30px;font-weight:700;color:#1f2329} .spN{font-size:19px;font-weight:700;color:#1f2329;margin-top:8px} .spS{font-size:12px;color:#6b5a12} .spBtn{width:100%;margin-top:34px;height:48px;border:none;border-radius:24px;background:#1f2329; color:#fff;font-size:16px;font-weight:700;cursor:pointer} .spSkip{position:absolute;right:18px;top:18px;font-size:12.5px;color:#6b5a12;cursor:pointer} .stBar{display:flex;align-items:center;gap:8px;padding:2px 0 12px} .stTag{font-size:10px;background:#eef3ff;color:#2b6df6;border-radius:5px;padding:1px 7px;line-height:16px} .stT{font-size:13px;color:var(--sub)} /* ★ 按墨刀「友邻（社群）」：群名类型图标 / 地址行 / 条目 ⋮ 菜单 */ .z-gicon{font-size:12px} .z-addr{font-size:10.5px;color:var(--mute);margin-top:2px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .z-more{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none; color:var(--mute);font-size:16px;cursor:pointer;padding:2px 6px;line-height:1} .z-more:hover{color:var(--text)} .li5613{position:relative} /* ★ 按墨刀「群聊页面」：群资料头卡（大图 + 三统计 + 简介） */ .gcHead{background:#fff;padding:14px 14px 12px;border-bottom:1px solid #f0f1f3} .gcTop{display:flex;gap:11px;align-items:flex-start} .gcAva{flex:0 0 62px;height:62px;border-radius:11px;background:#dbe7fb;display:grid;place-items:center; font-size:30px;overflow:hidden} .gcTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;padding-top:3px} .gcN{font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px} .gcAddr{font-size:11.5px;color:var(--mute)} .gcIcons{flex:0 0 auto;display:flex;gap:12px;font-size:16px;color:var(--sub);padding-top:4px} .gcMore{cursor:pointer} .gcStats{display:flex;gap:26px;margin-top:14px;padding-left:2px} .gcSt{display:flex;flex-direction:column;gap:3px} .gcSt b{font-size:17px;font-weight:700;color:var(--text)} .gcSt i{font-size:11.5px;color:var(--mute);font-style:normal} .gcDesc{font-size:11.5px;color:var(--mute);margin-top:13px;line-height:1.6} /* ★ 按墨刀「私聊页面」：时间分隔 / 系统提示 / 底部输入栏 */ .chatTdiv{text-align:center;font-size:11px;color:#a8b0bd;padding:8px 0} .chatSys{text-align:center;font-size:11px;color:#a8b0bd;padding:10px 24px;line-height:1.6} .chatBar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px; padding:11px 14px;background:#f7f7f7;border-top:1px solid #e5e6eb;z-index:20} .cbIc{flex:0 0 auto;font-size:20px;cursor:pointer;line-height:1} .cbIn{flex:1;min-width:0;height:36px;border-radius:6px;background:#fff;border:1px solid #e5e6eb; display:flex;align-items:center;padding:0 12px;font-size:13.5px;color:#c9cdd4;cursor:pointer} /* ★ 按墨刀「社群详情」：帖子卡片 + 悬浮发帖 */ .postCard{background:#fff;border-bottom:8px solid #f4f5f7;padding:14px;cursor:pointer} .postCard:hover{background:#fcfcfd} .pcTop{display:flex;gap:10px;align-items:center} .pcAva{flex:0 0 36px;height:36px;border-radius:50%;background:#dbe7fb;color:#2b6df6; display:grid;place-items:center;font-size:16px;font-weight:600} .pcTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .pcN{font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px} .pcTime{font-size:11px;color:var(--mute)} .pcTitle{font-size:14.5px;color:var(--text);line-height:1.6;margin-top:11px} .pcBody{font-size:12.5px;color:var(--mute);line-height:1.7;margin-top:6px} .pcImgs{display:flex;gap:7px;margin-top:10px} .pcImgs i{flex:0 0 84px;height:66px;border-radius:7px;background:#eef1f5;display:grid; place-items:center;font-size:19px;font-style:normal} .pcBar{display:flex;align-items:center;gap:24px;margin-top:12px;font-size:11.5px;color:var(--mute)} .pcSort{margin-left:auto;font-size:15px} .pcFab{position:fixed;right:18px;bottom:82px;width:50px;height:50px;border-radius:50%;border:none; background:#2b6df6;color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:25; box-shadow:0 6px 18px rgba(43,109,246,.42)} .pcFab:hover{background:#1f5fe0} /* ★ 按墨刀「通讯录」：新朋友行（带未读红点） */ .ctNew{display:flex;align-items:center;gap:11px;background:#fff;border-radius:12px;padding:14px; cursor:pointer;border-bottom:1px solid #f4f5f7} .ctNew:hover{background:#fafbfd} .ctIco{flex:0 0 auto;font-size:19px} .ctT{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text)} .ctDot{flex:0 0 auto;min-width:20px;height:20px;border-radius:10px;background:#f04438;color:#fff; font-size:11.5px;line-height:20px;text-align:center;font-weight:700;padding:0 6px} /* ★ 按墨刀「我的订单」：5 tab + 订单卡 */ .ordTabs{display:flex;gap:16px;background:#fff;padding:11px 14px 0;overflow-x:auto; border-bottom:1px solid #f4f5f7;margin-bottom:10px} .ordTab{flex:0 0 auto;border:none;background:none;font-size:13.5px;color:var(--sub); padding:0 0 10px;cursor:pointer;position:relative;white-space:nowrap} .ordTab.on{color:#f79009;font-weight:700} .ordTab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px; background:#f79009;border-radius:2px} .ordCard{background:#fff;border-radius:11px;padding:13px 14px;margin-bottom:11px} .ordTop{display:flex;align-items:center;justify-content:space-between} .ordTime{font-size:11.5px;color:var(--mute)} .ordSt{font-size:12.5px;font-weight:600} .ordSt.ok{color:#2b6df6} .ordSt.no{color:#f04438} .ordShop{font-size:13.5px;font-weight:600;color:var(--text);margin-top:12px} .ordG{display:flex;gap:10px;align-items:center;margin-top:11px} .ordGi{flex:0 0 52px;height:52px;border-radius:7px;background:#eef1f5;display:grid;place-items:center;font-size:20px} .ordGb{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px} .ordGn{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ordGs{font-size:11px;color:var(--mute)} .ordGp{flex:0 0 auto;font-size:13px;color:var(--text);text-align:right;display:flex; flex-direction:column;gap:5px} .ordGp i{font-style:normal;font-size:11px;color:var(--mute)} .ordDiv{height:1px;background:#f2f3f5;margin:13px 0 10px} .ordSum{text-align:right;font-size:12px;color:var(--sub)} .ordSum b{font-size:15px;color:var(--text);font-weight:700;margin-left:4px} .ordActs{display:flex;align-items:center;margin-top:13px} .ordDel{font-size:12px;color:var(--mute);cursor:pointer;margin-right:auto} .ordBtns{display:flex;gap:9px} .ordBtn{border:1px solid #d0d3d9;background:#fff;color:var(--sub);font-size:12.5px; border-radius:16px;padding:5px 15px;cursor:pointer;white-space:nowrap} .ordBtn.pri{background:#2b6df6;border-color:#2b6df6;color:#fff} .ordBtn:hover{border-color:#2b6df6;color:#2b6df6} .ordBtn.pri:hover{background:#1f5fe0;color:#fff} /* ★ 按墨刀「我的钱包」：余额卡 / 提现充值 / 3tab / 流水 */ .wlBal{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:16px 15px;margin-bottom:11px} .wlBl{flex:1;min-width:0} .wlBt{font-size:13.5px;color:var(--sub)} .wlBm{font-size:24px;font-weight:700;color:var(--text);margin-top:9px} .wlBf{flex:0 0 auto;font-size:40px;line-height:1} .wlTwo{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px} .wlAct{display:flex;align-items:center;gap:8px;height:52px;border:none;border-radius:11px; font-size:14.5px;font-weight:600;cursor:pointer;padding:0 15px} .wlAct i{margin-left:auto;font-style:normal;font-size:15px;opacity:.7} .wlAct.white{background:#fff;color:var(--text)} .wlAct.yellow{background:#FFD100;color:#1f2329} .wlAct.yellow:hover{background:#FFC300} .wlAct.white:hover{background:#fafbfd} .wlTabs{display:flex;gap:26px;background:#fff;padding:13px 15px 0;border-radius:12px 12px 0 0} .wlTab{border:none;background:none;font-size:14px;color:var(--sub);padding:0 0 11px; cursor:pointer;position:relative} .wlTab.on{color:#f79009;font-weight:700} .wlTab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px; background:#f79009;border-radius:2px} .wlList{background:#fff;border-radius:0 0 12px 12px} .wlRow{padding:13px 15px;border-bottom:1px solid #f4f5f7} .wlRow:last-child{border-bottom:none} .wlR1{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .wlRn{font-size:13.5px;color:var(--text)} .wlRa{font-size:13.5px;font-weight:600} .wlRa.in{color:#12b76a} .wlRa.out{color:#f04438} .wlRa.na{color:var(--mute)} .wlRt{font-size:11.5px;color:var(--mute);margin-top:7px} /* ★ 按墨刀「我的服务」：蓝底标签 + 标题 + 描述 */ .msList{background:#fff;border-radius:12px;overflow:hidden} .msRow{display:flex;align-items:center;gap:14px;padding:16px 15px;border-bottom:1px solid #f4f5f7;cursor:pointer} .msRow:last-child{border-bottom:none} .msRow:hover{background:#fafbfd} .msTag{flex:0 0 54px;height:54px;border-radius:9px;background:#a8cdf5;color:#1f3a5f; display:grid;place-items:center;font-size:14px;font-weight:600} .msBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .msN{font-size:15.5px;font-weight:600;color:var(--text)} .msD{font-size:11.5px;color:var(--mute);line-height:1.5} /* ★ 按墨刀「我的投诉」：2 tab + 彩色投诉卡 */ .cpTabs{display:flex;gap:28px;padding:4px 4px 14px} .cpTab{border:none;background:none;font-size:14.5px;color:var(--sub);cursor:pointer;padding:0 0 8px; position:relative} .cpTab.on{color:#2b6df6;font-weight:700} .cpTab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px; background:#2b6df6;border-radius:2px} .cpCard{display:flex;gap:11px;border-radius:11px;padding:12px;margin-bottom:10px} .cpCard.yellow{background:#fdf0c4;border:1px solid #f7e3a0} .cpCard.red{background:#fbd9d6;border:1px solid #f6c4bf} .cpCard.blue{background:#cfe2fb;border:1px solid #b9d5f8} .cpTag{flex:0 0 52px;display:flex;flex-direction:column;align-items:center;gap:6px} .cpAva{font-size:26px;line-height:1} .cpRole{font-size:10.5px;color:#5b6b8c} .cpBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px} .cpN{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cpT{font-size:11px;color:#7a8296} .cpPay{font-size:11.5px;color:var(--sub)} .cpPay b{color:#f04438;font-weight:700;margin-left:2px} .cpMeta{font-size:11px;color:#7a8296} .cpSt{flex:0 0 84px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;font-size:11px;color:#2b6df6;text-align:center;line-height:1.4} .cpIc{font-size:24px;line-height:1} /* ★ 按墨刀「我的店铺」：店铺卡 + 消息/工作台 */ .app-header .shAdd{color:#f04438 !important;font-weight:700;font-size:13px} .shCard{background:#fff;border-radius:12px;padding:14px;margin-bottom:12px} .shTop{display:flex;align-items:center;gap:11px} .shLogo{flex:0 0 54px;height:54px;border-radius:10px;background:#fff1d6;display:grid; place-items:center;font-size:26px} .shBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .shN{font-size:15.5px;font-weight:600;color:var(--text)} .shS{font-size:11.5px;color:var(--mute)} .shTodo{flex:0 0 auto;font-size:12.5px;color:#f79009;font-weight:600} .shActs{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px} .shBtn{height:42px;border:none;border-radius:9px;background:#f2f4f7;color:var(--sub); font-size:15px;font-weight:600;cursor:pointer} .shBtn.pri{background:#FFD100;color:#1f2329} .shBtn.pri:hover{background:#FFC300} .shBtn:hover{background:#e8eaed} /* ★ 按墨刀「服务订单」：右状态区 4 态（待确认 / 成功 / 失败） */ .svoSt{gap:7px;font-size:11px} .svoIc{font-size:24px;line-height:1} .svoIc.ok{color:#12b76a} .svoBtn{border:1px solid #2b6df6;background:#fff;color:#2b6df6;font-size:10.5px; border-radius:5px;padding:2px 7px;cursor:pointer;white-space:nowrap} .svoBtn:hover{background:#f2f7ff} /* ★ 按墨刀「我的社交圈」：黄底个人头 / 2tab / 2chip / 双列作品 */ .scHead{background:linear-gradient(160deg,#FFE980,#FFD100 70%,#FFF0A8);border-radius:0 0 14px 14px; padding:14px 16px 16px} .scTop{display:flex;align-items:center;gap:12px} .scAva{flex:0 0 54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center; font-size:27px} .scTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .scN{font-size:16.5px;font-weight:700;color:#1f2329} .scAddr{font-size:12px;color:#6b5a12} .scStats{display:flex;gap:30px;margin-top:15px} .scSt{display:flex;flex-direction:column;gap:3px} .scSt b{font-size:17px;font-weight:700;color:#1f2329} .scSt i{font-size:11.5px;color:#6b5a12;font-style:normal} .scTabs{display:flex;gap:26px;padding:14px 16px 0} .scTab{border:none;background:none;font-size:15px;color:var(--sub);cursor:pointer;padding:0 0 9px;position:relative} .scTab.on{color:var(--text);font-weight:700} .scTab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px;background:#FFD100;border-radius:2px} .scChips{display:flex;gap:10px;padding:12px 16px 6px} .scChip{border:1px solid #e5e6eb;background:#f7f8fa;color:var(--sub);font-size:12.5px; border-radius:14px;padding:5px 15px;cursor:pointer} .scChip.on{background:#fff;border-color:#FFD100;color:#1f2329;font-weight:600} .scGrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:8px 14px 16px} .scCard{cursor:pointer} .scFig{position:relative;height:150px;border-radius:9px;background:#dfe6e4;overflow:hidden} .scBadge{position:absolute;left:0;top:0;font-size:11px;background:#FFD100;color:#1f2329; border-radius:9px 0 9px 0;padding:2px 8px;font-weight:600} .scPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px; border-radius:50%;background:rgba(255,255,255,.75);display:grid;place-items:center;font-size:13px;color:#333} .scT2{font-size:13px;color:var(--text);line-height:1.5;margin-top:9px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .scBar{display:flex;align-items:center;margin-top:7px;font-size:11px;color:var(--mute)} .scMore{margin-left:auto;font-size:14px;cursor:pointer;letter-spacing:1px} /* ★ 按墨刀「我的社群圈」：业主徽章 / 简介 / 我加入的社群双列卡 */ .gcOwn{font-size:10.5px;background:#FFD100;color:#1f2329;border-radius:4px;padding:1px 7px; font-weight:600;vertical-align:1px} .scDesc{font-size:12px;color:#6b5a12;line-height:1.65;margin-top:13px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gcSec{font-size:15px;font-weight:700;color:var(--text);padding:15px 16px 10px} .gcGrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0 14px 8px} .gcCard{background:#fff;border-radius:11px;padding:16px 13px;display:flex;flex-direction:column; align-items:center;gap:9px;text-align:center} .gcIc{font-size:30px;line-height:1} .gcCn{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.4} .gcCd{font-size:11px;color:var(--mute);line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gcBtn{border:none;background:#2b6df6;color:#fff;font-size:12.5px;font-weight:600; border-radius:16px;padding:6px 17px;cursor:pointer;margin-top:3px} .gcBtn:hover{background:#1f5fe0} /* ★ 按墨刀「我的地址」：地址卡 + 默认地址勾选 + 编辑/删除 + 黄色新增 */ .adPage{padding-bottom:80px} .adCard{background:#fff;border:1px solid #eef0f3;border-radius:11px;padding:14px;margin-bottom:12px} .adTop{display:flex;gap:9px} .adPin{flex:0 0 auto;font-size:15px} .adBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .adR1{font-size:14px;color:var(--text);font-weight:500} .adR2{font-size:13px;color:var(--sub);line-height:1.5} .adDiv{height:1px;background:#f2f3f5;margin:13px 0 11px} .adFoot{display:flex;align-items:center} .adDef{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mute);cursor:pointer} .adDef.on{color:var(--text)} .adCb{width:16px;height:16px;border-radius:50%;border:1.5px solid #d0d3d9;display:grid; place-items:center;font-size:10px;color:#fff;font-style:normal} .adDef.on .adCb{background:#FFD100;border-color:#FFD100;color:#1f2329} .adOps{margin-left:auto;display:flex;gap:16px} .adOp{font-size:15px;cursor:pointer;opacity:.75} .adOp:hover{opacity:1} .adAdd{display:block;width:100%;height:48px;border:none;border-radius:24px;background:#FFD100; color:#1f2329;font-size:16px;font-weight:700;cursor:pointer;margin-top:6px} .adAdd:hover{background:#FFC300} /* ★ 按墨刀「设置」：信息行 + 绿色开关 */ .stBox{background:#fff;border-radius:0;margin-bottom:10px} .stRow{display:flex;align-items:center;gap:12px;padding:16px 15px;border-bottom:1px solid #f4f5f7;cursor:pointer} .stRow:last-child{border-bottom:none} .stRow:hover{background:#fafbfd} .stK{flex:0 0 auto;font-size:14.5px;color:var(--text)} .stV{flex:1;min-width:0;text-align:right;font-size:13.5px;color:var(--mute); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stAva{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%; background:#f0f1f3;font-size:15px;font-style:normal} .stDesc{white-space:normal;line-height:1.5} .stSw{flex:0 0 auto;width:44px;height:25px;border-radius:13px;background:#e5e6eb;position:relative; transition:background .15s} .stSw i{position:absolute;left:2px;top:2px;width:21px;height:21px;border-radius:50%;background:#fff; transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.18)} .stSw.on{background:#07C160} .stSw.on i{left:21px} /* ★ 按墨刀「商品管理」：3 tab + 商品卡 + 底部黄色新增 */ .gdPage{padding-bottom:80px} .gdTabs{display:flex;gap:34px;background:#fff;padding:12px 15px 0;border-bottom:1px solid #f4f5f7} .gdTab{border:none;background:none;font-size:14.5px;color:var(--sub);cursor:pointer;padding:0 0 11px;position:relative} .gdTab.on{color:#2b6df6;font-weight:700} .gdTab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px;background:#2b6df6;border-radius:2px} .gdCard{background:#fff;border-radius:11px;padding:13px 14px;margin-bottom:11px} .gdTop{display:flex;gap:11px} .gdFig{flex:0 0 62px;height:62px;border-radius:8px;background:#f0f1f3;display:grid;place-items:center;font-size:24px} .gdBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .gdN{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gdMeta{font-size:11.5px;color:var(--mute)} .gdPrice{font-size:14px;font-weight:700;color:#f04438} .gdActs{display:flex;align-items:center;margin-top:13px} .gdDel{font-size:12px;color:var(--mute);cursor:pointer;margin-right:auto} .gdBtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .gdAdd{position:fixed;left:14px;right:14px;bottom:18px;height:48px;border:none;border-radius:24px; background:#FFD100;color:#1f2329;font-size:16px;font-weight:700;cursor:pointer;z-index:22} .gdAdd:hover{background:#FFC300} /* ★ 按墨刀「分类管理」：分类卡 + 子分类图片行 + ✅/➤ 状态 */ .sdCatCard{background:#fff;border-radius:11px;margin-bottom:11px;overflow:hidden} .sdCatHead{display:flex;align-items:center;gap:12px;padding:15px 14px} .sdCatN{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text)} .sdCatMore{font-size:16px;color:var(--mute);cursor:pointer;letter-spacing:1px} .sdCatSt{font-size:16px;cursor:pointer;line-height:1} .sdSub{padding:0 14px 14px} .sdSubN{font-size:13.5px;color:var(--sub);margin-bottom:9px} .sdFigs{display:flex;align-items:center;gap:7px} .sdFigs i{flex:0 0 46px;height:46px;border-radius:7px;background:#f0f1f3;display:grid; place-items:center;font-size:18px;font-style:normal} .sdFigGo{margin-left:auto;font-size:12px;color:var(--mute);white-space:nowrap;cursor:pointer} /* ★ 按墨刀「员工管理」：圆头像 + 姓名电话 + 黄底角色徽章 + ··· + › */ .sfList{background:#fff;border-radius:11px;overflow:hidden} .sfRow{display:flex;align-items:center;gap:12px;padding:15px 14px;border-bottom:1px solid #f4f5f7;cursor:pointer} .sfRow:last-child{border-bottom:none} .sfRow:hover{background:#fafbfd} .sfAva{flex:0 0 46px;height:46px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:23px} .sfBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .sfR1{display:flex;align-items:baseline;gap:12px} .sfN{font-size:15px;font-weight:600;color:var(--text)} .sfP{font-size:12.5px;color:var(--mute)} .sfR2{display:flex;gap:7px} .sfRole{font-size:11px;background:#FFD100;color:#1f2329;border-radius:4px;padding:2px 10px;font-weight:600} .sfMore{flex:0 0 auto;font-size:16px;color:var(--mute);cursor:pointer;letter-spacing:1px;padding:0 4px} /* ★ 按墨刀「资金管理」：总收益卡 + 三列分账 + 橙色金额 */ .sdTot{align-items:flex-start;flex-direction:column;gap:0} .sdTotR1{display:flex;flex-direction:column;gap:9px;width:100%} .sdCols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%; margin-top:16px;padding-top:14px;border-top:1px solid #f2f3f5} .sdCol{display:flex;flex-direction:column;gap:8px;min-width:0} .sdCol i{font-size:11.5px;color:var(--mute);font-style:normal; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sdCol b{font-size:13.5px;color:var(--text);font-weight:600} .wlRa.sdin{color:#F58020} .wlRa.sdout{color:#f04438} .wlRa.sdna{color:var(--mute)} /* ★ 按墨刀「店铺资料」：表格式表单 */ .spForm{background:#fff} .spRow{display:flex;align-items:center;gap:12px;padding:16px 15px;border-bottom:1px solid #f4f5f7;cursor:pointer} .spRow:last-child{border-bottom:none} .spRow:hover{background:#fafbfd} .spRow.spCol{flex-direction:column;align-items:stretch;gap:12px;cursor:default} .spRow.spCol:hover{background:transparent} .spK{flex:0 0 86px;font-size:14px;color:var(--text);display:flex;align-items:center;gap:6px} .spHint{font-size:11px;color:var(--mute);font-style:normal;margin-left:2px} .spTagAdd{margin-left:auto;color:#FFC300;font-size:17px;cursor:pointer} .spV{flex:1;min-width:0;font-size:13.5px;color:var(--sub); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spV.ph{color:#c9cdd4} .spLogo{width:66px;height:88px;border-radius:7px;background:#fdecec;display:grid;place-items:center;font-size:34px} .spFigs{display:flex;gap:11px} .spFig,.spAdd{width:74px;height:74px;border-radius:8px;display:grid;place-items:center;font-size:24px; font-style:normal;background:#f0f1f3} .spAdd{background:#fafbfd;border:1px dashed #d0d3d9;color:#a8b0bd;cursor:pointer;font-size:19px} .spAdd:hover{border-color:#FFC300;color:#FFC300} /* ★ 按墨刀「资质认证」：分组 + 虚线加号上传格 + 蓝色注释 */ .qlTop{background:#fff;border-radius:11px;padding:15px;margin-bottom:11px} .qlNote{font-size:11.5px;color:#2b6df6;margin-top:11px;line-height:1.5} .qlSec{background:#fff;border-radius:11px;padding:5px 15px 15px;margin-bottom:11px} .qlG{font-size:14px;font-weight:600;color:var(--text);padding:13px 0 12px} .qlGrid{display:flex;gap:14px;flex-wrap:wrap} .qlCell{display:flex;flex-direction:column;align-items:center;gap:9px} .qlUp{width:78px;height:78px;border:1px dashed #d0d3d9;border-radius:8px;background:#fafbfd; display:grid;place-items:center;font-size:24px;color:#c9cdd4;font-style:normal;cursor:pointer} .qlUp:hover{border-color:#FFC300;color:#FFC300} .qlLb{font-size:11px;color:var(--mute);font-style:normal} .qlRow{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #f4f5f7} .qlRow:last-child{border-bottom:none} .qlK{flex:0 0 86px;font-size:14px;color:var(--text)} .qlIn{flex:1;min-width:0;font-size:13.5px;color:var(--sub)} .qlIn.ph{color:#c9cdd4} /* ★ 按墨刀「配送管理」 */ .dlBox{background:#fff;border-radius:11px;padding:15px;margin-bottom:11px} .dlG{font-size:14px;color:var(--text);margin-bottom:11px} .dlLoc{display:flex;gap:12px;align-items:flex-start} .dlTxt{flex:1;min-width:0;font-size:13.5px;color:var(--sub);line-height:1.6; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .dlPin{flex:0 0 auto;font-size:17px;color:#FFC300} .dlIn{display:flex;align-items:center;gap:12px;border-bottom:1px solid #f4f5f7;padding-bottom:9px} .dlPh{flex:1;min-width:0;font-size:13.5px;color:#c9cdd4} .dlUnit{flex:0 0 auto;font-size:13.5px;color:var(--sub)} /* ★ 按墨刀「运营管理」：3 tab（选中红字）+ 橙徽章优惠券卡 */ .opTabs{display:flex;gap:26px;background:#fff;padding:12px 15px 0;border-bottom:1px solid #f4f5f7;margin-bottom:11px} .opTab{border:none;background:none;font-size:14px;color:var(--sub);cursor:pointer;padding:0 0 11px;position:relative} .opTab.on{color:#f04438;font-weight:700} .opTab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px;background:#f04438;border-radius:2px} .opCard{background:#fff;border-radius:11px;padding:14px;margin-bottom:11px} .opHead{display:flex;align-items:center;gap:12px;margin-bottom:14px} .opBdg{background:#FF8000;color:#fff;font-size:12px;font-weight:600;border-radius:5px;padding:3px 11px} .opBdg.gray{background:#a8b0bd} .opBtn{margin-left:auto;border:1px solid #FF8000;background:#fff;color:#FF8000;font-size:13px; border-radius:7px;padding:5px 20px;cursor:pointer} .opBtn:hover{background:#FFF7E6} .opKv{display:flex;align-items:baseline;gap:12px;padding:7px 0} .opKv.opCol{flex-direction:column;gap:7px} .opK{flex:0 0 auto;font-size:13.5px;color:var(--mute)} .opV{flex:1;min-width:0;text-align:right;font-size:13.5px;color:var(--text)} .opKv.opCol .opV{text-align:left;line-height:1.6} .opGo{cursor:pointer;color:var(--sub)} /* ★ 按墨刀「创建商品（多规格）」 */ .gmPage{padding-bottom:90px} .gmRow{display:flex;align-items:center;gap:10px;background:#fff;padding:15px;border-bottom:1px solid #f4f5f7} .gmRow.gmCol{flex-direction:column;align-items:stretch;gap:11px} .gmK{flex:0 0 auto;font-size:14px;color:var(--text);display:flex;align-items:center;gap:5px} .gmReq{color:#f04438;font-style:normal;font-weight:700} .gmHint{font-size:11px;color:var(--mute);font-style:normal} .gmCnt{position:absolute;right:15px;font-size:11.5px;color:var(--mute)} .gmPh{font-size:13px;color:#c9cdd4} .gmFlex{flex:1;min-width:0;text-align:right} .gmUnit{flex:0 0 auto;font-size:13.5px;color:var(--sub)} .gmFigs{display:flex;gap:12px} .gmCell{display:flex;flex-direction:column;align-items:center;gap:8px;font-style:normal} .gmLb{font-size:11px;color:var(--mute);font-style:normal} .gmRadios{display:flex;gap:24px;margin-left:auto} .gmRd{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--sub);cursor:pointer} .gmDot{width:16px;height:16px;border-radius:50%;border:1.5px solid #d0d3d9;display:grid;place-items:center} .gmRd.on{color:var(--text)} .gmRd.on .gmDot{border-color:#2b6df6;border-width:4.5px} .gmHead{display:flex;align-items:center;background:#fff;padding:15px;border-bottom:1px solid #f4f5f7} .gmHT{flex:1;font-size:14px;color:var(--text)} .gmAddSpec{border:none;background:#2b6df6;color:#fff;font-size:13px;border-radius:6px; padding:6px 15px;cursor:pointer} .gmAddSpec:hover{background:#1f5fe0} .gmSpec{display:flex;gap:14px;background:#fff;padding:8px 15px 16px;align-items:flex-start} .gmSpecN{flex:0 0 56px;font-size:13.5px;color:var(--text);padding-top:7px} .gmVals{flex:1;display:flex;flex-wrap:wrap;gap:11px} .gmVal{display:flex;align-items:center;gap:7px;border:1px solid #f6c4bf;border-radius:6px; padding:6px 13px;font-size:13px;color:#2b6df6;cursor:pointer;background:#fff} .gmVal.on{border-color:#f04438;background:#fff5f5} .gmBox{width:13px;height:13px;border:1px solid #f0a8a2;border-radius:2px;font-style:normal} .gmVal.on .gmBox{background:#f04438;border-color:#f04438} /* ★ 按墨刀「角色管理」：头像 + 名称 + ··· + ›（无电话/无徽章） */ .rlRow{display:flex;align-items:center;gap:14px;padding:17px 14px;border-bottom:1px solid #f4f5f7;cursor:pointer} .rlRow:last-child{border-bottom:none} .rlRow:hover{background:#fafbfd} .rlN{flex:1;min-width:0;font-size:15.5px;color:var(--text)} /* ★ 按墨刀「创建商品（单规格）」：名称计数需要定位上下文 */ .gsPage .gmRow{position:relative} /* ★ 按墨刀「商品参数（商品库参数）」：蓝圆勾 + 编码 + 灰标签 */ .lbList{background:#fff;border-radius:11px;overflow:hidden} .lbRow{display:flex;align-items:center;gap:12px;padding:15px 14px;border-bottom:1px solid #f4f5f7;cursor:pointer} .lbRow:last-child{border-bottom:none} .lbRow:hover{background:#fafbfd} .lbChk{flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid #c9cdd4;display:grid; place-items:center;font-size:12px;color:#fff} .lbChk.on{background:#2b6df6;border-color:#2b6df6} .lbFig{flex:0 0 52px;height:52px;border-radius:8px;background:#f0f1f3;display:grid; place-items:center;font-size:21px} .lbBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .lbN{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lbCode{font-size:11px;color:var(--mute)} .lbTags{display:flex;gap:8px;flex-wrap:wrap} .lbTag{font-size:10.5px;background:#f2f4f7;color:var(--sub);border-radius:4px;padding:2px 8px;font-style:normal} /* ★ 按墨刀「商品参数（自己添加）」：分组头 + 蓝底添加 + 参数行 */ .psHead{display:flex;align-items:center;gap:12px;padding:16px 15px} .psT{flex:1;font-size:15px;font-weight:600;color:var(--text)} .psAdd{border:none;background:#2b6df6;color:#fff;font-size:13px;border-radius:6px; padding:6px 15px;cursor:pointer} .psAdd:hover{background:#1f5fe0} .psList{background:#fff} .psRow{display:flex;align-items:center;gap:12px;padding:16px 15px;border-bottom:1px solid #f4f5f7;cursor:pointer} .psRow:last-child{border-bottom:none} .psRow:hover{background:#fafbfd} .psK{flex:0 0 auto;font-size:14px;color:var(--text)} .psV{flex:1;min-width:0;text-align:right;font-size:13.5px;color:var(--sub); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ★ 按墨刀「商品参数（类型）」：底部选择面板 */ .ptSheet{background:#fff;border-radius:14px 14px 0 0;overflow:hidden} .ptItem{display:flex;align-items:center;justify-content:center;gap:10px;height:64px; font-size:16px;color:var(--text);cursor:pointer;border-bottom:1px solid #f4f5f7;position:relative} .ptItem:hover{background:#fafbfd} .ptArw{position:absolute;right:20px;color:var(--mute);font-size:17px} .ptCancel{display:grid;place-items:center;height:60px;font-size:16px;color:var(--sub); cursor:pointer;border-top:8px solid #f4f5f7} .ptCancel:hover{background:#fafbfd} .ptPage .li{cursor:pointer} /* ★ 按墨刀「日期筛选」：两 tab + 三列滚轮 + 取消/确定 */ .dtPage{padding-top:4px} .dtHeads{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #f4f5f7;background:#fff} .dtHead{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 0 13px;cursor:pointer;position:relative} .dtHT{font-size:13.5px;color:var(--mute)} .dtHV{font-size:13.5px;color:var(--text)} .dtHead.on .dtHT,.dtHead.on .dtHV{color:#2b6df6;font-weight:600} .dtHead.on::after{content:'';position:absolute;left:26%;right:26%;bottom:0;height:2.5px; background:#2b6df6;border-radius:2px} .dtWheel{display:grid;grid-template-columns:1fr 1fr 1fr;background:#fff;padding:8px 0 14px;min-height:280px} .dtCol{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px} .dtCell{width:88%;text-align:center;padding:11px 0;font-size:13.5px;color:var(--sub);border-radius:7px;cursor:pointer} .dtCell:hover{background:#f7f8fa} .dtCell.on{background:#eef4ff;color:#2b6df6;font-weight:700} .dtBtns{display:grid;grid-template-columns:1fr 1.6fr;gap:14px;padding:14px;background:#fff;margin-top:10px} .dtBtn{height:46px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer} .dtBtn.cancel{background:#f2f4f7;color:var(--sub)} .dtBtn.cancel:hover{background:#e8eaed} .dtBtn.ok{background:#2b6df6;color:#fff} .dtBtn.ok:hover{background:#1f5fe0} /* ★ 按墨刀「店铺消息」：头像叠蓝标签 + 未读数 + 时间 + 黄点 */ .smList{background:#fff} .smRow{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #f4f5f7;cursor:pointer} .smRow:last-child{border-bottom:none} .smRow:hover{background:#fafbfd} .smAva{flex:0 0 48px;height:48px;position:relative;border-radius:8px;overflow:visible} .smIc{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:#dbe7fb; font-size:23px;font-style:normal} .smTag{position:absolute;left:0;right:0;bottom:-6px;background:#2b6df6;color:#fff;font-size:9px; text-align:center;border-radius:4px;padding:1px 0;font-style:normal;line-height:1.4} .smBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;margin-left:3px} .smR1{display:flex;align-items:center;gap:8px} .smN{font-size:14.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .smUn{flex:0 0 auto;min-width:19px;height:19px;border-radius:10px;background:#f04438;color:#fff; font-size:11px;line-height:19px;text-align:center;font-weight:700;padding:0 6px} .smT{margin-left:auto;flex:0 0 auto;font-size:11.5px;color:var(--mute)} .smLast{font-size:12.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .smDot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#FFD100} /* ★ 按墨刀「店铺工作台」：店招头卡 / 双色统计 / 橙竖条 / 9 入口 */ .sdHero{display:flex;align-items:center;gap:13px;background:#fff;border-radius:12px;padding:14px;margin-bottom:11px} .sdLogo{flex:0 0 56px;height:56px;border-radius:10px;background:#fdecec;display:grid;place-items:center;font-size:28px} .sdHTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .sdHN{font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:9px} .sdOpen{font-size:11px;background:#FFD100;color:#1f2329;border-radius:4px;padding:2px 9px; font-weight:600;font-style:normal} .sdHSub{font-size:11.5px;color:var(--mute)} .sdScan{flex:0 0 auto;font-size:20px;color:var(--sub);cursor:pointer} .sdSec{background:#fff;border-radius:12px;padding:15px;margin-bottom:11px} .sdSecH{display:flex;align-items:center;gap:9px;margin-bottom:15px} .sdBar{width:3.5px;height:16px;background:#FF8000;border-radius:2px} .sdSecT{flex:1;font-size:15px;font-weight:700;color:var(--text)} .sdMore{font-size:12.5px;color:var(--mute);cursor:pointer} .sdMore i{font-style:normal;font-size:14px} .sdChip{font-size:11.5px;background:#FFF7D6;color:#a86a00;border-radius:4px;padding:3px 10px;cursor:pointer} .sd4,.sd3{display:grid;gap:10px} .sd4{grid-template-columns:repeat(4,1fr)} .sd3{grid-template-columns:repeat(3,1fr)} .sd4i{display:flex;flex-direction:column;align-items:center;gap:8px} .sd4i b{font-size:19px;font-weight:700;color:var(--text)} .sd4i b.hot{color:#f04438} .sd4i i{font-size:11.5px;color:var(--mute);font-style:normal} .sdGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 8px;margin-top:22px} .sdGi{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer} .sdGi:hover .sdGic{color:#FF8000} .sdGic{font-size:19px;color:var(--sub);line-height:1} .sdGn{font-size:11.5px;color:var(--sub);text-align:center;line-height:1.3} /* ★ 按墨刀「核销码」：黄底券票白卡 + 二维码 + 使用说明 */ .pxPage{background:#FFD100;min-height:100%;padding:14px} .pxCard{position:relative;background:#fff;border-radius:0;padding:26px 20px 22px;text-align:center} .pxNotch{position:absolute;width:22px;height:22px;border-radius:50%;background:#FFD100;top:74px} .pxNotch.l{left:-11px} .pxNotch.r{right:-11px} .pxT{font-size:17px;font-weight:600;color:var(--text)} .pxSub{font-size:12px;color:var(--mute);margin-top:11px} .pxCode{font-size:21px;font-weight:700;color:var(--text);letter-spacing:1.5px;margin-top:26px} .pxQr{display:inline-flex;flex-direction:column;gap:3px;margin-top:22px;padding:8px;background:#fff} .pxQrR{display:flex;gap:3px} .pxQrR b{width:14px;height:14px;background:#fff} .pxQrR b.on{background:#111} .pxBtn{display:block;width:82%;margin:26px auto 0;height:46px;border:none;border-radius:23px; background:#FFD100;color:#1f2329;font-size:15.5px;font-weight:700;cursor:pointer} .pxBtn:hover{background:#FFC300} .pxDash{border-top:1px dashed #dcdfe6;margin:26px 0 18px} .pxNote{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--text)} .pxDot{width:11px;height:11px;border-radius:50%;background:#FFD100} .pxNoteTx{font-size:11.5px;color:var(--mute);line-height:1.7;margin-top:13px;text-align:left} /* ★ 按墨刀「选择配送方式」：订单详情 + 黄底弹窗 */ .dvPage{background:#f4f5f7;padding-bottom:20px} .dvBlk{background:#fff;padding:15px;margin-bottom:10px} .dvAddr{display:flex;gap:10px} .dvPin{flex:0 0 auto;font-size:16px} .dvATx{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .dvR1{font-size:14px;color:var(--text)} .dvR2{font-size:12.5px;color:var(--mute);line-height:1.5} .dvDiv{height:1px;background:#f2f3f5;margin:13px 0} .dvShop{font-size:13.5px;color:var(--text)} .dvKv{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:13.5px;color:var(--sub)} .dvKv b{color:var(--text);font-weight:500} .dvGo{color:var(--sub);cursor:pointer} .dvGo i{font-style:normal;color:var(--mute)} .dvSum{color:#f04438 !important;font-weight:700 !important;font-size:15px} .dvSec{font-size:13.5px;color:var(--sub)} .dvModal{background:#fff;border-radius:12px;overflow:hidden;margin-top:4px; box-shadow:0 8px 26px rgba(0,0,0,.13)} .dvMT{background:#FFD100;text-align:center;font-size:15.5px;font-weight:600;color:#1f2329;padding:15px 0} .dvMB{padding:18px 16px 16px} .dvWays{display:flex;gap:44px;margin-bottom:20px} .dvWay{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--sub);cursor:pointer} .dvDot{width:20px;height:20px;border-radius:50%;border:1.5px solid #d0d3d9;display:grid;place-items:center} .dvWay.on{color:var(--text);font-weight:600} .dvWay.on .dvDot{border-color:#FFD100;border-width:6px;position:relative} .dvWay.on .dvDot::after{content:'✓';position:absolute;left:-1px;top:-9px;font-size:11px;color:#fff} .dvRow{display:flex;align-items:center;gap:10px;margin-bottom:20px} .dvLb{flex:0 0 auto;font-size:14px;color:var(--sub)} .dvSel{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between; border:1px solid #e5e6eb;border-radius:7px;padding:11px 13px;font-size:14px; color:var(--text);cursor:pointer;background:#fff} .dvSel i{font-style:normal;color:var(--mute)} .dvBtns{display:grid;grid-template-columns:1fr 1.3fr;gap:14px} .dvBtn{height:44px;border:none;border-radius:22px;font-size:15px;font-weight:600;cursor:pointer} .dvBtn.cancel{background:#f2f4f7;color:var(--sub)} .dvBtn.cancel:hover{background:#e8eaed} .dvBtn.ok{background:#FFD100;color:#1f2329} .dvBtn.ok:hover{background:#FFC300} /* ★ 按墨刀「配送费不足」：提示弹窗正文（黄底标题复用 .dvMT） */ .dvTipTx{font-size:14.5px;color:var(--text);line-height:1.75;text-align:center; padding:14px 4px 26px} /* ★ 按墨刀「扫一扫」：全黑取景 + 四角框 + 扫描线 */ .scPage{background:#000;min-height:100%;display:flex;flex-direction:column; align-items:center;padding:0 24px} .scBox{position:relative;width:100%;max-width:300px;height:300px;margin-top:56px} .scC{position:absolute;width:30px;height:30px;border:3px solid #fff;font-style:normal} .scC.tl{left:0;top:0;border-right:none;border-bottom:none} .scC.tr{right:0;top:0;border-left:none;border-bottom:none} .scC.bl{left:0;bottom:0;border-right:none;border-top:none} .scC.br{right:0;bottom:0;border-left:none;border-top:none} .scLine{position:absolute;left:6px;right:6px;top:52%;height:2px; background:linear-gradient(90deg,transparent,#4ce0b3 18%,#4ce0b3 82%,transparent); box-shadow:0 0 10px rgba(76,224,179,.85);font-style:normal; animation:scMove 2.2s ease-in-out infinite} @keyframes scMove{0%,100%{top:14%}50%{top:86%}} .scTip{color:#e8eaed;font-size:13px;margin-top:44px;text-align:center} .scSim{margin-top:40px;border:1px solid rgba(255,255,255,.5);background:transparent; color:#fff;font-size:13.5px;border-radius:20px;padding:10px 26px;cursor:pointer} .scSim:hover{background:rgba(255,255,255,.12)} .scNote{color:#8a8f98;font-size:11.5px;line-height:1.75;margin-top:38px;text-align:center} .scNote b{color:#d0d3d9} /* ★ 按墨刀「添加配送员」：白底标题 + 蓝标签 + 竖线分隔按钮（刻意区别于 .dv*） */ .rdTime{color:#F58020 !important;font-weight:600 !important} .dvG{display:flex;align-items:center;gap:10px;padding:10px 0} .dvGi{flex:0 0 46px;height:46px;border-radius:7px;background:#f0f1f3;display:grid;place-items:center;font-size:19px} .dvGn{flex:1;min-width:0;font-size:13px;color:var(--text);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .rdModal{background:#fff;border-radius:4px;overflow:hidden;margin-top:4px; box-shadow:0 8px 26px rgba(0,0,0,.16)} .rdMT{text-align:center;font-size:15.5px;font-weight:600;color:var(--text);padding:17px 0} .rdMB{padding:2px 16px 18px} .rdLb{font-size:13.5px;color:#2b6df6;margin:12px 0 9px} .rdIn{display:block;width:100%;border:none;border-bottom:1px solid #e5e6eb;padding:7px 0 9px; font-size:14px;color:var(--text);outline:none;background:transparent;box-sizing:border-box} .rdIn::placeholder{color:#c9cdd4} .rdIn:focus{border-bottom-color:#2b6df6} .rdBtns{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e5e6eb} .rdBtn{border:none;background:#fff;font-size:15px;color:var(--text);padding:15px 0;cursor:pointer} .rdBtn:first-child{border-right:1px solid #e5e6eb} .rdBtn:hover{background:#fafbfd} .rdBtn:last-child{color:#2b6df6;font-weight:600} /* ★ 按墨刀「商品类型」：两行居中面板 + 独立取消块（区别于 .ptSheet） */ .gtSheet{background:#fff;border-radius:14px 14px 0 0;overflow:hidden} .gtItem{display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 16px; cursor:pointer;border-bottom:1px solid #f4f5f7} .gtItem:hover{background:#fafbfd} .gtT{font-size:16px;font-weight:700;color:var(--text)} .gtS{font-size:12px;color:var(--mute)} .gtCancel{display:grid;place-items:center;height:58px;font-size:16px;color:var(--sub); cursor:pointer;border-top:8px solid #f4f5f7;background:#fff} .gtCancel:hover{background:#fafbfd} /* ★ 按墨刀「编辑（价格）」：标题 + 同上一件 + ¥ 前缀输入 + 分隔线 */ .rdMT2{position:relative} .rdPrev{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:12.5px; color:var(--mute);font-weight:400;cursor:pointer} .rdPrev:hover{color:#2b6df6} .prLb{font-size:13.5px;color:var(--text);margin:16px 0 10px} .prIn{display:flex;align-items:baseline;gap:6px;border-bottom:1px solid #e5e6eb;padding-bottom:9px} .prIn:focus-within{border-bottom-color:#2b6df6} .prPre{flex:0 0 auto;font-size:14px;color:var(--text)} .prIn input{flex:1;min-width:0;border:none;outline:none;font-size:14px;color:var(--text); background:transparent;padding:0} .prIn input::placeholder{color:#c9cdd4} /* ★ 按墨刀「库选商品」：tab + 分类筛选 + 底部计数/加入店铺 */ .glPage{padding-bottom:84px} .glHead{display:flex;align-items:center;gap:26px;background:#fff;padding:12px 15px 0;border-bottom:1px solid #f4f5f7} .glTab{border:none;background:none;font-size:14px;color:var(--sub);cursor:pointer; padding:0 0 11px;position:relative;white-space:nowrap} .glTab.on{color:#2b6df6;font-weight:700} .glTab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px;background:#2b6df6;border-radius:2px} .glFilter{margin-left:auto;font-size:13px;color:var(--sub);cursor:pointer;padding-bottom:11px} .glFilter i{font-style:normal;margin-left:5px;color:var(--mute)} .glBar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px; background:#fff;border-top:1px solid #eef0f3;padding:12px 15px;z-index:24} .glCnt{flex:1;min-width:0;font-size:13.5px;color:var(--sub)} .glCnt b{color:#F58020;font-weight:700} .glAdd{border:none;background:#FFD100;color:#1f2329;font-size:15px;font-weight:700; border-radius:23px;padding:12px 34px;cursor:pointer} .glAdd:hover{background:#FFC300} /* ★ 按墨刀「编辑（参数）」：右上角**红字「删除」**（区别于 .rdPrev 的灰字） */ .rdDel{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:13px; color:#f04438;font-weight:400;cursor:pointer} .rdDel:hover{color:#d92d20} /* ★ 按墨刀「售后订单」：信息块 9 行键值（配送地址占两行） */ .afInfo{background:#fff;border-radius:11px;padding:6px 15px} .afRow{display:flex;align-items:baseline;gap:14px;padding:11px 0} .afRow.col{flex-direction:column;gap:6px} .afK{flex:0 0 72px;font-size:13.5px;color:var(--mute)} .afV{flex:1;min-width:0;font-size:13.5px;color:var(--text);text-align:right;line-height:1.6} .afRow.col .afV{text-align:left} /* ★ 按墨刀「创建（编辑）优惠券」：灰底输入 + 面额 + 红圈单选 + 使用商品块 */ .cpPage{background:#f4f5f7} .cpBlk{background:#fff;padding:15px;margin-bottom:10px} .cpLb{font-size:13.5px;color:var(--text);margin-bottom:11px} .cpIn{display:block;width:100%;box-sizing:border-box;background:#f4f5f7;border:none;border-radius:7px; padding:12px 13px;font-size:13.5px;color:var(--text);outline:none} .cpIn::placeholder{color:#c9cdd4} .cpAmt{display:flex;align-items:center;gap:11px} .cpSuf{flex:0 0 auto;font-size:13.5px;color:var(--text)} .cpBox{flex:1;min-width:0;box-sizing:border-box;background:#f4f5f7;border:none;border-radius:7px; padding:12px 13px;font-size:13.5px;color:var(--text);outline:none} .cpBox::placeholder{color:#c9cdd4} .cpRadios{display:flex;gap:34px} .cpRd{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--sub);cursor:pointer} .cpDot{width:17px;height:17px;border-radius:50%;border:1.5px solid #d0d3d9;display:grid;place-items:center} .cpRd.on{color:var(--text)} .cpRd.on .cpDot{border-color:#f04438;border-width:5px} .cpGoods{display:flex;align-items:center;gap:11px} .cpAdd,.cpFig{width:54px;height:54px;border-radius:8px;display:grid;place-items:center; font-size:22px;font-style:normal;background:#f4f5f7;flex:0 0 auto} .cpAdd{border:1px dashed #d0d3d9;background:#fafbfd;color:#a8b0bd;font-size:19px;cursor:pointer} .cpAdd:hover{border-color:#FFC300;color:#FFC300} .cpCnt{margin-left:auto;font-size:13.5px;color:var(--text);cursor:pointer;white-space:nowrap} .cpCnt i{font-style:normal;color:var(--mute);margin-left:3px} .cpTime{display:flex;align-items:center;justify-content:space-between;background:#f4f5f7; border-radius:7px;padding:12px 13px;font-size:13px;color:var(--text);cursor:pointer} .cpTime i{font-style:normal;color:var(--mute)} /* ★ 按墨刀「待付款」：红字倒计时 / 两段切换 / 橙字送达 */ .upPage{background:#f4f5f7} .upTimer{display:flex;align-items:center;gap:9px;background:#fff;padding:16px 15px} .upIc{font-size:17px;color:#f04438} .upTl{font-size:14px;color:#f04438} .upTv{font-size:14px;color:#f04438;font-weight:600;letter-spacing:.5px} .upSeg{display:grid;grid-template-columns:1fr 1fr;background:#f4f5f7;margin-bottom:10px} .upSegI{border:none;background:#f4f5f7;color:var(--sub);font-size:14.5px;padding:16px 0;cursor:pointer} .upSegI.on{background:#fff;color:var(--text);font-weight:600} .upBlk{background:#fff;padding:15px;margin-bottom:10px} .upAddr{display:flex;gap:10px;align-items:flex-start;cursor:pointer} .upPin{flex:0 0 auto;font-size:17px;color:#FFC300} .upATx{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .upR1{font-size:14.5px;color:var(--text)} .upR2{font-size:13.5px;color:var(--sub);line-height:1.55} .upDiv{height:1px;background:#f2f3f5;margin:14px 0} .upShop{font-size:14px;color:var(--text)} .upSend{display:flex;align-items:center;justify-content:space-between;margin-top:15px} .upSendL{font-size:13.5px;color:var(--mute)} .upSendR{font-size:13.5px;color:#F58020;font-weight:600} .upG{display:flex;gap:11px;align-items:flex-start;margin-bottom:16px} .upGi{flex:0 0 62px;height:62px;border-radius:8px;background:#f0f1f3;display:grid;place-items:center;font-size:25px} .upGb{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .upGn{font-size:13.5px;color:var(--text);line-height:1.45} .upGs{font-size:11.5px;color:var(--mute)} .upGq{font-size:12.5px;color:var(--sub);margin-top:2px} .upGp{flex:0 0 auto;font-size:14px;color:var(--text)} .upMore{text-align:center;font-size:12.5px;color:var(--mute);cursor:pointer;padding:6px 0} .upMore i{font-style:normal;margin-left:4px} .upFee{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--sub)} .upSum{font-size:14px;color:var(--text);font-weight:600} /* ★ 按墨刀「已发货」：示意地图 + 浮标 + 骑手 */ .mpBox{position:relative;height:280px;background:#eef3e6;overflow:hidden} .mpRd{position:absolute;background:#fff;font-style:normal} .mpRd.h1{left:0;right:0;top:22%;height:9px} .mpRd.h2{left:0;right:0;top:52%;height:7px} .mpRd.h3{left:0;right:0;top:76%;height:6px} .mpRd.v1{top:0;bottom:0;left:26%;width:8px} .mpRd.v2{top:0;bottom:0;left:64%;width:7px} .mpRd.v3{top:0;bottom:0;left:86%;width:6px} .mpRd.dg{left:-20%;right:-20%;top:38%;height:7px;transform:rotate(-8deg);background:#ffe9a8} .mpLb{position:absolute;font-size:10px;color:#7c8a99;white-space:nowrap} .mpBub{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);background:#fff; border-radius:5px;padding:4px 11px;font-size:12px;color:var(--text);white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.16)} .mpPin{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);font-size:30px;line-height:1} /* ★ 按墨刀「已完成」：右下「联系顾客」蓝描边按钮 */ .dnActs{display:flex;justify-content:flex-end;padding:4px 0 14px} .dnBtn{border:1px solid #2b6df6;background:#fff;color:#2b6df6;font-size:13px; border-radius:16px;padding:6px 18px;cursor:pointer} .dnBtn:hover{background:#f2f7ff} /* ★ 按墨刀「待自提」：取货码蓝字 + 3 按钮（灰/灰/蓝描边） */ .pkCode{color:#2b6df6} .pkActs{gap:10px} .pkActs .dnBtn{flex:1;padding:7px 0;text-align:center} .dnBtn.gray{border-color:#d0d3d9;color:var(--sub)} .dnBtn.gray:hover{border-color:#2b6df6;color:#2b6df6;background:#fff} /* ★ 按墨刀「售后原因」：商家块 + 信息行 + 上传凭证 + 黄色确认 */ .arBlk{background:#fff;padding:15px;margin-bottom:10px} .arShop{display:flex;align-items:center;gap:11px;cursor:pointer} .arAva{flex:0 0 42px;height:42px;border-radius:50%;background:#f0f1f3;display:grid;place-items:center;font-size:19px} .arShopN{flex:1;min-width:0;font-size:15px;color:var(--text)} .arQ{font-size:12.5px;color:var(--sub);margin-top:3px} .arRow{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:16px 0;border-bottom:1px solid #f4f5f7;cursor:pointer} .arRow:last-child{border-bottom:none} .arK{flex:0 0 auto;font-size:14px;color:var(--text)} .arV{flex:1;min-width:0;text-align:right;font-size:14px;color:var(--text)} .arGo{display:flex;align-items:center;justify-content:flex-end;gap:6px;cursor:pointer} .arGo i{font-style:normal;color:var(--mute);font-size:15px} .arUpK{margin-bottom:12px} .arUpK i{font-style:normal;font-size:11.5px;color:var(--mute)} .arUp{width:84px;height:84px;border-radius:8px;background:#f4f5f7;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:6px;cursor:pointer} .arUp:hover{background:#eef0f3} .arCam{font-size:22px} .arCamTx{font-size:10.5px;color:var(--mute)} .arSubmit{position:fixed;left:14px;right:14px;bottom:18px;height:48px;border:none;border-radius:8px; background:#FFD100;color:#1f2329;font-size:16px;font-weight:700;cursor:pointer;z-index:22} .arSubmit:hover{background:#FFC300} .gdPage{padding-bottom:80px} /* ★ 按墨刀「取消订单」：申请原因提示条 */ .ocTip{background:#eef4ff;border-radius:9px;padding:14px;font-size:13.5px;color:var(--text); line-height:1.6;margin-bottom:11px} /* ★ 按墨刀「评价」：星级（黄星）+ 逐商品评价 + 回复框 */ .rvBlk{background:#fff;padding:15px;margin-bottom:10px} .rvSec{font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:15px} .rvShop{display:flex;align-items:center;gap:10px;margin-bottom:13px} .rvIc{font-size:16px} .rvShopN{font-size:14px;color:var(--text)} .rvScore{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rvSk{font-size:13.5px;color:var(--text)} .rvSt{font-size:17px;color:#e5e6eb;font-style:normal;letter-spacing:2px} .rvSt.on{color:#FFC300} .rvSd{font-size:12.5px;color:var(--mute);margin-left:auto} .rvItem{padding-top:6px;margin-bottom:20px;border-top:1px solid #f4f5f7} .rvItem:first-of-type{border-top:none;padding-top:0} .rvTx{font-size:13.5px;color:var(--text);line-height:1.75;margin-top:14px} .rvFigs{display:flex;gap:9px;margin-top:12px} .rvFigs i{width:118px;height:92px;border-radius:8px;background:#eef1f5;display:grid; place-items:center;font-size:24px;font-style:normal} .rvRep{font-size:13.5px;color:var(--text);margin-top:18px;margin-bottom:11px} .rvIn{display:block;width:100%;box-sizing:border-box;background:#f7f8fa;border:none;border-radius:7px; padding:13px;font-size:13.5px;color:var(--text);outline:none} .rvIn::placeholder{color:#c9cdd4} /* ★ 按墨刀「添加（编辑）员工」：灰底标签 + 灰底输入/选择 */ .sePage{background:#f4f5f7} .seBlk{background:#fff;padding:15px;margin-bottom:10px} .seLb{font-size:13.5px;color:var(--text);margin-bottom:11px} .seIn{display:block;width:100%;box-sizing:border-box;background:#f4f5f7;border:none;border-radius:7px; padding:13px;font-size:13.5px;color:var(--text);outline:none} .seIn::placeholder{color:#c9cdd4} .seSel{display:flex;align-items:center;justify-content:space-between;background:#f4f5f7; border-radius:7px;padding:13px;font-size:13.5px;cursor:pointer} .seSel i{font-style:normal;color:var(--mute);font-size:15px} .sePh{color:#c9cdd4} .seV{color:var(--text)} /* ★ 按墨刀「添加（编辑）角色」：角色名 + 权限矩阵（红勾） */ .raPage{background:#f4f5f7} .raBlk{background:#fff;padding:15px;margin-bottom:10px} .raLb{font-size:13.5px;color:var(--text);margin-bottom:12px} .raIn{display:block;width:100%;box-sizing:border-box;background:#f4f5f7;border:none;border-radius:7px; padding:13px;font-size:13.5px;color:var(--text);outline:none} .raIn::placeholder{color:#c9cdd4} .raGrid{display:flex;flex-direction:column} .raMod{display:flex;align-items:flex-start;gap:12px;padding:16px 0; border-top:1px solid #f4f5f7} .raMod:first-child{border-top:none;padding-top:4px} .raModN{flex:0 0 76px;font-size:14px;color:var(--text)} .raActs{flex:1;display:flex;flex-wrap:wrap;gap:12px 22px} .raAct{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--sub);cursor:pointer} .raAct.on{color:var(--text)} .raBox{width:15px;height:15px;border:1.5px solid #d0d3d9;border-radius:3px;display:grid; place-items:center;font-size:10px;color:#fff;font-style:normal} .raAct.on .raBox{background:#f04438;border-color:#f04438} /* ★ 按墨刀「充值」：黄底余额区 + 金额格 + 支付方式 + 黄底按钮 */ .rcPage{padding-bottom:84px} .rcBal{background:linear-gradient(160deg,#FFE980,#FFD100 72%,#FFF0A8);padding:18px 16px 22px; display:flex;align-items:center;gap:12px;margin-bottom:10px} .rcBl{flex:1;min-width:0} .rcBt{font-size:13.5px;color:#6b5a12} .rcBm{font-size:26px;font-weight:700;color:#1f2329;margin-top:10px} .rcBf{flex:0 0 auto;font-size:40px;line-height:1} .rcBlk{background:#fff;padding:15px;margin-bottom:10px} .rcSec{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:14px} .rcBar{width:3.5px;height:15px;background:#FF8000;border-radius:2px} .rcAmts{display:grid;grid-template-columns:repeat(3,1fr);gap:11px} .rcAmt{height:44px;border:none;border-radius:7px;background:#FFF7D6;color:#a86a00; font-size:14.5px;font-weight:600;cursor:pointer} .rcAmt:hover{background:#FFEFB8} .rcAmt.on{background:#FFC300;color:#1f2329} .rcPay{display:flex;align-items:center;gap:11px;padding:16px 0;border-bottom:1px solid #f4f5f7;cursor:pointer} .rcPic{flex:0 0 26px;height:26px;border-radius:6px;display:grid;place-items:center;font-size:15px} .rcPic.wx{background:#e8f7ee} .rcPic.ali{background:#e8f1ff} .rcPic.bank{background:#e8f7f1} .rcPn{flex:1;min-width:0;font-size:14.5px;color:var(--text)} .rcAdd{font-size:12.5px;color:var(--mute)} .rcAdd i{font-style:normal;font-size:14px} .rcDot{flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:1.5px solid #d0d3d9} .rcDot.on{background:#f04438;border-color:#f04438;position:relative} .rcDot.on::after{content:'✓';position:absolute;left:4px;top:-1px;font-size:12px;color:#fff} .rcBank{display:flex;align-items:center;gap:11px;padding:15px 0 15px 37px;cursor:pointer} .rcBn{flex:1;min-width:0;font-size:14px;color:var(--text)} .rcGo{position:fixed;left:14px;right:14px;bottom:18px;height:48px;border:none;border-radius:24px; background:#FFD100;color:#1f2329;font-size:16px;font-weight:700;cursor:pointer;z-index:22} .rcGo:hover{background:#FFC300} /* ★ 按墨刀「提现」：居中金额 / 全部提现 / 下划线输入 / 钱包余额 */ .wdTop{background:#fff;padding:24px 15px 22px;text-align:center;margin-bottom:10px} .wdTl{font-size:13px;color:var(--mute)} .wdTm{font-size:23px;font-weight:700;color:var(--text);margin-top:11px} .wdAmtH{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .wdAmtL{font-size:13.5px;color:var(--text)} .wdAll{font-size:13px;color:#F58020;cursor:pointer} .wdIn{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid #e5e6eb;padding-bottom:9px} .wdIn:focus-within{border-bottom-color:#FFC300} .wdPre{flex:0 0 auto;font-size:14.5px;color:var(--text)} .wdIn input{flex:1;min-width:0;border:none;outline:none;font-size:14.5px;color:var(--text); background:transparent;padding:0} .wdSec{font-size:13.5px;color:var(--text);margin-bottom:4px} .rcPic.wal{background:#fff3e0} /* ★ 按墨刀「银行卡列表」：三色渐变卡面 */ .bkPage{background:#f4f5f7} .bkHead{display:flex;align-items:baseline;gap:7px;padding:16px 15px 12px} .bkHt{font-size:16px;font-weight:700;color:var(--text)} .bkHc{font-size:12.5px;color:var(--mute)} .bkCard{border-radius:12px;padding:16px 15px 13px;margin:0 14px 13px;color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.12)} .bkCard.c1{background:linear-gradient(120deg,#FF8A3D,#F5512B)} .bkCard.c2{background:linear-gradient(120deg,#E8455E,#C7233B)} .bkCard.c3{background:linear-gradient(120deg,#4A86D8,#2B5FA8)} .bkTop{display:flex;align-items:flex-start;gap:11px} .bkLogo{flex:0 0 36px;height:36px;border-radius:50%;background:#fff;color:#333; display:grid;place-items:center;font-size:17px} .bkBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .bkN{font-size:15px;font-weight:600} .bkSub{font-size:11px;opacity:.85} .bkNum{flex:0 0 auto;font-size:13px;letter-spacing:1px;display:flex;align-items:center;gap:7px} .bkNum i{font-style:normal;font-size:15px;opacity:.9} .bkFoot{display:flex;align-items:center;justify-content:space-between; margin-top:20px;padding-top:12px;border-top:1px solid rgba(255,255,255,.22)} .bkFn{font-size:11.5px;opacity:.85} .bkMg{font-size:11.5px;cursor:pointer;opacity:.95} .bkMg i{font-style:normal} .bkMg:hover{opacity:1;text-decoration:underline} /* ★ 按墨刀「添加银行卡」：下划线输入（区别于灰底的 .seIn / .cpIn） */ .baPage{background:#f4f5f7;padding-bottom:84px} .baBlk{background:#fff;padding:4px 15px} .baRow{padding:15px 0;border-bottom:1px solid #f4f5f7} .baRow:last-child{border-bottom:none} .baLb{font-size:13.5px;color:var(--text);margin-bottom:11px} .baIn{display:block;width:100%;box-sizing:border-box;border:none;border-bottom:1px solid #e5e6eb; padding:2px 0 10px;font-size:13.5px;color:var(--text);outline:none;background:transparent} .baIn::placeholder{color:#c9cdd4} .baIn:focus{border-bottom-color:#FFC300} .baGo{position:fixed;left:14px;right:14px;bottom:18px;height:48px;border:none;border-radius:24px; background:#FFD100;color:#1f2329;font-size:16px;font-weight:700;cursor:pointer;z-index:22} .baGo:hover{background:#FFC300} /* ★ 按墨刀「分类 ··· 菜单」：三块独立、居中黑字（删除也不是红） */ .cdSheet{background:#f4f5f7} .cdItem{background:#fff;text-align:center;font-size:16px;color:var(--text); padding:19px 0;cursor:pointer} .cdItem + .cdItem{margin-top:9px} .cdItem:hover{background:#fafbfd} /* ★ 按墨刀「提交弹窗」：第 4 种弹窗（左对齐标题 + ✕ + 单黄按钮） */ .qsModal{display:none;background:#fff;border-radius:12px;margin-top:14px;padding:0 20px 22px; box-shadow:0 8px 26px rgba(0,0,0,.16)} .qsHead{display:flex;align-items:center;padding:20px 0 0} .qsT{flex:1;font-size:17px;font-weight:600;color:var(--text)} .qsX{flex:0 0 auto;font-size:17px;color:#a8b0bd;cursor:pointer;line-height:1;padding:2px 4px} .qsX:hover{color:var(--text)} .qsBody{text-align:center;font-size:15px;color:var(--text);padding:46px 0 40px} .qsFoot{display:flex;justify-content:center} .qsBtn{border:none;background:#FFD100;color:#1f2329;font-size:15px;font-weight:600; border-radius:22px;padding:12px 44px;cursor:pointer} .qsBtn:hover{background:#FFC300} /* ★ 按墨刀「商品列表（优惠券）」：橙字搜索 + 下拉 + 红勾 */ .cgBar{display:flex;align-items:center;gap:10px;background:#fff;padding:12px 15px; border-bottom:1px solid #f4f5f7} .cgGo{flex:0 0 auto;font-size:13.5px;color:#F58020;cursor:pointer;font-weight:600} .cgSorts{display:flex;gap:30px;background:#fff;padding:13px 15px;border-bottom:1px solid #f4f5f7} .cgSort{font-size:13.5px;color:var(--sub);cursor:pointer;display:flex;align-items:center;gap:5px} .cgSort i{font-style:normal;color:var(--mute);font-size:13px} .cgList{background:#fff} .cgRow{display:flex;align-items:flex-start;gap:12px;padding:16px 15px; border-bottom:1px solid #f4f5f7;cursor:pointer} .cgRow:hover{background:#fafbfd} .cgChk{flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid #d0d3d9;display:grid; place-items:center;font-size:12px;color:#fff;margin-top:20px} .cgChk.on{background:#f04438;border-color:#f04438} .cgFig{flex:0 0 54px;height:54px;border-radius:8px;background:#f0f1f3;display:grid; place-items:center;font-size:23px} .cgBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .cgN{font-size:14px;color:var(--text);line-height:1.45} .cgMeta{font-size:11.5px;color:var(--mute)} .cgP{font-size:14px;font-weight:600;color:#f04438} /* ★ 按墨刀「新增分类」：黄竖条分组 + 二级分类可增删 + 蓝圈单选 */ .caPage{background:#f4f5f7} .caBlk{background:#fff;padding:15px;margin-bottom:10px} .caSec{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600; color:var(--text);margin-bottom:15px} .caBar{width:3.5px;height:15px;background:#FFC300;border-radius:2px} .caOps{margin-left:auto;display:flex;align-items:center;gap:16px} .caDel{font-size:15px;cursor:pointer;line-height:1} .caPlus{font-size:17px;color:#FFC300;cursor:pointer;line-height:1} .caPlus:hover{color:#F5A800} .caRadios{display:flex;gap:34px} .caRd{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sub);cursor:pointer} .caDot{width:18px;height:18px;border-radius:50%;border:1.5px solid #d0d3d9;display:grid;place-items:center} .caRd.on{color:var(--text)} .caRd.on .caDot{border-color:#2b6df6;border-width:5.5px} /* ★ 按墨刀「分类筛选」：半屏面板 + 面包屑 + 蓝字蓝勾 */ .cfPage{position:relative;min-height:100%;padding-bottom:0} .cfSheet{background:#fff;border-radius:14px 14px 0 0;margin-top:14px;padding:0 16px 28px; box-shadow:0 -6px 24px rgba(0,0,0,.14);min-height:46vh} .cfHead{display:flex;align-items:center;padding:16px 0 8px} .cfBack{flex:0 0 auto;font-size:22px;color:var(--text);cursor:pointer;line-height:1;padding:0 6px 0 0} .cfT{flex:1;text-align:center;font-size:17px;font-weight:600;color:var(--text)} .cfX{flex:0 0 auto;font-size:17px;color:#a8b0bd;cursor:pointer;padding:0 0 0 6px} .cfX:hover{color:var(--text)} .cfCrumb{display:flex;align-items:center;gap:9px;padding:18px 0 20px} .cfCr{font-size:13.5px;color:var(--mute)} .cfCr.on{font-size:14px;font-weight:700;color:var(--text)} .cfSep{font-style:normal;color:var(--mute);font-size:13px} .cfOpts{display:flex;flex-direction:column} .cfOpt{display:flex;align-items:center;padding:15px 0;cursor:pointer} .cfOn{flex:1;min-width:0;font-size:15px;color:var(--text)} .cfOpt.on .cfOn{color:#2b6df6;font-weight:600} .cfOk{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#2b6df6;color:#fff; display:grid;place-items:center;font-size:12px} /* ★ 按墨刀「商品管理（草稿箱）」：图左下角状态徽章 + 按钮随状态变 */ .gdFigWrap{position:relative;flex:0 0 62px;height:62px} .gdFigWrap .gdFig{position:absolute;left:0;top:0;width:62px;height:62px} .gdBadge{position:absolute;left:0;bottom:0;font-size:10px;font-style:normal;color:#fff; border-radius:0 6px 0 8px;padding:2px 7px;white-space:nowrap} .gdBadge.o{background:#FF8000} .gdBadge.b{background:#2b6df6} .gdBadge.r{background:#f04438} /* ★ 按墨刀「我的优惠券」：3 tab + 票券卡（撕口缺口）+ 过期变灰 */ .mcPage{background:#f4f5f7} .mcTabs{display:flex;gap:34px;background:#fff;padding:13px 15px 0;border-bottom:1px solid #f4f5f7} .mcTab{border:none;background:none;font-size:14.5px;color:var(--sub);cursor:pointer; padding:0 0 12px;position:relative} .mcTab.on{color:#F5A800;font-weight:700} .mcTab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px; background:#F5A800;border-radius:2px} .mcCard{background:#fff;border-radius:10px;padding:13px 14px;margin:11px 14px} .mcTop{display:flex;align-items:center;gap:10px;margin-bottom:11px} .mcLogo{flex:0 0 30px;height:30px;border-radius:6px;background:#fdecec;display:grid; place-items:center;font-size:15px} .mcShop{flex:1;min-width:0;font-size:14.5px;color:var(--text);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .mcSt{flex:0 0 auto;font-size:13px;color:#F5A800} .mcCard.dead .mcSt{color:var(--mute)} .mcBody{display:flex;position:relative;border-radius:8px;overflow:hidden} .mcAmt{flex:0 0 92px;background:#FFF7D6;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:7px;padding:16px 0} .mcAmt b{font-size:21px;font-weight:700;color:#F5A800} .mcAmt i{font-size:11px;color:#a86a00;font-style:normal} .mcCard.dead .mcAmt{background:#e9eaec} .mcCard.dead .mcAmt b,.mcCard.dead .mcAmt i{color:#8a8f98} .mcNotch{position:absolute;left:92px;width:16px;height:16px;border-radius:50%;background:#fff; transform:translateX(-50%);z-index:2} .mcNotch.t{top:-8px} .mcNotch.b{bottom:-8px} .mcInfo{flex:1;min-width:0;background:#fafbfc;padding:13px 14px;display:flex; flex-direction:column;gap:8px} .mcCard.dead .mcInfo{background:#f4f5f7} .mcN{font-size:13.5px;color:var(--text)} .mcL{font-size:11.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mcCard.dead .mcN{color:#8a8f98} /* ★ 按墨刀「我的关注」：黄底 chip + 橙标签人员行 */ .mfPage{background:#f4f5f7} .mfChips{display:flex;gap:16px;background:#fff;padding:14px 15px} .mfChip{border:none;background:#f4f5f7;color:var(--sub);font-size:13.5px;border-radius:16px; padding:7px 17px;cursor:pointer;display:flex;align-items:center;gap:6px} .mfChip i{font-style:normal;color:var(--mute);font-size:12.5px} .mfChip.on{background:#FFD100;color:#1f2329;font-weight:600} .mfChip.on i{color:#6b5a12} .mfChip:hover{background:#FFEFB8} .mfChip.on:hover{background:#FFC300} .mfList{background:#fff;margin-top:10px} .mfRow{display:flex;align-items:center;gap:14px;padding:15px;border-bottom:1px solid #f4f5f7;cursor:pointer} .mfRow:last-child{border-bottom:none} .mfRow:hover{background:#fafbfd} .mfAva{flex:0 0 44px;height:44px;border-radius:50%;background:#dbe7fb;display:grid; place-items:center;font-size:22px} .mfN{flex:1;min-width:0;font-size:14.5px;color:var(--text)} .mfRel{flex:0 0 auto;font-size:11.5px;background:#FFF1E0;color:#E07A18;border-radius:4px; padding:3px 9px;font-weight:500} /* ★ 按墨刀「我的评价」：店招 + 橙评分 + 晒图 + 标签展开收起 */ .mrPage{background:#f4f5f7} .mrCard{background:#fff;border-radius:10px;padding:14px;margin:11px 14px} .mrTop{display:flex;align-items:flex-start;gap:11px} .mrLogo{flex:0 0 40px;height:40px;border-radius:8px;background:#fdecec;display:grid; place-items:center;font-size:19px} .mrBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding-top:2px} .mrShop{font-size:15px;color:var(--text)} .mrScore{font-size:12px;color:#F5A800} .mrDate{flex:0 0 auto;font-size:12px;color:var(--mute);padding-top:4px} .mrDel{flex:0 0 auto;font-size:14px;cursor:pointer;padding:2px 0 0 8px} .mrTx{font-size:13.5px;color:var(--text);line-height:1.7;margin-top:13px} .mrFigs{display:flex;gap:10px;margin-top:13px} .mrFigs i{width:76px;height:76px;border-radius:7px;background:#f0f1f3;display:grid; place-items:center;font-size:22px;font-style:normal} .mrGoods{display:flex;align-items:flex-start;gap:8px;margin-top:16px;flex-wrap:wrap} .mrGl{flex:0 0 auto;font-size:12.5px;color:var(--mute);padding-top:5px} .mrTags{flex:1;min-width:0;display:flex;gap:9px;flex-wrap:wrap} .mrTag{font-size:12px;background:#f4f5f7;color:var(--sub);border-radius:4px; padding:5px 10px;font-style:normal} .mrMore{flex:0 0 auto;font-size:12.5px;color:var(--mute);cursor:pointer;padding-top:5px} .mrMore:hover{color:#2b6df6} /* ★ 按墨刀「创建店铺」：内联式表单（左标签 + 右值/占位），区别于分组式 */ .scCreatePage{background:#f4f5f7;padding-bottom:84px} .scForm{background:#fff} .scRow{display:flex;align-items:center;gap:11px;padding:17px 15px;border-bottom:1px solid #f4f5f7} .scRow:last-child{border-bottom:none} .scRow.scCol{flex-direction:column;align-items:stretch;gap:13px} .scK{flex:0 0 auto;font-size:14px;color:var(--text);display:flex;align-items:baseline;gap:5px} .scReq{color:#f04438;font-style:normal;font-weight:700} .scHint{font-size:11.5px;color:var(--mute);font-style:normal} .scIn{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:13.5px; color:var(--text);padding:0;text-align:left} .scIn::placeholder{color:#c9cdd4} .scPh{font-size:13.5px;color:#c9cdd4} .scFlex{flex:1;min-width:0} .scV{font-size:13.5px;color:var(--text)} .scPin{font-style:normal;color:#a8b0bd;font-size:14px;margin-right:3px} .scUps{display:flex;justify-content:center} .scGo{position:fixed;left:14px;right:14px;bottom:18px;height:48px;border:none;border-radius:24px; background:#FFD100;color:#1f2329;font-size:16px;font-weight:700;cursor:pointer;z-index:22} .scGo:hover{background:#FFC300} /* ★ 按墨刀「企业列表」：分组 + 企业卡（三列表格）+ 蓝底主按钮 */ .clPage{background:#f4f5f7;padding-bottom:84px} .clClaim{color:#f04438 !important;font-weight:700;font-size:13px} .clSec{font-size:15px;font-weight:700;color:var(--text);padding:16px 15px 11px} .clCard{background:#fff;border-radius:10px;padding:15px;margin:0 14px 11px} .clTop{display:flex;align-items:center;gap:11px;margin-bottom:16px} .clN{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .clSt{flex:0 0 auto;font-size:11.5px;color:#fff;border-radius:4px;padding:3px 10px} .clSt.ok{background:#2b6df6} .clSt.ing{background:#f04438} .clTb{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} .clC{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0} .clC i{font-size:11.5px;color:var(--mute);font-style:normal; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .clC b{font-size:13px;color:#2b6df6;font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .clFoot{display:flex;align-items:center;gap:11px;margin-top:16px} .clFn{flex:1;min-width:0;font-size:12.5px;color:var(--mute);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .clBtn{flex:0 0 auto;border:1px solid #2b6df6;background:#fff;color:#2b6df6;font-size:12.5px; border-radius:16px;padding:6px 16px;cursor:pointer} .clBtn:hover{background:#f2f7ff} .clGo{position:fixed;left:14px;right:14px;bottom:18px;height:48px;border:none;border-radius:24px; background:#2b6df6;color:#fff;font-size:16px;font-weight:700;cursor:pointer;z-index:22} .clGo:hover{background:#1f5fe0} /* ★ 按墨刀「关于我们」：居中示意插画 + 「后台上传」 */ .auPage{background:#fff;min-height:100%;display:flex;flex-direction:column; align-items:center;padding-top:34px} .auArt{position:relative;width:210px;height:170px} .auBlk{position:absolute;border-radius:6px;font-style:normal} .auBlk.b1{left:60px;top:18px;width:34px;height:34px;background:#4EC3A7;transform:rotate(-8deg)} .auBlk.b2{left:98px;top:26px;width:46px;height:42px;background:#7BC8E8;transform:rotate(6deg)} .auBlk.b3{left:74px;top:74px;width:52px;height:52px;background:#8FD14F;transform:rotate(-4deg)} .auBlk.b4{left:120px;top:82px;width:38px;height:38px;background:#B39DDB;transform:rotate(10deg)} .auBlk.b5{left:52px;top:104px;width:30px;height:30px;background:#5AC8E0;transform:rotate(12deg)} .auFig{position:absolute;font-size:30px;line-height:1} .auFig.f1{left:16px;top:40px;transform:rotate(-12deg)} .auFig.f2{left:140px;top:36px;transform:rotate(14deg)} .auFig.f3{left:96px;top:86px;transform:rotate(-6deg)} .auRing{position:absolute;left:8px;top:12px;right:8px;bottom:6px;border:1px solid #f0e6ff; border-radius:50% 46% 52% 48%;font-style:normal;transform:rotate(-6deg)} .auTx{font-size:17px;color:var(--text);margin-top:22px} /* ★ 按墨刀「实名认证」：左标题 + 右插画 + 展示态字段 */ .ra2Page{background:#f4f5f7} .ra2Head{display:flex;align-items:flex-start;gap:12px;background:#fff;padding:18px 15px 22px} .ra2Hl{flex:1;min-width:0} .ra2T{font-size:22px;font-weight:700;color:var(--text);letter-spacing:.5px} .ra2Sub{font-size:13px;color:var(--sub);line-height:1.7;margin-top:14px} .ra2Art{position:relative;flex:0 0 120px;height:100px} .ra2Box{position:absolute;border-radius:4px;font-style:normal} .ra2Box.b1{left:34px;top:14px;width:34px;height:34px;background:#7B9BE8;transform:rotate(-10deg)} .ra2Box.b2{left:56px;top:24px;width:30px;height:30px;background:#F5A800;transform:rotate(8deg)} .ra2Box.b3{left:22px;top:38px;width:44px;height:34px;background:#8FB3F0;transform:rotate(-4deg)} .ra2Ring{position:absolute;left:6px;top:22px;width:104px;height:52px;border:2px solid #7BD3E8; border-radius:50%;font-style:normal;transform:rotate(-8deg)} .ra2Base{position:absolute;left:16px;bottom:4px;width:88px;height:14px;background:#DCE4F5; border-radius:50%;font-style:normal} .ra2Card{background:#fff;margin-top:10px;padding:0 15px} .ra2F{padding:17px 0;border-bottom:1px solid #f4f5f7} .ra2F:last-child{border-bottom:none} .ra2Lb{font-size:14px;color:var(--sub);margin-bottom:13px} .ra2Val{font-size:16px;color:var(--text)} /* ★ 按墨刀「注销」：卡内标题 + 灰底项目列表 + 注释 */ .acPage{background:#f4f5f7;padding-bottom:84px} .acCard{background:#fff;border-radius:10px;margin:11px 14px;padding:22px 18px} .acT{text-align:center;font-size:17px;font-weight:600;color:var(--text)} .acSub{text-align:center;font-size:12.5px;color:var(--mute);margin-top:12px} .acBox{background:#f7f8fa;border-radius:8px;padding:14px 16px;margin-top:18px} .acLi{font-size:13px;color:var(--sub);line-height:2} .acNote{font-size:12.5px;color:var(--mute);line-height:1.8;margin-top:18px} .acGo{position:fixed;left:14px;right:14px;bottom:18px;height:48px;border:none;border-radius:6px; background:#FFD100;color:#1f2329;font-size:16px;font-weight:700;cursor:pointer;z-index:22} .acGo:hover{background:#FFC300} /* ★ 按墨刀「加号.png」：⊕ 展开面板（6 格，4+2） */ .chatPanel{position:fixed;left:0;right:0;bottom:86px;background:#f2f3f5;padding:16px 14px 20px; display:grid;grid-template-columns:repeat(4,1fr);gap:14px;z-index:21; border-top:1px solid #e5e6eb} .cpCell{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer} .cpCell:active{opacity:.7} .cpIc{width:56px;height:56px;border-radius:12px;background:#fff;display:grid;place-items:center; font-size:24px;font-style:normal;box-shadow:0 1px 3px rgba(0,0,0,.05)} .cpLb{font-size:11.5px;color:var(--sub);font-style:normal} /* ★ 按墨刀「创建社群」：灰底框 + 框内⌄/› + 框外📍 + 蓝底创建 */ .ccPage{background:#f4f5f7;padding-bottom:84px} .ccF{padding:14px 15px 0} .ccLb{font-size:13.5px;color:var(--text);margin-bottom:10px} .ccRowW{display:flex;align-items:center;gap:11px} .ccBox{background:#f4f5f7;border-radius:7px;padding:13px;font-size:13.5px; display:flex;align-items:center;gap:9px;box-sizing:border-box;width:100%} .ccRowW .ccBox{flex:1;min-width:0;width:auto} .ccSel{cursor:pointer} .ccIn{border:none;outline:none;color:var(--text)} .ccIn::placeholder{color:#c9cdd4} .ccPh{flex:1;min-width:0;color:#c9cdd4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ccLong{font-size:12.5px} .ccArr{flex:0 0 auto;font-style:normal;color:var(--mute);font-size:14px} .ccArrB{align-self:flex-end} .ccPin{flex:0 0 auto;font-size:17px;cursor:pointer} .ccArea{min-height:112px;align-items:flex-start} .ccGo{position:fixed;left:14px;right:14px;bottom:18px;height:48px;border:none;border-radius:6px; background:#2b6df6;color:#fff;font-size:16px;font-weight:700;cursor:pointer;z-index:22} .ccGo:hover{background:#1f5fe0} /* ★ 按墨刀「添加楼栋」：橙黄竖条分组 + 蓝底批量创建 + 缩进单元 */ .bdPage{background:#f4f5f7;padding:14px 15px 24px} .bdSec{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600; color:var(--text);margin:18px 0 11px} .bdSec:first-child{margin-top:0} .bdBar{width:3.5px;height:15px;background:#F5A800;border-radius:2px} .bdBatch{margin-left:auto;border:none;background:#2b6df6;color:#fff;font-size:12.5px; border-radius:15px;padding:6px 15px;cursor:pointer} .bdBatch:hover{background:#1f5fe0} .bdLb{font-size:13.5px;color:var(--text);margin:13px 0 9px} .bdIn{display:block;width:100%;box-sizing:border-box;background:#f4f5f7;border:none;border-radius:7px; padding:13px;font-size:13.5px;color:var(--text);outline:none} .bdIn::placeholder{color:#c9cdd4} .bdIn:focus{background:#eef1f5} /* ★ 单元名称**缩进**（从属层级） */ .bdSub{padding-left:22px} /* ★ 按墨刀「楼栋列表」：两个不同色按钮 + 蓝底方图标行 */ .blPage{background:#f4f5f7} .blHead{display:flex;align-items:center;gap:10px;background:#fff;padding:13px 15px; border-bottom:1px solid #f4f5f7} .blT{flex:1;min-width:0;font-size:13.5px;color:var(--text)} .blBtn{border:none;font-size:12.5px;border-radius:15px;padding:7px 15px;cursor:pointer;color:#fff} .blBtn.blue{background:#2b6df6} .blBtn.blue:hover{background:#1f5fe0} .blBtn.orange{background:#F5A800} .blBtn.orange:hover{background:#E09400} .blList{background:#fff} .blRow{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid #f4f5f7;cursor:pointer} .blRow:last-child{border-bottom:none} .blRow:hover{background:#fafbfd} .blIc{flex:0 0 42px;height:42px;border-radius:8px;background:#2b6df6;color:#fff;display:grid; place-items:center;font-size:19px} .blBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .blN{font-size:14.5px;color:var(--text)} .blMeta{font-size:11.5px;color:var(--mute)} .blMore{flex:0 0 auto;font-size:15px;color:var(--mute);cursor:pointer;letter-spacing:1px;padding:0 2px} /* ★ 按墨刀「成员列表」：两行式 + 蓝底角色徽章 */ .mlPage{background:#f4f5f7} .mlRow{display:flex;align-items:center;gap:12px;padding:13px 15px;background:#fff; border-bottom:1px solid #f4f5f7;cursor:pointer} .mlRow:last-child{border-bottom:none} .mlRow:hover{background:#fafbfd} .mlAva{flex:0 0 42px;height:42px;border-radius:50%;background:#dbe7fb;display:grid; place-items:center;font-size:21px} .mlBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .mlR1{display:flex;align-items:center;gap:10px} .mlNo{font-size:14.5px;color:var(--text)} .mlRole{font-size:11.5px;color:#fff;background:#2b6df6;border-radius:4px;padding:3px 10px} .mlR2{display:flex;align-items:center;gap:14px} .mlN{font-size:12.5px;color:var(--sub)} .mlP{font-size:12px;color:var(--mute)} /* ★ 第 5 种弹窗（按墨刀「成员列表 · 弹窗」）：头像头部 + ✕ + 连续卡片列表项 */ .p5Sheet{background:#fff;border-radius:14px;overflow:hidden;margin-top:14px; box-shadow:0 8px 26px rgba(0,0,0,.16)} .p5Head{display:flex;align-items:center;gap:13px;padding:18px 18px} .p5Ava{flex:0 0 44px;height:44px;border-radius:50%;background:#dbe7fb;display:grid; place-items:center;font-size:22px} .p5N{flex:1;min-width:0;font-size:16px;color:var(--text);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .p5X{flex:0 0 auto;font-size:17px;color:#a8b0bd;cursor:pointer;padding:2px 4px} .p5X:hover{color:var(--text)} .p5List{padding-bottom:6px} .p5Item{display:flex;align-items:center;gap:14px;padding:17px 18px;cursor:pointer; border-top:1px solid #f4f5f7} .p5Item:first-child{border-top:1px solid #f4f5f7} .p5Item:hover{background:#fafbfd} .p5Ic{flex:0 0 auto;font-size:17px;line-height:1} .p5Lb{flex:1;min-width:0;font-size:15px;color:var(--text)} .p5Ar{flex:0 0 auto;color:#c9cdd4;font-size:16px} /* ★ 按墨刀「编辑楼栋」：纯文字标签（无橙黄竖条） */ .bdLbPlain{font-size:13.5px;color:var(--text);margin:16px 0 10px} .bdLbPlain:first-child{margin-top:0} /* ★ 按墨刀「编辑人员」：家庭成员块（无竖条）+ 第 2 个起有垃圾桶 */ .emBlk{margin-top:22px} .emHead{display:flex;align-items:center;gap:10px;margin-bottom:12px} .emT{flex:1;min-width:0;font-size:13.5px;color:var(--text)} .emDel{flex:0 0 auto;font-size:14px;cursor:pointer;line-height:1} .bdSel{cursor:pointer;display:flex;align-items:center;gap:9px} .bdSel .bdIn{background:transparent;padding:0} .emRolePh{flex:1;min-width:0;color:#c9cdd4;font-size:13.5px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .emAr{flex:0 0 auto;font-style:normal;color:var(--mute);font-size:14px} /* ★ 按墨刀「友邻（社群）」：两 tab + 定位行 + 类型图标社群行 */ .ygPage{background:#fff} .ygTop{display:flex;align-items:center;gap:16px;padding:12px 15px 0} .ygBell{position:relative;font-size:19px;cursor:pointer;line-height:1} .ygDot{position:absolute;right:-2px;top:-2px;width:7px;height:7px;border-radius:50%;background:#f04438} .ygTab{border:none;background:none;font-size:16px;color:var(--sub);cursor:pointer;padding:0 0 10px; position:relative} .ygTab.on{color:var(--text);font-weight:700} .ygTab.on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:2px; width:22px;height:2.5px;background:#2b6df6;border-radius:2px} .ygIc{margin-left:auto;font-size:18px;cursor:pointer;color:var(--text)} .ygIc+.ygIc{margin-left:0} .ygLoc{display:flex;align-items:center;gap:7px;padding:13px 15px;border-bottom:1px solid #f4f5f7} .ygPin{font-size:14px} .ygAddr{font-size:13.5px;color:#2b6df6} .ygList{background:#fff} .ygRow{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid #f4f5f7;cursor:pointer} .ygRow:hover{background:#fafbfd} .ygAvaWrap{position:relative;flex:0 0 48px;height:48px} .ygAva{position:absolute;inset:0;border-radius:8px;background:#dbe7fb;display:grid;place-items:center;font-size:23px} .ygUn{position:absolute;left:-4px;top:-4px;min-width:17px;height:17px;border-radius:9px;background:#f04438; color:#fff;font-size:11px;font-style:normal;display:grid;place-items:center;padding:0 4px} .ygBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .ygR1{display:flex;align-items:center;gap:7px} .ygN{font-size:14.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ygCnt{font-size:13px;color:var(--mute);flex:0 0 auto} .ygType{font-size:14px;flex:0 0 auto} .ygLoc2{font-size:11.5px;color:var(--mute)} /* ★ 补：社群详情缺失的 .gd*（原先因守卫过宽被整块跳过） */ .gdHead{background:#fff;padding:16px 15px 18px} .gdLogo{flex:0 0 52px;height:52px;border-radius:9px;background:#2b6df6;color:#fff;display:grid;place-items:center;font-size:25px} .gdStats{display:flex;gap:44px;margin-top:20px} .gdSt{display:flex;flex-direction:column;align-items:center;gap:7px} .gdSt b{font-size:18px;font-weight:600;color:var(--text)} .gdSt i{font-size:12px;color:var(--mute);font-style:normal} .gdPost{background:#fff;padding:14px 15px;margin-top:10px} .gdPR1{display:flex;align-items:center;gap:10px} .gdPBd{flex:1;min-width:0;display:flex;align-items:center;gap:9px} .gdAva{flex:0 0 38px;height:38px;border-radius:50%;background:#e8eef8;display:grid;place-items:center;font-size:19px} .gdPT{font-size:12px;color:var(--mute);margin-top:11px} .gdTi{font-size:15px;color:var(--text);line-height:1.5;margin-top:11px} .gdTx{font-size:13px;color:var(--mute);line-height:1.7;margin-top:9px} .gdFigs{display:flex;gap:10px;margin-top:13px} .gdFigs i{width:98px;height:98px;border-radius:7px;background:#eef1f5;display:grid;place-items:center;font-size:24px;font-style:normal} .gdBar{display:flex;align-items:center;gap:24px;margin-top:15px} .gdBi{font-size:12px;color:var(--sub)} .gdSort{margin-left:auto;font-size:15px;color:var(--sub);cursor:pointer} .gdFab{position:fixed;right:18px;bottom:82px;width:48px;height:48px;border-radius:50%;background:#2b6df6;color:#fff;display:grid;place-items:center;font-size:25px;cursor:pointer;box-shadow:0 4px 14px rgba(43,109,246,.4);z-index:22} .gdFab:hover{background:#1f5fe0} .gdLoc{font-size:12px;color:var(--mute);margin-top:7px;display:flex;align-items:center;gap:4px} .gdLoc i{font-style:normal} .gdDesc{font-size:13px;color:var(--sub);line-height:1.7;margin-top:18px} .gdPN{font-size:13.5px;color:var(--text)} /* ★ 按墨刀「帖子详情」：大图+水印 / 语音条 / 轮播点 */ .pdWho{display:flex;align-items:center;gap:8px;margin-right:10px} .pdAva{width:32px;height:32px;border-radius:50%;background:#e8eef8;display:grid;place-items:center;font-size:17px} .pdN{font-size:14.5px;color:var(--text)} .pdPage{background:#fff} .pdHero{position:relative;height:330px;background:#dfe6ee;display:grid;place-items:center;overflow:hidden} .pdPh{font-size:64px;font-style:normal;opacity:.5} .pdMark{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:8.5px;letter-spacing:.6px;color:rgba(255,255,255,.8)} .pdAudio{display:flex;align-items:center;gap:5px;background:#f4f5f7;border-radius:22px;margin:14px 15px 0;padding:9px 14px;width:180px} .pdPlay{width:26px;height:26px;border-radius:50%;background:#F5A800;color:#fff;display:grid;place-items:center;font-size:12px;font-style:normal;flex:0 0 auto} .pdWave{width:3px;height:12px;background:#c9cdd4;border-radius:2px;font-style:normal} .pdWave.w2{height:18px}.pdWave.w3{height:9px}.pdWave.w4{height:15px}.pdWave.w5{height:11px} .pdSec{margin-left:auto;font-size:12.5px;color:var(--sub);font-style:normal} .pdDots{display:flex;justify-content:center;gap:6px;padding:14px 0 4px} .pdDots i{width:5px;height:5px;border-radius:50%;background:#d0d3d9;font-style:normal} .pdDots i.on{background:#4a5568} .pdTi{font-size:19px;font-weight:600;color:var(--text);line-height:1.5;padding:8px 15px 0} .pdP{font-size:14.5px;color:var(--text);line-height:1.95;padding:16px 15px 0;text-indent:0} .pdFt{font-size:13px;color:var(--mute);padding:24px 15px 30px} /* ★ 按墨刀「评论列表」：底部面板 + 回复前缀 + 输入栏 */ .cmPage{background:#f4f5f7;min-height:100%} .cmBg{background:#fff;padding:14px 15px 20px} .cmBgRow{display:flex;align-items:center;gap:11px} .cmBgBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .cmBgN{font-size:15px;color:var(--text)} .cmBgM{font-size:12px;color:var(--mute)} .cmAdd{flex:0 0 auto;border:none;background:#2b6df6;color:#fff;font-size:13px;border-radius:16px;padding:8px 20px;cursor:pointer} .cmAdd:hover{background:#1f5fe0} .cmSheet{background:#fff;border-radius:14px 14px 0 0;margin-top:12px;min-height:62vh;display:flex;flex-direction:column} .cmHead{display:flex;align-items:center;padding:16px 16px 14px;border-bottom:1px solid #f4f5f7} .cmX{flex:0 0 22px;font-size:17px;color:var(--text);cursor:pointer} .cmT{flex:1;text-align:center;font-size:15.5px;font-weight:600;color:var(--text)} .cmSp{flex:0 0 22px} .cmList{flex:1} .cmRow{display:flex;gap:11px;padding:15px 16px;border-bottom:1px solid #f4f5f7} .cmAva{flex:0 0 40px;height:40px;border-radius:50%;background:#eef1f5;display:grid;place-items:center;font-size:20px;color:#b8bfc9} .cmBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .cmR1{display:flex;align-items:center;gap:9px} .cmN{font-size:13.5px;color:var(--text)} .cmTx{font-size:13.5px;color:var(--text);line-height:1.65} .cmRp{color:var(--sub);font-weight:400} .cmTime{font-size:12px;color:var(--mute)} .cmBar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #f4f5f7;background:#fff} .cmIc{font-size:16px;flex:0 0 auto} .cmIn{flex:1;min-width:0;border:none;outline:none;background:#f4f5f7;border-radius:17px;padding:9px 14px;font-size:13px} .cmIc2{font-size:17px;flex:0 0 auto;cursor:pointer} /* ★ 按墨刀「发布（帖子）」：两 tab + 无边框输入 + 图标行 + 地点行 */ .pnPage{background:#fff;padding-bottom:84px} .pnTabs{display:flex;justify-content:center;gap:44px;padding:12px 15px 0} .pnTab{border:none;background:none;font-size:16px;color:var(--sub);cursor:pointer;padding:0 0 11px;position:relative} .pnTab.on{color:#2b6df6;font-weight:700} .pnTab.on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:2px;width:26px;height:2.5px;background:#2b6df6;border-radius:2px} .pnIn{display:block;width:100%;box-sizing:border-box;border:none;border-bottom:1px solid #f4f5f7;outline:none;background:transparent;padding:16px 15px;font-size:14.5px;color:var(--text)} .pnIn::placeholder{color:#c9cdd4} .pnIn:focus{border-bottom-color:#2b6df6} .pnTitle{} .pnBody{} .pnFigs{display:flex;gap:12px;padding:24px 15px 0} .pnFigs i{width:104px;height:104px;border-radius:6px;background:#dbe4ee;display:grid;place-items:center;font-size:26px;font-style:normal;color:#9aa7b8} .pnIcs{display:flex;gap:34px;padding:26px 15px 18px;border-bottom:1px solid #f4f5f7} .pnIc{font-size:21px;cursor:pointer;line-height:1} .pnLoc{display:flex;align-items:center;gap:8px;padding:17px 15px;cursor:pointer} .pnPin{font-size:14px} .pnLb{font-size:14.5px;color:var(--text)} .pnVal{margin-left:auto;font-size:14px;color:var(--sub)} .pnAr{font-style:normal;color:#c9cdd4;font-size:16px} .pnGo{position:fixed;left:14px;right:14px;bottom:18px;height:48px;border:none;border-radius:24px;background:#2b6df6;color:#fff;font-size:16px;font-weight:700;cursor:pointer;z-index:22} .pnGo:hover{background:#1f5fe0} /* ★ 按墨刀「键盘」：评论面板（5 格 4+1，与私聊 6 格不同） */ .pkPage{background:#f4f5f7;padding-bottom:0} .pkBg{background:#fff;padding:14px 15px 18px} .pkP{font-size:14px;color:var(--text);line-height:1.9;margin-top:14px} .pkFig{height:140px;border-radius:6px;background:#dbe4ee;display:grid;place-items:center;font-size:34px;color:#9aa7b8;margin-top:16px} .pkBar{display:flex;align-items:center;gap:11px;padding:12px 15px;background:#fff;border-top:1px solid #f4f5f7} .pkIc{font-size:18px;flex:0 0 auto;cursor:pointer} .pkPanel{background:#f2f3f5;padding:16px 14px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .pkCell{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer} .pkIc2{width:56px;height:56px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:24px;font-style:normal;box-shadow:0 1px 3px rgba(0,0,0,.05)} .pkLb{font-size:11.5px;color:var(--sub);font-style:normal} /* ★ 按墨刀「搜索话题」：筛选下拉 + 两 tab + 结果帖 */ .tsPage{background:#f4f5f7} .tsBar{display:flex;align-items:center;gap:10px;background:#fff;padding:10px 14px} .tsFilter{flex:0 0 auto;font-size:13px;color:var(--sub);cursor:pointer;display:flex;align-items:center;gap:4px} .tsFilter i{font-style:normal;color:var(--mute)} .tsIn{flex:1;min-width:0;border:none;outline:none;background:#f4f5f7;border-radius:16px;padding:8px 14px;font-size:13px} .tsGo{flex:0 0 auto;font-size:13.5px;color:#2b6df6;font-weight:600;cursor:pointer} .tsTabs{display:flex;gap:30px;background:#fff;padding:4px 15px 0;border-bottom:1px solid #f4f5f7} .tsTab{border:none;background:none;font-size:15px;color:var(--sub);cursor:pointer;padding:10px 0 12px;position:relative} .tsTab.on{color:#2b6df6;font-weight:600} .tsTab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px;background:#2b6df6;border-radius:2px} .tsBig{height:180px;border-radius:7px;background:#dbe4ee;display:grid;place-items:center;font-size:38px;color:#9aa7b8;margin-top:13px} /* ★ 按墨刀「用户社群主页」：圆头像头部（与社群详情四处不同） */ .ugPage{background:#f4f5f7} .ugHead{background:#fff;padding:16px 15px 18px} .ugTop{display:flex;align-items:center;gap:13px} .ugAva{flex:0 0 54px;height:54px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:27px} .ugBd{flex:1;min-width:0} .ugR1{display:flex;align-items:center;gap:9px} .ugN{font-size:16.5px;font-weight:600;color:var(--text)} .ugLoc{font-size:12px;color:var(--mute);margin-top:8px;display:flex;align-items:center;gap:4px} .ugLoc i{font-style:normal} /* ★ 按墨刀「人员审核」：4 tab + 3 chip + 红/蓝按钮 */ .maPage{background:#f4f5f7} .maTabs{gap:22px} .maChips{display:flex;gap:12px;background:#fff;padding:12px 15px;border-bottom:1px solid #f4f5f7} .maChip{border:none;background:#f4f5f7;color:var(--sub);font-size:13px;border-radius:15px;padding:7px 17px;cursor:pointer} .maChip.on{background:#2b6df6;color:#fff;font-weight:600} .maList{} .maRow{background:#fff;padding:14px 15px;margin-top:10px} .maR1{display:flex;align-items:center;gap:11px} .maAva{flex:0 0 40px;height:40px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:20px} .maN{font-size:14.5px;color:var(--text)} .maSt{margin-left:auto;font-size:13px;color:#F5A800} .maRs{font-size:13.5px;color:var(--text);line-height:1.7;margin-top:13px} .maRs b{color:#f04438} .maActs{display:flex;justify-content:flex-end;gap:12px;margin-top:15px} .maBtn{border:none;font-size:13.5px;border-radius:6px;padding:9px 26px;cursor:pointer;color:#fff} .maBtn.red{background:#f04438} .maBtn.red:hover{background:#d93a2e} .maBtn.blue{background:#2b6df6} .maBtn.blue:hover{background:#1f5fe0} /* ★ 按墨刀「通过（人员审核）」：蓝竖条 + 用户信息块 */ .mapPage{background:#f4f5f7} .mapTop{display:flex;align-items:flex-start;gap:13px;background:#fff;padding:16px 15px} .mapAva{flex:0 0 52px;height:52px;border-radius:8px;background:#dbe7fb;display:grid;place-items:center;font-size:26px} .mapBd{flex:1;min-width:0} .mapR1{display:flex;align-items:center;gap:12px} .mapN{font-size:15.5px;color:var(--text)} .mapLoc{font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:3px} .mapLoc i{font-style:normal} .mapId{font-size:12.5px;color:var(--mute);margin-top:11px;display:flex;align-items:center;gap:8px} .mapCp{cursor:pointer;font-size:13px} .maBlk{background:#fff;margin-top:10px;padding:15px} .maSec{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:13px} .maBar{width:3.5px;height:15px;background:#2b6df6;border-radius:2px} .mapBox{background:#f4f5f7;border-radius:7px;padding:14px;font-size:13.5px;color:var(--sub);line-height:1.8} /* ★ 按墨刀「拒绝（人员审核）」：多行输入区 */ .mapArea{display:block;width:100%;box-sizing:border-box;border:none;outline:none;background:#f4f5f7;border-radius:7px;padding:14px;font-size:13.5px;color:var(--text);font-family:inherit;resize:none;min-height:96px;line-height:1.7} .mapArea::placeholder{color:#c9cdd4} /* ★ 按墨刀「话题审核」：标题+状态 / 提交时间+按钮同行 */ .taRow{background:#fff;padding:14px 15px;margin-top:10px} .taR1{display:flex;align-items:flex-start;gap:12px} .taTi{flex:1;min-width:0;font-size:15px;color:var(--text);line-height:1.5} .taTx{font-size:13px;color:var(--mute);line-height:1.7;margin-top:10px} .taFt{display:flex;align-items:center;gap:12px;margin-top:15px} .taTime{flex:1;min-width:0;font-size:12.5px;color:var(--mute)} .taActs{flex:0 0 auto;display:flex;gap:12px} /* ★ 按墨刀「社群主页（管理人员）置顶」：4 tab + ⊕ 在 tab 行 + ⇧ 置顶 */ .gpTabs{align-items:center;gap:20px} .gpFab{margin-left:auto;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#2b6df6;color:#fff;display:grid;place-items:center;font-size:19px;cursor:pointer;margin-bottom:8px} .gpPin{margin-left:auto;font-size:13px;color:var(--sub);cursor:pointer} /* ★ 按墨刀「搜索社群（陌生人）」：已加入橙字 / 申请蓝按钮 */ .sgPage{background:#fff} .sgReq{color:#2b6df6 !important;font-weight:600;font-size:13px} .sgBar{display:flex;align-items:center;gap:10px;background:#fff;padding:12px 15px;border-bottom:1px solid #f4f5f7} .sgIn{flex:1;min-width:0;border:none;outline:none;background:#f4f5f7;border-radius:17px;padding:9px 14px;font-size:13px} .sgGo{flex:0 0 auto;font-size:13.5px;color:var(--text);cursor:pointer} .sgList{} .sgRow{display:flex;align-items:center;gap:13px;padding:14px 15px;border-bottom:1px solid #f4f5f7} .sgIc{flex:0 0 46px;height:46px;border-radius:8px;background:#2b6df6;color:#fff;display:grid;place-items:center;font-size:22px} .sgBd{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .sgR1{display:flex;align-items:center;gap:6px} .sgN{font-size:14.5px;color:var(--text)} .sgCnt{font-size:13px;color:var(--mute)} .sgId{font-size:11.5px;color:var(--mute)} .sgJoined{flex:0 0 auto;font-size:13.5px;color:#F5A800;font-weight:600} .sgBtn{flex:0 0 auto;border:none;background:#2b6df6;color:#fff;font-size:13px;border-radius:6px;padding:8px 20px;cursor:pointer} .sgBtn:hover{background:#1f5fe0} /* ★ 按墨刀「社群详情（申请加入）」：底部蓝底申请按钮 */ .gaPage{padding-bottom:84px} .gaGo{position:fixed;left:14px;right:14px;bottom:18px;height:48px;border:none;border-radius:6px;background:#2b6df6;color:#fff;font-size:16px;font-weight:700;cursor:pointer;z-index:22} .gaGo:hover{background:#1f5fe0} /* ★ 第 6 种弹窗（按墨刀「社群详情·提示弹窗」）：居中标题+正文+分隔线+纯文字按钮 */ .tipModal{background:#fff;border-radius:8px;margin:14px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.16)} .tipT{text-align:center;font-size:17px;font-weight:600;color:var(--text);padding:22px 20px 0} .tipBody{text-align:center;font-size:15px;color:var(--text);line-height:1.6;padding:34px 24px 34px} .tipBtn{text-align:center;font-size:16px;color:var(--text);padding:17px 20px;cursor:pointer;border-top:1px solid #ebedf0} .tipBtn:hover{background:#fafbfd} /* ★ 按墨刀「申请列表（陌生人）」：三状态三色 */ .alPage{background:#f4f5f7} .alChips{background:#f4f5f7;border-bottom:none} .alRow{background:#fff;padding:14px 15px;margin-top:10px} .alR1{display:flex;align-items:center;gap:13px;margin-bottom:13px} .alN{flex:1;min-width:0;font-size:15px;color:var(--text)} .alSt{flex:0 0 auto;font-size:13px;font-weight:600} .alSt.o{color:#F5A800} .alSt.b{color:#2b6df6} .alSt.r{color:#f04438} /* ★ 按墨刀「申请加入」：社群卡（带 ›）+ 简介/人数 + 蓝竖条申请原因 */ .ajPage{padding-bottom:84px} .ajAr{flex:0 0 auto;font-style:normal;color:#c9cdd4;font-size:19px;padding-left:6px} .ajCard{background:#fff;margin-top:10px;padding:15px} .ajSec{font-size:13.5px;color:var(--text);margin-bottom:11px} .ajDesc{font-size:13px;color:var(--sub);line-height:1.7;padding-bottom:16px;border-bottom:1px solid #f4f5f7} .ajRow{display:flex;align-items:center;padding-top:16px} .ajK{flex:1;font-size:14.5px;color:var(--text)} .ajV{flex:0 0 auto;font-size:14.5px;color:var(--sub)} /* ★ 按墨刀 2.0「创建信息」：树形层级 + 3 按钮 */ .ciPage{background:#fff} .ciBtns{display:flex;gap:14px;padding:14px 15px;border-bottom:1px solid #f4f5f7} .ciBtn{border:none;font-size:13.5px;border-radius:6px;padding:9px 20px;cursor:pointer} .ciBtn.blue{background:#2b6df6;color:#fff} .ciBtn.blue:hover{background:#1f5fe0} .ciBtn.gray{background:#f4f5f7;color:var(--sub)} .ciBtn.gray:hover{background:#ebedf0} .ciTree{} .ciRow{display:flex;align-items:center;gap:13px;padding:13px 15px;border-bottom:1px solid #f4f5f7;cursor:pointer} .ciRow:hover{background:#fafbfd} .ciRow.mem{padding-top:15px;padding-bottom:15px} .ciAr{flex:0 0 auto;font-style:normal;font-size:12px;color:var(--sub)} .ciN{flex:0 0 auto;font-size:15px;color:var(--text)} .ciAva{flex:0 0 34px;height:34px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:16px} .ciPh{flex:0 0 auto;font-size:13px;color:var(--sub)} .ciMore{margin-left:auto;flex:0 0 auto;font-size:15px;color:var(--mute);letter-spacing:1px} /* ============================================================================ ★ 补齐 21 个「完全没有定义」的类（由主控 agent 审计发现） 全部按**实际用法**定义，不是占位 ============================================================================ */ /* .mgr —— 物业组行的**语义标记**（与楼栋行行为不同：跳人员管理而非楼层） 实拍里物业组与楼栋行**视觉一致**，故此处显式声明「无视觉差异」， 保留该类的目的是行为区分与测试钩子（不凭空造样式） */ .blRow.mgr{} /* 确认弹窗的行（key + value） */ .cfmRow{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 0;border-bottom:1px solid #f4f5f7;font-size:13.5px} .cfmRow:last-child{border-bottom:none} .cfmK{flex:1;min-width:0;color:var(--text)} .cfmV{flex:0 0 auto;color:var(--sub)} /* 支付/状态页的提示正文 */ .qtitle{font-size:14px;color:var(--sub);line-height:1.85} /* 按钮在 flex 行里等分占满 */ .grow{flex:1} /* 对比表（我的求职 ↔ 他的招聘） */ .cmp-head{display:flex;align-items:center;background:#fff;padding:16px 15px; border-radius:10px;margin-bottom:10px} .cmp-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px} .cmp-ava{width:46px;height:46px;border-radius:50%;background:#dbe7fb;display:grid; place-items:center;font-size:22px} .cmp-nm{font-size:13.5px;color:var(--text)} .cmp-inf{flex:0 0 auto;font-size:22px;color:#c9cdd4;padding:0 14px} .cmp{background:#fff;border-radius:10px;overflow:hidden} .cmp-row{display:flex;border-bottom:1px solid #f4f5f7} .cmp-row:last-child{border-bottom:none} .cmp-c{flex:1;min-width:0;padding:13px 15px;display:flex;flex-direction:column;gap:7px} .cmp-l{border-right:1px solid #f4f5f7} .cmp-k{font-size:11.5px;color:var(--mute)} .cmp-v{font-size:13.5px;color:var(--text)} /* 服务订单卡片的状态图标 */ .svoCard{} .svoIc.face{color:#F5A800} .svoIc.bad{color:#f04438} .cmp-r{} /* ★ 按墨刀 2.0「查看编辑」：单输入 + 内容区「确定」按钮 */ .vePage{background:#fff;padding:14px 15px} .veIn{margin-bottom:34px} .veGo{display:block;width:100%;border:none;border-radius:6px;background:#2b6df6;color:#fff;font-size:16px;font-weight:700;padding:15px 0;cursor:pointer} .veGo:hover{background:#1f5fe0} /* ★ 按墨刀 2.0「查看编辑（楼层）」：红底白勾单选 + 双输入 */ .vfPage{background:#f4f5f7} .vfRads{display:flex;gap:26px;padding:4px 0 18px} .vfRd{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--text);cursor:pointer} .vfMark{width:20px;height:20px;border-radius:50%;border:1.5px solid #d0d3d9;display:grid;place-items:center;font-size:12px;color:#fff;font-style:normal;box-sizing:border-box} .vfRd.on .vfMark{background:#f04438;border-color:#f04438} .vfIn{margin-bottom:18px} .vfLb{font-size:14px;color:var(--text);margin-bottom:11px} /* ★ 按墨刀 2.0「查看编辑（人员）」：成员块 + 浅蓝「＋新增」 */ .vmPage{background:#fff;padding:14px 15px 84px} .vmBlk{margin-bottom:22px} .vmHead{display:flex;align-items:center;margin-bottom:12px} .vmT{flex:1;font-size:14.5px;color:var(--text)} .vmDel{flex:0 0 auto;font-size:15px;cursor:pointer;line-height:1} .vmIn{margin-bottom:16px} .vmSel{cursor:pointer;display:flex;align-items:center;gap:9px} .vmRolePh{flex:1;min-width:0;color:#c9cdd4;font-size:13.5px} .vmAr{flex:0 0 auto;font-style:normal;color:var(--mute);font-size:15px} .vmAdd{display:block;width:100%;border:none;border-radius:24px;background:#a9c2f7;color:#fff;font-size:15px;font-weight:600;padding:14px 0;cursor:pointer} .vmAdd:hover{background:#93b1f2} /* ★ 按墨刀 2.0「信息操作」：每行「添加XX」描边按钮 */ .opAdd{margin-left:auto;flex:0 0 auto;border:1px solid #2b6df6;background:#fff;color:#2b6df6;font-size:11.5px;border-radius:5px;padding:5px 10px;cursor:pointer;margin-right:10px} .opAdd:hover{background:#f2f7ff} /* ★ 按墨刀 2.0「权限设置」：iOS 开关（开=绿） */ .psPage{background:#f4f5f7} .psLb{flex:1;min-width:0;font-size:14.5px;color:var(--text)} .psSw{flex:0 0 46px;height:26px;border-radius:13px;background:#e5e6eb;position:relative;transition:background .18s} .psSw i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:left .18s;font-style:normal} .psSw.on{background:#34c759} .psSw.on i{left:22px} /* ★ 按墨刀 2.0「特权用户」：圆头像成员行 */ .puPage{background:#fff} .puAva{flex:0 0 34px;height:34px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:17px} /* ★ 按墨刀 2.0「社区」：填空式标题 + 一页向导 */ .chPage{background:#f4f5f7} .chBlank{display:inline-block;width:52px;border-bottom:1px solid var(--text);font-style:normal;vertical-align:baseline;margin:0 5px} .chIn{margin-bottom:18px} .chLb{font-size:14px;color:var(--text);margin-bottom:11px} .chSel{cursor:pointer;display:flex;align-items:center;gap:9px} .chPh{flex:1;min-width:0;color:#c9cdd4;font-size:13.5px} .chAr{flex:0 0 auto;font-style:normal;color:var(--mute);font-size:16px} /* ★ 按墨刀 2.0「特权用户（查看编辑）」：蓝⊕ + CSS 红垃圾桶 */ .pvPage{background:#f4f5f7} .pvOps{margin-left:auto;display:flex;align-items:center;gap:14px} .pvPlus{font-size:19px;color:#2b6df6;cursor:pointer;font-style:normal;line-height:1} .pvDel{width:14px;height:15px;position:relative;cursor:pointer;display:inline-block} .pvDel::before{content:'';position:absolute;left:1px;top:4px;right:1px;bottom:0;border:1.5px solid #f04438;border-top:none;border-radius:0 0 2px 2px} .pvDel::after{content:'';position:absolute;left:0;top:1px;right:0;height:1.5px;background:#f04438} .pvSel{cursor:pointer;display:flex;align-items:center;gap:9px;margin-bottom:16px} .pvIn{margin-bottom:16px} /* ★ 按墨刀「聊天页面（私聊）」：白气泡 + 对方手机号 + 位置/视频消息 */ .chChatPage{background:#ededed;padding-bottom:230px} .chRow{display:flex;align-items:flex-start;gap:10px;padding:9px 14px} .chRow.r{justify-content:flex-end} .chAvaWrap{flex:0 0 42px;display:flex;flex-direction:column;align-items:center;gap:3px} .chAva{width:42px;height:42px;border-radius:6px;background:#dbe7fb;display:grid;place-items:center;font-size:21px} .chAva.me{background:#ffe0d6} .chPhone{font-size:9.5px;color:var(--mute);font-style:normal;white-space:nowrap;transform:scale(.92)} .chBub{max-width:66%;background:#fff;border-radius:6px;padding:11px 13px;font-size:14.5px;color:var(--text);line-height:1.5;word-break:break-word} .chVoice{display:flex;align-items:center;gap:5px;min-width:130px} .chSec{font-size:13px;color:var(--sub);font-style:normal;margin-right:4px} .chWave{width:3px;height:11px;background:#c9cdd4;border-radius:2px;font-style:normal} .chWave.w2{height:16px} .chWave.w3{height:8px} .chEar{margin-left:auto;font-style:normal;font-size:14px} .chLoc{display:flex;flex-direction:column;gap:8px;min-width:190px} .chLocT{font-size:14px;color:var(--text);font-style:normal} .chLocS{font-size:12px;color:var(--mute);font-style:normal;line-height:1.5} .chVid{position:relative;width:130px;height:118px;border-radius:6px;background:#c9d8ea;display:grid;place-items:center;font-size:40px;padding:0} .chPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:35px;height:35px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;font-size:15px;font-style:normal} /* ★ 按墨刀「聊天信息（私聊）」：卡片 + 绿开关 + 蓝底胶囊 */ .cifPage{background:#ededed;padding:10px 0 92px} .cifCard{background:#fff;border-radius:8px;margin:0 0 10px;overflow:hidden} .cifMe{display:flex;align-items:center;gap:12px;padding:16px 15px;cursor:pointer} .cifAva{flex:0 0 52px;height:52px;border-radius:6px;background:#dbe7fb;display:grid;place-items:center;font-size:26px} .cifMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .cifNm{font-size:16px;color:var(--text);font-style:normal;display:flex;align-items:center;gap:9px} .cifRegion{font-size:12px;color:var(--mute);font-style:normal;font-weight:400} .cifSign{font-size:12.5px;color:var(--mute);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cifRow{display:flex;align-items:center;gap:12px;padding:16px 15px;border-top:1px solid #f4f5f7;cursor:pointer} .cifRow:first-child{border-top:none} .cifLb{flex:1;min-width:0;font-size:15px;color:var(--text)} .cifGo{display:block;width:calc(100% - 30px);margin:0 15px;border:none;border-radius:26px;background:#2b6df6;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer;position:fixed;left:0;right:0;bottom:24px} .cifGo:hover{background:#1f5fe0} /* ★ 按墨刀「用户主页（私聊）」：3 统计 + 黄底线 tab + 2 列网格 */ .uhPage{background:#fff;padding:0 0 24px} .uhHead{display:flex;align-items:center;gap:13px;padding:14px 15px 12px} .uhAva{width:58px;height:58px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:29px} .uhId{display:flex;flex-direction:column;gap:7px} .uhNm{font-size:17px;font-weight:600;color:var(--text);font-style:normal} .uhLoc{font-size:12.5px;color:var(--mute);font-style:normal} .uhStats{display:flex;padding:4px 15px 12px} .uhStat{flex:1;display:flex;flex-direction:column;gap:3px} .uhNum{font-size:17px;font-weight:600;color:var(--text);font-style:normal} .uhLb{font-size:12px;color:var(--mute);font-style:normal} .uhBio{padding:0 15px 14px;font-size:13.5px;color:var(--text);line-height:1.6} .uhTabs{display:flex;gap:26px;padding:0 15px;border-bottom:1px solid #f0f1f3} .uhTab{position:relative;padding:10px 0 12px;font-size:15px;color:var(--sub);cursor:pointer} .uhTab.on{color:var(--text);font-weight:600} .uhTab.on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:6px;width:22px;height:3px;border-radius:2px;background:#ffc300} .uhGrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:12px 15px 0} .uhCard{display:flex;flex-direction:column;gap:8px;cursor:pointer} .uhCover{position:relative;width:100%;height:150px;border-radius:6px;background:#c6d6c8;display:grid;place-items:center;font-size:52px} .uhTitle{font-size:13.5px;color:var(--text);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .uhMetas{display:flex;gap:16px} .uhM{font-size:12px;color:var(--mute);font-style:normal} /* ★ 按墨刀「新朋友（私聊）」：双按钮 + 纯彩字状态 */ .nfPage{background:#fff;padding-bottom:20px} .nfList{} .nfRow{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid #f4f5f7} .nfAva{flex:0 0 46px;height:46px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:23px} .nfMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .nfNm{font-size:15.5px;color:var(--text);font-style:normal} .nfMsg{font-size:12.5px;color:var(--mute);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nfOps{flex:0 0 auto;display:flex;gap:10px} .nfOk{border:none;border-radius:5px;background:#2b6df6;color:#fff;font-size:14px;font-weight:600;padding:8px 18px;cursor:pointer} .nfOk:hover{background:#1f5fe0} .nfNo{border:none;border-radius:5px;background:#f04438;color:#fff;font-size:14px;font-weight:600;padding:8px 18px;cursor:pointer} .nfNo:hover{background:#d93a2f} .nfSt{flex:0 0 auto;font-size:14px;font-weight:600} .nfSt.no{color:#f04438} .nfSt.ok{color:#2b6df6} /* ★ 按墨刀「添加好友（私聊）」：橙字已添加 + 蓝底申请 */ .afPage{background:#fff;padding-bottom:20px} .afBar{display:flex;align-items:center;gap:9px;padding:11px 15px} .afIc{flex:0 0 auto;font-size:15px;color:var(--mute)} .afIn{flex:1;min-width:0;border:none;background:#f4f5f7;border-radius:6px;padding:10px 12px;font-size:14px;outline:none} .afGo{flex:0 0 auto;border:none;background:#f4f5f7;color:var(--sub);font-size:14px;padding:10px 16px;border-radius:6px;cursor:pointer} .afGo:hover{background:#e9eaee} .afList{} .afAva{flex:0 0 46px;height:46px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:23px} .afMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .afNm{font-size:15.5px;color:var(--text);font-style:normal} .afId{font-size:12.5px;color:var(--mute);font-style:normal} .afDone{flex:0 0 auto;font-size:14px;font-weight:600;color:#f58020} .afApply{flex:0 0 auto;border:none;border-radius:5px;background:#2b6df6;color:#fff;font-size:14px;font-weight:600;padding:8px 18px;cursor:pointer} .afApply:hover{background:#1f5fe0} /* ★ 按墨刀「备注（弹窗）」：居中标题 + 输入(⊗) + 取消/确认竖分隔 */ .rmPage{background:#ededed;padding:10px 0} .rmDlg{width:290px;margin:60px auto 0;background:#fff;border-radius:10px;overflow:hidden} .rmT{padding:20px 0 6px;text-align:center;font-size:16px;font-weight:600;color:var(--text)} .rmBody{padding:12px 20px 20px} .rmInWrap{position:relative;display:flex;align-items:center} .rmIn{flex:1;min-width:0;border:none;background:#f4f5f7;border-radius:6px;padding:11px 34px 11px 12px;font-size:15px;color:var(--text);outline:none} .rmClr{position:absolute;right:10px;font-size:17px;color:#c9cdd4;cursor:pointer;font-style:normal;line-height:1} .rmOps{display:flex;border-top:1px solid #e5e6eb} .rmCancel{flex:1;border:none;background:transparent;border-right:1px solid #e5e6eb;padding:15px 0;font-size:16px;color:var(--text);cursor:pointer} .rmCancel:hover{background:#fafafa} .rmOk{flex:1;border:none;background:transparent;padding:15px 0;font-size:16px;color:var(--text);cursor:pointer} .rmOk:hover{background:#fafafa} /* ★ 按墨刀「拉黑（弹窗）」：居中正文 */ .rmTxt{font-size:14.5px;color:var(--sub);line-height:1.65;text-align:center;padding:2px 4px 4px} /* ★ 按墨刀「弹窗（清除聊天）」：第 8 种形态（蓝渐变标题 + 胶囊按钮） */ .giPage{background:#fff;padding:0 0 14px} .giHead{display:flex;align-items:center;gap:12px;padding:14px 15px} .giAva{width:48px;height:48px;border-radius:8px;background:#e6e0f5;display:grid;place-items:center;font-size:24px} .giMid{display:flex;flex-direction:column;gap:6px} .giNm{font-size:15.5px;color:var(--text);font-style:normal} .giId{font-size:12px;color:var(--mute);font-style:normal} .giCopy{font-weight:400;color:#c9cdd4} .giSec{font-size:13px;color:var(--sub);padding:6px 15px 8px} .giSub{height:14px} .giRow{display:flex;align-items:center;gap:11px;padding:15px;border-top:1px solid #f4f5f7} .giLb{flex:1;min-width:0;font-size:15px;color:var(--text)} .giV{font-size:14px;color:var(--sub)} .giBio{padding:0 15px 14px;font-size:13px;color:var(--sub);line-height:1.6} .giMinus{font-size:17px;color:#f04438;font-style:normal} .cc8Dlg{width:308px;margin:64px auto 0;background:#fff;border-radius:10px;overflow:hidden} .cc8T{padding:16px 0;text-align:center;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(135deg,#8fb4ff 0%,#2b6df6 60%,#1f5fe0 100%)} .cc8B{padding:24px 22px 26px;font-size:15px;color:var(--text);line-height:1.7;text-align:center} .cc8Ops{display:flex;gap:14px;padding:0 22px 22px} .cc8Cancel{flex:1;border:none;border-radius:22px;background:#f0f1f3;color:var(--text);font-size:15px;font-weight:600;padding:12px 0;cursor:pointer} .cc8Cancel:hover{background:#e6e7ea} .cc8Ok{flex:1;border:none;border-radius:22px;background:#2b6df6;color:#fff;font-size:15px;font-weight:600;padding:12px 0;cursor:pointer} .cc8Ok:hover{background:#1f5fe0} /* ★ 按墨刀「搜索（聊天记录）」：顶栏搜索框 + 关键词红高亮 */ .csPage{background:#fff;padding-bottom:20px} .csBox{flex:1;min-width:0;border:none;background:#f4f5f7;border-radius:6px;padding:9px 12px;font-size:14px;outline:none} .csList{} .csRow{display:flex;align-items:flex-start;gap:12px;padding:16px 15px;border-bottom:1px solid #f4f5f7;cursor:pointer} .csAva{flex:0 0 46px;height:46px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:23px} .csMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .csNm{font-size:15.5px;color:var(--text);font-style:normal} .csTx{font-size:14px;color:var(--sub);font-style:normal} .csHl{color:#f04438;font-style:normal;font-weight:600} .csDate{flex:0 0 auto;font-size:12.5px;color:var(--mute);font-style:normal} /* ★ 按墨刀「亲友群（群主）」：成员格 + 角色徽章 */ .giCard{background:#fff;border-radius:8px;margin:0 0 10px;overflow:hidden} .giPh{color:#c9cdd4} .giSec2{font-size:14px;color:var(--text);padding:15px 15px 4px} .koGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 6px;padding:12px 15px 18px} .koCell{display:flex;flex-direction:column;align-items:center;gap:7px} .koAvaWrap{position:relative} .koRole{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);background:#2b6df6;color:#fff;font-size:10px;font-style:normal;border-radius:3px;padding:1px 6px;white-space:nowrap;z-index:1} .koAva{width:46px;height:46px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:23px} .koAvaEmpty{background:#f0f1f3;color:var(--sub);font-size:20px} .koNm{font-size:11.5px;color:var(--sub);font-style:normal;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center} /* ★ 按墨刀「开屏消息（服务）」：3 张消息卡 + ⊗ 关闭 */ .smPage{background:#eef1f6;padding-bottom:20px} .smTop{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 46px 10px} .smBell{position:absolute;left:14px;font-size:19px} .smTitle{font-size:17px;font-weight:600;color:var(--text)} .smGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px;padding:6px 15px 14px} .smCat{background:#dfe6f3;color:#5b6b86;font-size:12.5px;text-align:center;padding:9px 0;border-radius:6px} .smCards{position:relative;background:#fff;margin:12px 15px 0;border-radius:8px;padding:4px 0 34px} .smCard{border-bottom:1px solid #f0f1f3;padding:12px 14px} .smCardTop{display:flex;align-items:center;gap:8px;margin-bottom:9px} .smCardIc{font-size:15px} .smCardG{flex:1;min-width:0;font-size:13px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .smCardT{flex:0 0 auto;font-size:12px;color:var(--mute)} .smCardBody{display:flex;align-items:center;gap:10px} .smCardTx{flex:1;min-width:0;font-size:14px;color:var(--text);line-height:1.5} .smK{color:#2b6df6;font-weight:600} .smCardGo{flex:0 0 auto;font-size:12.5px;color:#2b6df6;cursor:pointer} .smClose{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:19px;color:#c9cdd4;cursor:pointer} /* ★ 铃铛红点：与既有 .smDot（美团黄 banner 点）**区分开**，避免类名撞车 */ .smBellDot{position:absolute;left:11px;top:9px;width:8px;height:8px;border-radius:50%;background:#f04438;font-style:normal} /* ★ 按墨刀「服务·首页」：小程序格 + 统计卡 + 服务动态 */ .shPage{background:#eef1f6;padding-bottom:20px} .shGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 6px;padding:4px 12px 12px} .shApp{display:flex;flex-direction:column;align-items:center;gap:6px} .shAppIc{width:46px;height:46px;border-radius:9px;background:#7fb2f0;color:#fff;font-size:15px;font-style:normal;display:grid;place-items:center;text-align:center;line-height:1.15} .shMoreIc{background:#e8eaef;color:#8b93a3;font-size:19px} .shAppLb{font-size:11.5px;color:var(--sub);font-style:normal} .shStats{display:flex;gap:10px;padding:0 12px 14px} .shStat{flex:1;background:#f7f8fa;border-radius:8px;padding:13px 14px;display:flex;flex-direction:column;gap:9px} .shStatT{font-size:14.5px;color:var(--text);font-style:normal;font-weight:600} .shStatV{font-size:12.5px;color:var(--mute);font-style:normal;line-height:1.5} .shSec{font-size:15px;font-weight:600;color:var(--text);padding:0 12px 8px} .shFeed{padding:0 12px} .shRow{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid #f0f1f3} .shTag{flex:0 0 44px;height:44px;border-radius:7px;color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center;text-align:center;line-height:1.2;padding:0 4px;box-sizing:border-box} .shTag.org{background:#f5a623} .shTag.blu{background:#4a9bf5} .shTag.grn{background:#3fc06a} .shBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .shL1{font-size:13.5px;color:var(--sub);font-style:normal;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .shUse{color:#2b6df6} .shCost{font-style:normal;background:#eef4ff;color:#2b6df6;font-size:11px;border-radius:9px;padding:2px 8px} .shTime{font-style:normal;color:var(--mute);font-size:12px;margin-left:auto} .shL2{font-size:13.5px;color:var(--text);font-style:normal;line-height:1.5} .shTok{color:#2b6df6} /* ★ 按墨刀「全部服务（服务）」：圆形双词图标 + 分组 */ .saPage{background:#fff;padding-bottom:20px} .saAdd{color:#f04438} .saHead{display:flex;align-items:center;gap:8px;padding:16px 15px 10px} .saT{font-size:15.5px;font-weight:700;color:var(--text)} .saNew{background:#f04438;color:#fff;font-size:10px;font-weight:700;border-radius:3px;padding:1px 5px;font-style:normal} .saAr{margin-left:auto;font-size:11px;color:#c9cdd4;font-style:normal} .saGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 6px;padding:0 10px 6px} .saCell{display:flex;flex-direction:column;align-items:center;gap:9px} .saIcBox{position:relative;width:60px;height:60px} .saIc{width:60px;height:60px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#fff} .saIc em{font-style:normal;font-size:11.5px;line-height:1.25} .saIc.org{background:#f5a623} .saIc.grn{background:#3fc06a} .saIc.blu{background:#4a9bf5} .saIc.yel{background:#ffc300} .saDot{position:absolute;right:2px;top:8px;width:9px;height:9px;border-radius:50%;background:#ffc300} .saLb{font-size:12.5px;color:var(--text);font-style:normal;text-align:center} /* ★ 按墨刀「添加服务（服务）」：大输入 + 虚线上传格 + 胶囊提交 */ .asPage{background:#fff;padding:14px 15px 96px} .asLb{font-size:15px;font-weight:700;color:var(--text);margin-bottom:11px} .asArea{width:100%;height:210px;border:none;background:#f4f5f7;border-radius:6px;padding:13px;font-size:14px;color:var(--text);outline:none;resize:none;box-sizing:border-box;font-family:inherit;margin-bottom:24px} .asSupRow{display:flex;align-items:baseline;gap:10px;margin-bottom:13px} .asSup{font-size:15px;color:var(--text);flex:0 0 auto} .asSupTx{flex:1;min-width:0;font-size:12.5px;color:var(--mute);line-height:1.45} .asUp{width:70px;height:70px;border:1px dashed #d0d3d9;border-radius:6px;display:grid;place-items:center;font-size:26px;color:#c9cdd4;cursor:pointer} .asUp:hover{border-color:#2b6df6;color:#2b6df6} .asGo{display:block;width:calc(100% - 60px);margin:0 30px;border:none;border-radius:26px;background:#2b6df6;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer;position:fixed;left:0;right:0;bottom:34px} .asGo:hover{background:#1f5fe0} /* ★ 按墨刀「提交成功（弹窗）」：居中标题 + 正文 + 单黄胶囊 */ .asSel{cursor:pointer;display:flex;align-items:center;gap:9px;margin-bottom:24px} .okDlg{width:320px;margin:110px auto 0;background:#fff;border-radius:10px;padding:24px 22px 26px;text-align:center} .okT{font-size:16px;font-weight:700;color:var(--text);margin-bottom:26px} .okB{font-size:15px;color:var(--text);line-height:1.6;margin-bottom:26px} .okGo{display:block;margin:0 auto;border:none;border-radius:22px;background:#ffc300;color:#fff;font-size:15px;font-weight:600;padding:11px 40px;cursor:pointer} .okGo:hover{background:#f0b800} /* ★ 按墨刀「招聘列表（一级分类）」：动态行的卡片外框 */ .s1Page{background:#eef1f6;padding:12px} /* ★ 按墨刀「业务员招聘（二级）」：双行标签 */ .shTag2{flex-direction:column;gap:1px;line-height:1.15} .shTagL{font-style:normal;font-size:11px} /* ★ 按墨刀「匹配页面（求职）」：蓝|∞|黄 + 左右对比表 */ .mjPage{background:#fff;padding-bottom:20px} .mjTop{display:flex;align-items:stretch;height:104px} .mjSide{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative} .mjSide.blu{background:#9dc3f7} .mjSide.yel{background:#fbe7a8} .mjIc{font-size:26px;font-style:normal} .mjLb{font-size:14px;font-weight:600;color:var(--text);font-style:normal} .mjInf{flex:0 0 96px;display:grid;place-items:center;font-size:34px;color:#fff;background:#fff;font-weight:300} .mjKnob{position:absolute;right:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:#f5a623} .mjTable{} .mjRow{display:flex} .mjCell{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 8px} .mjCell.blu{background:#cfe0fb} .mjCell.yel{background:#fdf1cc} .mjK{font-size:11.5px;color:#6b7280;font-style:normal} .mjV{font-size:14px;font-weight:700;color:var(--text);font-style:normal;text-align:center} /* ★ 按墨刀「求职表单（服务）」：头部卡 + 下划线式表单 */ .sfPage{background:#fff;padding-bottom:26px} .sfHead{padding:16px 15px 18px;border-bottom:8px solid #f4f5f7} .sfTop{display:flex;align-items:center;gap:11px;margin-bottom:12px} .sfNm{font-size:17px;font-weight:700;color:var(--text)} .sfBadge{background:#2b6df6;color:#fff;font-size:11.5px;font-weight:600;border-radius:3px;padding:2px 8px} .sfSlogan{font-size:13.5px;color:var(--text);margin-bottom:9px} .sfDesc{font-size:11.5px;color:#2b6df6;line-height:1.7} .sfSwitch{margin-top:13px;border:1px solid #2b6df6;background:#fff;color:#2b6df6;font-size:14px;border-radius:5px;padding:8px 22px;cursor:pointer} .sfSwitch:hover{background:#f2f7ff} .sfF{padding:14px 15px 0} .sfLb{font-size:15.5px;font-weight:600;color:var(--text);margin-bottom:10px} .sfVal{font-size:14px;color:var(--text);padding-bottom:11px;border-bottom:1px solid #e5e6eb;margin-bottom:12px} .sfVal.ph{color:#c9cdd4} .sfLoc{font-size:13.5px;color:#2b6df6;cursor:pointer} .sfRight{margin-left:auto} .sfSel{display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid #e5e6eb;margin-bottom:12px;cursor:pointer} .sfIc{margin-left:auto;font-size:15px;font-style:normal} .sfSex{display:flex;flex-direction:column;gap:13px;padding-bottom:12px;border-bottom:1px solid #e5e6eb;margin-bottom:12px} .sfRd{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--text);cursor:pointer} .sfMark{width:17px;height:17px;border-radius:50%;border:1.5px solid #d0d3d9;box-sizing:border-box;font-style:normal} .sfRd.on .sfMark{border:5px solid #2b6df6} /* ★ 按业务方说明：求职小程序流程可视化 */ .mfHead{background:#fff;border-radius:9px;padding:14px;display:flex;flex-direction:column;gap:7px;margin-bottom:11px} .mfApp{font-size:17px;color:var(--text)} .mfPair{font-size:12.5px;color:#2b6df6} .mfGen{font-size:11.5px;color:var(--mute)} .mfPh{background:#fff;border-radius:9px;padding:13px 14px;margin-bottom:11px} .mfPhH{display:flex;flex-direction:column;gap:4px;margin-bottom:11px} .mfPhN{font-size:14.5px;color:var(--text)} .mfPhD{font-size:11.5px;color:var(--mute)} .mfNodes{display:flex;flex-wrap:wrap;gap:8px} .mfNode{display:flex;flex-direction:column;gap:3px;border:1px solid #e5e6eb;border-radius:6px;padding:7px 10px;background:#fafbfc} .mfNodeN{font-style:normal;font-size:12.5px;color:var(--mute)} .mfNodeK{font-style:normal;font-size:10px;color:#c9cdd4} .mfNode.ok{border-color:#2b6df6;background:#f2f7ff;cursor:pointer} .mfNode.ok .mfNodeN{color:var(--text)} .mfNode.ok .mfNodeK{color:#2b6df6} .mfEdges{display:flex;flex-direction:column;gap:7px} .mfEdge{display:flex;align-items:center;gap:7px;font-size:12px;flex-wrap:wrap} .mfFrom{color:var(--text);font-weight:600} .mfAr{color:#c9cdd4;font-style:normal} .mfTo{color:var(--text);font-weight:600} .mfCond{color:var(--mute);font-size:11.5px} /* ★ 按墨刀「求职（加载中）」：三块 + 大灰方块 ∞ */ .mlTop{display:flex;align-items:flex-start;justify-content:center;gap:26px;padding:16px 15px 0} .mlSide{display:flex;flex-direction:column;align-items:center;gap:8px;width:76px} .mlAvaImg{background:#e8d9cc} .mlLb{font-size:12px;color:var(--sub);font-style:normal;text-align:center} .mlInf{font-size:34px;font-weight:300;color:#2b6df6;line-height:1;padding-top:6px} .mlInf.off{color:#d0d3d9} .mlTip{text-align:center;font-size:14px;color:#2b6df6;padding:14px 15px 0} .mlBig{width:130px;height:130px;margin:110px auto 0;border-radius:14px;background:#f0f1f3;display:grid;place-items:center} .mlBigInf{font-size:56px;color:#d0d3d9;font-style:normal;font-weight:300} /* ★ 按墨刀「求职（有结果）」：企业卡片列表 */ .mhList{padding:12px 12px 20px;display:flex;flex-direction:column;gap:11px} .mhCard{position:relative;background:#fff;border:1px solid #e5e6eb;border-radius:8px;padding:14px 12px 12px} .mhUnread{position:absolute;left:0;top:12px;background:#f04438;color:#fff;font-size:10.5px;font-weight:600;border-radius:0 3px 3px 0;padding:2px 7px} .mhBody{display:flex;gap:12px;align-items:flex-start} .mhSide{flex:0 0 66px;display:flex;flex-direction:column;align-items:center;gap:5px;background:#f4f5f7;border-radius:6px;padding:8px 4px} .mhAva{width:34px;height:34px;border-radius:50%;background:#dbe7fb;display:grid;place-items:center;font-size:17px} .mhS1{font-size:10.5px;color:var(--sub);font-style:normal} .mhS2{font-size:10.5px;color:var(--mute);font-style:normal} .mhMain{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .mhTop{display:flex;align-items:baseline;gap:9px;font-style:normal} .mhNm{font-size:15px;color:var(--text)} .mhTime{margin-left:auto;font-size:11px;color:var(--mute);font-style:normal} .mhTags{display:flex;flex-wrap:wrap;gap:7px;font-style:normal} .mhTag{font-style:normal;font-size:11px;color:#2b6df6;background:#eef4ff;border-radius:3px;padding:3px 8px} .mhDot{position:absolute;right:10px;top:8px;width:5px;height:5px;border-radius:50%;background:#2b6df6} /* ★ 按墨刀「求职（无结果）」：超大浅灰 ∞ + 修改重发 + 继续等待 */ .mnBig{text-align:center;font-size:150px;font-weight:300;color:#f4f5f7;line-height:1;margin:56px 0 0;user-select:none} .mnTx{text-align:center;font-size:13px;color:#2b6df6;line-height:1.85;padding:22px 30px 0} .mnAgain{text-align:center;font-size:14.5px;color:var(--mute);padding:78px 0 0;cursor:pointer} .mnWait{display:block;width:calc(100% - 100px);margin:22px 50px 26px;border:none;border-radius:26px;background:#2b6df6;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer} .mnWait:hover{background:#1f5fe0} /* ★ 按墨刀「求职（查看结果）」：顶栏「继续匹配」 */ .mvMore{color:#2b6df6} /* ★ 按墨刀「求职（已支付）」：绿色已支付标记 */ .mpWrap{position:relative} .mpPaid{position:absolute;right:12px;bottom:10px;display:flex;align-items:center;gap:5px;font-size:12.5px;color:#12b76a;font-weight:600} .mpOk{width:16px;height:16px;border-radius:50%;background:#12b76a;color:#fff;font-size:10px;font-style:normal;display:grid;place-items:center} /* ★ 按墨刀「求职（正常流程结束）」：完整卡片 + 终态标记 */ .mdBadge{position:absolute;left:0;top:12px;font-size:10.5px;font-weight:600;border-radius:0 3px 3px 0;padding:2px 7px;color:#fff} .mdBadge.warn{background:#f5a623} .mdBadge.gray{background:#9aa1ab} .mdRole{font-size:10px;font-style:normal;background:#f5a623;color:#fff;border-radius:2px;padding:1px 5px} .mdRes{position:absolute;right:12px;bottom:10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:600} .mdRes.ok{color:#12b76a} .mdRes.bad{color:#f04438} .mdFace{font-size:20px;font-style:normal;line-height:1} .mdTick{width:18px;height:18px;border-radius:50%;background:#12b76a;color:#fff;font-size:11px;font-style:normal;display:grid;place-items:center} /* ★ 按墨刀「求职（未支付过期）」：过期提示弹窗 */ .meDlg{width:308px;margin:78px auto 0;background:#fff;border-radius:10px;overflow:hidden} .meT{padding:19px 0 0;text-align:center;font-size:16px;font-weight:700;color:var(--text)} .meB{padding:34px 22px 30px;text-align:center;font-size:15px;color:var(--text)} .meRow{border-top:1px solid #e5e6eb;padding:16px 0;text-align:center;font-size:15px;color:var(--text);cursor:pointer} .meRow:hover{background:#fafafa} .meGo{display:block;width:calc(100% - 60px);margin:64px 30px 26px;border:none;border-radius:26px;background:#2b6df6;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer} .meGo:hover{background:#1f5fe0} /* ★ 补：compareTop() 支持灰 ∞（off）但此前缺该样式（发现于第 51 轮校验） */ .mjInf.off{color:#d0d3d9} /* ★ 按墨刀「求职（已支付企业详情）」：富右块（联系人+企业+职级） */ .mpeCmp{color:#f04438} .mpeRight{gap:3px} .mpeAva{width:40px;height:40px;border-radius:50%;background:#e8d9cc;display:grid;place-items:center;font-size:20px} .mpeNmRow{display:flex;align-items:center;gap:4px} .mpePerson{font-size:10px;font-style:normal;background:#f5a623;color:#fff;border-radius:2px;padding:1px 5px} .mpeEnt{font-size:12px;font-weight:600;color:var(--text);font-style:normal;text-align:center;line-height:1.25} .mpeBoss{font-size:9.5px;font-style:normal;background:#2b6df6;color:#fff;border-radius:2px;padding:1px 5px} /* ★ 按墨刀「投诉对方」：顶部支付卡 + 3 列表格复选框 */ .mcHead{display:flex;align-items:center;gap:12px;background:#eef4ff;border-radius:8px;margin:12px;padding:14px} .mcAva{flex:0 0 40px;height:40px;border-radius:8px;background:#fde0e0;display:grid;place-items:center;font-size:20px} .mcMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .mcEnt{font-size:15px;font-weight:700;color:var(--text);font-style:normal} .mcTime{font-size:11px;color:var(--mute);font-style:normal} .mcPay{font-size:13px;color:#f04438;font-style:normal} .mcMetas{font-size:11px;color:var(--mute);font-style:normal} .mcOk{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;color:#12b76a;font-weight:600} .mcTick{width:26px;height:26px;border-radius:50%;border:2px solid #12b76a;color:#12b76a;display:grid;place-items:center;font-size:14px;font-style:normal} .mcSec{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:700;color:var(--text);padding:8px 15px 8px} .mcStar{color:#f04438;font-style:normal} .mcDesc{font-size:13px;color:var(--sub);line-height:1.6;padding:0 15px 14px} .mcTable{margin:0 12px;border:1px solid #e5e6eb;border-radius:6px;overflow:hidden} .mcTr{display:flex;border-bottom:1px solid #e5e6eb} .mcTr:last-child{border-bottom:none} .mcTh{background:#cfe0fb;font-weight:700} .mcTd{flex:1;min-width:0;padding:11px 8px;font-size:12.5px;color:var(--text);display:flex;align-items:center;justify-content:center;text-align:center} .mcTd.mcK{flex:0 0 96px;background:#e8f0fd;justify-content:flex-start;padding-left:12px} .mcTr.mcTh .mcTd{font-size:13px} .mcV{line-height:1.4} .mcCb{width:17px;height:17px;border:1.5px solid #c9cdd4;border-radius:3px;display:grid;place-items:center;font-size:11px;color:#fff;font-style:normal;box-sizing:border-box} .mcCb.on{background:#2b6df6;border-color:#2b6df6} /* ★ 按墨刀「求职详情（首次关闭已支付）」：弹窗双按钮变体 */ .meOps{display:flex;border-top:1px solid #e5e6eb} .meOp{flex:1;border:none;background:transparent;padding:16px 0;font-size:15px;color:var(--text);cursor:pointer} .meOp+.meOp{border-left:1px solid #e5e6eb} .meOp:hover{background:#fafafa} /* ★ 按墨刀「求职（需求方支付须知）」：无标题弹窗 + 黑/蓝双胶囊 */ .pnDlg{width:308px;margin:74px auto 0;background:#fff;border-radius:10px;padding:22px 20px 20px} .pnTx{font-size:13.5px;color:var(--text);line-height:1.75;margin-bottom:20px} .pnSec{font-size:13.5px;color:#2b6df6;font-weight:600;margin-bottom:9px} .pnBox{background:#f4f5f7;border-radius:4px;padding:11px 12px;display:flex;flex-direction:column;gap:7px;margin-bottom:14px} .pnLi{font-size:12.5px;color:var(--sub);line-height:1.55} .pnPrice{text-align:right;font-size:15px;font-weight:700;color:var(--text);margin-bottom:16px} .pnOps{display:flex;gap:10px} .pnWait{flex:1;border:none;border-radius:22px;background:#3a3f47;color:#fff;font-size:14px;font-weight:600;padding:12px 0;cursor:pointer} .pnWait:hover{background:#2d323a} .pnPay{flex:1;border:none;border-radius:22px;background:#2b6df6;color:#fff;font-size:14px;font-weight:600;padding:12px 0;cursor:pointer} .pnPay:hover{background:#1f5fe0} /* ★ 按墨刀「支付中」：6 位密码格 + 确认支付 */ .pgPanel{background:#fff;margin:22px 0 0;padding:74px 30px 60px} .pgBoxes{display:flex;gap:9px;justify-content:center;margin-bottom:44px} .pgBox{flex:1;max-width:52px;height:44px;border:1px solid #d0d3d9;border-radius:2px;box-sizing:border-box} .pgOk{display:block;width:100%;border:none;border-radius:24px;background:#2b6df6;color:#fff;font-size:16px;font-weight:600;padding:14px 0;cursor:pointer} .pgOk:hover{background:#1f5fe0} .pgGray{text-align:center;font-size:15px;color:#c9cdd4;padding:56px 0 0;cursor:pointer} .pgGray+.pgGray{padding-top:26px} /* ★ 按墨刀「求职（支付成功）」：绿勾 + 文本 + 居中胶囊 */ .poDlg{width:288px;margin:118px auto 0;background:#fff;border-radius:10px;padding:20px 20px 18px} .poRow{display:flex;align-items:flex-start;gap:11px;margin-bottom:18px} .poTick{flex:0 0 22px;height:22px;border-radius:50%;background:#12b76a;color:#fff;font-size:13px;display:grid;place-items:center;margin-top:1px} .poTx{flex:1;min-width:0;font-size:13.5px;color:var(--text);line-height:1.7} .poGo{display:block;width:196px;margin:0 auto;border:none;border-radius:22px;background:#2b6df6;color:#fff;font-size:14px;font-weight:600;padding:11px 0;cursor:pointer} .poGo:hover{background:#1f5fe0} /* ★ 按墨刀「支付失败（过期）」：白横条 + 红警告 + 深灰胶囊 */ .mfBar{background:#fff;padding:22px 20px 26px;margin-top:-1px} .mfLine{display:flex;align-items:center;gap:11px;margin-bottom:26px} .mfWarn{font-size:20px;font-style:normal;line-height:1} .mfTx{font-size:15.5px;font-weight:700;color:#f04438;line-height:1.4} .mfGo{display:block;width:calc(100% - 90px);margin:0 auto;border:none;border-radius:22px;background:#3a3f47;color:#fff;font-size:15.5px;font-weight:600;padding:14px 0;cursor:pointer} .mfGo:hover{background:#2d323a} /* ★ 按墨刀「支付失败（自己取消）」：定宽弹窗 + 三胶囊 */ .fcDlg{width:296px;margin:112px auto 0;background:#fff;border-radius:10px;padding:24px 18px 20px} .fcLine{margin-bottom:24px} .fcTx{font-size:15.5px;font-weight:700;color:var(--text);line-height:1.4} .fcOps{display:flex;gap:8px} .fcBack{flex:1;border:none;border-radius:20px;background:#3a3f47;color:#fff;font-size:13px;font-weight:600;padding:11px 0;cursor:pointer} .fcBack:hover{background:#2d323a} .fcStay{flex:1;border:1px solid #2b6df6;border-radius:20px;background:#fff;color:#2b6df6;font-size:13px;font-weight:600;padding:10px 0;cursor:pointer} .fcStay:hover{background:#f2f7ff} .fcAgain{flex:1;border:none;border-radius:20px;background:#2b6df6;color:#fff;font-size:13px;font-weight:600;padding:11px 0;cursor:pointer} .fcAgain:hover{background:#1f5fe0} /* ★ 按墨刀「确认弹窗」：黄底信息回显弹窗 */ .cfDlg{width:308px;margin:52px auto 0;background:#fff;border-radius:10px;padding:20px 0 0;overflow:hidden} .cfBox{background:#fdf6dd;padding:0 0 14px} .cfAva{width:40px;height:40px;border-radius:4px;background:#3a3f47;color:#fff;display:grid;place-items:center;font-size:20px} .cfRole{font-size:12.5px;color:var(--text);font-style:normal;font-weight:600} .cfRow{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 0;border-bottom:1px solid #f2e6bf} .cfRow:last-child{border-bottom:none} .cfK{font-size:12px;color:var(--mute);font-style:normal} .cfV{font-size:14px;font-weight:700;color:var(--text);font-style:normal} /* ★ 确认弹窗标题 —— 用 .cfDlgT 而非 .cfT：后者已被别处占用（撞车，见下） */ .cfDlgT{text-align:center;font-size:16px;color:#9aa1ab;padding:0 0 16px;font-weight:400} /* ★ 确认弹窗头像行 —— 用 .cfDlgHead 而非 .cfHead：后者已被顶栏占用（撞车） */ .cfDlgHead{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 0 14px;border-bottom:1px solid #f2e6bf} /* ★ 按墨刀「搜索（服务）」：搜索框含值 + 蓝渐变 logo 卡片 */ .ssPage{background:#f4f5f7;padding-bottom:20px} .ssBar{display:flex;align-items:center;gap:10px;padding:11px 15px;background:#f4f5f7} .ssBack{flex:0 0 auto;font-size:22px;color:var(--text);cursor:pointer;line-height:1} .ssBox{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:#fff;border-radius:18px;padding:9px 14px} .ssKw{flex:1;min-width:0;font-size:14px;color:var(--text);font-style:normal} .ssClr{flex:0 0 auto;font-size:14px;color:#c9cdd4;font-style:normal;cursor:pointer} .ssList{padding:6px 12px 0;display:flex;flex-direction:column;gap:11px} .ssCard{display:flex;align-items:flex-start;gap:12px;background:#fff;border-radius:9px;padding:14px 13px} .ssLogo{flex:0 0 54px;height:54px;border-radius:7px;background:linear-gradient(135deg,#8fc0f5 0%,#4a9bf5 100%);color:#fff;font-size:12px;display:grid;place-items:center} .ssMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .ssNm{font-size:15.5px;font-weight:700;color:var(--text);font-style:normal} .ssSub{font-size:12px;color:var(--mute);font-style:normal} .ssTags{display:flex;flex-wrap:wrap;gap:6px;font-style:normal} .ssTag{font-style:normal;font-size:11.5px;color:#f5a623} .ssUsed{flex:0 0 auto;font-size:12px;color:var(--mute);font-style:normal} /* ★ 按墨刀「提示：去企业认证」：.meDlg 第 4 变体（✕ + 灰/黄胶囊） */ .jaList{padding:0 12px} .jaDlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:296px;padding:0} .jaT{position:relative;padding:20px 0 0} .jaTtx{display:block} .jaX{position:absolute;right:14px;top:16px;font-size:16px;color:#8f959e;font-style:normal;cursor:pointer} .jaB{padding:30px 22px 32px;text-align:center;font-size:15px;color:var(--text)} .jaOps{display:flex;gap:12px;padding:0 22px 22px} .jaNo{flex:1;border:none;border-radius:22px;background:#f0f1f3;color:var(--text);font-size:15px;font-weight:600;padding:12px 0;cursor:pointer} .jaNo:hover{background:#e6e7ea} .jaYes{flex:1;border:none;border-radius:22px;background:#ffc300;color:#fff;font-size:15px;font-weight:600;padding:12px 0;cursor:pointer} .jaYes:hover{background:#f0b800} /* ★ 按墨刀「我的企业」：蓝/红状态标 + 三列信息 */ .emPage{background:#f4f5f7;padding-bottom:96px} .emClaim{color:#f04438} .emSec{font-size:15px;font-weight:700;color:var(--text);padding:16px 15px 10px} .emCard{background:#fff;border-radius:8px;margin:0 12px 11px;padding:15px} .emTop{display:flex;align-items:center;gap:10px;margin-bottom:16px} .emNm{flex:1;min-width:0;font-size:15.5px;font-weight:700;color:var(--text);font-style:normal} .emSt{flex:0 0 auto;font-size:11.5px;font-weight:600;color:#fff;border-radius:3px;padding:3px 9px;font-style:normal} .emSt.ok{background:#2b6df6} .emSt.warn{background:#f04438} .emCols{display:flex} .emCol{flex:1;display:flex;flex-direction:column;gap:8px;align-items:flex-start} .emK{font-size:12px;color:var(--mute);font-style:normal} .emV{font-size:13.5px;color:#2b6df6;font-style:normal} .emFoot{display:flex;align-items:center;gap:10px;margin-top:16px} .emFootEmpty{margin-top:0;height:0} .emShop{flex:1;min-width:0;font-size:13px;color:var(--mute);font-style:normal} .emBtn{flex:0 0 auto;border:1px solid #2b6df6;background:#fff;color:#2b6df6;font-size:12.5px;border-radius:14px;padding:6px 14px;cursor:pointer} .emBtn:hover{background:#f2f7ff} .emGo{display:block;width:calc(100% - 60px);margin:26px 30px 0;border:none;border-radius:26px;background:#2b6df6;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer;position:fixed;left:0;right:0;bottom:26px} .emGo:hover{background:#1f5fe0} /* ★ 显式语义标记：.emClosed（店铺未开启）—— 颜色沿用 .emShop，此处仅声明以免成为裸类 */ .emClosed{color:var(--mute)} /* ★ 按墨刀「查询企业（认领企业）」 */ .ceBar{display:flex;align-items:center;gap:10px;padding:11px 15px;background:#f4f5f7} .ceBack{flex:0 0 auto;font-size:22px;color:var(--text);cursor:pointer;line-height:1} .ceList{} .ceList2{flex:1;min-width:0;font-size:13px;color:#2b6df6;font-style:normal;cursor:pointer} /* ★ 按墨刀「企业资料」：标签+值行 + 关联店铺 */ .epPage{background:#fff;padding-bottom:96px} .epList{padding:0 15px} .epRow{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:1px solid #f0f1f3} .epK{flex:0 0 72px;font-size:14.5px;color:var(--text);font-style:normal;font-weight:600} .epV{flex:1;min-width:0;font-size:13.5px;color:var(--sub);line-height:1.65;font-style:normal} .epShopRow{padding:0 15px} .epShop{flex:1;min-width:0;display:flex;align-items:center;gap:12px;cursor:pointer;padding:15px 0} .epShopIc{flex:0 0 48px;height:48px;border-radius:6px;background:#fde0e0;display:grid;place-items:center;font-size:26px} .epShopMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .epShopNm{font-size:15px;color:var(--text);font-style:normal} .epShopAddr{font-size:12.5px;color:var(--mute);font-style:normal} .epAr{flex:0 0 auto;font-size:16px;color:#c9cdd4;font-style:normal} .epGo{display:block;width:calc(100% - 60px);margin:26px 30px 0;border:none;border-radius:26px;background:#2b6df6;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer;position:fixed;left:0;right:0;bottom:26px} .epGo:hover{background:#1f5fe0} /* ★ 按墨刀「提示弹窗（认领成功）」：整行按钮的灰字变体 */ .meRow.dim{color:#8f959e} /* ★ 按墨刀「人工认领」：信息行 + 虚线上传框（用 .clm* 避开既有 .cm*） */ .clmPage{background:#fff;padding-bottom:40px} .clmEnt{padding:16px 15px 18px;border-bottom:8px solid #f4f5f7} .clmRows{padding:0 15px} .clmRow{display:flex;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid #f0f1f3} .clmK{flex:0 0 auto;font-size:14.5px;color:var(--text);font-style:normal} .clmV{flex:1;min-width:0;font-size:14px;color:var(--sub);font-style:normal} .clmUpSec{font-size:15px;color:var(--text);padding:20px 15px 14px} .clmUps{display:flex;gap:24px;padding:0 20px} .clmUp{display:flex;flex-direction:column;align-items:center;gap:10px} .clmBox{width:114px;height:74px;border:1px dashed #d0d3d9;border-radius:6px;display:grid;place-items:center;font-size:30px;cursor:pointer;background:#fff} .clmBox:hover{border-color:#2b6df6} .clmBoxFace::after{content:'📄👤'} .clmBoxBack::after{content:'📄🔴'} .clmBoxLic{width:96px;height:96px} .clmBoxLic::after{content:'📄⊕'} .clmLb{font-size:13.5px;color:var(--text);font-style:normal} /* ★ 按墨刀「提交审核」：未上传态（+）上传框 */ .csbPage{background:#fff;padding-bottom:40px} .csbUps{display:flex;gap:20px;justify-content:center;padding:22px 15px 14px} .csbUp{display:flex;flex-direction:column;align-items:center;gap:10px} .csbBox{width:64px;height:64px;border:1px solid #e5e6eb;border-radius:4px;display:grid;place-items:center;font-size:26px;color:#c9cdd4;cursor:pointer;background:#fff} .csbBox:hover{border-color:#2b6df6;color:#2b6df6} .csbLb{font-size:12.5px;color:var(--sub);font-style:normal} .csbTip{text-align:center;font-size:12.5px;color:var(--mute);padding:6px 0 0} .csbGo{display:block;width:calc(100% - 60px);margin:26px 30px 0;border:none;border-radius:26px;background:#2b6df6;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer;position:fixed;left:0;right:0;bottom:26px} .csbGo:hover{background:#1f5fe0} /* ★ 按墨刀「认领名单」：职务+脱敏姓名行；.dim 为偏灰态 */ .crsPage{background:#fff} .crsAdd{color:#f04438} .crsList{padding:0 15px} .crsRow{display:flex;align-items:center;gap:26px;padding:19px 0;border-bottom:1px solid #f0f1f3} .crsK{flex:0 0 auto;font-size:14.5px;font-weight:700;color:var(--text);font-style:normal} .crsV{flex:1;min-width:0;font-size:14px;color:var(--sub);font-style:normal} .crsMore{flex:0 0 auto;font-size:16px;color:#8f959e;font-style:normal;cursor:pointer;letter-spacing:1px} .crsRow.dim .crsK,.crsRow.dim .crsV{color:#9aa1ab;font-weight:400} /* ★ 按墨刀「新增人员」：输入卡 + 黄胶囊（文案被裁） */ .caddPage{background:#f4f5f7;padding-bottom:120px} .caddCard{background:#fff;margin:12px 12px 0;border-radius:8px;padding:17px 15px} .caddK{font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px} .caddIn{width:100%;border:none;outline:none;background:transparent;font-size:14px;color:var(--text);font-family:inherit} .caddIn::placeholder{color:#c9cdd4} .caddGo{display:block;width:calc(100% - 60px);margin:26px 30px 0;border:none;border-radius:26px;background:#ffc300;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer;position:fixed;left:0;right:0;bottom:26px;min-height:48px} .caddGo:hover{background:#f0b800} /* ★ 按墨刀「编辑」：底部动作面板（编辑/删除 + 取消） */ .cetMask{position:fixed;inset:0;background:rgba(0,0,0,.25)} .cetSheet{position:fixed;left:0;right:0;bottom:0;padding:0 10px 10px} .cetCard{background:#fff;border-radius:12px;overflow:hidden;margin-bottom:8px} .cetCancelCard{margin-bottom:0} .cetOp{display:block;width:100%;border:none;background:#fff;padding:17px 0;font-size:16.5px;cursor:pointer} .cetOp:hover{background:#fafafa} .cetOpEdit,.cetOpCancel{color:#2b6df6} .cetOpDel{color:#f04438;border-top:1px solid #e5e6eb} /* ★ 按墨刀「实名认证」：大标题 + 3D 插画头部 */ .craPage{background:#f4f5f7;padding-bottom:120px} .craHead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 20px 20px} .craHeadL{flex:1;min-width:0} .craTitle{font-size:26px;font-weight:700;color:var(--text);margin-bottom:16px} .craDesc{font-size:13.5px;color:var(--sub);line-height:1.7} .craArt{flex:0 0 96px;height:96px;display:grid;place-items:center;font-size:60px} /* ★ 按墨刀「招聘表单」：下划线输入 + 单选 + 选择器 */ .jfPage{background:#fff;padding-bottom:32px} .jfHead{padding:16px 15px 18px;border-bottom:8px solid #f4f5f7;position:relative} .jfTop{display:flex;align-items:center;gap:9px;margin-bottom:10px} .jfAva{flex:0 0 42px;height:42px;border-radius:50%;background:#fde0e0;display:grid;place-items:center;font-size:24px} .jfNm{font-size:16px;font-weight:700;color:var(--text)} .jfBadge{font-size:11.5px;background:#2b6df6;color:#fff;border-radius:3px;padding:3px 9px} .jfSlogan{font-size:13.5px;color:var(--text);margin-bottom:10px} .jfStat{font-size:12.5px;color:#2b6df6;line-height:1.75;max-width:250px} .jfGo{position:absolute;right:15px;top:96px;border:1px solid #2b6df6;background:#fff;color:#2b6df6;font-size:12.5px;border-radius:14px;padding:7px 15px;cursor:pointer} .jfGo:hover{background:#f2f7ff} .jfRow{padding:16px 15px 0} .jfRowBare{padding-bottom:10px} .jfK{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:12px} .jfIn{display:block;width:100%;border:none;border-bottom:1px solid #e5e6eb;outline:none;background:transparent;font-size:14px;color:var(--text);padding:0 0 11px;font-family:inherit} .jfAddr{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e6eb;padding-bottom:11px} .jfBlue{font-size:13px;color:#2b6df6;font-style:normal;cursor:pointer} .jfAge{display:flex;align-items:center;gap:12px} .jfBox{flex:1;min-width:0;border:1px solid #e5e6eb;border-radius:3px;outline:none;font-size:14px;padding:9px 10px;font-family:inherit} .jfTo{flex:0 0 auto;font-size:14px;color:var(--sub);font-style:normal} .jfRadios{display:flex;flex-direction:column;gap:14px;padding-bottom:6px} .jfRadio{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text);cursor:pointer} .jfRadio input{display:none} .jfDot{width:17px;height:17px;border:1.5px solid #c9cdd4;border-radius:50%;display:grid;place-items:center;box-sizing:border-box} .jfRadio input:checked+.jfDot{border-color:#2b6df6} .jfRadio input:checked+.jfDot::after{content:'';width:9px;height:9px;border-radius:50%;background:#2b6df6} .jfPick{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e6eb;padding:0 0 11px;font-size:14px;color:#c9cdd4;cursor:pointer} .jfAr{font-size:16px;color:#c9cdd4;font-style:normal} /* ★ 按墨刀「商城」：本地购首页 */ .mlhPage{background:#f4f5f7;padding-bottom:20px} .mlhHead{background:linear-gradient(180deg,#ffe89a 0%,#fff3c9 100%);padding:12px 15px 14px} .mlhLocRow{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .mlhLoc{font-size:14.5px;color:var(--text)} .mlhScan{font-size:18px;color:#3a3f47} .mlhSearchRow{display:flex;gap:10px} .mlhSearch{flex:1;min-width:0;background:#fff;border-radius:18px;padding:10px 15px;font-size:13.5px;color:#b6b9be} .mlhBtn{flex:0 0 auto;border:none;border-radius:18px;background:#ffc300;color:#fff;font-size:14px;font-weight:600;padding:0 20px;cursor:pointer} .mlhBtn:hover{background:#f0b800} .mlhCats{display:flex;justify-content:space-between;background:#fff3c9;padding:0 12px 14px} .mlhCat{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px} .mlhCatIc{width:52px;height:52px;border-radius:9px;background:#ffc300;display:grid;place-items:center;font-size:26px} .mlhCatLb{font-size:12px;color:var(--text);font-style:normal} .mlhBigs{display:flex;gap:11px;padding:12px 12px 0} .mlhBig{flex:1;min-width:0;border-radius:9px;padding:14px 12px 12px;display:flex;flex-direction:column;gap:10px;position:relative} .mlhBigY{background:#fdf3d0} .mlhBigP{background:#eef1fb} .mlhBigT{font-size:15px;font-weight:700;color:var(--text);font-style:normal} .mlhBigArt{font-size:52px;text-align:center;line-height:1.1} .mlhBigA{font-size:12.5px;color:#f5a623;font-style:normal;cursor:pointer;text-align:right} .mlhBigAvs{display:flex;gap:6px;justify-content:center;align-items:center} .mlhBigAv{width:24px;height:24px;border-radius:50%;background:#dbe4fb;display:grid;place-items:center;font-size:13px;font-style:normal} .mlhBigPlus{width:24px;height:24px;border-radius:50%;background:#2b6df6;color:#fff;display:grid;place-items:center;font-size:14px;font-style:normal} .mlhPhone{font-size:13px;color:var(--sub);padding:16px 15px 10px} .mlhShop{background:#fff;border-radius:9px;margin:0 12px 11px;padding:13px 13px 0} .mlhShopTop{display:flex;align-items:center;gap:8px;margin-bottom:12px} .mlhShopL{flex:0 0 auto;display:flex;flex-direction:column;gap:3px} .mlhTag{font-size:10.5px;background:#ffc300;color:#fff;border-radius:2px;padding:2px 5px;text-align:center} .mlhNew{font-size:9px;background:#f04438;color:#fff;border-radius:2px;padding:1px 4px;text-align:center} .mlhShopR{flex:1;min-width:0;display:flex;align-items:center;gap:8px} .mlhShopNm{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--text);font-style:normal} .mlhDist{flex:0 0 auto;font-size:13px;color:#f04438;font-style:normal} .mlhShopBody{display:flex;gap:11px} .mlhShopAva{flex:0 0 92px;height:92px;border-radius:7px;background:#2b2f36;color:#fff;display:grid;place-items:center;font-size:44px} .mlhShopMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .mlhMeta{font-size:11.5px;color:var(--mute);font-style:normal} .mlhAct{font-size:12.5px;color:#f5a623;font-style:normal} .mlhTags{display:flex;gap:6px;font-style:normal;flex-wrap:wrap} .mlhTag2{font-style:normal;font-size:11px;color:#f5a623;background:#fdf6e6;border-radius:3px;padding:3px 7px} .mlhGoods{display:flex;gap:9px;font-style:normal} .mlhGood{flex:1;min-width:0;background:#f7f8fa;border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px;font-style:normal} .mlhGoodNm{font-size:11px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mlhGoodP{font-size:13px;font-weight:700;color:#f04438} .mlhFoot{font-size:12px;color:var(--mute);padding:12px 0 13px} /* ★ 按墨刀「分类」：左右分栏 + 筛选 + 悬浮购物车 */ .mcaPage{background:#fff;display:flex;flex-direction:column;height:100%} .mcaTop{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#ffe89a 0%,#fff3c9 100%);padding:12px 15px} .mcaSearch{font-size:18px;cursor:pointer} .mcaBody{flex:1;display:flex;min-height:0} .mcaSide{flex:0 0 92px;background:#f4f5f7;overflow-y:auto} .mcaSideIt{padding:16px 8px;font-size:13px;color:var(--sub);text-align:center} .mcaSideIt.on{background:#fff;color:#f5a623;font-weight:700} .mcaMain{flex:1;min-width:0;overflow-y:auto;padding:0 10px 90px} .mcaTabs{display:flex;gap:8px;padding:11px 0 4px;overflow-x:auto} .mcaTab{flex:0 0 auto;font-size:12.5px;color:var(--sub);border:1px solid #e5e6eb;border-radius:14px;padding:5px 13px} .mcaTab.on{background:#ffc300;border-color:#ffc300;color:#fff} .mcaFilterRow{display:flex;align-items:center;justify-content:space-between;padding:12px 0 8px} .mcaGrp{font-size:14px;font-weight:700;color:var(--text);font-style:normal} .mcaFilter{font-size:12.5px;color:var(--sub);font-style:normal;cursor:pointer} .mcaGrpTitle{font-size:14px;font-weight:700;color:var(--text);padding:12px 0 8px} .mcaShop{display:flex;gap:10px;padding:9px 0} .mcaShopAva{flex:0 0 56px;height:56px;border-radius:6px;background:#f7f8fa;display:grid;place-items:center;font-size:28px} .mcaShopMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .mcaShopTop{display:flex;align-items:center;gap:8px;font-style:normal} .mcaShopNm{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--text)} .mcaDist{flex:0 0 auto;font-size:12px;color:#f5a623;font-style:normal} .mcaMeta{font-size:11px;color:var(--mute);font-style:normal} .mcaTags{display:flex;gap:5px;flex-wrap:wrap;font-style:normal} .mcaTag{font-style:normal;font-size:10.5px;color:#f5a623;background:#fdf6e6;border-radius:3px;padding:2px 6px} .mcaCart{position:fixed;right:18px;bottom:26px;width:52px;height:52px;border-radius:50%;border:none;background:#ffc300;font-size:24px;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.16)} .mcaCart:hover{background:#f0b800} /* ★ 按墨刀「标签」：排序栏（卡片复用 .mlhShop*） */ .mltSorts{display:flex;gap:30px;background:#fff;padding:13px 15px;border-bottom:1px solid #f0f1f3} .mltSort{font-size:13.5px;color:var(--sub);cursor:pointer;display:flex;align-items:center;gap:3px} .mltSort.on{color:var(--text);font-weight:600} .mltAr{font-size:11px;font-style:normal} /* ★ 按墨刀「为你推荐」：分组标题（卡片复用 .mlhShop*） */ .mlrGrp{font-size:15px;font-weight:700;color:var(--text);padding:16px 15px 10px} /* ★ 按墨刀「购物车(商城）」：店铺分组 + 商品行 + 结算栏 */ .cmPage2{background:#f4f5f7;padding-bottom:96px} .cmSub{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:14px 15px} .cmAll{font-size:13.5px;color:var(--text)} .cmOps{display:flex;align-items:center;gap:9px} .cmOp{font-size:13.5px;color:var(--sub);font-style:normal;cursor:pointer} .cmSep{font-size:12px;color:#e5e6eb;font-style:normal} .cmGrp{background:#fff;border-radius:8px;margin:10px 12px 0;padding:0 13px} .cmShop{display:flex;align-items:center;gap:9px;padding:14px 0 10px} .cmCb{flex:0 0 17px;height:17px;border:1.5px solid #c9cdd4;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;font-style:normal;box-sizing:border-box;cursor:pointer} .cmCb.on{background:#ffc300;border-color:#ffc300} .cmShopIc{font-size:15px} .cmShopNm{font-size:14px;font-weight:700;color:var(--text);font-style:normal} .cmItem{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #f7f8fa} .cmImg{flex:0 0 62px;height:62px;border-radius:6px;background:#fdf3d0;display:grid;place-items:center;font-size:28px} .cmMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .cmNm{font-size:13px;color:var(--text);line-height:1.45;font-style:normal} .cmSpec{font-size:11.5px;color:var(--mute);font-style:normal} .cmPrice{font-size:15px;color:#f04438;font-style:normal} .cmQty{flex:0 0 auto;display:flex;align-items:center;border:1px solid #e5e6eb;border-radius:3px;overflow:hidden} .cmQBtn{width:26px;height:24px;display:grid;place-items:center;font-size:14px;color:#c9cdd4;background:#fafafa;font-style:normal;cursor:pointer} .cmQNum{width:30px;height:24px;display:grid;place-items:center;font-size:12.5px;color:var(--text);font-style:normal} .cmFoot{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;background:#fff;padding:11px 13px;border-top:1px solid #f0f1f3} .cmFootL{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .cmSum{font-size:13.5px;color:var(--text);font-weight:600;font-style:normal} .cmSub2{font-size:11px;color:var(--mute);font-style:normal} .cmFootMid{flex:0 0 auto;display:flex;align-items:center;gap:6px} .cmAllLb{font-size:12.5px;color:var(--sub);font-style:normal} .cmPay{flex:0 0 auto;border:none;border-radius:20px;background:#ffc300;color:#fff;font-size:14px;font-weight:600;padding:10px 20px;cursor:pointer} .cmPay:hover{background:#f0b800} /* ★ 按墨刀「店铺详情」 */ .sdHead{padding:18px 15px 14px;background:linear-gradient(180deg,#ffe89a 0%,#fff9e2 100%)} .sdNm{font-size:18px;font-weight:700;color:var(--text);margin-bottom:14px} .sdStats{display:flex;gap:34px;margin-bottom:12px} .sdStat{display:flex;flex-direction:column;gap:5px} .sdSk{font-size:11.5px;color:var(--sub);font-style:normal} .sdSv{font-size:15px;color:#f04438;font-weight:600;font-style:normal} .sdTip{font-size:12px;color:var(--mute);margin-bottom:11px} .sdPromo{display:inline-block;font-size:12.5px;color:#fff;background:#f5a623;border-radius:4px;padding:5px 11px} .sdTabs{display:flex;gap:30px;padding:13px 15px;border-bottom:1px solid #f0f1f3} .sdTab{font-size:14.5px;color:var(--sub);cursor:pointer;padding-bottom:4px} .sdTab.on{color:var(--text);font-weight:700;border-bottom:2px solid #f5a623} .sdBody{display:flex;min-height:0} .sdSide{flex:0 0 100px;background:#f7f8fa} .sdSideIt{padding:16px 8px;font-size:13px;color:var(--sub);text-align:center} .sdSideIt.on{background:#fff;color:var(--text);font-weight:700} .sdMain{flex:1;min-width:0;padding:0 12px 24px} .sdGrp{font-size:14px;font-weight:700;color:var(--text);padding:13px 0 9px} .sdGood{display:flex;gap:11px;align-items:center;padding:8px 0} .sdGoodImg{flex:0 0 78px;height:78px;border-radius:6px;background:#fdf3d0;display:grid;place-items:center;font-size:36px} .sdGoodMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .sdGoodNm{font-size:13.5px;color:var(--text);font-style:normal} .sdGoodP{font-size:14px;color:#f04438;font-style:normal} /* ★ 按墨刀「领取优惠券」：深绿优惠券卡（cpg* 前缀） */ .cpgCard{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:310px;background:#1b4b3f;border-radius:4px;padding:22px 18px 20px;text-align:center} .cpgT{font-size:14.5px;color:#fff;margin-bottom:18px} .cpgBox{background:#fff;border-radius:2px;padding:22px 0 18px;margin-bottom:16px;display:flex;align-items:flex-start;justify-content:center;gap:4px} .cpgY{font-size:22px;color:#1b4b3f;font-style:normal;margin-top:12px} .cpgN{font-size:76px;font-weight:700;color:#1b4b3f;line-height:1;font-style:normal} .cpgSub{font-size:14px;color:#2f6b58;margin-bottom:20px} .cpgGo{display:block;width:200px;margin:0 auto;border:none;border-radius:2px;background:#fff;color:#1b4b3f;font-size:15.5px;font-weight:600;padding:13px 0;cursor:pointer} .cpgGo:hover{background:#f2f7f5} /* ★ 按墨刀「评价」：店铺评价列表 */ .srevHead{padding:18px 15px 14px;background:linear-gradient(180deg,#ffe89a 0%,#fff9e2 100%)} .srevHeadTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .srevNm{flex:1;min-width:0;font-size:18px;font-weight:700;color:var(--text)} .srevShop{flex:0 0 74px;height:74px;border-radius:8px;background:#fde0e0;display:grid;place-items:center;font-size:40px} .srevStats{display:flex;gap:34px;margin-bottom:12px} .srevStat{display:flex;flex-direction:column;gap:5px} .srevSk{font-size:11.5px;color:var(--sub);font-style:normal} .srevSv{font-size:15px;color:#f04438;font-weight:600;font-style:normal} .srevTags{display:flex;gap:8px;flex-wrap:wrap} .srevTag{font-size:12.5px;color:#fff;background:#f5a623;border-radius:4px;padding:5px 11px} .srevTabs{display:flex;align-items:center;gap:30px;padding:13px 15px;border-bottom:1px solid #f0f1f3} .srevTab{font-size:14.5px;color:var(--sub);cursor:pointer;padding-bottom:4px} .srevTab.on{color:var(--text);font-weight:700;border-bottom:2px solid #f5a623} .srevFilter{margin-left:auto;font-size:13px;color:var(--sub);cursor:pointer} .srevCard{padding:16px 15px;border-bottom:8px solid #f4f5f7} .srevTop{display:flex;align-items:center;gap:10px;margin-bottom:10px} .srevAva{flex:0 0 34px;height:34px;border-radius:50%;background:#dbe4fb;display:grid;place-items:center;font-size:18px} .srevNm2{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--text)} .srevDate{flex:0 0 auto;font-size:12px;color:var(--mute);font-style:normal} .srevScore{font-size:15px;font-weight:700;color:#F58020;margin-bottom:10px} .srevTx{font-size:13.5px;color:var(--text);line-height:1.6;margin-bottom:12px} .srevImgs{display:flex;gap:9px;margin-bottom:12px} .srevImg{flex:0 0 62px;height:62px;border-radius:5px;background:#f0f1f3;display:grid;place-items:center;font-size:22px;color:#c9cdd4} .srevGood{display:flex;align-items:center;gap:6px;background:#f7f8fa;border-radius:5px;padding:9px 11px} .srevGoodK{flex:0 0 auto;font-size:12.5px;color:var(--mute);font-style:normal} .srevGoodV{flex:1;min-width:0;font-size:12.5px;color:var(--text);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srevMore{flex:0 0 auto;font-size:12.5px;color:var(--sub);font-style:normal;cursor:pointer} /* ★ 按墨刀「筛选」：底部筛选面板 */ .sflMask{position:fixed;inset:0;background:rgba(0,0,0,.28)} .sflPanel{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:12px 12px 0 0;padding:18px 20px 0} .sflTh{position:relative;text-align:center;padding-bottom:20px} .sflT{font-size:16px;font-weight:700;color:var(--text);font-style:normal} .sflX{position:absolute;right:0;top:0;font-size:17px;color:#8f959e;font-style:normal;cursor:pointer} .sflSec{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:12px} .sflOpts{display:flex;gap:12px;margin-bottom:22px} .sflOpt{flex:1;text-align:center;font-size:13.5px;color:var(--sub);background:#f4f5f7;border-radius:4px;padding:11px 0;cursor:pointer} .sflOpt.on{background:#ffc300;color:#fff;font-weight:600} .sflRange{display:flex;align-items:center;gap:12px;margin-bottom:26px} .sflBox{flex:1;min-width:0;border:none;background:#f7f8fa;border-radius:4px;text-align:center;font-size:14px;color:var(--text);padding:12px 0;outline:none;font-family:inherit} .sflDash{flex:0 0 auto;font-size:13px;color:#c9cdd4;font-style:normal} .sflFoot{display:flex;border-top:1px solid #f0f1f3;margin:0 -20px} .sflCancel{flex:1;border:none;background:#fff;color:var(--text);font-size:16px;padding:17px 0;cursor:pointer} .sflOk{flex:1;border:none;background:#ffc300;color:#fff;font-size:16px;font-weight:600;padding:17px 0;cursor:pointer} .sflOk:hover{background:#f0b800} /* ★ 按墨刀「商家」：空页 + 星级 */ .smerPage{background:#fff;min-height:100%} .smerBlank{height:180px} .smerStars{display:flex;align-items:center;gap:5px;padding:0 0 0 26px} .smerStarOn{font-size:19px;color:#FFC300;font-style:normal} .smerStarOff{font-size:19px;color:#e5e6eb;font-style:normal} .smerScore{font-size:14px;color:var(--sub);font-style:normal;margin-left:9px} /* ★ 按墨刀「店铺照片」：3 个图片占位 */ .sphPage{background:#fff;min-height:100%} .sphList{padding:24px 26px 40px;display:flex;flex-direction:column;gap:30px} .sphImg{height:190px;background:#e9eaec;border-radius:4px;display:grid;place-items:center;font-size:26px;color:#b6b9be} /* ★ 按墨刀「关联企业」：企业介绍段（复用 .ep*） */ .sreIntroSec{font-size:14.5px;font-weight:700;color:var(--text);padding:18px 15px 12px;border-top:8px solid #f4f5f7} .sreIntroTx{font-size:13.5px;color:var(--sub);line-height:1.75;padding:0 15px 30px} /* ★ 按墨刀「企业资质」：证照弹层 + 轮播点 */ .eqMask{position:fixed;inset:0;background:rgba(0,0,0,.3)} .eqPanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:326px;background:#fff;border-radius:4px;padding:18px 16px 16px} .eqTh{position:relative;text-align:center;padding-bottom:18px} .eqT{font-size:17px;font-weight:700;color:var(--text);font-style:normal} .eqX{position:absolute;right:0;top:0;font-size:17px;color:#3a3f47;font-style:normal;cursor:pointer} .eqImg{background:#fff;border:1px solid #e5e6eb;padding:8px;margin-bottom:16px} .eqLic{display:grid;place-items:center;height:200px;background:#fafbfc;color:#b6b9be;font-size:14px;letter-spacing:2px} .eqDots{display:flex;justify-content:center;gap:9px} .eqDot{width:6px;height:6px;border-radius:50%;background:#d0d3d9;font-style:normal} .eqDot.on{background:#3a3f47} /* goods detail page (gdt prefix) */ .gdtPage{background:#fff;padding-bottom:26px} .gdtImg{position:relative;height:300px;background:#f7f8fa;display:grid;place-items:center;font-size:120px} .gdtPageNo{position:absolute;right:14px;bottom:14px;font-size:12px;color:#fff;background:rgba(0,0,0,.45);border-radius:10px;padding:3px 10px} .gdtPriceRow{display:flex;align-items:baseline;gap:12px;padding:16px 15px 12px} .gdtPrice{font-size:23px;font-weight:700;color:#f04438} .gdtOld{font-size:14px;color:var(--mute);text-decoration:line-through} .gdtSales{margin-left:auto;font-size:12.5px;color:var(--mute)} .gdtTags{display:flex;gap:8px;padding:0 15px 10px;flex-wrap:wrap} .gdtTag{font-size:11.5px;color:#fff;background:#ffc300;border-radius:3px;padding:4px 9px} .gdtNm{font-size:14.5px;color:var(--text);line-height:1.6;padding:0 15px 16px} .gdtOps{display:flex;gap:11px;padding:0 15px 16px} .gdtOp{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #e5e6eb;border-radius:6px;background:#fff;color:var(--text);font-size:14px;padding:13px 0;cursor:pointer} .gdtOp:hover{background:#fafafa} .gdtInfo{border-top:1px solid #f0f1f3;padding:0 15px} .gdtInfoRow{display:flex;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid #f0f1f3} .gdtInfoK{flex:0 0 auto;font-size:14px;color:var(--sub);font-style:normal} .gdtInfoV{flex:1;min-width:0;font-size:13.5px;color:var(--text);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gdtShop{display:flex;align-items:center;gap:12px;margin:14px 15px 0;padding:14px;background:#f7f8fa;border-radius:8px} .gdtShopIc{flex:0 0 44px;height:44px;border-radius:6px;background:#fde0e0;display:grid;place-items:center;font-size:24px} .gdtShopMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .gdtShopNm{font-size:15px;font-weight:700;color:var(--text);font-style:normal} .gdtShopAddr{font-size:12px;color:var(--mute);font-style:normal} .gdtShopDist{flex:0 0 auto;font-size:14px;color:var(--text);font-style:normal} .gdtNav{flex:0 0 auto;font-size:18px;color:#3a3f47;font-style:normal;cursor:pointer} /* goods spec panel */ .gspPanel{background:#fff;margin-top:8px;padding:16px 15px 30px} .gspGood{display:flex;gap:12px;margin-bottom:20px} .gspGoodImg{flex:0 0 96px;height:96px;border-radius:6px;background:#fdf3d0;display:grid;place-items:center;font-size:44px} .gspGoodMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px} .gspGoodNm{font-size:14px;color:var(--text);line-height:1.5;font-style:normal} .gspGoodP{font-size:19px;color:#f04438;font-style:normal} .gspSec{font-size:14.5px;color:var(--text);margin-bottom:12px} .gspOpts{display:flex;gap:12px;margin-bottom:22px;flex-wrap:wrap} .gspOpt{font-size:13.5px;color:var(--sub);background:#f4f5f7;border-radius:4px;padding:10px 22px;cursor:pointer} .gspOpt.on{background:#ffc300;color:#fff;font-weight:600} .gspQty{display:inline-flex;align-items:center;border:1px solid #e5e6eb;border-radius:3px;overflow:hidden} /* shop cart bottom sheet */ .cshMask{position:fixed;inset:0;background:rgba(0,0,0,.34)} .cshSheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:12px 12px 0 0;padding:14px 15px 0} .cshTop{position:relative;text-align:center;padding-bottom:16px} .cshClear{position:absolute;left:0;top:0;font-size:13.5px;color:var(--mute);font-style:normal;cursor:pointer} .cshT{font-size:16px;font-weight:700;color:var(--text);font-style:normal} .cshX{position:absolute;right:0;top:0;font-size:17px;color:#3a3f47;font-style:normal;cursor:pointer} .cshItem{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #f7f8fa} .cshImg{flex:0 0 68px;height:68px;border-radius:6px;background:#fdf3d0;display:grid;place-items:center;font-size:32px} .cshMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .cshNm{font-size:13.5px;color:var(--text);line-height:1.45;font-style:normal} .cshSpec{font-size:12px;color:var(--mute);font-style:normal} .cshP{font-size:16px;color:#f04438;font-style:normal} .cshBar{display:flex;align-items:center;gap:14px;padding:13px 0 16px;border-top:1px solid #f0f1f3} .cshAsk{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:16px;cursor:pointer} .cshAsk i{font-size:10.5px;color:var(--sub);font-style:normal} .cshCart{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer} .cshCart i{font-size:10.5px;color:var(--sub);font-style:normal} .cshCartIc{font-size:17px;font-style:normal} .cshBadge{position:absolute;top:-5px;right:-10px;background:#f04438;color:#fff;font-size:10px;font-style:normal;border-radius:9px;padding:1px 5px;line-height:1.4} .cshSum{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-end} .cshSumP{font-size:16px;font-weight:700;color:#f04438;font-style:normal} .cshShip{font-size:10.5px;color:var(--mute);font-style:normal} .cshGo{flex:0 0 auto;border:none;border-radius:22px;background:#ffc300;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;cursor:pointer} .cshGo:hover{background:#f0b800} /* goods chat */ .gchPage{background:#ededed;min-height:100%;display:flex;flex-direction:column} .gchTop{display:flex;align-items:center;gap:9px;background:#ededed;padding:10px 15px} .gchAva{flex:0 0 32px;height:32px;border-radius:6px;background:#fde0e0;display:grid;place-items:center;font-size:18px} .gchNm{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text);font-style:normal} .gchIcons{flex:0 0 auto;display:flex;gap:16px;font-size:17px;cursor:pointer} .gchDate{text-align:center;font-size:11.5px;color:#9aa1ab;padding:10px 0 14px} .gchMsg{display:flex;align-items:flex-start;gap:9px;padding:0 15px 16px} .gchMsgL{justify-content:flex-start} .gchMsgR{justify-content:flex-end} .gchAva2{flex:0 0 30px;height:30px;border-radius:5px;background:#fde0e0;display:grid;place-items:center;font-size:16px} .gchBub{max-width:228px;background:#fff;border-radius:6px;padding:11px 13px;font-size:14px;color:var(--text);line-height:1.55} .gchBar{display:flex;align-items:center;gap:11px;background:#f7f8fa;padding:10px 15px;margin-top:auto} .gchVoice{flex:0 0 auto;font-size:19px;cursor:pointer} .gchIn{flex:1;min-width:0;border:none;outline:none;background:#fff;border-radius:5px;padding:10px 13px;font-size:14px;font-family:inherit} .gchEmoji{flex:0 0 auto;font-size:19px;cursor:pointer} .gchPlus{flex:0 0 auto;font-size:21px;color:#5a6068;cursor:pointer} .gchPanel{display:flex;gap:24px;background:#f7f8fa;padding:18px 24px 26px} .gchPanIt{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer} .gchPanIc{width:62px;height:62px;border-radius:8px;background:#fff;display:grid;place-items:center;font-size:26px} .gchPanLb{font-size:12px;color:var(--sub);font-style:normal} /* neighbor ask */ .naPage{background:#fff;padding-bottom:86px} .naTip{display:flex;align-items:center;gap:9px;padding:14px 15px;border-bottom:1px solid #f0f1f3} .naTipIc{flex:0 0 auto;font-size:19px} .naTipTx{flex:1;min-width:0;font-size:13.5px;color:#2b6df6;font-style:normal} .naList{} .naCard{padding:16px 15px;border-bottom:8px solid #f4f5f7} .naQRow{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px} .naQIc{flex:0 0 26px;height:26px;border-radius:50%;background:#f04438;color:#fff;font-size:13px;display:grid;place-items:center} .naQTx{flex:1;min-width:0;font-size:13.5px;color:var(--text);line-height:1.6;font-style:normal} .naARow{display:flex;align-items:center;gap:9px} .naAva{flex:0 0 28px;height:28px;border-radius:50%;background:#dbe4fb;display:grid;place-items:center;font-size:15px} .naBought{flex:0 0 auto;font-size:11px;color:var(--sub);background:#f0f1f3;border-radius:3px;padding:3px 7px;font-style:normal} .naATx{flex:1;min-width:0;font-size:13px;color:var(--sub);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .naMore{font-size:12.5px;color:#f04438;padding:12px 0 0 36px;cursor:pointer} .naBar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:11px;background:#fff;padding:10px 13px;border-top:1px solid #f0f1f3} .naGoodImg{flex:0 0 40px;height:40px;border-radius:5px;background:#fdf3d0;display:grid;place-items:center;font-size:20px} .naGoodNm{flex:1;min-width:0;font-size:13px;color:var(--text);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .naAsk{flex:0 0 auto;border:none;border-radius:20px;background:#e9eaec;color:var(--text);font-size:14px;font-weight:600;padding:11px 20px;cursor:pointer} .naAsk:hover{background:#dfe1e5} .naBuy{flex:0 0 auto;border:none;border-radius:20px;background:#ffc300;color:#fff;font-size:14px;font-weight:600;padding:11px 20px;cursor:pointer} .naBuy:hover{background:#f0b800} /* price compare map */ .pcPage{background:#fff;display:flex;flex-direction:column;min-height:100%} .pcMap{position:relative;flex:1;min-height:520px;background:#eef1f4;overflow:hidden;background-image:linear-gradient(#e3e8ee 1px,transparent 1px),linear-gradient(90deg,#e3e8ee 1px,transparent 1px);background-size:56px 56px} .pcMark{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:96px} .pcMarkImg{width:60px;height:60px;border-radius:5px;background:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.16);display:grid;place-items:center;font-size:28px} .pcRank{margin-top:-3px;font-size:11px;color:#fff;background:#2b6df6;border-radius:3px;padding:3px 9px;font-style:normal} .pcPrice{font-size:13px;font-weight:700;color:#f04438;font-style:normal} .pcPin{margin-top:8px;font-size:17px;font-style:normal} .pcFoot{display:flex;align-items:center;gap:12px;padding:14px 15px;border-top:1px solid #f0f1f3;background:#fff} .pcFootImg{flex:0 0 58px;height:58px;border-radius:6px;background:#fdf3d0;display:grid;place-items:center;font-size:28px} .pcFootMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px} .pcFootNm{font-size:13.5px;color:var(--text);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pcShop{font-size:11.5px;color:var(--mute);font-style:normal} .pcSales{font-size:11.5px;color:var(--mute);font-style:normal} .pcFootP{flex:0 0 auto;font-size:18px;font-weight:700;color:#f04438;font-style:normal} /* publish neighbor question */ .npMask{position:fixed;inset:0;background:rgba(0,0,0,.38)} .npPanel{position:fixed;left:0;right:0;top:150px;bottom:0;background:#fff;border-radius:10px 10px 0 0;padding:0 12px 22px;display:flex;flex-direction:column} .npGood{display:flex;align-items:center;gap:11px;padding:14px 0;border-bottom:1px solid #f0f1f3} .npGoodImg{flex:0 0 44px;height:44px;border-radius:5px;background:#fdf3d0;display:grid;place-items:center;font-size:22px} .npGoodNm{flex:1;min-width:0;font-size:13.5px;color:var(--text);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .npX{flex:0 0 auto;font-size:17px;color:#3a3f47;font-style:normal;cursor:pointer;padding-left:8px} .npInput{flex:1;display:flex;align-items:flex-start;gap:11px;padding:18px 0} .npQ{flex:0 0 26px;height:26px;border-radius:50%;background:#f04438;color:#fff;font-size:13px;display:grid;place-items:center} .npPh{flex:1;min-width:0;font-size:13.5px;color:#b6b9be;font-style:normal;padding-top:4px} .npGo{width:100%;border:none;border-radius:6px;background:#ffc300;color:#fff;font-size:16px;font-weight:600;padding:16px 0;cursor:pointer} .npGo:hover{background:#f0b800} /* neighbor answer list */ .nanQ{display:flex;align-items:flex-start;gap:10px;padding:16px 15px;background:#f7f8fa} .nanQTx{flex:1;min-width:0;font-size:13.5px;color:var(--text);line-height:1.6;font-style:normal} .nanList{} .nanCard{padding:15px 15px 13px;border-bottom:8px solid #f4f5f7} .nanTop{display:flex;align-items:center;gap:9px;margin-bottom:13px} .nanAva{flex:0 0 34px;height:34px;border-radius:50%;background:#dbe4fb;display:grid;place-items:center;font-size:18px} .nanNm{flex:0 0 auto;font-size:13.5px;color:var(--text);font-weight:600;font-style:normal} .nanTx{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:14px} .nanBot{display:flex;align-items:center;justify-content:space-between} .nanDate{font-size:12.5px;color:var(--mute);font-style:normal} .nanOps{display:flex;gap:22px} .nanOp{font-size:12.5px;color:var(--sub)} /* neighbor comments sheet */ .ncmMask{position:fixed;inset:0;background:rgba(0,0,0,.32)} .ncmPanel{position:fixed;left:0;right:0;bottom:0;top:340px;background:#fff;border-radius:12px 12px 0 0;padding:0 15px;display:flex;flex-direction:column;overflow-y:auto} .ncmTop{position:relative;text-align:center;padding:17px 0 14px} .ncmT{font-size:16px;font-weight:700;color:var(--text);font-style:normal} .ncmX{position:absolute;right:0;top:15px;font-size:17px;color:#3a3f47;font-style:normal;cursor:pointer} .ncmCard{padding:14px 0 16px} .ncmCardLine{border-top:1px solid #f0f1f3} .ncmHead{display:flex;align-items:center;gap:9px;margin-bottom:11px} .ncmAva{flex:0 0 34px;height:34px;border-radius:50%;background:#dbe4fb;display:grid;place-items:center;font-size:18px} .ncmNm{flex:1;min-width:0;font-size:13.5px;color:var(--text);font-style:normal} .ncmDate{flex:0 0 auto;font-size:12.5px;color:var(--mute);font-style:normal} .ncmTx{font-size:13.5px;color:var(--text);line-height:1.6;padding-left:43px} .ncmEnd{text-align:center;font-size:12.5px;color:var(--mute);padding:22px 0 30px} /* comment-op dialog: 仅负责把复用的 .meDlg 居中定位 */ .ncoDlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0} /* address list sheet */ .adrMask{position:fixed;inset:0;background:rgba(0,0,0,.3)} .adrPanel{position:fixed;left:0;right:0;bottom:0;top:250px;background:#fff;border-radius:12px 12px 0 0;padding:0 15px 24px;display:flex;flex-direction:column;overflow-y:auto} .adrTop{position:relative;text-align:center;padding:18px 0 16px} .adrT{font-size:16px;font-weight:700;color:var(--text);font-style:normal} .adrX{position:absolute;right:0;top:16px;font-size:17px;color:#3a3f47;font-style:normal;cursor:pointer} .adrCard{background:#f7f8fa;border-radius:8px;padding:15px 14px;margin-bottom:12px} .adrL1{display:flex;align-items:center;gap:8px;margin-bottom:10px} .adrPin{flex:0 0 auto;font-size:15px} .adrNm{flex:0 0 auto;font-size:14.5px;font-weight:700;color:var(--text);font-style:normal} .adrTel{flex:0 0 auto;font-size:13.5px;color:var(--sub);font-style:normal} .adrL2{font-size:13px;color:var(--sub);line-height:1.5;margin-bottom:13px;padding-left:23px} .adrL3{display:flex;align-items:center;justify-content:space-between;padding-left:23px} .adrDef{display:flex;align-items:center;gap:8px} .adrDot{width:17px;height:17px;border:1.5px solid #c9cdd4;border-radius:50%;box-sizing:border-box;font-style:normal;display:grid;place-items:center} .adrDot.on{border-color:#ffc300;background:#ffc300} .adrDefTx{font-size:13px;color:var(--sub);font-style:normal} .adrActs{display:flex;gap:18px} .adrAct{font-size:15px;font-style:normal;cursor:pointer} .adrAdd{width:100%;margin-top:6px;border:none;border-radius:26px;background:#ffc300;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer} .adrAdd:hover{background:#f0b800} /* add address form (reuses .jf*) */ .aadPage{background:#fff;padding-bottom:40px} .aadAddrRow{display:flex;align-items:center;gap:10px;border-bottom:1px solid #e5e6eb;padding-bottom:11px} .aadArea{border-bottom:none;padding-bottom:0} .aadPin{flex:0 0 auto;font-size:17px;font-style:normal;cursor:pointer} .aadSave{display:block;width:calc(100% - 96px);margin:34px auto 0;border:none;border-radius:26px;background:#ffc300;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer} .aadSave:hover{background:#f0b800} /* mall goods search */ .msgPage{background:#fff;min-height:100%} .msgBox{display:flex;align-items:center;gap:9px;background:#eef1f6;border-radius:6px;margin:12px 15px 0;padding:10px 13px} .msgIc{flex:0 0 auto;font-size:15px;color:#8f959e} .msgPh{flex:1;min-width:0;font-size:14px;color:#b6b9be;font-style:normal} .msgBtn{flex:0 0 auto;font-size:14.5px;color:var(--text);font-style:normal;cursor:pointer} .msgHisRow{display:flex;align-items:center;gap:9px;padding:24px 15px 14px} .msgBar{flex:0 0 3px;height:15px;background:#2b6df6;border-radius:2px} .msgHisT{flex:1;min-width:0;font-size:14.5px;color:var(--text);font-style:normal} .msgTrash{flex:0 0 auto;font-size:16px;color:#8f959e;font-style:normal;cursor:pointer} .msgTags{display:flex;flex-wrap:wrap;gap:12px;padding:0 15px} .msgTag{font-size:13px;color:var(--text);background:#f0f1f3;border-radius:15px;padding:8px 16px;cursor:pointer} .msgTag:hover{background:#e6e7ea} /* mall goods search detail (reuses .csh* bar) */ .msdPage{background:#fff;padding-bottom:80px} .msdSorts{display:flex;align-items:center;gap:34px;padding:15px 15px 14px;border-bottom:1px solid #f0f1f3} .msdSort{font-size:14px;color:var(--sub);cursor:pointer} .msdSort.on{color:var(--text);font-weight:700} .msdList{padding:0 15px} .msdRow{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #f4f5f7} .msdImg{flex:0 0 76px;height:76px;border-radius:6px;background:#fdf3d0;display:grid;place-items:center;font-size:34px} .msdMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .msdNm{font-size:13.5px;color:var(--text);line-height:1.45;font-style:normal} .msdSales{font-size:11.5px;color:var(--mute);font-style:normal} .msdP{font-size:16px;font-weight:700;color:#f04438;font-style:normal} .msdRight{flex:0 0 auto;display:flex;align-items:center} .msdAdd{width:26px;height:26px;border-radius:50%;background:#ffc300;color:#fff;font-size:17px;display:grid;place-items:center;font-style:normal;cursor:pointer} .msdQty{display:flex;align-items:center;gap:12px} .msdQBtn{font-size:19px;color:#ffc300;font-style:normal;cursor:pointer} .msdQNum{font-size:15px;color:var(--text);font-style:normal;min-width:14px;text-align:center} /* order submit */ .osPage{background:#f4f5f7;padding-bottom:30px} .osTabs{display:flex;background:#f0f1f3} .osTab{flex:1;text-align:center;font-size:15px;color:var(--sub);padding:15px 0;cursor:pointer} .osTab.on{background:#fff;color:var(--text);font-weight:700} .osAddr{background:#fff;padding:16px 15px 18px;margin-bottom:9px} .osAddrTop{display:flex;align-items:center;gap:9px;margin-bottom:11px} .osAddrPin{flex:0 0 auto;font-size:15px} .osAddrNm{flex:0 0 auto;font-size:15px;font-weight:700;color:var(--text);font-style:normal} .osAddrTel{flex:1;min-width:0;font-size:14px;color:var(--sub);font-style:normal} .osAr{flex:0 0 auto;font-size:16px;color:#c9cdd4;font-style:normal} .osAddrTx{font-size:13.5px;color:var(--text);line-height:1.6;padding-left:24px} .osShop{display:flex;align-items:center;gap:9px;background:#fff;padding:15px 15px 13px} .osShopIc{font-size:16px} .osShopNm{font-size:14.5px;font-weight:700;color:var(--text);font-style:normal} .osSend{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:0 15px 14px;border-bottom:1px solid #f4f5f7} .osSendK{font-size:13.5px;color:var(--sub);font-style:normal} .osSendV{font-size:13.5px;color:#F58020;font-style:normal;font-weight:600} .osGoods{background:#fff;padding:0 15px} .osG{display:flex;align-items:center;gap:11px;padding:12px 0} .osGImg{flex:0 0 62px;height:62px;border-radius:6px;background:#fdf3d0;display:grid;place-items:center;font-size:28px} .osGMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .osGNm{font-size:13px;color:var(--text);line-height:1.4;font-style:normal} .osGSpec{font-size:11.5px;color:var(--mute);font-style:normal} .osGSku{flex:0 0 auto;font-size:12.5px;color:var(--mute);font-style:normal} .osGP{flex:0 0 62px;text-align:right;font-size:13.5px;color:var(--text);font-style:normal} .osMore{text-align:center;font-size:12.5px;color:var(--mute);background:#fff;padding:12px 0 16px;cursor:pointer} .osFees{background:#fff;margin-top:9px;padding:0 15px} .osFee{display:flex;align-items:center;gap:10px;padding:16px 0;border-bottom:1px solid #f4f5f7} .osFeeK{flex:1;min-width:0;font-size:14px;color:var(--text);font-style:normal} .osFeeV{flex:0 0 auto;font-size:14px;color:var(--text);font-style:normal} .osFeeRed{color:#f04438} .osTotal{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:18px 15px 24px} .osTotalK{font-size:14.5px;color:var(--text);font-style:normal} .osTotalV{font-size:19px;font-weight:700;color:#f04438;font-style:normal} /* cashier */ .cshPage2{background:#f4f5f7;padding-bottom:30px} .cshCard{background:#fff;border-radius:10px;margin:14px 15px;padding:26px 20px 20px} .cshAmtK{text-align:center;font-size:14.5px;color:var(--text);margin-bottom:14px} .cshAmt{text-align:center;font-size:30px;font-weight:700;color:var(--text);margin-bottom:18px} .cshTimer{text-align:center;font-size:12.5px;color:var(--sub);margin-bottom:28px} .cshTimer b{color:var(--text);font-weight:700} .cshSec{font-size:14px;color:var(--sub);margin-bottom:6px} .cshPay{display:flex;align-items:center;gap:11px;padding:19px 0;border-bottom:1px solid #f4f5f7} .cshPayLast{border-bottom:none;padding-bottom:12px} .cshPayIc{flex:0 0 auto;font-size:19px} .cshPayNm{flex:1;min-width:0;font-size:14.5px;color:var(--text);font-style:normal} .cshRadio{flex:0 0 auto;width:19px;height:19px;border:1.5px solid #c9cdd4;border-radius:50%;box-sizing:border-box;font-style:normal} .cshRadio.red{border-color:#f04438;background:#f04438;box-shadow:inset 0 0 0 3px #fff} .cshAddCard{flex:0 0 auto;font-size:12.5px;color:var(--mute);font-style:normal;cursor:pointer;margin-right:14px} .cshBank{display:flex;align-items:center;gap:11px;padding:12px 0 14px 30px} .cshBankNm{flex:1;min-width:0;font-size:13.5px;color:var(--text);font-style:normal} .cshPayGo{display:block;width:calc(100% - 130px);margin:30px auto 0;border:none;border-radius:26px;background:#ffc300;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer} .cshPayGo:hover{background:#f0b800} /* pay password keypad */ .ppMask{position:fixed;inset:0;background:rgba(0,0,0,.42)} .ppPanel{position:fixed;left:0;right:0;bottom:0;top:390px;background:#fff;border-radius:10px 10px 0 0;display:flex;flex-direction:column} .ppTop{position:relative;display:flex;align-items:center;padding:18px 15px 20px} .ppBack{flex:0 0 auto;font-size:22px;color:var(--text);font-style:normal;cursor:pointer;line-height:1} .ppT{position:absolute;left:0;right:0;text-align:center;font-size:16.5px;font-weight:700;color:var(--text);font-style:normal;pointer-events:none} .ppBoxes{display:flex;padding:0 15px} .ppBox{flex:1;height:52px;border:1px solid #e5e6eb;border-right:none;box-sizing:border-box} .ppBox:last-child{border-right:1px solid #e5e6eb} .ppForgot{text-align:right;font-size:13px;color:var(--sub);padding:14px 15px 0;cursor:pointer} .ppKeys{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e5e6eb;margin-top:auto;padding-top:1px} .ppKey{background:#fff;height:56px;display:grid;place-items:center;font-size:22px;color:var(--text);cursor:pointer;user-select:none} .ppKey:active{background:#f0f1f3} .ppKeyWide{background:#f0f1f3;cursor:default} .ppDel{background:#f0f1f3;border-radius:5px;margin:6px 24px;height:44px;font-size:18px} /* create pay password (first time) */ .ppcPage{background:#fff;display:flex;flex-direction:column;min-height:100%} .ppcTitle{font-size:24px;font-weight:700;color:var(--text);padding:26px 15px 12px} .ppcSub{font-size:13px;color:var(--sub);padding:0 15px 30px} .ppcBoxes{display:flex;gap:14px;padding:0 15px 26px} .ppcBox{flex:1;height:52px;border-radius:6px;background:#f2f3f5} .ppcDesc{font-size:12.5px;color:var(--sub);line-height:1.7;padding:0 15px 20px} .ppcKeys{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e5e6eb;margin-top:auto;padding-top:1px} .ppcKey{background:#fff;height:62px;display:grid;place-items:center;font-size:23px;color:var(--text);cursor:pointer;user-select:none} .ppcKey:active{background:#f0f1f3} .ppcBlank{background:#e9eaec;cursor:default} .ppcDel{background:#e9eaec;font-size:20px} /* discover feed */ .dfdPage{background:#000;display:flex;flex-direction:column;min-height:100%;position:relative} .dfdTop{display:flex;align-items:center;gap:22px;background:#ffc300;padding:12px 15px} .dfdTab{font-size:16px;color:rgba(255,255,255,.82);cursor:pointer;padding-bottom:4px} .dfdTab.on{color:#fff;font-weight:700;border-bottom:2px solid #fff} .dfdIcons{margin-left:auto;display:flex;gap:18px;font-size:19px;color:#fff;cursor:pointer} .dfdVideo{flex:1;min-height:520px;background:#2b2f36;display:grid;place-items:center;font-size:110px;position:relative} .dfdStats{position:absolute;right:12px;bottom:130px;display:flex;flex-direction:column;align-items:center;gap:20px} .dfdStat{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:24px;color:#fff} .dfdStatN{font-size:11.5px;font-style:normal;color:#fff} .dfdCyc{font-size:26px;color:#fff} .dfdBottom{padding:12px 15px 10px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55))} .dfdUser{display:flex;align-items:center;gap:9px;margin-bottom:11px} .dfdAva{flex:0 0 30px;height:30px;border-radius:50%;background:#dbe4fb;display:grid;place-items:center;font-size:16px} .dfdUName{flex:0 0 auto;font-size:14.5px;font-weight:600;color:#fff;font-style:normal} .dfdFollow{flex:0 0 auto;font-size:12.5px;color:#fff;background:#2b6df6;border-radius:13px;padding:5px 15px;cursor:pointer} .dfdShop{display:flex;align-items:center;gap:9px} .dfdShopIc{flex:0 0 28px;height:28px;border-radius:5px;background:#fde0e0;display:grid;place-items:center;font-size:15px} .dfdShopNm{flex:0 0 auto;font-size:13.5px;color:#fff;font-style:normal} .dfdBadge{flex:0 0 auto;font-size:11px;color:#fff;background:#2b6df6;border-radius:3px;padding:3px 7px;font-style:normal} .dfdCircle{margin-left:auto;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#c8a24a;display:grid;place-items:center;font-size:22px;cursor:pointer} .dfdShopAddr{font-size:11.5px;color:rgba(255,255,255,.85);padding:7px 0 0 37px} .dfdTabbar{display:flex;background:#fff} .dfdTabIt{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 7px;font-size:11px;color:var(--sub)} .dfdTabIt.on{color:#ffc300;font-weight:600} .dfdTabIc{font-size:19px;font-style:normal} /* video detail */ .vdPage{background:#000;display:flex;flex-direction:column;min-height:100%;position:relative} .vdBack{position:absolute;left:12px;top:14px;font-size:24px;color:#fff;font-style:normal;cursor:pointer;z-index:2;line-height:1} .vdVideo{flex:1;min-height:600px;background:#3a4a5e;display:grid;place-items:center;font-size:120px} .vdInfo{padding:14px 15px 12px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))} .vdUser{display:flex;align-items:center;gap:9px;margin-bottom:13px} .vdAva{flex:0 0 30px;height:30px;border-radius:50%;background:#dbe4fb;display:grid;place-items:center;font-size:16px} .vdName{flex:0 0 auto;font-size:14.5px;font-weight:600;color:#fff;font-style:normal} .vdFollow{flex:0 0 auto;font-size:12.5px;color:#fff;background:#2b6df6;border-radius:13px;padding:5px 15px;cursor:pointer} .vdDesc{font-size:13.5px;color:#fff;line-height:1.6;margin-bottom:13px} .vdLocRow{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .vdLoc{font-size:12.5px;color:#fff} .vdViews{flex:0 0 auto;font-size:12.5px;color:#fff;font-style:normal} .vdBar{display:flex;align-items:center;gap:14px} .vdCmtIn{flex:1;min-width:0;font-size:13px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.18);border-radius:17px;padding:10px 15px;cursor:pointer} .vdOps{flex:0 0 auto;display:flex;gap:18px} .vdOp{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:22px;color:#fff} .vdOpN{font-size:11px;font-style:normal;color:#fff} /* video detail with shop link (reuses .vd* + .dfdShop*) */ .vdlShop{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border-radius:8px;padding:11px 12px} .vdlMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .vdlAddr{font-size:11.5px;color:rgba(255,255,255,.85);font-style:normal} .vdlGo{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:15px;color:#fff;font-style:normal;cursor:pointer} /* article detail (atd prefix) */ .atdPage{background:#fff;padding-bottom:30px} .atdTop{display:flex;align-items:center;gap:9px;padding:12px 15px} .atdAva2{flex:0 0 28px;height:28px;border-radius:50%;background:#dbe4fb;display:grid;place-items:center;font-size:15px} .atdNm{flex:1;min-width:0;text-align:center;font-size:15px;color:var(--text);font-style:normal} .atdFollowO{flex:0 0 auto;font-size:12.5px;color:#2b6df6;border:1px solid #2b6df6;border-radius:13px;padding:4px 14px;cursor:pointer;box-sizing:border-box} .atdCover{height:420px;background:#87b8d8;display:grid;place-items:center;font-size:120px} .atdTitle{font-size:16px;font-weight:700;color:var(--text);line-height:1.6;padding:18px 15px 14px} .atdBody{padding:0 15px} .atdP{font-size:14px;color:var(--text);line-height:1.85;margin-bottom:22px} /* discover video search: 5th history item without chip background */ .dsvPlain{margin:14px 15px 0;font-size:13.5px;color:var(--text);cursor:pointer} /* discover video search result / empty */ .dscTabs{display:flex;gap:26px;padding:16px 15px 12px} .dscTab{font-size:15px;color:var(--sub);cursor:pointer;padding-bottom:5px} .dscTab.on{color:var(--text);font-weight:700;border-bottom:2px solid #ffc300} .dscGrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0 15px} .dscCard{background:#fff;border-radius:6px;overflow:hidden} .dscCover{position:relative;height:160px;background:#dfe6ee;display:grid;place-items:center;font-size:62px} .dscPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:13px;font-style:normal;display:grid;place-items:center} .dscTitle{font-size:12.5px;color:var(--text);line-height:1.5;padding:10px 10px 8px} .dscMeta{display:flex;align-items:center;gap:6px;padding:0 10px 12px} .dscAva3{flex:0 0 20px;height:20px;border-radius:50%;background:#dbe4fb;display:grid;place-items:center;font-size:11px} .dscAuthor{flex:1;min-width:0;font-size:11.5px;color:var(--sub);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dscLike{flex:0 0 auto;font-size:11.5px;color:var(--sub);font-style:normal} .dscEmptyPanel{height:60px;background:#f7f8fa;margin:0 15px;border-radius:6px} .dscEmptyTx{text-align:center;font-size:15px;color:#b6b9be;padding:60px 0 0} /* discover publish + shop pick */ .pubPage{background:#fff;padding-bottom:30px} .pubTitle{display:block;width:100%;border:none;outline:none;font-size:15px;color:var(--text);padding:18px 15px;font-family:inherit;border-bottom:1px solid #f4f5f7} .pubTitle::placeholder{color:#b6b9be} .pubBody{display:block;width:100%;border:none;outline:none;font-size:15px;color:var(--text);padding:18px 15px 120px;font-family:inherit} .pubBody::placeholder{color:#b6b9be} .pubUps{display:flex;gap:14px;padding:0 15px} .pubUp{width:110px;height:110px;background:#f2f3f5;border-radius:8px;display:grid;place-items:end center;padding-bottom:12px} .pubUpLb{font-size:12.5px;color:var(--sub);font-style:normal} .pubHint{font-size:12px;color:var(--mute);padding:14px 15px 18px} .pubRow{display:flex;align-items:center;gap:12px;padding:18px 15px;border-top:1px solid #f4f5f7} .pubRowK{flex:0 0 auto;font-size:14.5px;color:var(--text)} .pubRowV{flex:1;min-width:0;text-align:right;font-size:13.5px;color:var(--sub);font-style:normal} .pubRowMine{flex:1;min-width:0;text-align:right;font-size:13.5px;color:#f5a623;font-style:normal} .pubRowMine b{font-weight:400} .pubGoWrap{padding:26px 48px 0} .pslBox{} .pslList{padding:12px 15px 0} .pslCard{background:#fff;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:13px;margin-bottom:12px} .pslTop{display:flex;gap:12px} .pslImg{flex:0 0 92px;height:92px;border-radius:6px;background:#fde0e0;display:grid;place-items:center;font-size:44px;font-weight:700} .pslMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .pslNm{font-size:14.5px;font-weight:700;color:var(--text);font-style:normal} .pslMeta{font-size:11.5px;color:var(--mute);font-style:normal} .pslTags{display:flex;gap:6px;flex-wrap:wrap;font-style:normal} .pslTag{font-style:normal;font-size:11px;color:#f5a623;background:#fdf6e6;border-radius:3px;padding:3px 7px} .pslPick{flex:0 0 20px;height:20px;border:1.5px solid #d0d3d9;border-radius:50%;box-sizing:border-box;font-style:normal} .pslPick.on{border-color:#f04438;background:#f04438;box-shadow:inset 0 0 0 3px #fff} .pslGoods{display:flex;gap:9px;padding:11px 0 0 0;font-style:normal} .pslGood{flex:1;background:#f7f8fa;border-radius:5px;padding:8px 10px;font-style:normal} .pslGo{position:fixed;left:0;right:0;bottom:0;padding:11px 48px 16px;background:#fff;border-top:1px solid #f0f1f3} .pssPlain{} /* shop search (no button) */ .mssBox{display:flex;align-items:center;gap:9px;background:#eef1f6;border-radius:6px;margin:12px 15px 0;padding:10px 13px} .mssPh{flex:1;min-width:0;font-size:14px;color:#b6b9be;font-style:normal} .mssTags{} /* 实名认证底部按钮：照实拍是**直角矩形**（非胶囊），且撑满内容区 */ .craGo{display:block;width:100%;margin:26px 0 0;border:none;border-radius:4px;background:#ffc300;color:#fff;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer;position:fixed;left:0;right:0;bottom:0;min-height:50px} .craGo:hover{background:#f0b800} /* 服务卡片可点（推补跳转后） */ .shRow[data-go]{cursor:pointer} .shRow[data-go]:active{background:#f7f8fa} /* 阶段A 推补：模块入口导航块 */ .fnavBox{margin:14px 12px 0;background:#fff;border:1px dashed #f0c674;border-radius:9px;padding:13px 13px 15px} .fnavH b{display:block;font-size:13px;color:#b7791f;margin-bottom:4px} .fnavH span{display:block;font-size:11px;color:#9aa1ab;line-height:1.6;margin-bottom:11px} .fnavList{display:flex;flex-wrap:wrap;gap:8px} .fnavIt{font-size:12px;color:#2b6df6;background:#eef3ff;border-radius:14px;padding:6px 12px;cursor:pointer} .fnavIt:hover{background:#dde8ff} /* 阶段B-6b 推补：流程下一步 */ .jfnBox{margin:14px 12px 0;background:#eef6ff;border:1px dashed #7fb0f0;border-radius:9px;padding:13px} .jfnH b{display:block;font-size:13px;color:#2b6df6;margin-bottom:4px} .jfnH span{display:block;font-size:11px;color:#9aa1ab;line-height:1.6;margin-bottom:11px} .jfnBox>.jfnIt{display:block;background:#fff;border-radius:7px;padding:10px 12px;margin-bottom:8px;cursor:pointer} .jfnBox>.jfnIt:last-child{margin-bottom:0} .jfnIt i{display:block;font-size:11px;color:#9aa1ab;font-style:normal;margin-bottom:3px} .jfnIt b{font-size:13.5px;color:#2b6df6;font-weight:600} .jfnIt:hover{background:#f5f9ff} /* 阶段 B-22：nav 块「查看全部」按钮 */ .fnavIt.fnavMore{background:#fff7e6;color:#b7791f;font-weight:600} .fnavIt.fnavMore:hover{background:#fff1cf} /* ============================================================================ ★★ 阶段 C-2：重要信息栏（业务方：整个软件的重点之一） 顶栏最左铃铛 → **悬窗置前**；已阅/处理后回退到铃铛里。 ============================================================================ */ .impMask{position:fixed;inset:0;background:rgba(15,23,42,.42);display:none;z-index:60; align-items:flex-start;justify-content:center;padding-top:74px} .impMask.show{display:flex} .impWin{width:344px;max-height:78%;background:#fff;border-radius:16px;overflow:hidden; display:flex;flex-direction:column;box-shadow:0 18px 48px rgba(15,23,42,.28); animation:impDrop .22s ease-out} @keyframes impDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}} .impH{display:flex;align-items:center;gap:8px;padding:13px 14px;background:#2b6df6;color:#fff} .impH b{font-size:15px;font-weight:700;flex:1} .impCnt{font-size:11px;background:rgba(255,255,255,.22);padding:2px 8px;border-radius:9px;font-weight:600} .impX{border:none;background:none;color:#fff;font-size:15px;cursor:pointer;padding:0 2px;line-height:1} .impNote{padding:9px 14px;font-size:11.5px;color:#667085;background:#f7f9fc;line-height:1.7; border-bottom:1px solid #eef0f3} .impNote b{color:#2b6df6} .impScroll{overflow-y:auto;padding:2px 0} .impIt{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid #f2f4f7;align-items:flex-start} .impIt.read{opacity:.6} .impIc{font-size:19px;flex:0 0 auto;line-height:1.25} .impBd{flex:1;min-width:0} .impT{font-size:13.5px;font-weight:600;color:#1f2329;line-height:1.5} .impS2{font-size:11.5px;color:#667085;line-height:1.65;margin-top:3px} .impFt{display:flex;gap:8px;align-items:center;margin-top:6px} .impTag{font-size:10.5px;background:#eef3ff;color:#2b6df6;padding:1px 7px;border-radius:7px;font-weight:600} .impTime{font-size:10.5px;color:#98a2b3} .impActs{display:flex;flex-direction:column;gap:6px;flex:0 0 auto} .impGo{border:none;background:#2b6df6;color:#fff;font-size:11.5px;font-weight:600; padding:5px 9px;border-radius:8px;cursor:pointer;white-space:nowrap} .impRd{border:1px solid #d0d5dd;background:#fff;color:#667085;font-size:11.5px; padding:5px 9px;border-radius:8px;cursor:pointer;white-space:nowrap} .impSec{padding:10px 14px 5px;font-size:11.5px;font-weight:600;color:#98a2b3;background:#fafbfc} .impEmpty{padding:26px 14px;text-align:center;font-size:12.5px;color:#98a2b3} .impF{padding:10px 14px;border-top:1px solid #eef0f3;background:#fff} .impAll{width:100%;border:none;background:#f2f4f7;color:#475467;font-size:12.5px;font-weight:600; padding:9px;border-radius:10px;cursor:pointer} .impAll:hover{background:#e9ecf1} /* ============================================================================ ★ 阶段 C-5~C-8：引导式搜索框（业务方） 输入服务名/关键词 → 先弹出**相关小程序名称一列**，再选一个进入；支持语音。 ============================================================================ */ .gsRow{display:flex;gap:8px;align-items:flex-start;margin-bottom:12px} .gsWrap{flex:1;position:relative;min-width:0} .gsBox{display:flex;align-items:center;gap:8px;background:#fff;border-radius:11px; padding:9px 11px;box-shadow:0 1px 2px rgba(16,24,40,.06)} .gsIc{font-size:15px;flex:0 0 auto} .gsIn{flex:1;min-width:0;border:none;outline:none;font-size:13px;color:#1f2329;background:none} .gsIn::placeholder{color:#98a2b3} .gsMic{border:none;background:none;font-size:16px;cursor:pointer;padding:0 2px;line-height:1} .gsMore{flex:0 0 auto;width:40px;height:40px;border:none;border-radius:11px;background:#fff; font-size:19px;color:#475467;cursor:pointer;line-height:1;box-shadow:0 1px 2px rgba(16,24,40,.06)} .gsMore:hover{background:#f2f4f7} .gsPanel{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30; background:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,.16); max-height:330px;overflow-y:auto} .gsPanel.show{display:block} .gsHd{padding:9px 12px;font-size:11.5px;color:#667085;background:#f7f9fc;border-bottom:1px solid #eef0f3} .gsHd b{color:#2b6df6} .gsIt{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid #f2f4f7;cursor:pointer} .gsIt:hover{background:#f7f9fc} .gsItIc{font-size:18px;flex:0 0 auto} .gsItBd{flex:1;min-width:0} .gsItN{font-size:13.5px;font-weight:600;color:#1f2329} .gsItS{font-size:11px;color:#98a2b3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gsItGo{font-size:11.5px;color:#2b6df6;font-weight:600;flex:0 0 auto} .gsEmpty{padding:20px 12px;text-align:center;font-size:12px;color:#98a2b3;line-height:1.7} /* ★ 业务方第 4 条：搜索框「↑」提交提示（有输入时才出现） */ .gsGo{display:none;flex:0 0 auto;border:none;background:var(--brand);color:#fff; width:28px;height:28px;border-radius:50%;font-size:15px;font-weight:700; cursor:pointer;line-height:1;padding:0;margin-left:3px; place-items:center} .gsGo:hover{filter:brightness(1.08)} /* ★ 业务方：搜索无匹配 → 「发起新建小程序」入口（启动小程序配置流程） */ .gsCreate{display:block;width:100%;margin-top:10px;border:none;background:var(--brand-soft); color:var(--brand);font-size:12.5px;font-weight:600;padding:9px;border-radius:10px;cursor:pointer} .gsCreate:hover{background:#dbe7fb} /* ★ 业务方：「创建服务」按钮 —— 横排、黑字、小字号、按钮样式 */ .svcCreate{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 11px; border:1px solid #d0d5dd;border-radius:14px;background:#fff;color:#1f2329; font-size:12px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap} .svcCreate:hover{background:#f2f4f7} /* ============================================================================ ★ 业务方（手写图）：小程序的呈现方式 —— **黑色成对文字**（招聘 | 求职）， 不用彩色圆标。下面几条覆盖前面的旧样式。 ============================================================================ */ .svcGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 10px;padding:0 14px 12px} /* 每一项占满单元格；文字一律左对齐；NEW 靠单元格右侧 → 前后各段排列一致、整齐 */ .svcTile{display:flex;align-items:center;gap:6px;border:none;background:none;cursor:pointer; padding:5px 2px;text-align:left;width:100%;min-height:26px} .svcPair{font-size:14px;color:#1f2329;font-weight:500;letter-spacing:.2px;white-space:nowrap; flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .svcPair i{font-style:normal;color:#c8cdd8;margin:0 7px;font-weight:400} .svcNewTag{font-style:normal;font-size:9px;background:#f04438;color:#fff;border-radius:3px; padding:0 4px;line-height:15px;font-weight:700;flex:0 0 auto;margin-left:auto} /* ★ 业务方：服务动态里把电话号换成**人名 / 身份**（「某某村」+ 姓名），来自数据库 */ .hlFwho{font-size:12.5px;color:#1f2329;font-weight:600} .hlFwho .hlForg{font-style:normal;font-size:11px;color:#98a2b3;font-weight:400;margin-right:5px} /* ★ 业务方：服务动态的三个点击区 —— 色标 / 「使用【XX】」/ 其他区域 */ .hlF{cursor:pointer} .hlFtag{cursor:pointer} .hlFside{cursor:pointer;color:#2b6df6} .hlFside:active{opacity:.6} /* ★ 业务方：结果名称（员工 / 房源 / 顺路车 / 老师）—— 由用户在生成器里配置， 做成"配置出来的属性"的观感：浅蓝底 + 蓝字 + 加粗 */ /* ============================================================================ ★ 业务方：服务动态一条**只占两行**。 第 1 行右端 = 时间（float:right 占位）；其余文字是一条**连续文字流**， 从第 1 行开始排，排到接近时间处自动折行，第 2 行剩多少填多少。 故：不用 flex，全部 inline；容器高度卡死两行。 ============================================================================ */ .hlFbd{flex:1;min-width:0;font-size:12px;color:#86909c;line-height:20px; max-height:40px;overflow:hidden} /* ★ 每一个小块都要 nowrap —— 否则会被从中间截断（「耗时10秒」→「耗时10」/「秒」）。 块与块之间靠 HTML 里的**空格**断行。 */ .hlFtm{float:right;font-size:11px;color:#a8b0bd;line-height:20px;white-space:nowrap} .hlFwho{font-size:12.5px;color:#1f2329;font-weight:600;white-space:nowrap} .hlFside{cursor:pointer;color:#2b6df6;white-space:nowrap} .hlFside:active{opacity:.6} .hlFcost{font-size:10.5px;background:#eef3ff;color:#2b6df6;border-radius:5px; padding:1px 6px;white-space:nowrap} .hlFlead{white-space:nowrap} /* ★ 业务方（按截图）：关键项 = 【关键词】加粗，嵌在句子里，不用底色 */ .hlK{font-weight:700;color:#1f2329;white-space:nowrap} /* 结果名称：由用户在生成器里配置 —— 接在「的」之后，句尾，加粗强调 */ .hlFtail{color:#86909c;white-space:nowrap} .hlFres{font-style:normal;font-weight:700;color:#1f2329;white-space:nowrap} .hlFl1,.hlFl2, /* ============================================================================ ★★ 业务方：「空白页是软件的重要页面」—— 空态组件样式 空态必须回答：① 为什么空 ② 下一步做什么 ============================================================================ */ .empty{text-align:center;padding:44px 22px;color:var(--mute);font-size:13px} .empty .ei{font-size:42px;display:block;margin-bottom:12px;opacity:.55} .empty .em-t{font-size:14.5px;color:#1f2329;font-weight:600;margin-bottom:6px} .empty .em-d{font-size:12.5px;color:#98a2b3;line-height:1.6;margin-bottom:14px} .empty .em-go{margin:0 auto} /* ============================================================================ ★ 业务方：直播模块（**自研** · 墨刀无实拍）—— 直播广场卡片 + 礼物面板 ============================================================================ */ .liveGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;padding:0 14px} .liveCard{border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.07);cursor:pointer} .liveCover{position:relative;height:104px;display:grid;place-items:center;background:linear-gradient(135deg,#eef3ff,#e8f7f0)} .liveBig{font-size:38px} .liveTag{position:absolute;left:7px;top:7px;font-size:10px;font-weight:700;color:#fff; background:#f04438;border-radius:5px;padding:1px 6px;line-height:15px} .liveT{font-size:12.5px;font-weight:600;color:#1f2329;line-height:1.4;padding:7px 9px 0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .liveM{display:flex;justify-content:space-between;gap:6px;font-size:10.5px;color:#98a2b3;padding:4px 9px 9px} .liveM span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .giftGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .giftCell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px; border:1px solid #eef0f3;border-radius:9px;background:#fcfcfd;cursor:pointer} .giftCell:active{background:#eef3ff} .giftIc{font-size:24px;line-height:1.1} .giftN{font-size:11px;color:#1f2329} .giftP{font-size:10px;color:#f79009;font-weight:600} /* ★ 照实拍「发现.png」右下角的圆形转盘 = 原声入口（抖音惯例：点它进原声页） */ .vd-disc{position:absolute;right:12px;bottom:104px;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.35); cursor:pointer;animation:vdSpin 6s linear infinite} .vd-disc-i{font-size:19px;line-height:1} .vd-disc-n{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%); font-size:9.5px;color:#fff;white-space:nowrap;max-width:70px;overflow:hidden; text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.7)} @keyframes vdSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} /* ============================================================================ ★ 商品**讲解悬浮卡**（参考抖音）—— 浮在直播画面上，不占版面 与「购物袋」区分：讲解卡 = 当前这一件的即时露出（悬浮·单个）； 购物袋 = 本场全部商品的列表（独立页·可翻） ============================================================================ */ .vgb{position:absolute;left:10px;bottom:56px;width:212px;border-radius:11px;overflow:hidden; background:rgba(20,22,26,.82);backdrop-filter:blur(6px);color:#fff;z-index:6; box-shadow:0 4px 16px rgba(0,0,0,.35)} .vgb-top{display:flex;align-items:center;gap:6px;padding:4px 8px;background:rgba(240,68,56,.9)} .vgb-badge{font-size:10px;font-weight:700;letter-spacing:.3px} .vgb-num{font-size:10px;opacity:.85} .vgb-fold{margin-left:auto;background:none;border:none;color:#fff;font-size:12px;cursor:pointer;padding:0 2px} .vgb-body{display:flex;align-items:center;gap:8px;padding:8px} .vgb-img{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.14); display:grid;place-items:center;font-size:19px;flex:0 0 36px} .vgb-info{flex:1;min-width:0} .vgb-name{display:block;font-size:11.5px;font-weight:600;line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vgb-price{display:block;font-size:11px;color:#ffd100;margin-top:2px} .vgb-price s{color:rgba(255,255,255,.45);font-size:10px;margin-left:4px} .vgb-buy{flex:0 0 auto;background:#ffd100;color:#1f2329;border:none;border-radius:7px; font-size:11.5px;font-weight:700;padding:6px 11px;cursor:pointer} .vgb-mini{position:absolute;left:10px;bottom:56px;z-index:6} .vgb-mini button{background:rgba(20,22,26,.82);color:#fff;border:none;border-radius:9px; padding:7px 11px;font-size:11.5px;cursor:pointer} /* 弹幕区上移，给悬浮卡让位（.live-comments 目前只用于直播间） */ .live-comments{bottom:132px} /* ============================================================================ ★ 直播 PK（主播连线对战 · 参考抖音）—— 分屏 + 进度条 + VS ============================================================================ */ .pkSplit{position:absolute;left:0;right:0;top:38px;bottom:96px;display:flex;gap:2px} .pkSide{flex:1;position:relative;display:grid;place-items:center;font-size:40px; background:linear-gradient(180deg,rgba(43,109,246,.18),rgba(0,0,0,.25))} .pkSide.r{background:linear-gradient(180deg,rgba(240,68,56,.18),rgba(0,0,0,.25))} .pkVs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7; background:#ffd100;color:#1f2329;font-weight:800;font-size:12px;border-radius:50%; width:34px;height:34px;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.4)} .pkBar{position:absolute;left:10px;right:10px;top:44px;z-index:7} .pkBarT{display:flex;justify-content:space-between;font-size:11px;color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7);margin-bottom:4px} .pkBarT b{font-size:12.5px} .pkTrack{height:9px;border-radius:5px;background:rgba(240,68,56,.85);overflow:hidden;display:flex} .pkFill{background:#2b6df6;height:100%} .pkTag{position:absolute;left:8px;bottom:8px;font-size:10.5px;color:#fff; background:rgba(0,0,0,.45);border-radius:6px;padding:2px 7px} /* ============================================================================ ★ 服务模块 · 按实拍重做的 5 页所需样式 ============================================================================ */ /* 消息（照实拍：两组消息） */ .msgsPage{background:#f5f6f8;min-height:100%} .msgsGrp{background:#fff;margin:10px 12px;border-radius:8px;overflow:hidden} .msgsFrom{display:flex;align-items:center;gap:8px;padding:11px 12px 4px} .msgsIc{font-size:16px;line-height:1} .msgsNm{font-size:14px;font-weight:600;color:#1f2329} .msgsTm{margin-left:auto;font-size:11.5px;color:#98a2b3} .msgsRow{display:flex;align-items:center;gap:8px;padding:11px 12px;border-top:1px dashed #eef0f3} .msgsRow:first-of-type{border-top:none} .msgsTx{flex:1;min-width:0;font-size:13px;color:#4e5969;line-height:1.45} .msgsAct{flex:0 0 auto;font-size:13px;color:#2b6df6;cursor:pointer} .msgsDot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#f7ba1e} /* 企业数据（照实拍：服务统计蓝条 + 违约记录） */ .mdBar{margin:12px;background:#e8f0ff;color:#1f2329;font-size:13px; border-radius:8px;padding:11px 13px;line-height:1.5} .mdBar i{color:#98a2b3;font-style:normal;margin:0 4px} .mdBar b{color:#2b6df6} .mdTm{font-size:12.5px;color:#98a2b3;margin-bottom:6px} .mdTx{font-size:13.5px;color:#1f2329;line-height:1.6} .mdK{color:#2b6df6} /* 补充条件选项（照实拍：粗体引导句 + 大灰底输入 + 蓝色胶囊提交） */ .sceT{font-size:15px;font-weight:700;color:#1f2329;padding:18px 16px 10px} .sceTa{display:block;width:calc(100% - 32px);margin:0 16px;min-height:150px; background:#f2f3f5;border:none;border-radius:8px;padding:13px;font-size:14px; color:#1f2329;font-family:inherit;resize:none;box-sizing:border-box} .sceTa::placeholder{color:#b6b9be} .sceGo{display:block;width:calc(100% - 32px);margin:18px 16px 0;height:44px; border:none;border-radius:22px;background:#3b7ef0;color:#fff;font-size:16px; font-weight:600;cursor:pointer} /* 详情页右上「确认订单」红字 */ .mpeOrder{color:#f04438} /* ★ 照实拍「待付款」：顶部支付剩余红条 + 底部支付动作 */ .ouBar{display:flex;align-items:center;gap:6px;background:#fff;padding:14px 15px;border-bottom:1px solid #f0f1f3} .ouIc{color:#f04438;font-size:15px} .ouK{font-size:14px;color:#1f2329;font-style:normal} .ouV{margin-left:auto;font-size:15px;font-weight:600;color:#f04438;font-style:normal;letter-spacing:.5px} .ouActs{display:flex;gap:10px;padding:12px 15px 18px} .ouCancel{flex:1;height:42px;border:1px solid #dcdfe6;background:#fff;border-radius:21px; font-size:14px;color:#4e5969;cursor:pointer} .ouPay{flex:2;height:42px;border:none;background:#ffd100;border-radius:21px; font-size:15px;font-weight:700;color:#1f2329;cursor:pointer} /* ★ 照实拍：订单状态页的「订单信息」段 + 实付款 + 底部动作 */ .odSec{margin:14px 15px 0;padding-left:9px;border-left:3px solid #1f2329; font-size:14px;font-weight:600;color:#1f2329;line-height:1.2} .odRow{display:flex;gap:10px;padding:9px 15px;align-items:flex-start} .odK{flex:0 0 74px;font-size:13.5px;color:#98a2b3;font-style:normal} .odV{flex:1;min-width:0;font-size:13.5px;color:#1f2329;font-style:normal;text-align:right} .odV2{text-align:right;line-height:1.5} .odGP{flex:0 0 auto;text-align:right} .odQty{display:block;font-size:12px;color:#98a2b3;font-style:normal;margin-top:2px} .odPaid{display:flex;align-items:center;padding:11px 15px;border-top:1px solid #f0f1f3} .odPaidK{flex:1;font-size:13.5px;color:#1f2329;font-style:normal} .odPaidV{font-size:15px;font-weight:700;color:#f04438;font-style:normal} .odActs{display:flex;gap:10px;justify-content:flex-end;padding:14px 15px 18px} .odAgain{height:36px;padding:0 18px;border:1px solid #dcdfe6;background:#fff; border-radius:18px;font-size:13.5px;color:#1f2329;cursor:pointer} .odReview{height:36px;padding:0 18px;border:none;background:#e8f0ff; border-radius:18px;font-size:13.5px;color:#2b6df6;cursor:pointer} /* ★ 照实拍：取消订单状态条 + 取消原因弹层 */ .ocBar{display:flex;align-items:center;background:#fff;padding:13px 15px; font-size:13.5px;color:#1f2329;border-bottom:1px solid #f0f1f3} .ocIc{margin-left:auto;font-style:normal;font-size:14px;opacity:.5} .ocsPage{background:#f0f1f3;min-height:100%} .ocsSheet{background:#fff;border-radius:14px 14px 0 0;margin-top:14px;padding-bottom:8px} .ocsHead{display:flex;align-items:center;padding:16px 15px 10px} .ocsT{flex:1;text-align:center;font-size:16px;font-weight:600;color:#1f2329;padding-left:22px} .ocsX{background:none;border:none;font-size:20px;color:#4e5969;cursor:pointer;line-height:1} .ocsList{border-radius:8px;overflow:hidden;margin:0 12px} .ocsRow{display:flex;align-items:center;gap:10px;padding:14px 13px;background:#fff; border-bottom:1px solid #f5f6f8;cursor:pointer} .ocsRow:last-child{border-bottom:none} .ocsTx{flex:1;min-width:0;font-size:14px;color:#1f2329} .ocsRadio{flex:0 0 auto;width:17px;height:17px;border-radius:50%; border:1.5px solid #dcdfe6;box-sizing:border-box} .ocsRadio.on{border:5px solid #2b6df6} .ocsGo{display:block;width:calc(100% - 30px);margin:18px 15px 8px;height:46px; border:none;border-radius:6px;background:#ffd100;font-size:16px;font-weight:600; color:#1f2329;cursor:pointer} /* ★ 照实拍：核销时间蓝字 + 黄点；售后红条「资金按照原路返回」 */ .odVblue{color:#2b6df6} .odDot{display:inline-block;width:7px;height:7px;border-radius:50%; background:#f7ba1e;margin-left:6px;vertical-align:middle;font-style:normal} .oaBar{display:flex;align-items:center;gap:7px;background:#fff;padding:14px 15px; border-bottom:1px solid #f0f1f3} .oaIc{color:#f04438;font-size:15px} .oaTx{font-size:14px;color:#f04438;font-style:normal;font-weight:600} /* ★ 照实拍「待收货」：顶部地图卡（骑手位置） */ .oshMap{position:relative;height:196px;overflow:hidden;background:#e8eef3} .oshMapBg{position:absolute;inset:0; background: repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 2px,transparent 2px 42px), repeating-linear-gradient(0deg,rgba(255,255,255,.75) 0 2px,transparent 2px 42px), linear-gradient(135deg,#dfe9f0,#cfe0ea)} .oshTag{position:absolute;left:50%;top:34%;transform:translateX(-50%); display:flex;align-items:center;gap:5px;background:#2b6df6;color:#fff; font-size:12.5px;border-radius:6px;padding:5px 11px;white-space:nowrap; box-shadow:0 2px 8px rgba(43,109,246,.35)} .oshTagIc{font-style:normal;font-size:13px} .oshRider{position:absolute;left:50%;top:52%;transform:translateX(-50%); font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))} /* ★ 照实拍「待自提」：取货地点导航图标 + 取货码二维码 */ .opNav{font-style:normal;margin-left:6px;font-size:15px} .odVqr{display:flex;align-items:center;justify-content:center;position:relative} .opQr{display:grid;place-items:center;width:118px;height:118px;font-size:112px; line-height:1;color:#1f2329;letter-spacing:-6px} /* ★ 照实拍「申请售后」：商家行 + 商品行 + 四行表单 + 上传凭证 + 黄色确认 */ .oaPage{background:#f5f6f8;min-height:100%} .oaMerchant{display:flex;align-items:center;gap:10px;background:#fff;padding:14px 15px; border-bottom:1px solid #f0f1f3} .oaMAva{width:34px;height:34px;border-radius:50%;background:#f0f1f3;display:grid; place-items:center;font-size:15px} .oaMNm{flex:1;font-size:14.5px;color:#1f2329;font-style:normal} .oaGoods{display:flex;gap:10px;align-items:flex-start;background:#fff;padding:12px 15px; border-bottom:8px solid #f5f6f8} .oaGImg{width:64px;height:64px;border-radius:6px;background:#fff7e6;display:grid; place-items:center;font-size:30px;flex:0 0 64px} .oaGMid{flex:1;min-width:0} .oaGNm{display:block;font-size:13.5px;color:#1f2329;font-style:normal;line-height:1.4} .oaGSpec{display:block;font-size:12px;color:#98a2b3;font-style:normal;margin-top:4px} .oaGQty{display:block;font-size:12px;color:#98a2b3;font-style:normal;margin-top:3px} .oaGP{font-size:14px;color:#1f2329;font-style:normal;flex:0 0 auto} .oaRows{background:#fff} .oaRow{display:flex;align-items:center;padding:15px;border-bottom:1px solid #f5f6f8} .oaK{flex:1;font-size:14.5px;color:#4e5969;font-style:normal} .oaV{font-size:14px;color:#1f2329;font-style:normal;display:flex;align-items:center} .oaUpload{background:#fff;padding:14px 15px;margin-top:8px} .oaUpT{font-size:14px;color:#4e5969} .oaUpSub{font-size:12px;color:#98a2b3;font-style:normal} .oaUpBox{width:76px;height:76px;margin-top:11px;border:1px dashed #dcdfe6;border-radius:6px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; cursor:pointer} .oaUpIc{font-size:19px;opacity:.55} .oaUpLb{font-size:10.5px;color:#98a2b3;font-style:normal} .oaGo{display:block;width:calc(100% - 30px);margin:22px 15px 6px;height:46px; border:none;border-radius:6px;background:#ffd100;font-size:16px;font-weight:600; color:#1f2329;cursor:pointer} /* ★ 照实拍「售后（退款中）」「待评价」 */ .oaBar2{display:flex;align-items:center;gap:7px;background:#fff;padding:14px 15px; border-bottom:1px solid #f0f1f3} .oaIc2{font-size:15px} .oaTx2{font-size:14px;color:#1f2329;font-style:normal;font-weight:600} .orPage{background:#f5f6f8;min-height:100%} .orShop{display:flex;align-items:center;gap:10px;background:#fff;padding:15px} .orLogo{width:38px;height:38px;border-radius:6px;background:#fdecec;display:grid; place-items:center;font-size:20px} .orShopNm{flex:1;font-size:15px;font-weight:600;color:#1f2329;font-style:normal} .orRate{display:flex;align-items:center;gap:6px;background:#fff;padding:0 15px 14px} .orK{font-size:14px;color:#4e5969;font-style:normal} .orStars{display:inline-flex;gap:2px;margin-left:4px} .orStar{font-style:normal;font-size:17px;color:#dcdfe6} .orStar.on{color:#f04438} .orScore{font-size:14px;color:#1f2329;font-style:normal;margin-left:5px} .orInput{display:flex;gap:8px;align-items:flex-start;background:#f5f6f8; margin:0 15px;border-radius:8px;padding:13px;min-height:96px} .orPen{font-size:14px;opacity:.6} .orPh{font-size:13.5px;color:#b6b9be;font-style:normal} .orUps{display:flex;gap:11px;margin:12px 15px 0} .orAnon{display:flex;align-items:center;gap:7px;padding:16px 15px;cursor:pointer} .orChk{width:16px;height:16px;border-radius:50%;border:1.5px solid #dcdfe6; display:grid;place-items:center;font-size:11px;color:transparent;box-sizing:border-box} .orChk.on{background:#f04438;border-color:#f04438;color:#fff} .orAnonT{font-size:13.5px;color:#1f2329;font-style:normal} /* ============================================================================ ★ 照实拍：店铺资料 / 资质认证 / 资金管理 ============================================================================ */ .spqPage{background:#f5f6f8;min-height:100%} .spqCard{background:#fff;margin-top:9px} .spqRow{display:flex;align-items:center;gap:8px;padding:16px 15px;border-bottom:1px solid #f5f6f8} .spqK{flex:0 0 auto;font-size:14.5px;font-weight:600;color:#1f2329;font-style:normal;min-width:72px} .spqV{flex:1;min-width:0;font-size:14px;color:#1f2329;font-style:normal; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spqPh{flex:1;min-width:0;font-size:14px;color:#b6b9be;font-style:normal} .spqSub{font-size:12px;color:#98a2b3;font-style:normal} .spqSize{margin-left:auto;flex:0 0 auto;color:#98a2b3;font-size:12.5px} .spqAr{font-style:normal;color:#c0c4cc;font-size:16px} .spqPin{font-style:normal;font-size:14px} .spqLogoBox{padding:0 15px 16px} .spqLogo{display:grid;place-items:center;width:64px;height:84px;border-radius:6px; background:#fdecec;font-size:34px} .spqPhotos{display:flex;gap:10px;padding:0 15px 16px} .spqPhoto{width:64px;height:64px;border-radius:6px;background:#fdecec;display:grid; place-items:center;font-size:28px} .spqAdd{width:64px;height:64px;border-radius:6px;border:1px dashed #dcdfe6;color:#b6b9be; display:grid;place-items:center;font-size:22px;cursor:pointer} .spqPlus{margin-left:auto;color:#f7ba1e;font-size:19px;font-style:normal} .spqTagPh{padding:0 15px 16px;font-size:13.5px;color:#b6b9be} .spqNote{padding:0 15px 14px;font-size:12.5px;color:#2b6df6} .spqGrpT{padding:15px 15px 10px;font-size:14.5px;font-weight:600;color:#1f2329} .spqBoxes{display:flex;gap:22px;padding:0 15px 18px;flex-wrap:wrap} .spqBoxWrap{text-align:center} .spqBox{width:74px;height:74px;border:1px dashed #dcdfe6;border-radius:6px;color:#c0c4cc; display:grid;place-items:center;font-size:24px;cursor:pointer;margin:0 auto} .spqBoxLb{display:block;margin-top:7px;font-size:12px;color:#4e5969;font-style:normal} /* 资金管理 */ .sfHead{display:flex;align-items:center;background:#ffd100;padding:14px 15px} .sfBack{font-size:20px;color:#1f2329;cursor:pointer;line-height:1;padding-right:10px} .sfT{flex:1;text-align:center;font-size:16px;font-weight:600;color:#1f2329;padding-left:14px} .sfR{font-size:13px;color:#1f2329} .sfTop{background:#fff;margin:10px 12px 0;border-radius:10px;padding:16px 15px} .sfK{font-size:13.5px;color:#4e5969} .sfV{font-size:23px;font-weight:700;color:#1f2329;margin-top:6px} .sf3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;text-align:center} .sf3i{min-width:0} .sf3k{display:block;font-size:12px;color:#98a2b3;font-style:normal} .sf3v{display:block;font-size:14px;color:#1f2329;font-style:normal;margin-top:5px} .sfActs{display:flex;gap:10px;margin:10px 12px 0} .sfAct{flex:1;height:52px;border:none;border-radius:8px;font-size:15px;font-weight:600; display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer} .sfAct i{font-style:normal;margin-left:auto;padding-right:14px;opacity:.6} .sfAct.w{background:#fff;color:#1f2329} .sfAct.y{background:#ffd100;color:#1f2329} .sfTabs{display:flex;gap:24px;padding:18px 15px 10px;background:transparent} .sfTab{font-size:15px;color:#98a2b3;position:relative;cursor:pointer;padding-bottom:6px} .sfTab.on{color:#1f2329;font-weight:600} .sfTab.on::after{content:'';position:absolute;left:50%;transform:translateX(-50%); bottom:0;width:22px;height:3px;border-radius:2px;background:#ffd100} .sfList{background:#fff;margin:0 12px 12px;border-radius:8px;overflow:hidden} .sfRow{display:flex;align-items:center;padding:14px 15px;border-bottom:1px solid #f5f6f8} .sfRow:last-child{border-bottom:none} .sfRowL{flex:1;min-width:0} .sfNm{display:block;font-size:14px;color:#1f2329;font-style:normal} .sfTm{display:block;font-size:12px;color:#98a2b3;font-style:normal;margin-top:5px} .sfAmt{font-size:14.5px;color:#98a2b3;font-style:normal} .sfAmt.pos{color:#f79009;font-weight:600} /* ============================================================================ ★ 墨刀缺失的中间页（本项目补设计）所需样式 ============================================================================ */ .mgPage{background:#f5f6f8;min-height:100%} .mgNote{margin:12px;background:#fff8e6;border-left:3px solid #f79009;border-radius:6px; padding:11px 13px;font-size:12.5px;color:#7a5b16;line-height:1.65} .mgNote b{color:#1f2329} .mgCenter{display:flex;flex-direction:column;align-items:center;gap:10px; padding:64px 20px 34px;background:#fff} .mgSpin{width:54px;height:54px;border-radius:50%;border:4px solid #e8f0ff; border-top-color:#2b6df6;animation:mgSpin .9s linear infinite} @keyframes mgSpin{to{transform:rotate(360deg)}} .mgOk{width:62px;height:62px;border-radius:50%;background:#12b76a;color:#fff; display:grid;place-items:center;font-size:32px;font-weight:700} .mgBig{font-size:19px;font-weight:700;color:#1f2329} .mgSub{font-size:13px;color:#98a2b3;text-align:center;line-height:1.6} .mgSub b{color:#1f2329} .mgActs{padding:0 15px 6px} .mgCard{background:#fff;margin:10px 12px;border-radius:10px;padding:14px 15px} .mgTT{font-size:14.5px;font-weight:600;color:#1f2329;margin-bottom:12px} .mgRow{display:flex;gap:10px;padding:9px 0} .mgK{flex:0 0 74px;font-size:13.5px;color:#98a2b3;font-style:normal} .mgV{flex:1;min-width:0;font-size:13.5px;color:#1f2329;font-style:normal;text-align:right} .mgV2{text-align:right;line-height:1.5} .mgRed{color:#f04438} /* 配送员卡 */ .mgRider{display:flex;align-items:center;gap:11px} .mgAva{width:42px;height:42px;border-radius:50%;background:#eef3ff;display:grid; place-items:center;font-size:21px} .mgRiderMid{flex:1;min-width:0} .mgRiderNm{display:block;font-size:14.5px;font-weight:600;color:#1f2329;font-style:normal} .mgRiderSub{display:block;font-size:12px;color:#98a2b3;font-style:normal;margin-top:4px} .mgCall{border:none;background:#e8f0ff;color:#2b6df6;border-radius:16px; font-size:13px;padding:8px 14px;cursor:pointer} /* 物流/售后时间轴 */ .mgTl{display:flex;gap:10px;padding:0 0 16px;position:relative} .mgTl:last-child{padding-bottom:0} .mgTl::before{content:'';position:absolute;left:5px;top:14px;bottom:0;width:1px;background:#eef0f3} .mgTl:last-child::before{display:none} .mgTlDot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:#dcdfe6; margin-top:4px;z-index:1} .mgTl.on .mgTlDot{background:#12b76a} .mgTlBody{flex:1;min-width:0} .mgTlK{display:block;font-size:13.5px;font-weight:600;color:#98a2b3;font-style:normal} .mgTl.on .mgTlK{color:#1f2329} .mgTlD{display:block;font-size:12px;color:#98a2b3;font-style:normal;margin-top:4px;line-height:1.5} .mgTlTm{flex:0 0 auto;font-size:11.5px;color:#98a2b3;font-style:normal} /* 发货表单 */ .mgField{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #f5f6f8} .mgField:last-child{border-bottom:none} .mgFK{flex:0 0 74px;font-size:13.5px;color:#1f2329;font-style:normal;font-weight:600} .mgFV{flex:1;min-width:0;font-size:13.5px;color:#1f2329;font-style:normal;text-align:right} .mgPh{color:#b6b9be} /* 处理退款 */ .mgActs2{display:flex;gap:10px} .mgAgree{flex:1;height:42px;border:none;border-radius:21px;background:#12b76a;color:#fff; font-size:14.5px;font-weight:600;cursor:pointer} .mgReject{flex:1;height:42px;border:1px solid #f04438;border-radius:21px;background:#fff; color:#f04438;font-size:14.5px;cursor:pointer} .mgRadio{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #f5f6f8; cursor:pointer} .mgRadio:last-child{border-bottom:none} .mgRadioTx{flex:1;font-size:13.5px;color:#1f2329} .mgRadioDot{width:17px;height:17px;border-radius:50%;border:1.5px solid #dcdfe6;box-sizing:border-box} .mgRadioDot.on{border:5px solid #2b6df6} /* ★ 创建社群流程 · 中间页（角色管理 / 权限设置 / 选择角色）—— 补：上一版守卫写错被跳过 */ .csTop{display:flex;align-items:center;gap:9px;padding:14px 15px;border-bottom:1px solid #f0f1f3} .csAva{width:30px;height:30px;border-radius:7px;background:#2b6df6;color:#fff; display:grid;place-items:center;font-size:15px} .csTopT{font-size:15.5px;font-weight:600;color:#1f2329;font-style:normal} .csHead{display:flex;align-items:center;padding:16px 15px 10px} .csH1{flex:1;font-size:14.5px;color:#1f2329;font-style:normal} .csAdd{border:none;background:#2b6df6;color:#fff;border-radius:16px; font-size:13px;padding:7px 15px;cursor:pointer} .csList{background:#fff} .csRow{display:flex;align-items:center;gap:11px;padding:15px;border-bottom:1px solid #f5f6f8} .csRow:last-child{border-bottom:none} .csIc{width:34px;height:34px;border-radius:8px;background:#2b6df6;color:#fff; display:grid;place-items:center;font-size:16px;flex:0 0 34px} .csMid{flex:1;min-width:0} .csNm{display:block;font-size:14.5px;color:#1f2329;font-style:normal} .csCnt{display:block;font-size:12px;color:#98a2b3;font-style:normal;margin-top:4px} .csMore{color:#c0c4cc;font-size:17px;font-style:normal;cursor:pointer} .csLabel{padding:16px 15px 8px;font-size:13.5px;color:#4e5969} .csInput{display:flex;align-items:center;margin:0 15px;background:#f2f3f5; border-radius:6px;padding:12px 13px} .csPh{flex:1;font-size:13.5px;color:#b6b9be;font-style:normal} .csInAr{color:#c0c4cc;font-style:normal;font-size:16px} .csSec{display:flex;align-items:center;gap:7px;padding:16px 15px 8px; font-size:14px;font-weight:600;color:#1f2329} .csBar{width:3px;height:14px;background:#2b6df6;border-radius:2px} .csPlus{margin-left:auto;color:#2b6df6;font-size:19px;font-style:normal;cursor:pointer} .csRowSw{padding:15px} .csSwT{flex:1;font-size:14.5px;color:#1f2329;font-style:normal} .csSw{position:relative;width:46px;height:26px;border-radius:13px;background:#e5e6eb; transition:background .15s;cursor:pointer;flex:0 0 46px} .csSw i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%; background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.18)} .csSw.on{background:#12b76a} .csSw.on i{transform:translateX(20px)} .csBg{padding-bottom:8px} .csSheet{position:absolute;left:0;right:0;bottom:0;background:#fff; border-radius:14px 14px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.12);z-index:9} .csSheetH{display:flex;align-items:center;padding:15px} .csSheetX{flex:0 0 52px;font-size:14px;color:#4e5969;cursor:pointer} .csSheetT{flex:1;text-align:center;font-size:15px;font-weight:600;color:#1f2329} .csSheetOk{flex:0 0 52px;text-align:right;font-size:14px;color:#2b6df6;cursor:pointer} .csPicked{width:20px;height:20px;border-radius:50%;background:#2b6df6;color:#fff; display:grid;place-items:center;font-size:12px;font-style:normal} .csUnpick{width:20px;height:20px;border-radius:50%;border:1.5px solid #dcdfe6;box-sizing:border-box} /* ============================================================================ ★ 投诉三态（投诉详情）—— 照实拍 ============================================================================ */ .cpPage{background:#f5f6f8;min-height:100%} .cpCard{display:flex;gap:10px;background:#e8f0ff;padding:13px 15px;align-items:flex-start} .cpAvaWrap{flex:0 0 auto;text-align:center} .cpAva{display:grid;place-items:center;width:52px;height:52px;border-radius:8px; background:#fdecec;font-size:26px} .cpAvaLb{display:block;font-size:11px;color:#1f2329;font-style:normal;margin-top:3px} .cpMid{flex:1;min-width:0} .cpEnt{display:block;font-size:14.5px;font-weight:600;color:#1f2329;font-style:normal} .cpTm{display:block;font-size:11.5px;color:#6b7280;font-style:normal;margin-top:3px} .cpPay{display:block;font-size:12.5px;color:#f04438;font-style:normal;margin-top:4px} .cpPay b{font-weight:700} .cpMeta{display:block;font-size:11.5px;color:#4e5969;font-style:normal;margin-top:4px} .cpState{flex:0 0 auto;text-align:center;padding:0 2px} .cpStateIc{display:block;font-size:19px;line-height:1} .cpState.blu .cpStateIc{color:#2b6df6} .cpState.grn .cpStateIc{color:#12b76a} .cpStateTx{display:block;font-size:11px;font-style:normal;margin-top:4px;white-space:nowrap} .cpState.blu .cpStateTx{color:#2b6df6} .cpState.grn .cpStateTx{color:#12b76a} .cpSecT{display:flex;align-items:center;gap:4px;padding:14px 15px 8px; font-size:14.5px;font-weight:600;color:#1f2329} .cpStar{color:#f04438;font-style:normal;font-size:13px} .cpNote{padding:0 15px 10px;font-size:13px;color:#1f2329;line-height:1.65} .cpTable{margin:0 15px} .cpTr{display:flex;border-bottom:1px solid #fff} .cpTh{background:#b9d4f7} .cpTr:not(.cpTh){background:#cfe0fb} .cpTd{flex:1;min-width:0;padding:11px 10px;font-size:12.5px;color:#1f2329; font-style:normal;text-align:center} .cpTh .cpTd{font-weight:600} .cpTdS{font-weight:600} .cpTdC{flex:0 0 78px;display:grid;place-items:center} .cpChk{display:grid;place-items:center;width:18px;height:18px;border-radius:3px; background:#2b6df6;color:#fff;font-size:12px;font-style:normal} .cpReason{margin:0 15px;background:#e5e6eb;border-radius:4px;padding:13px; font-size:13px;color:#1f2329;line-height:1.7;min-height:86px} .cpBtn{display:block;width:calc(100% - 30px);margin:20px 15px 8px;height:52px; border:none;border-radius:6px;background:#2b2f36;color:#fff;font-size:16px; font-weight:600;cursor:pointer} /* ★ 我的申诉：顶栏右侧红字 + 附件信息 */ .apBar{display:flex;justify-content:flex-end;background:#fff;padding:10px 15px 0} .apRight{background:none;border:none;color:#f04438;font-size:14.5px;cursor:pointer} .cpSecSub{font-size:11.5px;color:#98a2b3;font-weight:400;font-style:normal;margin-left:4px} .apFiles{display:flex;gap:10px;padding:0 15px 8px} .apFile{width:76px;height:76px;border-radius:6px;background:#e5e6eb;display:grid; place-items:center;font-size:26px} /* ★ 我被投诉列表 */ .clPage{background:#f5f6f8;min-height:100%} .clTabs{display:flex;gap:22px;align-items:center;background:#fff; padding:13px 15px 10px;border-bottom:1px solid #eef0f3;position:relative} .clTab{font-size:14.5px;color:#98a2b3;cursor:pointer;position:relative;padding-bottom:7px} .clTab.on{color:#2b6df6;font-weight:600} .clTab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px; border-radius:2px;background:#2b6df6} .clDot{margin-left:auto;width:9px;height:9px;border-radius:50%;background:#f7ba1e} .clCard{margin:10px 12px;border-radius:8px;cursor:pointer} .clLink{display:block;font-size:11px;color:#2b6df6;font-style:normal;margin-top:5px} /* ★ 确认订单 */ .soPage{background:#fff;min-height:100%} .soSec{padding:18px 15px 6px;font-size:14.5px;font-weight:600;color:#1f2329} .soOpt{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer} .soRadio{flex:0 0 auto;width:17px;height:17px;border-radius:50%; border:1.5px solid #dcdfe6;box-sizing:border-box} .soRadio.on{border:5px solid #2b6df6} .soTx{flex:1;min-width:0;font-size:13.5px;color:#4e5969;font-style:normal;line-height:1.5} .soGo{display:block;width:calc(100% - 30px);margin:auto 15px 10px;height:50px; border:none;border-radius:25px;background:#2b6df6;color:#fff;font-size:16px; font-weight:600;cursor:pointer;position:absolute;left:0;right:0;bottom:20px} /* ★ 确认订单 · 失败原因双列 */ .sxGrid{display:flex;gap:0;margin:0 15px 8px} .sxCol{flex:1;min-width:0} .sxHead{padding:12px 8px;font-size:13.5px;font-weight:600;color:#1f2329;text-align:center} .sxColB .sxHead{background:#dbe8fb} .sxColY .sxHead{background:#fdf3d8} .sxCell{display:flex;align-items:center;gap:7px;padding:13px 9px; border-bottom:1px solid rgba(255,255,255,.8)} .sxColB .sxCell{background:#e8f0fe} .sxColY .sxCell{background:#fdf8e8} .sxCellEmpty{background:transparent} .sxTx{flex:1;min-width:0;font-size:11.5px;color:#4e5969;font-style:normal;line-height:1.35} .sxCell .soRadio{flex:0 0 auto;width:14px;height:14px} .sxCell .soRadio.on{border-width:4px;border-color:#2b6df6} /* ============================================================================ ★ 提示弹窗族（照实拍：两张独立白卡，中间露背景缝）+ 底部动作面板 ============================================================================ */ .dgPage{background:#f5f6f8;min-height:100%} .dgWrap{padding:60px 28px 0} .dgCard{background:#fff;border-radius:8px;padding:20px 16px;text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.06)} .dgT{font-size:15px;font-weight:600;color:#1f2329;margin-bottom:18px} .dgB{font-size:13.5px;color:#1f2329;line-height:1.6;min-height:26px} .dgBtnCard{margin-top:10px;padding:15px 16px} .dgBtn{font-size:14.5px;color:#1f2329;cursor:pointer} .dgSheet{margin:60px 10px 0;background:#fff;border-radius:10px;overflow:hidden} .dgSheet2{margin-top:10px} .dgAct{padding:16px;text-align:center;font-size:15.5px;color:#2b6df6; border-bottom:1px solid #f0f1f3;cursor:pointer} .dgAct:last-child{border-bottom:none} .dgDel{color:#f04438} /* ★ 提示弹窗 · 双按钮卡（左右并排 + 竖分隔） */ .dgBtnTwo{display:flex;padding:0} .dgHalf{flex:1;padding:15px 0;text-align:center} .dgHalfR{border-left:1px solid #eef0f3;color:#2b6df6} /* ============================================================================ ★ 我的服务 · 列表记录（照实拍） ============================================================================ */ .msPage{background:#f5f6f8;min-height:100%} .msCard{display:flex;gap:11px;background:#fff;margin:10px 12px;border-radius:8px; padding:13px;overflow:hidden} .msBlock{flex:0 0 74px;height:74px;border-radius:6px; background:linear-gradient(180deg,#dbeafe,#93b8f0);display:grid;place-items:center} .msBlockTx{font-size:13.5px;color:#2b4a7a;font-style:normal} .msMid{flex:1;min-width:0} .msRow1{display:flex;align-items:center;gap:8px} .msEnt{flex:1;min-width:0;font-size:14.5px;color:#1f2329;font-style:normal; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msSt{flex:0 0 auto;font-size:12px;color:#f7ba1e;font-style:normal} .msMore{flex:0 0 auto;color:#c0c4cc;font-size:16px;font-style:normal;cursor:pointer} .msPay{font-size:12.5px;color:#f04438;margin-top:5px} .msPay b{font-weight:700} .msTm{font-size:11.5px;color:#98a2b3;margin-top:4px} .msMeta{font-size:12px;color:#4e5969;margin-top:5px} .msBar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:16px; padding:12px 15px;background:#fff;border-top:1px solid #eef0f3} .msAll{display:flex;align-items:center;gap:7px;font-size:14px;color:#1f2329;cursor:pointer} .msChk{display:grid;place-items:center;width:18px;height:18px;border-radius:50%; background:#f04438;color:#fff;font-size:12px;font-style:normal} .msDel{flex:1;height:44px;border:none;border-radius:22px;background:#f7ba1e;color:#fff; font-size:15.5px;font-weight:600;cursor:pointer} /* ★ 提交申诉 · 申诉理由输入框（照实拍：白底带框） */ .asInput{margin:0 15px;background:#fff;border:1px solid #e5e6eb;border-radius:6px; padding:13px;font-size:13px;color:#1f2329;line-height:1.7;min-height:86px} /* ============================================================================ ★ 发帖页（帖子 / 话题）—— 正常态 + 录音态，照实拍 ============================================================================ */ .tpPage{background:#fff;min-height:100%} .tpTabs{display:flex;gap:34px;justify-content:center;padding:13px 15px 10px; border-bottom:1px solid #eef0f3} .tpTab{font-size:15px;color:#98a2b3;position:relative;padding-bottom:7px} .tpTab.on{color:#2b6df6;font-weight:600} .tpTab.on::after{content:'';position:absolute;left:50%;transform:translateX(-50%); bottom:0;width:22px;height:2.5px;border-radius:2px;background:#2b6df6} .tpTitle{padding:16px 15px 12px;border-bottom:1px solid #f2f3f5} .tpBody{padding:14px 15px 40px;border-bottom:1px solid #f2f3f5;min-height:70px} .tpPh{font-size:13.5px;color:#b6b9be;font-style:normal} .tpImgs{display:flex;gap:11px;padding:22px 15px 12px} .tpImg{width:88px;height:88px;border-radius:4px; background:linear-gradient(180deg,#8fb4d6,#5d7fa3)} .tpVoiceBar{display:inline-flex;align-items:center;gap:8px;margin:0 15px 14px; background:#f2f3f5;border-radius:16px;padding:7px 13px} .tpPlay{color:#f7ba1e;font-size:13px} .tpSpk{font-size:14px} .tpLen{font-size:13px;color:#4e5969;font-style:normal} .tpIcons{display:flex;gap:26px;padding:6px 15px 14px} .tpIc{font-size:22px;opacity:.85;cursor:pointer} .tpIcOn{opacity:1} .tpLoc{display:flex;align-items:center;gap:7px;padding:14px 15px; border-top:1px solid #f2f3f5;border-bottom:1px solid #f2f3f5} .tpLocIc{font-size:15px} .tpLocT{flex:1;font-size:14px;color:#1f2329;font-style:normal} .tpLocV{font-size:14px;color:#1f2329;font-style:normal} .tpAr{color:#c0c4cc;font-size:16px} .tpSubmit{display:block;width:calc(100% - 30px);margin:26px 15px 10px;height:52px; border:none;border-radius:26px;background:#2b6df6;color:#fff;font-size:16.5px; font-weight:600;cursor:pointer} /* 录音态：整页转灰调 */ .tpRec .tpTitle,.tpRec .tpBody,.tpRec .tpImgs,.tpRec .tpVoiceBar, .tpRec .tpIcons,.tpRec .tpLoc{opacity:.45} .tpRecWrap{padding:22px 15px 10px;text-align:center} .tpRecHint{font-size:13.5px;color:#98a2b3} .tpWave{display:flex;align-items:center;justify-content:center;gap:4px;margin:16px 0 12px} .tpWv{width:3px;border-radius:2px;background:#d0d3d9} .tpMic{width:56px;height:56px;border-radius:50%;background:#2b6df6;margin:0 auto; box-shadow:0 0 0 8px rgba(43,109,246,.12)} /* ============================================================================ ★ 我的订单（照实拍） ============================================================================ */ .moPage{background:#f2f3f5;min-height:100%} .moSearch{display:flex;align-items:center;gap:8px;background:#fff;margin:10px 12px 0; border-radius:18px;padding:9px 14px} .moSIc{font-size:14px} .moSPh{font-size:13.5px;color:#b6b9be;font-style:normal} .moTabs{display:flex;gap:0;background:#fff;padding:10px 6px 12px; border-bottom:1px solid #eef0f3;overflow-x:auto} .moTab{flex:0 0 auto;padding:0 11px;font-size:13.5px;color:#4e5969;cursor:pointer;white-space:nowrap} .moTab.on{color:#f7ba1e;font-weight:700} .moCard{background:#fff;margin:10px 12px;border-radius:8px;padding:13px} .moHead{display:flex;align-items:center} .moTm{flex:1;font-size:12px;color:#98a2b3;font-style:normal} .moSt{font-size:13.5px;font-weight:600;font-style:normal} .moSt.blu{color:#2b6df6} .moSt.red{color:#f04438} .moShop{display:flex;align-items:center;gap:6px;margin-top:12px} .moShopIc{font-size:14px} .moShopNm{font-size:13.5px;color:#1f2329;font-style:normal} .moG{display:flex;gap:10px;padding:11px 0} .moGImg{flex:0 0 52px;width:52px;height:52px;border-radius:4px;background:#f2f3f5; display:grid;place-items:center;font-size:24px} .moGMid{flex:1;min-width:0} .moGNm{display:block;font-size:13.5px;color:#1f2329;font-style:normal;line-height:1.4} .moGSpec{display:block;font-size:11.5px;color:#98a2b3;font-style:normal;margin-top:5px} .moGR{flex:0 0 auto;text-align:right} .moGP{display:block;font-size:13.5px;color:#1f2329;font-style:normal} .moGQ{display:block;font-size:11.5px;color:#98a2b3;font-style:normal;margin-top:5px} .moPaid{display:flex;justify-content:flex-end;align-items:baseline;gap:6px;padding:8px 0 12px} .moPaidK{font-size:12px;color:#98a2b3;font-style:normal} .moPaidV{font-size:15.5px;color:#1f2329;font-weight:600;font-style:normal} .moActs{display:flex;align-items:center;gap:9px;border-top:1px solid #f2f3f5;padding-top:12px} .moDel{font-size:13px;color:#98a2b3;cursor:pointer} .moSp{flex:1} .moBtn{height:32px;padding:0 16px;border-radius:16px;font-size:13px;cursor:pointer; border:1px solid #dcdfe6;background:#fff;color:#1f2329} .moBtn.pri{border:none;background:#e8f0ff;color:#2b6df6} /* ============================================================================ ★ 闭环出口条（外壳级，本项目补）—— 仅出现在"页面自身无前向出口"的页 业务方要求：所有页面跑通、不要有断点、形成闭环。 明确标注归属，不冒充墨刀实拍内容。 ============================================================================ */ .flowFoot{display:flex;align-items:center;gap:10px;margin:18px 12px 26px; padding:11px 13px;border:1px dashed #c9cdd4;border-radius:8px;background:#fafbfc} .ffTag{flex:1;min-width:0;font-size:11px;color:#98a2b3} .ffBtn{height:32px;padding:0 14px;border-radius:16px;border:1px solid #dcdfe6; background:#fff;color:#1f2329;font-size:13px;cursor:pointer} .ffPri{border:none;background:#e8f0ff;color:#2b6df6;font-weight:600} /* ============================================================================ ★ 权限守卫：当前角色打不开的入口 —— 锁掉并标明（本项目补） 业务方实测「点了提示不能查看」，故改为"渲染时就知道能不能点"。 ============================================================================ */ .lockNoPerm{opacity:.5;cursor:not-allowed !important;position:relative} .lockNoPerm .lockIc{font-style:normal;font-size:11px;margin-left:4px; vertical-align:middle;opacity:.9} /* ★ 信息点自动接线：被接上的元素给一个极轻的可点提示（不改变外观） */ .wirePoint{cursor:pointer} /* ★ sdOpsCoupon 专用根类（原借用 .cpPage 与投诉族撞名，已分离） */ .socPage{background:#f5f6f8;min-height:100%} /* ★ 闭环修复：sdQualSubmit 的结果弹窗默认隐藏，由「提交审核」打开 */ .qsModal.qsOn{display:block} /* ============================================================================ ★ 社群模块实体页（11 个，C 类 · 本项目补） 业务方规则：首页要有该模块，必须社群这边先有实体页。 ============================================================================ */ .modPage{background:#f5f6f8;min-height:100%} .modHead{background:#fff;padding:16px 15px 13px;border-bottom:1px solid #eef0f3} .modHT{font-size:17px;font-weight:700;color:#1f2329} .modHS{font-size:12.5px;color:#98a2b3;margin-top:6px;line-height:1.5} .modList{background:#fff;margin:10px 12px;border-radius:10px;overflow:hidden} .modItem{padding:14px 15px;border-bottom:1px solid #f5f6f8} .modItem:last-child{border-bottom:none} .modIt{display:flex;align-items:center;gap:8px} .modIT{flex:1;min-width:0;font-size:14px;color:#1f2329;font-style:normal;line-height:1.45} .modIS{font-size:12px;color:#98a2b3;margin-top:6px;font-style:normal} .modTag{flex:0 0 auto;font-size:11px;padding:2px 8px;border-radius:9px;background:#f2f3f5;color:#4e5969} .modTag.ok{background:#e7f8ef;color:#12b76a} .modTag.warn{background:#fff5e6;color:#f79009} .modTag.need{background:#e8f0ff;color:#2b6df6} .modGo{display:block;margin-top:11px;height:34px;border:none;border-radius:17px; background:#e8f0ff;color:#2b6df6;font-size:13px;cursor:pointer} .modCard{background:#fff;margin:10px 12px;border-radius:10px;padding:14px 15px} .modCardT{font-size:14.5px;font-weight:600;color:#1f2329;margin-bottom:10px} .modRow{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #f7f8fa} .modRow:last-child{border-bottom:none} .modK{flex:1;min-width:0;font-size:13.5px;color:#4e5969;font-style:normal;line-height:1.5} .modV{flex:0 0 auto;max-width:52%;text-align:right;font-size:13.5px;color:#1f2329;font-style:normal;line-height:1.5} .modMoney{color:#f04438;font-weight:700} .modField{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #f7f8fa} .modField:last-child{border-bottom:none} .modPh{color:#b6b9be} .modFoot{padding:12px 15px 4px;font-size:13px;color:#4e5969;text-align:right} .modDir{display:flex;align-items:center;gap:11px} .modAva{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#e8f0ff;color:#2b6df6; display:grid;place-items:center;font-size:15px} .modDirMid{flex:1;min-width:0} .modBadge{flex:0 0 auto;font-size:11px;padding:2px 7px;border-radius:5px;background:#e8f0ff;color:#2b6df6} .modSub{font-size:11.5px;color:#98a2b3} .modSum .modV{color:#2b6df6;font-weight:600} /* ★ 社群「可用模块」的可点徽章（业务方规则：有实体页才可点） */ .modChip{display:inline-flex;align-items:center;gap:3px;border:none;cursor:pointer; font-size:12px;padding:4px 10px;border-radius:11px;background:#e7f8ef;color:#12b76a} .modChipAr{font-style:normal;opacity:.7} /* ============================================================================ ★ 社群创建 = 配置式生成（9 页，C 类 · 本项目补） ============================================================================ */ .ocPage{background:#f5f6f8;min-height:100%} .ocHead{background:#fff;padding:16px 15px 13px;border-bottom:1px solid #eef0f3} .ocHT{font-size:17px;font-weight:700;color:#1f2329} .ocHS{font-size:12.5px;color:#98a2b3;margin-top:6px;line-height:1.55} .ocCard{background:#fff;margin:10px 12px;border-radius:10px;padding:14px 15px} .ocCT{font-size:14.5px;font-weight:600;color:#1f2329;margin-bottom:11px} .ocChips{display:flex;flex-wrap:wrap;gap:7px} .ocChip{display:inline-flex;align-items:center;gap:4px;border:1px solid #e5e6eb;background:#fff; color:#4e5969;font-size:12.5px;padding:5px 11px;border-radius:13px;cursor:pointer} .ocChip.on{background:#e8f0ff;border-color:#d6e4ff;color:#2b6df6} .ocChip.add{border-style:dashed;color:#2b6df6} .ocChipX{font-style:normal;font-size:11px;color:#98a2b3;margin-left:2px} .ocNote{font-size:11.5px;color:#98a2b3;margin-top:10px;line-height:1.6} .ocLv{border-top:1px solid #f2f3f5;padding:13px 0 5px} .ocLv:first-of-type{border-top:none} .ocLvH{display:flex;align-items:center;gap:8px;margin-bottom:10px} .ocIdx{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#2b6df6;color:#fff; display:grid;place-items:center;font-size:11px;font-style:normal} .ocIn{border:1px solid #e5e6eb;border-radius:7px;padding:6px 9px;font-size:13.5px;color:#1f2329; outline:none;background:#fff} .ocIn:focus{border-color:#2b6df6} .ocNm{flex:1;min-width:0;font-weight:600} .ocSm{width:60px;text-align:center} .ocUnit{width:110px} .ocReq,.ocOpt{font-size:11px;padding:2px 7px;border-radius:5px} .ocReq{background:#e8f0ff;color:#2b6df6} .ocOpt{background:#f2f3f5;color:#98a2b3} .ocRow{display:flex;align-items:center;gap:9px;padding:7px 0} .ocK{flex:0 0 72px;font-size:12.5px;color:#4e5969} .ocSeg{display:inline-flex;border:1px solid #e5e6eb;border-radius:8px;overflow:hidden} .ocSegB{border:none;background:#fff;color:#4e5969;font-size:12px;padding:6px 11px;cursor:pointer} .ocSegB+.ocSegB{border-left:1px solid #e5e6eb} .ocSegB.on{background:#e8f0ff;color:#2b6df6;font-weight:600} .ocHint{font-size:11px;color:#98a2b3;line-height:1.45} .ocPrev{font-size:13px;color:#1f2329;background:#f7f8fa;border-radius:6px;padding:3px 9px;font-weight:600} .ocFoot{padding:14px 15px 20px;font-size:12.5px;color:#4e5969} .ocTree{max-height:280px;overflow:auto} .ocTreeR{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f7f8fa} .ocTreeR:last-child{border-bottom:none} .ocTreeDot{flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:#2b6df6} .ocTreeSub{font-style:normal;font-size:11px;color:#98a2b3;margin-left:auto} .ocDone{background:#fff;margin:16px 12px;border-radius:12px;padding:26px 20px;text-align:center} .ocDoneIc{font-size:40px;line-height:1} .ocDoneT{font-size:17px;font-weight:700;color:#1f2329;margin-top:12px} .ocDoneD{font-size:13px;color:#4e5969;margin-top:10px;line-height:1.7} .ocQr{width:150px;height:150px;margin:14px auto 0;border:2px dashed #d6e4ff;border-radius:12px; display:grid;place-items:center;font-size:54px;color:#2b6df6;background:#f7faff} .ocSmsTxt{background:#f7f8fa;border-radius:8px;padding:11px 12px;font-size:12.5px;color:#4e5969;line-height:1.7} .ocWxCard{display:flex;gap:11px;align-items:center;background:#f7f8fa;border-radius:9px;padding:12px} .ocWxIc{flex:0 0 44px;width:44px;height:44px;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:22px} .ocWxMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:#1f2329} /* 成员表 */ .mtPage{background:#f5f6f8;min-height:100%} .mtTbl{overflow-x:auto} .mtTr{display:flex;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #f7f8fa;min-width:520px} .mtTr:last-child{border-bottom:none} .mtTh{font-size:11.5px;color:#98a2b3;font-weight:600} .mtTd{flex:1;min-width:0;font-size:12.5px;color:#1f2329;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mtSlot{flex:1.3;font-weight:600;color:#2b6df6} .mtPhone{flex:0 0 96px;color:#4e5969;font-variant-numeric:tabular-nums} .mtRole{font-style:normal;font-size:11px;padding:2px 7px;border-radius:5px;background:#e8f0ff;color:#2b6df6} .mtSt{font-style:normal;font-size:11px;padding:2px 7px;border-radius:5px} .mtSt.joined{background:#e7f8ef;color:#12b76a} .mtSt.invited{background:#fff5e6;color:#f79009} .mtSt.prefilled{background:#f2f3f5;color:#98a2b3} .mtInv{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #f7f8fa;cursor:pointer} .mtInv:last-child{border-bottom:none} .mtInvIc{flex:0 0 38px;width:38px;height:38px;border-radius:9px;background:#f2f4f7;display:grid;place-items:center;font-size:18px} .mtInvMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:#1f2329} .mtInvMid i{font-style:normal} /* ★ 群功能低代码模块（4 页，C 类 · 本项目补） */ .lcPage{background:#f5f6f8;min-height:100%} .lcHead{background:#fff;padding:16px 15px 13px;border-bottom:1px solid #eef0f3} .lcHT{font-size:17px;font-weight:700;color:#1f2329} .lcHS{font-size:12.5px;color:#98a2b3;margin-top:6px;line-height:1.55} .lcTabs{display:flex;gap:8px;padding:11px 12px 3px;overflow-x:auto} .lcTab{border:none;background:#fff;color:#4e5969;font-size:12.5px;padding:7px 14px;border-radius:14px;cursor:pointer;white-space:nowrap} .lcTab.on{background:#2b6df6;color:#fff;font-weight:600} .lcGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:11px 12px} .lcCard{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid #f0f1f3;border-radius:11px;padding:13px 12px;cursor:pointer} .lcCard.on{border-color:#d6e4ff;background:#f7faff} .lcIc{font-size:22px;line-height:1} .lcNm{font-size:13.5px;font-weight:600;color:#1f2329;display:flex;align-items:center;gap:5px} .lcOn{font-style:normal;font-size:10px;background:#e7f8ef;color:#12b76a;padding:1px 5px;border-radius:4px} .lcD{font-size:11.5px;color:#98a2b3;line-height:1.45;min-height:32px} .lcGo{font-size:11.5px;color:#2b6df6;margin-top:2px} .lcFoot{padding:12px 15px 22px} .lcCT{font-size:14px;font-weight:600;color:#1f2329;margin-bottom:10px} .lcRow{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #f7f8fa} .lcRow:last-child{border-bottom:none} .lcK{flex:1;min-width:0;font-size:13px;color:#1f2329} .lcT{font-size:11.5px;color:#4e5969;background:#f2f3f5;padding:2px 8px;border-radius:5px} .lcTag{font-size:10.5px;padding:2px 7px;border-radius:5px;background:#f2f3f5;color:#98a2b3;font-style:normal} .lcTag.req{background:#fee4e2;color:#f04438} .lcTag.vis{background:#e8f0ff;color:#2b6df6} .lcTag.who{background:#fff5e6;color:#f79009} .lcTag.st{background:#e7f8ef;color:#12b76a} .lcX{font-style:normal;font-size:12px;color:#b6b9be;padding:0 4px;cursor:pointer} .lcAdd{border:1px dashed #d6e4ff;background:#f7faff;color:#2b6df6;font-size:12.5px; padding:9px;border-radius:8px;width:100%;margin-top:10px;cursor:pointer} .lcNote{font-size:11px;color:#98a2b3;margin-top:9px;line-height:1.55} .lcIdx{flex:0 0 19px;width:19px;height:19px;border-radius:50%;background:#2b6df6;color:#fff; display:grid;place-items:center;font-size:10.5px;font-style:normal} .lcAr{font-style:normal;color:#c9cdd4;font-size:12px} .lcMat{overflow-x:auto} .lcMatH,.lcMatR{display:flex;align-items:center;gap:6px;padding:7px 0;min-width:320px} .lcMatH{border-bottom:1px solid #f2f3f5;font-size:11px;color:#98a2b3} .lcMatR{border-bottom:1px solid #f7f8fa} .lcMatC{flex:1;text-align:center;font-size:12.5px;color:#1f2329} .lcMatC:first-child{flex:1.4;text-align:left} .lcChk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px; background:#f2f3f5;color:#b6b9be;font-style:normal;font-size:12px;cursor:pointer} .lcChk.on{background:#12b76a;color:#fff} .lcPrevList{display:flex;flex-direction:column;gap:8px} .lcPrevItem{display:flex;align-items:center;gap:8px;background:#f7f8fa;border-radius:8px;padding:10px 11px} .lcPrevT{flex:1;min-width:0;font-size:12.5px;color:#1f2329;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lcPrevD{font-style:normal;font-size:11px;color:#98a2b3} .lcFormR{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f7f8fa} .lcFormR:last-child{border-bottom:none} .lcFK{flex:0 0 96px;font-size:12.5px;color:#4e5969} .lcReq{font-style:normal;color:#f04438;margin-left:2px} .lcFV{flex:1;font-size:12.5px;color:#b6b9be} .lcFlow{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:4px 0} .lcFlowS{display:flex;flex-direction:column;align-items:center;gap:3px;background:#f7f8fa; border-radius:8px;padding:8px 11px;font-size:12px;color:#4e5969;white-space:nowrap} .lcFlowS.on{background:#e8f0ff;color:#2b6df6;font-weight:600} .lcFlowW{font-style:normal;font-size:10px;color:#98a2b3} .lcFlowAr{font-style:normal;color:#c9cdd4} /* ============================================================================ ★ 铺满全屏（业务方：『还没有充满全屏。』） ---------------------------------------------------------------------------- 原来：手机外壳写死 390×800 ⇒ 真机屏幕更高时，底下留一大片白； 宽屏时又带圆角边框和边距，看着像样机而不是 APP。 ⇒ 现在：任何宽度、任何高度都铺满视口（100dvw / 100dvh）， 去掉外壳边框/圆角/阴影/边距；页面自己管滚动。 ============================================================================ */ html, body { width: 100%; height: 100%; overflow: hidden; } body { margin: 0; } .stage { display: block !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100dvw !important; height: 100dvh !important; } .stage-phone { display: block !important; width: 100% !important; height: 100% !important; } .phone { width: 100% !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff !important; box-shadow: none !important; overflow: hidden !important; } /* 手机里的内容自己滚，不带动整页 */ .phone > * { height: 100%; } #app { height: 100% !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 设计视角侧栏：默认收起，小圆点开合（铺满后改为浮层） */ .stage-side { display: none !important; position: fixed; left: 0; top: 0; bottom: 0; z-index: 9997; width: 300px; overflow-y: auto; background: #fff; box-shadow: 2px 0 16px rgba(0,0,0,.14); padding: 16px; } body.demo-side .stage-side { display: block !important; } .demo-side-btn { position: fixed; left: 10px; bottom: 12px; z-index: 9998; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.75); color: #9aa4b2; font-size: 13px; line-height: 28px; text-align: center; cursor: pointer; opacity: .45; transition: opacity .15s; -webkit-tap-highlight-color: transparent; } .demo-side-btn:hover { opacity: 1; } /* ★ 铺满的收尾：去掉刘海、底部"桌面端专用演示壳"提示、内侧圆角 */ .phone-notch { display: none !important; } .phone-hint { display: none !important; } .phone-screen { border-radius: 0 !important; height: 100dvh !important; width: 100% !important; overflow: hidden !important; } /* 安全区：刘海屏底部提示条不挡 Tab 栏 */ .tabbar { padding-bottom: max(2px, env(safe-area-inset-bottom)) !important; } .status-bar { padding-top: env(safe-area-inset-top) !important; height: calc(40px + env(safe-area-inset-top)) !important; }