* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f5f7; color: #222; } .hidden { display: none !important; } /* 登录 */ .login-box { max-width: 340px; margin: 14vh auto; background: #fff; padding: 32px 28px; border-radius: 14px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,0.06); } .login-box h1 { color: #b08d57; font-size: 26px; letter-spacing: 2px; } .login-box p { color: #999; margin: 8px 0 20px; } .login-box input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 14px; font-size: 15px; } .login-box button { width: 100%; padding: 12px; border: none; border-radius: 8px; background: #b08d57; color: #fff; font-size: 15px; cursor: pointer; } .login-box button:disabled { opacity: .55; cursor: not-allowed; } /* 品牌 Logo（缺图时自动隐藏，退回金色字标） ★ logo.svg 是「透明底 + 菱形 + 十字镂空」，所以： - object-fit 必须 contain（cover 会把上下尖角裁掉）； - 不能再用米色底 / border-radius / 方形 box-shadow —— 那三样是给不透明方图准备的， 套在菱形上会露出一个米色方块； - 也不要用 filter: drop-shadow()：十字缝是透明的，投影会从缝里透出来， 在菱形底端拖出一条脏线。想要立体感靠外包卡片本身的投影就够了。 */ .brand-logo { display: block; width: 76px; height: 76px; margin: 0 auto 14px; object-fit: contain; } .hdr-logo { width: 24px; height: 24px; object-fit: contain; vertical-align: -7px; margin-right: 8px; } /* 图形验证码 */ .cap-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 6px; } .cap-row input { flex: 1; margin-bottom: 0 !important; letter-spacing: 3px; text-transform: uppercase; } .cap-row canvas { width: 132px; height: 46px; border-radius: 8px; border: 1px solid #e6ded1; cursor: pointer; flex: 0 0 auto; background: #faf7f2; } .cap-tip { color: #bbb; font-size: 12px; text-align: right; margin-bottom: 14px; } .err { color: #e4393c; font-size: 13px; min-height: 18px; margin-top: 10px; line-height: 1.65; white-space: pre-line; text-align: left; } .err .err-title { font-weight: 600; display: block; margin-bottom: 4px; } .err ol { margin: 6px 0 0 18px; } .err li { margin-bottom: 3px; } /* 「我已开启，重新连接」是次要动作，要跟主按钮区分开（.login-box button 优先级更高，这里压回来） */ .login-box button.ghost { background: #f6f2ea; color: #8a6a33; border: 1px solid #e2d6c0; margin-top: 10px; font-size: 14px; } .login-box button.ghost:hover { background: #efe8d9; } /* 主界面 */ header { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 14px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } .brand { font-weight: 600; color: #b08d57; font-size: 17px; } /* Tab 栏 */ /* ★ 18 个标签在 1440 宽的屏幕上按原来的 padding 放不下，flex 会把按钮压扁、 中文被折成竖排两行（「成本测 / 算」），既难认又白占一行高度。 改成：按钮不参与压缩 + 文字不折行 + 真放不下时整条横向滚动。 */ .tabs { display: flex; gap: 4px; background: #fff; padding: 10px 20px 0; border-bottom: 1px solid #eee; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .tabs::-webkit-scrollbar { height: 4px; } .tabs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; } .tab { flex: 0 0 auto; white-space: nowrap; border: none; background: none; padding: 10px 12px; cursor: pointer; font-size: 14px; color: #666; border-bottom: 2px solid transparent; } .tab.active { color: #b08d57; font-weight: 600; border-bottom-color: #b08d57; } .panel { padding-bottom: 40px; } /* ★★★ 整页同一条竖线（2026-10-30，Jeff：「为何页面的上方不统一两边对齐」） 上一版只让表格 / 工具栏 / 分页条居中，页头和 tab 栏还是 100% 通栏： 结果上方顶到屏幕两边、下方缩在中间，看着像两张皮。 统一做法：body 上有一个 --col-w（= 当前面板的内容列宽，由 admin.js 的 syncPageColumn 在切 tab / 表格渲染后同步），页头、tab 栏、提示条、面板全部用它。 ★ 面板内部的 --tbl-w 是「面板级」变量，不会被这里影响； 而 --col-w 只在 body 上，页面外壳和当前面板因此永远同一个宽度、同一条中心线。 ★ 宽度不给死值、跟着当前面板走：切到分类页就该和分类表一样宽，不能留商品页的宽度。 */ header, .tabs, .ver-warn, .idle-warn, .panel { max-width: var(--col-w, none); margin-left: auto; margin-right: auto; } .toolbar { display: flex; gap: 8px; padding: 14px 20px 12px; flex-wrap: wrap; } .toolbar input { flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; } .toolbar button, .modal-actions button, .pager button, .item-actions button { padding: 9px 14px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; } .primary { background: #b08d57; color: #fff; } .ghost { background: #eee; color: #555; } .ghost.small { padding: 5px 10px; font-size: 13px; } .ghost.danger { background: #fde8e8; color: #e4393c; } .list { padding: 0 20px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 12px; } .card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.05); } /* 商品缩略图只用来辨认，不用占那么大地方（原 180px 太高，一屏看不完几件） */ .card img { width: 100%; height: 116px; object-fit: cover; background: #f0f0f0; } .card .info { padding: 10px 12px; } .card .name { font-weight: 600; margin-bottom: 6px; } .card .meta { color: #888; font-size: 13px; display: flex; justify-content: space-between; } .card .price { color: #e4393c; font-weight: 600; font-size: 16px; } .card .code { color: #b8860b; font-size: 12px; letter-spacing: .5px; } .tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; } .tag.on { background: #e8f7ee; color: #1aad19; } .tag.off { background: #f3f3f3; color: #999; } .tag.wait { background: #fdf3e6; color: #e6a23c; } /* 客户类型：企业用金色、个人用灰蓝，跟「等级」的绿色区分开（两个 tag 挨着放时不混） */ .tag.gold { background: #fbf3df; color: #b8860b; } .tag.grey { background: #eef1f5; color: #6b7a8d; } /* 蓝色 = 注册用户（区别于「订单」绿、「手工」灰） */ .tag.blue { background: #e8f2fd; color: #1f6fb2; } .item-actions { display: flex; gap: 8px; padding: 0 12px 12px; } .item-actions button { flex: 1; } .pager { text-align: center; padding: 10px 0 40px; } .pager button { margin: 0 6px; } .pager .disabled { opacity: 0.4; pointer-events: none; } /* 弹窗 */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 30px 12px; z-index: 50; } .modal-card { background: #fff; width: 100%; max-width: 480px; border-radius: 12px; padding: 22px; } .modal-card.wide { max-width: 640px; }.modal-card h2 { color: #b08d57; margin-bottom: 16px; } form label { display: block; font-size: 13px; color: #666; margin-bottom: 12px; } .modal-card label { display: block; font-size: 13px; color: #666; margin-bottom: 12px; } .modal-card label input, .modal-card label select, .modal-card label textarea { width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-family: inherit; } .row { display: flex; gap: 12px; } .row label { flex: 1; } .img-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .img-preview .thumb { position: relative; } .img-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; } .img-preview .del { position: absolute; top: -6px; right: -6px; background: #e4393c; color: #fff; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 12px; cursor: pointer; line-height: 1; } /* 分类图标：预览 + 上传/清除 + 一句状态（fileID 不外露给商家） */ .icon-fld { margin-bottom: 12px; } .icon-cap { font-size: 13px; color: #666; margin-bottom: 6px; } .icon-row { display: flex; align-items: flex-start; gap: 12px; } .icon-prev { width: 56px; height: 56px; flex: 0 0 56px; border: 1px dashed #ddd; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fafafa; cursor: pointer; } .icon-prev:hover { border-color: #b08d57; } .icon-prev img { width: 100%; height: 100%; object-fit: cover; display: block; } .icon-prev .c-emoji { font-size: 26px; line-height: 1; } .icon-prev .icon-empty { font-size: 11px; color: #bbb; text-align: center; line-height: 1.3; padding: 0 4px; } .icon-ops { flex: 1; min-width: 0; } .icon-btns { display: flex; gap: 8px; } .icon-state { display: block; margin-top: 7px; font-size: 12px; color: #b3a894; line-height: 1.5; } .icon-state.warn { color: #d4380d; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; } /* 弹窗里标题下的一句说明（如「停用后历史流水仍保留」） */ .modal-card .modal-sub { font-size: 12.5px; line-height: 1.7; color: #8b8074; margin: -6px 0 14px; } /* ========================================================================== 测试单清理弹层（2026-10-30） ★ 这里**刻意不复用 .tbl**：.tbl 那套带 table-layout:fixed + max-width:var(--tbl-w)， 放进弹层会因为 var 取自外层面板而宽度错乱。弹层里就 6 列、内容短，用网格最省事。 ========================================================================== */ #modal-testPurge .modal-card { max-width: 880px; } .tp-sum { font-size: 13px; color: #5f4a2c; margin: 0 0 10px; } .tp-sum b { color: #b8860b; font-size: 15px; } .tp-sum .warn { color: #c0392b; } .tp-scroll { max-height: 320px; overflow: auto; border: 1px solid #efe9dd; border-radius: 8px; } .tp-row { display: grid; grid-template-columns: 168px 122px 78px minmax(140px, 1fr) 132px 64px; gap: 8px; align-items: center; padding: 7px 10px; font-size: 12.5px; color: #333; border-bottom: 1px solid #f6f2ea; } .tp-row:last-child { border-bottom: none; } .tp-row.head { background: #faf8f4; color: #7a7062; font-weight: 600; position: sticky; top: 0; z-index: 1; } .tp-row .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; } .tp-row .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp-blocked { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: #fdf6e3; border-left: 4px solid #b8860b; font-size: 12px; color: #6b5b3a; line-height: 1.8; max-height: 130px; overflow: auto; } .tp-ops { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .tp-ops .tp-sp { flex: 1 1 auto; } /* ★ 弹层里的 label 会被 `.modal-card label { display:block }` 接管 —— 复选框会被顶到 文字上面一行、右边再撑出 100% 宽度（预览时一眼就看出来：「含已发货的单」竖着长）。 所以这里把这条链上的 display / width / margin 全部写死回 inline。 */ .tp-ops .stat-chk { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: #6b5b3a; white-space: nowrap; } .tp-ops .stat-chk input { width: 15px; height: 15px; margin: 0; accent-color: #b8860b; } .tp-ops input[type=password] { width: 200px; padding: 9px 11px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; } /* 危险动作：和普通主按钮区分开，避免手滑 */ .btn-danger, .primary.danger { background: #c0392b !important; color: #fff !important; } .btn-danger:hover, .primary.danger:hover { background: #a93226 !important; } .primary.danger:disabled { background: #d8b3ae !important; cursor: not-allowed; } .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; z-index: 99; } /* ========================================================================== 统一表格：后台所有列表页共用这一套（商品/分类/轮播/订单/售后/咨询/经纪人/券/会员/账号） ★ 以前每个模块各写一套（.table / .tbl / .acct-table），行高、表头色、空态 全都对不齐，看着就「乱」。新增列表一律用 .tbl-wrap > table.tbl ========================================================================== */ .tbl-wrap, .table-wrap { padding: 0 20px 14px; overflow-x: auto; } /* ★★★ 面板内的「内容列」对齐（2026-10-29 第三版） 表格是按内容宽度排的（见 renderTable 的 max-width），大屏上它会只占左边一段。 如果工具栏 / 筛选条 / 分页条继续 100% 铺满，就会出现「表格在左、搜索框拉到 1000px、 「导出 CSV」甩到屏幕最右边」——那是 Jeff 在 2K 屏上看到并质疑的形态。 --tbl-w 由 renderTable 写在 .panel 上（取该面板内最宽的那张表）， 下面这几块统一跟它对齐，左右边界就和表格完全一致。 */ .toolbar, .filter-bar, .tbl-wrap, .table-wrap, .hint-box { max-width: var(--tbl-w, none); /* ★★★ 居中（2026-10-30，Jeff：「后台页面能否做到两段对齐」） 上面那句 max-width 只做到「收窄」，元素依然贴左 → 宽屏上右边空出 972px， 看着像内容只占了半个页面。真正让「左右留白相等」的是 margin:auto。 ★ 窗口比 --tbl-w 窄时，元素本身就是 100% 宽，margin:auto 自动失效，小屏行为不变。 */ margin-left: auto; margin-right: auto; } /* ★ 子标签栏 / 列表标题行也要跟着同一把尺子（2026-10-30，客户 → 购物车）。 两者都是 `padding: … 20px …`、和 .toolbar 一致，所以加上来之后 子标签按钮、工具栏第一个按钮、表格左边缘严格对齐。 ★ 不加上来会怎么样：面板 1200 宽居中，购物车表只有 1116 → 工具栏居中后 左移 42px，子标签还贴在 1200 的最左边 → 又变成「上面一截、下面一截」。 ★ .list-head 同理，尤其是它右边那个「刷新」按钮用 space-between 顶到最右， 不跟尺子就会甩到面板最右边、跟表格右边缘错开。 */ .subtabs, .list-head { max-width: var(--tbl-w, none); margin-left: auto; margin-right: auto; } /* 分页条的两次修正（别各改一半，会互相打架）： ① 2026-10-29：按钮不能再往右推 —— 原来有个 `.tp-sp { flex:1 }` 把按钮甩到面板最右边， Jeff 在 2K 屏上一眼看出来「表格在左、按钮在最右」。改成 `flex: 0 0 auto`，按钮紧跟统计。 ② 2026-10-30：分页条**要**跟表格同一把尺子（--tbl-w）并一起居中，见下面 .tbl-pager 里那条。 ★ 这一条才是生效的那条（同名规则后者胜，别再在后面补一条 flex:1）。 */ /* 报表分页条：一屏只留一条工具条（共 N 条 · 每页 N 条 · 翻页 · 导出） */ .tbl-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 20px 18px; font-size: 13px; color: #666; /* ★★ 分页条跟表格用同一把尺子并一起居中（2026-10-30）。 以前这里故意不设 max-width：怕把它压窄了折行。现在设了，但只有在 .tbl-pager 内容比表格还宽时才会折 —— 实测最窄的带分页条的表是分类表 612px， 内容区 572px，而分页条内容约 480px，仍有 90px 余量。 ★ 它自带和 .tbl-wrap 一样的左右 20px padding，所以内容起点/终点和表格严格对齐。 */ max-width: var(--tbl-w, none); margin-left: auto; margin-right: auto; } .tbl-pager .tp-info b { color: #333; font-size: 14px; } .tbl-pager .tp-hint { margin-left: 8px; color: #b8860b; font-size: 12px; } .tbl-pager .tp-sp { flex: 0 0 auto; } .tbl-pager .tp-size { color: #666; white-space: nowrap; } .tbl-pager .tp-sel { height: 30px; padding: 0 6px; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-size: 13px; font-family: inherit; color: #333; } .tbl-pager .tp-btn { height: 30px; padding: 0 12px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #555; font-size: 13px; font-family: inherit; cursor: pointer; } .tbl-pager .tp-btn:hover { border-color: #b8860b; color: #b8860b; } .tbl-pager .tp-btn.primary { background: #b8860b; border-color: #b8860b; color: #fff; } .tbl-pager .tp-btn.primary:hover { opacity: .9; color: #fff; } .tbl-pager .tp-btn[disabled] { color: #bbb; border-color: #eee; background: #fafafa; cursor: not-allowed; } .tbl-pager .tp-btn[disabled]:hover { color: #bbb; border-color: #eee; } .tbl, .table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.05); } /* ★★★ table-layout: fixed —— 让「声明了多少就是多少」 默认的 auto 布局里，width 只是**建议值**：浏览器会按内容重新分配。 实测（优惠券表）声明「生效日 96px、操作 124px」，因为券名称那列文字长， 浏览器把这两列压到 85px 和 103px → 「操作」里两个按钮被挤成上下两行，行高从 44 变 71。 这正是 Jeff 说的「表格格式做得太差」的一种形态：看着空的地方不空，看着该宽的地方反而窄。 fixed 之后列宽完全按 renderTable 里的 w 走，行高稳定；超长内容交给 .ellip 省略号。 ★ 代价：内容比列宽长时不会「自动撑开」，所以列宽必须量过（tools/audit-table-cols.js）。 */ .tbl { table-layout: fixed; } .tbl th, .table th { background: #faf7f2; color: #6b5a3e; font-weight: 600; font-size: 13px; padding: 9px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid #ece5d8; } .tbl td, .table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #f2efe9; vertical-align: middle; /* fixed 布局下格子不会自动变宽，漏了 .ellip 的长文本会横穿到隔壁列（看着像乱码）。 兜一道：宁可截断，也不许压别人的格子。 */ overflow: hidden; } .tbl tbody tr:last-child td, .table tr:last-child td { border-bottom: none; } .tbl tbody tr:hover td { background: #fdfbf7; } .tbl tr.is-off td { color: #b5b5b5; } /* 单元格内的排版小件 */ .tbl .num { text-align: right; font-variant-numeric: tabular-nums; } .tbl .ctr { text-align: center; } .tbl .u { font-family: Consolas, Monaco, monospace; color: #8a6a33; } .tbl .money { color: #c0392b; font-weight: 600; } /* 已取消 / 已停用的行整行变灰，金额也别再抢眼 */ .tbl tr.is-off .money { color: #a8a8a8; font-weight: 500; } /* 商品列表「上架 / 下架」两行小字（Jeff：显示上架日期和下架日期） ★ 为什么挤一列两行而不是并排两列：商品表 11 列自然宽已 1002px， 可用宽只有 1052px（1092 窗口 − 40），再加两列必然要横向拖才能看到日期。 ★ 两行**不会把行撑高**：缩略图 40px 已经把行撑到 56px，两行 11.5px 才 34px。 ★ white-space:nowrap 不能少 —— 少了之后窄列里「2026-10-21 20:57」 会被折成「2026-10-21」+「20:57」两行，一行变四行，整张表立刻散架。 */ .tbl .shelf { line-height: 1.45; } .tbl .shelf-l { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; } .tbl .shelf-l + .shelf-l { margin-top: 1px; } .tbl .shelf-k { flex: 0 0 auto; font-style: normal; font-size: 11px; line-height: 1.45; padding: 0 2px; border-radius: 3px; color: #8a7a5e; background: #f5f1e9; } /* 上架=绿、下架=灰，跟原来那颗 tag 的配色一致，扫一眼就知道在不在卖 */ .tbl .shelf-k.on { color: #1aad19; background: #e8f7ee; } .tbl .shelf-k.off { color: #8f8f8f; background: #f3f3f3; } .tbl .shelf-v { font-size: 11.5px; color: #555; font-variant-numeric: tabular-nums; } /* 虚线 = 这个时间是按商品创建时间推算的（上线前就建好的老商品，库里没记真实上架时刻） */ .tbl .shelf-v.guess { border-bottom: 1px dotted #c9bda6; cursor: help; } /* ★★★ 必须 display:inline-block —— max-width / overflow / text-overflow 对**行内元素无效**！ 咨询列表的「最新消息」就是纯 ，没有 inline-block， 于是 max-width 300px 完全不生效，文字直接压到右边「openid / 状态 / 更新时间」三列上 （Jeff 截图里那一行字横穿整行就是这个）。商品名称那种自带 style="display:inline-block" 的反而没事 —— 所以这问题只在个别表冒出来，很容易漏。 */ .tbl .ellip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* ★★★ fixed 布局的必配兜底：超长文字不会再把格子撑开，不截断就会**压到隔壁列上**。 商品表就是现成的例子：商品名称 170px，`.ellip` 的内联 max-width 写着 280px， fixed 之后它按 280 渲染 → 名字后半截直接盖住「编号」列（截图里一眼就看见）。 内联样式优先级最高，所以这里必须 !important；100% = 单元格内容宽度。 */ .tbl td .ellip { max-width: 100% !important; } /* 售后「商品」列：一单多件就一行一件。 ★ 必须 nowrap —— 不写的话列一窄中文会「一个字一行」竖着排，行高直接翻几倍。 完整名称在 title 里（鼠标悬停可见），不要为了显示全名把整张表撑爆。 */ .goods-cell > div { max-width: 232px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.75; } /* ★★ 232px 是给「售后 / 订单」那种固定列宽的表定的。客户购物车那张表的「内容」列 天生更宽（一列里装好几个商品），照抄 232px 会被截掉一半、右边空一大片 —— 和 .ellip 那次（max-width 挂在行内元素上）是同一类坑：**上限借错了地方**。 所以给个修饰类，只在使用它的那处放开到列宽本身。 */ .goods-cell.wide > div { max-width: 100%; } .tbl .nowrap { white-space: nowrap; } .tbl .row-actions { white-space: nowrap; text-align: right; } .tbl .row-actions button { margin-right: 6px; } .tbl .row-actions button:last-child { margin-right: 0; } /* 主标题 + 副标题两行：商品名 + 编号、订单号 + 下单时间 等 */ .tbl .tbl-main { font-weight: 600; color: #333; line-height: 1.4; } .tbl .tbl-sub { color: #999; font-size: 12px; margin-top: 3px; line-height: 1.4; } /* 表格里直接编辑的单元格（会员档位门槛/折扣、经纪人佣金比例） */ .tbl td > input, .tbl td > select { width: 100%; padding: 6px 9px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; font-family: inherit; } .tbl td > input.narrow { width: 88px; } /* 表格里的「排序」小输入框：窄、居中，改完自动保存 */ // 排序输入框：54px 装 4 位数绰绰有余（原来 62 白占 8px 列宽）。 // ★ 必须把 up/down 箭头关掉：type=number 的 spinner 会吃掉十几个像素， // 54px 时占位符「默认」被切成「默」+ 半个箭头（截图确认过）。 .tbl .tbl-sort { width: 54px; height: 30px; padding: 0 4px; text-align: center; border-radius: 6px; } .tbl .tbl-sort::-webkit-inner-spin-button, .tbl .tbl-sort::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .tbl .tbl-sort { -moz-appearance: textfield; } .tbl td > input[type=number] { text-align: right; } .c-icon { font-size: 22px; } .c-emoji { font-size: 22px; } .thumb-sm, .thumb-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: #f0f0f0; vertical-align: middle; } .thumb-wide { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; background: #f0f0f0; vertical-align: middle; } .link-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #888; } .row-actions { white-space: nowrap; } .empty { text-align: center; color: #999; padding: 60px 20px; font-size: 14px; } /* 列表空态：包一张白卡片，别在灰底上孤零零一行字 */ .tbl-empty { background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.05); margin: 0 20px; padding: 48px 20px; } /* 订单筛选 */ .order-filter { display: flex; gap: 8px; padding: 16px 20px 4px; flex-wrap: wrap; } .order-filter input { padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; width: 150px; } .order-filter button { padding: 9px 14px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; } .count-tip { padding: 6px 20px 0; color: #999; font-size: 13px; } /* 订单卡片 */ .order-list { padding: 10px 20px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; } .o-card { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 1px 6px rgba(0,0,0,0.05); cursor: pointer; transition: box-shadow 0.15s; } .o-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.1); } .o-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .o-no { font-weight: 600; font-size: 14px; color: #555; word-break: break-all; } /* ★ white-space: nowrap 必须加：表格被挤窄时「已付款」会竖成「已付/款」三个字两行， 一行高度直接翻倍。宁可让表格横向滚动，也不要状态标签变形。 */ .o-status { display: inline-block; font-size: 13px; padding: 2px 10px; border-radius: 10px; color: #fff; flex-shrink: 0; white-space: nowrap; } .o-status.s0 { background: #e6a23c; } .o-status.s1 { background: #409eff; } .o-status.s2 { background: #07a35a; } .o-status.s3 { background: #b08d57; } .o-status.s4 { background: #e4393c; } /* s5 / s6 不是订单 status，是「售后状态」的显示用色： 已退款（紫）要和已完成的金、已取消的红都区分开，一眼能看出钱退回去了 */ .o-status.s5 { background: #8b6fb8; } .o-status.s6 { background: #d48806; } /* 状态列的第二行：原订单状态，小字灰，别抢主标签 */ .rf-sub { font-size: 11px; color: #a99a80; margin-top: 3px; } .o-line { font-size: 13px; color: #666; margin-bottom: 6px; line-height: 1.5; } .o-label { color: #999; margin-right: 6px; } .o-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; } .o-time { color: #999; font-size: 12px; } .o-total { color: #e4393c; font-weight: 600; font-size: 15px; } .o-tip { margin-top: 8px; font-size: 12px; color: #b08d57; text-align: right; } /* 订单详情 */ .od-status { display: inline-block; font-size: 14px; padding: 3px 14px; border-radius: 12px; color: #fff; margin-bottom: 14px; } .od-status.s0 { background: #e6a23c; } .od-status.s1 { background: #409eff; } .od-status.s2 { background: #07a35a; } .od-status.s3 { background: #b08d57; } .od-status.s4 { background: #e4393c; } .timeline { padding: 6px 0 16px; } .t-item { display: flex; gap: 12px; padding-bottom: 16px; position: relative; } .t-item:not(:last-child)::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: #eee; } .t-item.done:not(:last-child)::before { background: #b08d57; } .t-dot { width: 16px; height: 16px; border-radius: 50%; background: #ddd; flex-shrink: 0; margin-top: 2px; } .t-item.done .t-dot { background: #b08d57; } .t-title { font-size: 14px; font-weight: 600; color: #999; } .t-item.done .t-title { color: #333; } .t-time { font-size: 12px; color: #bbb; margin-top: 2px; } .t-item.done .t-time { color: #999; } .od-block { border-top: 1px solid #f0f0f0; padding: 12px 0; } .od-title { font-size: 14px; font-weight: 600; color: #b08d57; margin-bottom: 8px; } .od-row { display: flex; font-size: 13px; color: #555; margin-bottom: 6px; line-height: 1.5; } .od-label { width: 70px; color: #999; flex-shrink: 0; } .og-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .og-img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: #f0f0f0; flex-shrink: 0; } .og-info { flex: 1; min-width: 0; } .og-name { font-size: 13px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .og-meta { font-size: 12px; color: #999; margin-top: 3px; } .og-sub { font-size: 13px; color: #b08d57; font-weight: 600; flex-shrink: 0; } .od-total { text-align: right; font-size: 15px; color: #e4393c; font-weight: 600; padding-top: 12px; border-top: 1px solid #f0f0f0; } /* 咨询 */ .msg-list { padding: 16px 20px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .m-card { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 1px 6px rgba(0,0,0,0.05); cursor: pointer; } .m-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.1); } .m-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .m-name { font-weight: 600; font-size: 14px; } .m-content { font-size: 13px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; } .m-foot { display: flex; justify-content: space-between; font-size: 12px; color: #999; } .chat-history { max-height: 300px; overflow-y: auto; padding: 10px; background: #f7f7f9; border-radius: 8px; margin-bottom: 12px; } .bubble { max-width: 78%; padding: 8px 12px; border-radius: 10px; font-size: 14px; margin-bottom: 10px; line-height: 1.5; } .bubble.shop { background: #fff; border: 1px solid #eee; margin-right: auto; } .bubble.me { background: #b08d57; color: #fff; margin-left: auto; } .b-time { font-size: 11px; opacity: 0.6; margin-top: 4px; } /* ===== 商品编辑弹窗扩展 ===== */ .modal-card.wide { width: 92vw; max-width: 880px; max-height: 92vh; overflow-y: auto; } .section { background: #fafafa; border-radius: 8px; padding: 14px; margin-bottom: 14px; } .section h3 { margin: 0 0 10px; font-size: 15px; color: #333; } /* 规格项 */ .spec-item { background: #fff; padding: 10px; border-radius: 6px; margin-bottom: 10px; } .spec-head-row { display: flex; gap: 8px; margin-bottom: 8px; } .spec-head-row input { flex: 1; padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; } .spec-vals-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .spec-val-input { display: flex; align-items: center; background: #fff; border: 1px solid #ddd; border-radius: 6px; } .spec-val-input input { width: 130px; padding: 6px 10px; border: none; font-size: 13px; outline: none; } .spec-val-input button { background: transparent; border: none; color: #999; padding: 0 8px; cursor: pointer; } /* SKU 子表 */ .sku-item { background: #fff; padding: 10px; border-radius: 6px; margin-bottom: 10px; } .sku-head-row { display: flex; gap: 8px; margin-bottom: 8px; } .sku-head-row input { flex: 1; padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; font-weight: 600; } .sku-spec-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .sku-spec-cell { flex: 1; min-width: 130px; display: flex; flex-direction: column; } .sku-spec-cell .lbl { font-size: 11px; color: #999; margin-bottom: 2px; } .sku-spec-cell input { padding: 5px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; } .sku-price-row { display: flex; gap: 8px; margin-bottom: 8px; } .sku-price-row label { flex: 1; font-size: 12px; color: #666; } .sku-price-row label input { width: 100%; padding: 5px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; margin-top: 2px; } .sku-img-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sku-thumb { position: relative; display: inline-block; } .sku-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; } .sku-thumb button { position: absolute; top: -6px; right: -6px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; font-size: 12px; } /* ========================================================================== 新增模块通用件（售后 / 经纪人 / 优惠券 / 会员 / 店铺） ========================================================================== */ .section-card { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 14px; } .section-card h3 { margin: 0 0 12px; font-size: 15px; border-left: 4px solid #b8860b; padding-left: 8px; } .section-card .row { align-items: flex-end; } .hint-box { background: #fdf6e3; border-left: 4px solid #b8860b; /* ★ 左右必须是 auto 不能是 0（2026-10-30）：上面那条组规则给了 max-width: var(--tbl-w)，可这里是 `margin` 简写、且写在后面 —— 简写会把 margin-left/right 一起重置成 0，居中当场失效（同名后者胜）。 实测：面板 1200、购物车表 1116 时会偏左 42px，一眼就能看出「上面一截下面一截」。 */ padding: 10px 12px; margin: 10px auto; font-size: 12.5px; color: #6b5b3a; line-height: 1.7; } .hint-box b { color: #8a6d0b; } .hint-box:empty { display: none; } label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #333; } label.inline input[type="checkbox"] { width: auto; margin: 0; } .muted { color: #999; } .err-text { color: #c0392b; } hr { border: none; border-top: 1px solid #eee; margin: 14px 0; } /* 表格里的小按钮（行内操作） */ .rf-btn.sm { padding: 4px 10px; font-size: 12px; } .tbl .rf-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } /* 待处理的行给一点底色，一眼看到该干活的单子 */ .tbl tr.is-wait td { background: #fffdf6; } /* 售后（列表已改成表格，卡片样式只留弹窗/详情里可能用到） */ .rf-card { background: #fff; border-radius: 8px; padding: 14px; margin-bottom: 12px; } .rf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .rf-no { font-weight: 600; font-size: 14px; } .rf-line { font-size: 13px; color: #555; margin: 4px 0; } .rf-g { font-size: 13px; padding: 2px 0; } .rf-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee; } .rf-btn { background: #fff; border: 1px solid #ddd; color: #555; padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; } .rf-btn:hover { border-color: #b8860b; color: #b8860b; } .rf-btn.primary { background: #b8860b; border-color: #b8860b; color: #fff; } .rf-btn.primary:hover { opacity: .9; color: #fff; } .rf-btn.danger { background: #fff; border-color: #c0392b; color: #c0392b; } /* 状态标签（售后 / 经纪人 / 券 共用） */ .rf-status { font-size: 12px; padding: 3px 9px; border-radius: 4px; background: #f2f2f2; color: #777; white-space: nowrap; } .rf-status.s-applied { background: #fdecea; color: #c0392b; } /* 待处理：要紧 */ .rf-status.s-agreed { background: #fdf6e3; color: #8a6d0b; } .rf-status.s-returned { background: #fdf6e3; color: #8a6d0b; } .rf-status.s-refunding { background: #eaf2fa; color: #1c5d99; } .rf-status.s-refunded { background: #eaf7f0; color: #1e7f4f; } .rf-status.s-rejected { background: #f2f2f2; color: #999; } .rf-status.s-canceled { background: #f2f2f2; color: #999; } .rf-status.s-failed { background: #fdecea; color: #c0392b; } .rf-status.s-applying { background: #fdf6e3; color: #8a6d0b; } .rf-status.s-on { background: #eaf7f0; color: #1e7f4f; } .rf-status.s-off { background: #f2f2f2; color: #999; } /* 会员档位行 */ .lv-row { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f5f5f5; } .lv-in { padding: 7px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; } .lv-name { flex: 2; } .lv-min { flex: 1; text-align: center; } .lv-dis { flex: 1; text-align: center; } /* 店铺营业状态 */ .shop-state { font-size: 22px; font-weight: 700; padding: 10px 0; } .shop-state.on { color: #1e7f4f; } .shop-state.off { color: #c0392b; } /* ===== 顶栏登录账号信息 ===== */ .hdr-right { display: flex; align-items: center; gap: 14px; } .who { font-size: 13px; color: #6b5a3e; background: #faf7f2; border: 1px solid #e8e0d0; padding: 5px 12px; border-radius: 20px; white-space: nowrap; } .who b { color: #8a6a33; font-weight: 600; } .who .role { color: #b08d57; margin-left: 6px; } .who .via { color: #b9ab90; margin-left: 6px; font-size: 12px; } /* ===== 账号管理 ===== */ /* 面板里的按钮：这些按钮不在 .toolbar / .modal-actions 里，得单独给一套尺寸 */ .section-card button { padding: 9px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; } .section-card button.ghost { background: #eee; color: #555; } /* 账号表沿用统一 .tbl，这里只放账号专属的小件 */ .acct-badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; background: #f3efe7; color: #8a6a33; } .acct-badge.off { background: #f2f2f2; color: #999; } .acct-ops { display: flex; gap: 6px; flex-wrap: wrap; } /* 角色权限勾选 */ .role-editor { display: grid; gap: 14px; } .role-row { border: 1px solid #eee6d8; border-radius: 10px; padding: 12px 14px; background: #fff; } .role-row .rh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .role-row .rh b { color: #5f4a2c; font-size: 15px; } .role-row .rh input { width: 130px; padding: 5px 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; } .role-row .rh .tagkey { font-size: 12px; color: #b9ab90; font-family: Consolas, Monaco, monospace; } .perm-chips { display: flex; flex-wrap: wrap; gap: 8px; } .perm-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 4px 11px; border: 1px solid #e2d6c0; border-radius: 16px; background: #faf7f2; cursor: pointer; color: #6b5a3e; user-select: none; } .perm-chip input { margin: 0; cursor: pointer; } .perm-chip.on { background: #f5e9d4; border-color: #c9a76a; color: #7a5c2c; font-weight: 600; } .perm-chip.all { background: #fdf3e6; border-color: #e0c48e; color: #a0762e; } /* ========================================================================== 表单卡片 / 列表头 / 筛选条 —— 设置页与新建页统一版式（2026-10-24） ★ 为什么之前优惠券、经纪人、会员、店铺这几页看着乱： 这些