/* ================= 宾馆房态系统 样式（云掌柜风格） ================= */ :root{ --bg:#fafafa; /* 页面背景 */ --panel:#ffffff; --line:#e5e7eb; --line2:#eef0f2; --tool:#eef3f2; /* 工具条/控件条背景 */ --text:#1f2937; --text2:#5b6973; --text3:#9aa5b1; --primary:#00796b; /* 云掌柜深墨绿（主色） */ --primary-d:#00695c; --primary-l:#e0f2ef; --danger:#dc2626; --danger-l:#fef2f2; --radius:10px; --shadow:0 6px 24px rgba(15,23,42,.10); /* 顶栏：云掌柜深墨绿 */ --nav:#006b5d; --nav-2:#00897b; --nav-t:#e3efec; --nav-t2:#a8d5cd; --nav-active:#00796b; /* v67：房号列由 96px 再收窄到 74px —— 表头「房间 / 日期」改为两行竖排，不再横向撑宽首列。 生产库实测房号只有 3~4 位数字，74px 内完整可读（含联房角标），横向空间全让给房态格子。 */ --roomw:74px; --dayw:68px; --cellh:62px; --ghh:50px; /* 日期行高度：容纳「日期+星期 / N间」两行（写不下就换行） */ /* 说明：--dayw 既是默认列宽，也是 JS 列宽自适应的「可读下限」。 区间短 → 列宽自动铺满屏幕（最多 132px）；区间长 → 取此下限并横向滚动， 日期文字写不下时换行显示，不缩小字体。 */ /* 房态状态色（与 --cell-* 同色系：浅底 + 深字，保证图例/标签和房态格一致） */ --st-clean:#ffffff; --st-clean-t:#9aa5b1; --st-clean-b:#e5e7eb; --st-booked:#ffbe55; --st-booked-t:#111827; --st-booked-b:#d98b00; --st-occupied:#4fd6c2; --st-occupied-t:#111827; --st-occupied-b:#0f9c86; --st-checkedout:#c5c9cd;--st-checkedout-t:#1f2937; --st-checkedout-b:#7b8288; --st-dirty:#f1f5f9; --st-dirty-t:#64748b; --st-dirty-b:#cbd5e1; --st-locked:#ede9fe; --st-locked-t:#4c1d95; --st-locked-b:#ddd6fe; --st-maintenance:#475569;--st-maintenance-t:#fff; --st-maintenance-b:#475569; --cell-font:12px; /* 云掌柜房态字号 */ /* iOS「添加到主屏」standalone 模式：因为 black-translucent + viewport-fit=cover， Web 内容从屏幕最顶端开始 → 顶栏会被状态栏（时间/信号/电池）遮住，门店胶囊点不到。 顶栏必须自己让出状态栏高度。浏览器模式下这两个值为 0，桌面端完全不受影响。 */ --sat:env(safe-area-inset-top, 0px); --sab:env(safe-area-inset-bottom, 0px); /* 房态格子大色块（用户可在「设置 → 房态颜色」自定义；app.js 启动时由 DB._meta.theme 注入覆盖） */ --cell-booked:#ffbe55; --cell-booked-ink:#111827; --cell-occupied:#4fd6c2; --cell-occupied-ink:#111827; --cell-checked-out:#c5c9cd; --cell-checked-out-ink:#1f2937; --cell-cancelled:#d6dbe0; --cell-cancelled-ink:#4b5563; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.45;} button{font-family:inherit;cursor:pointer} input,select,textarea{font-family:inherit;font-size:14px;color:var(--text)} [hidden]{display:none !important} /* ---------- 通用控件 ---------- */ .btn{border:1px solid transparent;background:transparent;border-radius:9px;padding:7px 14px;font-size:14px;line-height:1.2;transition:.15s;white-space:nowrap} .btn:active{transform:scale(.97)} .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-d)} .btn-ghost{background:#fff;border-color:var(--line);color:var(--text)} .btn-ghost:hover{border-color:var(--line2);background:#f7f9fb} .btn-danger-ghost{background:#fff;border-color:#f0cdcd;color:var(--danger)} .btn-danger-ghost:hover{background:var(--danger-l)} .btn-soft{background:var(--primary-l);color:var(--primary-d)} .btn-sm{padding:5px 10px;font-size:13px} .btn-ico{padding:5px 9px;font-size:12px} .btn-block{width:100%;padding:11px;font-size:16px;font-weight:600} .btn:disabled{opacity:.5;cursor:not-allowed} .f-label{display:block;font-size:13px;color:var(--text2);margin:12px 0 5px} .f-input{width:100%;border:1px solid var(--line2);border-radius:9px;padding:9px 11px;background:#fff;outline:none;transition:.15s} .f-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,124,102,.12)} .f-inline{width:auto;display:inline-block} .f-row{display:flex;gap:10px} .f-row>.f-grow{flex:1} textarea.f-input{resize:vertical;min-height:64px} select.f-input{cursor:pointer} .f-help{font-size:12px;color:var(--text3);margin-top:4px} /* ---------- 登录页 ---------- */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(150deg,#0f766e 0%,#14b8a6 60%,#5eead4 100%)} .login-card{background:#fff;width:100%;max-width:400px;border-radius:14px;padding:30px 30px 34px;box-shadow:0 20px 60px rgba(15,23,42,.28)} .login-brand{text-align:center;margin-bottom:8px} .login-logo{font-size:42px;line-height:1;margin-bottom:8px} .login-title{margin:8px 0 2px;text-align:center;font-size:21px;font-weight:700;color:var(--text)} .login-sub{text-align:center;color:var(--text3);font-size:13px;margin:0 0 4px} .login-form{margin-top:6px} .login-err{color:var(--danger);font-size:13px;margin-top:10px;min-height:18px;text-align:center} .reg-tip{background:var(--primary-l);color:var(--primary-d);border-radius:8px;padding:9px 12px;font-size:13px;margin:10px 0 2px;line-height:1.55} .login-extra{text-align:right;margin-top:8px} .forgot-link{color:var(--text2);font-size:12.5px;cursor:pointer;user-select:none} .forgot-link:hover{color:var(--primary)} .login-logo img{display:block;border-radius:10px;box-shadow:0 4px 14px rgba(0,121,107,.28)} .login-foot{text-align:center;margin-top:22px;padding-top:14px;border-top:1px solid #eef2f6; font-size:12px;color:var(--text3);letter-spacing:.2px} .app-about{margin-top:20px;padding-top:12px;border-top:1px dashed var(--line2); text-align:center;font-size:12px;color:var(--text3);letter-spacing:.2px} /* 只读输入（如「仅老板可改」的房价）：视觉上明确不可编辑 */ .yz-cell input[readonly],.f-input[readonly]{background:#f5f7f9;color:var(--text2);cursor:not-allowed} /* 我的权限：只读提示条 */ .perm-note{background:#f7f9fb;border:1px dashed var(--line2);border-radius:10px; padding:10px 12px;font-size:12.5px;color:var(--text2);line-height:1.75;margin-top:12px} /* ---------- 应用外壳：深色顶栏 + 左侧边栏 + 内容区 ---------- */ /* 100vh 在 iOS standalone 下可能带抖动，dvh 更准；不支持 dvh 的浏览器自动沿用 100vh */ .app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden} .topnav{background:var(--nav);display:flex;align-items:center;justify-content:flex-start;height:calc(48px + var(--sat, 0px));padding:var(--sat, 0px) 12px 0;flex:none;position:relative;z-index:60} .tn-left{display:flex;align-items:center;gap:6px;min-width:0;height:100%;flex:none} .tn-brand{display:flex;align-items:center;gap:7px;padding-right:10px;flex:none} .tn-logo{width:24px;height:24px;border-radius:6px;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1} .tn-name{font-weight:700;font-size:15px;color:#fff;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis} .tn-store-wrap{flex:none;margin-right:6px} .store-switch{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:5px 10px;color:#fff;outline:none;font-size:13px;max-width:170px;cursor:pointer;transition:.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .store-switch:hover{background:rgba(255,255,255,.14)} .store-switch:focus{border-color:var(--primary)} .store-switch option{color:#1f2937;background:#fff} /* 移动端专用门店切换按钮（桌面隐藏） */ .store-picker{display:none} .picker-caret{opacity:.75;margin-left:1px} .tn-menu{display:flex;align-items:center;height:100%;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;padding-left:4px} .tn-menu::-webkit-scrollbar{display:none} .tn-item{display:flex;align-items:center;color:var(--nav-t);font-size:14px;padding:0 15px;height:100%;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:.15s;user-select:none;text-decoration:none} .tn-item:hover{color:#fff;background:rgba(255,255,255,.06)} .tn-item.active{color:#fff;font-weight:600;border-bottom-color:var(--primary);background:rgba(20,184,166,.10)} .tn-right{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto} .tn-btn{background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:6px;color:var(--nav-t);font-size:13px;padding:5px 11px;cursor:pointer;transition:.15s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px} .tn-btn-ico{display:none} .tn-btn-ico svg,.tn-btn svg{display:block} .tn-btn:hover{color:#fff;background:rgba(255,255,255,.10)} .tn-out:hover{border-color:rgba(248,113,113,.5);color:#fca5a5} .user-chip{font-size:12.5px;color:var(--nav-t);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 12px;cursor:pointer;white-space:nowrap;transition:.15s} .user-chip:hover{color:#fff;background:rgba(255,255,255,.14)} .shell{flex:1;display:flex;min-height:0;overflow:hidden} .sidebar{width:172px;flex:none;background:#fff;border-right:1px solid var(--line);overflow-y:auto;padding:10px 0 20px} .side-group{margin-bottom:10px} .side-group-title{font-size:11px;color:var(--text3);padding:6px 16px;letter-spacing:.3px} .side-item{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 14px;font-size:13.5px;color:var(--text2);cursor:pointer;border-left:3px solid transparent;transition:.12s;white-space:nowrap} .side-item:hover{background:#f8fafc;color:var(--text)} .side-item.active{color:var(--primary-d);background:#f0fdfa;border-left-color:var(--primary);font-weight:600} .content{flex:1;min-width:0;overflow:auto;background:var(--bg)} .page{min-height:100%;display:flex;flex-direction:column} .page[hidden]{display:none} /* 房态页高度铺满，网格内部滚动；其他页由 .content 整体滚动 */ #page-room{height:100%;min-height:0;overflow:hidden} .page-head{padding:16px 20px 0} .page-title{margin:0;font-size:19px;font-weight:700;color:var(--text)} .page-desc{margin:4px 0 0;font-size:12.5px;color:var(--text3)} .page-body{padding:16px 20px 24px;flex:1} /* ---------- 控制栏 ---------- */ .control-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 14px 0} /* 日期导航 + 视图切换：桌面端与原来一致（同行换行），手机端合并为一行横向滚动 */ .cb-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0} .date-nav{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:4px} .range-label{font-size:13px;color:var(--text2);margin:0 6px;font-variant-numeric:tabular-nums} .range-pills{display:flex;gap:4px} /* 分段控件（视图：天数切换） */ .segmented{background:#fff;border:1px solid var(--line);border-radius:11px;padding:3px;display:inline-flex;gap:2px} .segmented .seg{border:none;background:transparent;padding:5px 12px;font-size:13px;color:var(--text2);border-radius:8px;cursor:pointer;transition:.15s;font-weight:500} .segmented .seg:hover{color:var(--text)} .segmented .seg.active{background:var(--primary);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(13,148,136,.25)} .pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;color:var(--text2);cursor:pointer} .pill.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600} .filter-row{margin-left:auto;display:flex;gap:6px;align-items:center} /* === 房态图：今日时间线（红线）已按需求移除 === */ /* ---------- 汇总条 ---------- */ .sum-strip{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 0} .sum-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:7px 12px;display:flex;flex-direction:column;min-width:74px;cursor:default} .sum-card .num{font-size:19px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums} .sum-card .lbl{font-size:11px;color:var(--text3)} .sum-card.tap{cursor:pointer} .sum-card.tap:hover{border-color:var(--line2)} .sum-card.dueIn{background:#fffbe8;border-color:#f0dfa0} .sum-card.dueOut{background:#eef7fd;border-color:#bfdff0} .sum-card.todaymark{border-left:3px solid var(--primary)} /* ---------- 房态网格（flex 表格：列宽固定，分组行横跨全宽） ---------- */ .main-area{flex:1;padding:10px 14px 6px;min-height:0;display:flex} .grid-scroll{flex:1;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 10px rgba(23,43,77,.05);position:relative} .gtable{display:flex;flex-direction:column;position:relative;min-width:100%;width:max-content} .gthead{display:flex;position:sticky;top:0;z-index:20;background:#fff} .gtbody{display:flex;flex-direction:column;min-width:100%} .grow{display:flex} .grow.last .cell{border-bottom-color:transparent} .roomw{width:var(--roomw)} /* 列宽(JS 会写 CSS 变量) */ /* 日期行：① 与下方格子同宽（必须显式给宽，否则会被 flex 压扁导致「表头与房间不对齐」） ② 字号保持可读，写不下就换行（不做字体缩小） ③ 第二行显示剩多少间 */ .gh{position:sticky;top:0;z-index:22;width:var(--dayw);flex:none;box-sizing:border-box; background:#f7f9fb;border-bottom:1px solid var(--line);border-right:1px solid var(--line2); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; padding:3px 2px;height:var(--ghh);font-variant-numeric:tabular-nums;overflow:hidden} .gh-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 4px; line-height:1.2;max-width:100%} .gh-md{font-size:12.5px;font-weight:700;color:var(--text)} .gh-wk{font-size:11.5px;color:var(--text2)} .gh-today{font-size:11px;font-weight:700;color:#fff;background:var(--primary);border-radius:3px;padding:1px 5px;line-height:1.35} .gh-avail{font-size:12.5px;font-weight:700;line-height:1.15;color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap} .gh-avail .u{font-size:9.5px;font-weight:500;color:var(--text3);margin-left:1px} .gh.today{background:#eafaf5;box-shadow:inset 0 -3px 0 var(--primary)} .gh.today .gh-avail{color:var(--primary-d)} .gh-corner{position:sticky;left:0;top:0;z-index:30;width:var(--roomw);flex:none;box-sizing:border-box; background:#f0f4f8;border-bottom:1px solid var(--line);border-right:1px solid var(--line2); color:var(--text2);display:flex;align-items:center;justify-content:center;height:var(--ghh);line-height:1.2} /* v67：表头允许换行（两行竖排「房间 / 日期」），不再用 nowrap 横向撑宽首列 */ .gh-corner .gc-t{font-size:11.5px;color:var(--text3);white-space:normal;word-break:keep-all; text-align:center;line-height:1.22;padding:0 2px} .gh-corner .gc-r{font-size:10px;color:var(--text3);white-space:nowrap} .gh-corner .gc-r b{font-size:13px;font-weight:700;color:var(--primary-d);font-variant-numeric:tabular-nums;margin:0 1px} .grp{width:100%;box-sizing:border-box;background:#f4f6f9;border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:5px 10px;font-size:12.5px;color:var(--text2);position:sticky;top:var(--ghh);z-index:10;display:flex;gap:10px;align-items:center;min-width:0;flex-wrap:nowrap;overflow:hidden} .grp .g-name{font-weight:700;color:var(--text);white-space:nowrap;flex:none} .grp .g-pill{font-size:11px;border-radius:999px;padding:1px 8px;background:#fff;border:1px solid var(--line);white-space:nowrap;flex:none} .grp .g-now{display:flex;gap:5px;margin-left:auto;align-items:center;flex:none} .grp .g-now .now{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;color:#fff;white-space:nowrap} .grp .g-now .now.booked{background:var(--st-booked)} .grp .g-now .now.occupied{background:var(--st-occupied)} .grp .g-now .now.clean{background:#fff;color:var(--text);border:1px solid var(--line)} .grp .g-now .now.dirty{background:var(--st-dirty);color:var(--st-dirty-t);border:1px solid var(--line)} .room-lab{width:var(--roomw);flex:none;box-sizing:border-box;position:sticky;left:0;z-index:8;background:#fff;border-right:1px solid var(--line2);border-bottom:1px solid var(--line);padding:6px 8px;display:flex;flex-direction:column;justify-content:center;min-height:var(--cellh)} .room-lab .no{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px} /* v67：首列收窄后房型名放不下，改单行省略（完整信息在 room-lab 的 title 悬浮提示里） */ .room-lab .meta{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* === 单元格三段式（云掌柜） === */ .cell{ width:var(--dayw);flex:none;box-sizing:border-box; height:var(--cellh);border-right:1px solid var(--line);border-bottom:1px solid var(--line); padding:5px 7px;cursor:pointer;position:relative;user-select:none; /* v68：内容整体垂直居中（原来 flex-start 会全部顶在格子上方，下方留白） */ display:flex;flex-direction:column;justify-content:center;gap:1px;overflow:hidden; } .cell:hover{filter:brightness(.93)} .cell:active{filter:brightness(.88)} /* 三段 */ /* v68：客人姓名居中显示（原先 .nm 用 flex:1 撑满，文字被顶在左侧）； 渠道行紧随其下，同样居中 —— 需求「姓名置中心、渠道放下面」 */ .cell-r1{display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cell-r1 .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0;max-width:100%;text-align:center} /* v60：.cc（客人名后的渠道色小圆点）已按需求移除 */ .cell-r2{font-size:10.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.92;text-align:center} .cell-r3{font-size:10.5px;display:flex;gap:3px;align-items:center;line-height:1.2;margin-top:auto;opacity:.9} .cell-r3 .arr{background:rgba(0,0,0,.18);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600} .cell-r3 .dep{background:rgba(255,255,255,.22);padding:1px 5px;border-radius:3px;font-size:10px} /* 居中态（空净/脏房/锁房/维修） */ .cell.center{justify-content:center;align-items:center;gap:3px} .cell.center .cell-c{font-size:12.5px;font-weight:600;line-height:1.2;text-align:center} /* 渠道色条（左侧 4px 边框代表主渠道） */ .cell.chb{box-shadow:inset 4px 0 0 var(--chcolor, transparent)} /* 「到/离」角标已按需求删除 —— 见 web/js/roomstatus.js appendRoomRow 注释 */ /* 时间线时间标签规则已移除 */ /* 状态色 */ .cell.clean{background:var(--st-clean);color:var(--st-clean-t)} .cell.clean .cell-c{color:#c7ced6} .cell.booked{background:var(--st-booked);color:var(--st-booked-t)} .cell.occupied{background:var(--st-occupied);color:var(--st-occupied-t)} .cell.dirty{background:repeating-linear-gradient(45deg,var(--st-dirty) 0 7px,#e8e2d6 7px 14px);color:var(--st-dirty-t)} .cell.locked{background:repeating-linear-gradient(0deg,var(--st-locked) 0 7px,#ddd6fe 7px 14px);color:var(--st-locked-t)} .cell.maintenance{background:var(--st-maintenance);color:#fff} /* 在住时间进度条（左下角一条细线，表示已住多少天） */ .cell .staybar{position:absolute;left:4px;right:0;bottom:0;height:3px;background:rgba(255,255,255,.35)} .cell .staybar i{display:block;height:100%;background:rgba(255,255,255,.85)} /* 今日列：左侧主色描边（与渠道色条互不干扰） */ .cell.todaycol{border-left:2px solid rgba(13,148,136,.55)} .cell.readonly{cursor:default} .cell.readonly:hover{filter:none} .empty-tip{padding:40px;text-align:center;color:var(--text3)} /* 图例（底部留出 iOS home 横条安全区） */ .legend-bar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:8px 16px calc(12px + var(--sab, 0px));color:var(--text3);font-size:12px} .lg{display:flex;align-items:center;gap:5px} .lg i{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid rgba(0,0,0,.08)} .lg i.dirty{background:repeating-linear-gradient(45deg,var(--st-dirty) 0 3px,#f2efe9 3px 6px)} .lg i.locked{background:repeating-linear-gradient(0deg,var(--st-locked) 0 3px,#e3daf7 3px 6px)} /* ---------- 弹窗 ---------- */ .modal-mask{position:fixed;inset:0;background:rgba(20,30,45,.45);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;animation:fadeIn .16s} .modal{background:#fff;border-radius:16px;max-width:520px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow);animation:popIn .18s} .modal.wide{max-width:760px} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 0} .modal-head h3{margin:0;font-size:17px} .modal-head .x{cursor:pointer;font-size:20px;color:var(--text3);background:none;border:none;padding:2px 8px;border-radius:8px} .modal-head .x:hover{background:#f0f2f5;color:var(--text)} .modal-body{padding:14px 18px 18px;overflow:auto} @keyframes fadeIn{from{opacity:0}} @keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.98)}} /* 弹窗操作块 */ .act-title{font-size:15px;font-weight:700;margin:2px 0 2px} .act-sub{font-size:12px;color:var(--text3);margin-bottom:12px} .act-status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;margin-left:8px;vertical-align:middle;font-weight:600} .quick-nights{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 2px} .qn{border:1px solid var(--line2);background:#fff;border-radius:8px;padding:6px 11px;font-size:13px} .qn.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600} .total-line{margin:10px 0;background:#f7f9fb;border-radius:9px;padding:8px 12px;font-size:13px;color:var(--text2);display:flex;justify-content:space-between} .total-line b{color:var(--text);font-size:15px} .op-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .op-btn{display:flex;flex-direction:column;gap:2px;padding:12px 10px;border-radius:11px;border:1px solid var(--line);background:#fff;text-align:center;align-items:center} .op-btn .t{font-size:14px;font-weight:600} .op-btn .s{font-size:11px;color:var(--text3)} .op-btn:hover{border-color:var(--primary);background:var(--primary-l)} .op-btn.primary{background:var(--primary);border-color:var(--primary)} .op-btn.primary .t{color:#fff} .op-btn.primary .s{color:rgba(255,255,255,.85)} .op-btn.danger{border-color:#f0cdcd} .op-btn.danger .t{color:var(--danger)} .op-btn.danger:hover{background:var(--danger-l)} .op-btn.wide{grid-column:1/-1} /* 汇总抽屉里的订单行 */ .oday{display:flex;align-items:center;gap:8px;padding:9px 6px;border-bottom:1px dashed var(--line);font-size:13px} .oday .obtn{margin-left:auto;display:flex;gap:6px} .o-tag{font-size:11px;border-radius:6px;padding:2px 6px;background:#f2f5f8;color:var(--text2);white-space:nowrap} /* ---------- 设置页列表 ---------- */ .mg-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap} .mg-tab{padding:8px 14px;border-radius:9px 9px 0 0;font-size:14px;color:var(--text2);border:none;background:none;border-bottom:2px solid transparent} .mg-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600} .mg-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13.5px;flex-wrap:wrap} .mg-row .grow{flex:1;min-width:120px} .mg-row .grow b{font-size:14px} .badge{display:inline-block;font-size:11px;border-radius:999px;padding:2px 9px;background:#eef2f6;color:var(--text2);font-weight:600} .badge.owner{background:var(--primary-l);color:var(--primary-d)} .badge.staff{background:#eef2f6;color:#3d566e} /* 员工账号 · 所属门店 */ .mg-u-stores{font-size:12px;color:var(--text3);margin-top:3px;line-height:1.4;word-break:break-all} .mg-u-nostore{color:#b0b8c1} .mg-u-allstore{color:var(--primary)} .au-stores{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fafbfc;max-height:180px;overflow:auto} .au-store{display:flex;align-items:center;gap:5px;font-size:13.5px;cursor:pointer;user-select:none} .au-store input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer} .table-list{max-height:46vh;overflow:auto} .danger-zone{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px} /* ---------- Toast ---------- */ #toast-root{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none} .toast{background:#24303c;color:#fff;padding:9px 18px;border-radius:999px;font-size:14px;opacity:0;transform:translateY(-8px);transition:.25s;box-shadow:var(--shadow);max-width:90vw} .toast.show{opacity:1;transform:none} .toast.error{background:var(--danger)} /* ---------- 交接班弹窗 ---------- */ .modal-xl{max-width:880px;width:100%} .modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:#fafbfc;border-radius:0 0 16px 16px} .shift-info{background:var(--primary-l);border-radius:10px;padding:12px 14px;margin-bottom:14px} .shift-row{display:flex;justify-content:space-between;padding:3px 0;font-size:13.5px} .shift-row .lab{color:var(--text3)} .shift-row .val{color:var(--text);font-weight:500} .shift-section{font-size:14px;font-weight:600;color:var(--text);margin:16px 0 8px;padding-left:8px;border-left:3px solid var(--primary)} .shift-summary{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px} .shift-summary .sum-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center} .shift-summary .num{font-size:20px;font-weight:700;color:var(--text)} .shift-summary .lab{font-size:11px;color:var(--text3);margin-top:2px} .shift-summary .sum-booked .num{color:#b07900} .shift-summary .sum-checkin .num{color:#a92112} .shift-summary .sum-checkout .num{color:#0f6b38} .shift-summary .sum-cancel .num{color:#888} .shift-summary .sum-money .num{color:#0d7c66} .shift-summary .sum-deposit .num{color:#5b3fa8} .shift-summary .sum-unsettled .num{color:#d64545} .shift-orders{max-height:42vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:#fafbfc;padding:4px 8px} .shift-empty{text-align:center;color:var(--text3);padding:30px 0;font-size:13px} .shift-order{padding:10px 6px;border-bottom:1px dashed var(--line);font-size:13px} .shift-order:last-child{border-bottom:none} .shift-order .so-row1{display:flex;align-items:center;gap:8px;margin-bottom:3px} .shift-order .so-no{font-family:monospace;font-weight:600;color:var(--text)} .shift-order .so-room{margin-left:auto;font-weight:600} .shift-order .so-row2{color:var(--text2);font-size:13px;margin-bottom:3px} .shift-order .so-row3{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--text3)} .shift-order .so-amt{font-weight:600;color:var(--primary-d)} .shift-order.checked_out .so-amt{color:#0f6b38} .shift-order .so-remark{font-size:12px;color:var(--text3);margin-top:4px;background:#f5f7f9;padding:4px 8px;border-radius:6px} .o-tag.tag-booking{background:var(--st-booked);color:var(--st-booked-t)} .o-tag.tag-checkin{background:var(--st-occupied);color:var(--st-occupied-t)} .o-tag.tag-checkout{background:var(--st-clean);color:var(--st-clean-t)} .o-tag.tag-cancel{background:#e8eaed;color:#666} .req{color:var(--danger)} /* ===== v59 员工权限矩阵弹窗 ===== */ .btn-perm{background:var(--primary-l);color:var(--primary-d);border:1px solid rgba(0,121,107,.25)} .btn-perm:hover{background:#cdeae5} .perm-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px} .perm-bar-t{font-size:12px;color:var(--text3);font-weight:600} .perm-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:12px} .perm-tab{background:none;border:none;padding:8px 14px;font-size:13px;color:var(--text2);border-bottom:2px solid transparent;cursor:pointer;border-radius:6px 6px 0 0} .perm-tab:hover{background:#f4f7f9} .perm-tab.on{color:var(--primary-d);border-bottom-color:var(--primary);font-weight:600;background:var(--primary-l)} .perm-table{width:100%;border-collapse:collapse;font-size:13px} .perm-table th,.perm-table td{border:1px solid var(--line);padding:8px 6px;text-align:center} .perm-table thead th{background:#f6f8f9;color:var(--text2);font-weight:600;font-size:12px} .perm-table .perm-fn{text-align:left;padding-left:12px;font-weight:600;color:var(--text);width:110px;background:#fbfcfd} .perm-ck{display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0} .perm-ck input{width:17px;height:17px;cursor:pointer;accent-color:var(--primary);margin:0} /* ===== v60 可管理房间（权限弹窗内） ===== */ .perm-rooms{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fbfcfd} .perm-rooms-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .perm-rooms-h .perm-ck{justify-content:flex-start;gap:5px;font-size:12.5px;color:var(--text2)} .perm-rooms-h .perm-ck input{width:15px;height:15px} .perm-rooms-n{font-size:12px;color:var(--text3)} .perm-rooms-h .btn{margin-left:0} .perm-rooms-h .btn[data-rm-all]{margin-left:auto} .perm-rooms-list{margin-top:10px;display:flex;flex-direction:column;gap:8px;max-height:210px;overflow:auto} .perm-rooms-list.off{opacity:.38;pointer-events:none} .perm-rm-group{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 9px} .perm-rm-gt{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px} .perm-rm-gn{font-weight:400;color:var(--text3);margin-left:6px;font-size:11px} .perm-rm-items{display:flex;flex-wrap:wrap;gap:4px 12px} .perm-rm{justify-content:flex-start;gap:4px;font-size:12.5px;color:var(--text)} .perm-rm input{width:15px;height:15px} .badge.rm{background:#fff4e5;color:#b45309;border:1px solid #fcd9a5} /* ---------- 响应式 ---------- */ @media (max-width:900px){ :root{--roomw:70px;--dayw:64px;--cellh:58px;--ghh:50px} .sum-card{min-width:62px} .sum-card .num{font-size:17px} } @media (max-width:640px){ :root{--roomw:68px;--dayw:62px;--cellh:54px;--ghh:50px} body{font-size:13px} .brand-sub{display:none} .control-bar{padding:8px 8px 0;gap:6px} .date-nav{order:0;width:100%;justify-content:center} .range-pills{order:1} .filter-row{margin-left:0;order:2} .sum-strip{padding:8px} .main-area{padding:8px} .modal-mask{padding:10px;align-items:flex-end} .modal{border-radius:16px 16px 0 0;max-height:92vh} .room-lab .meta{display:none} .room-lab{justify-content:center;padding:3px 4px} .shift-summary{grid-template-columns:repeat(3,1fr)} .shift-summary .num{font-size:17px} } /* ---------- 交接班历史（设置页） ---------- */ .shift-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px} .shift-stat-row .ss-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center} .shift-stat-row .num{font-size:20px;font-weight:700;color:var(--text)} .shift-stat-row .lab{font-size:11px;color:var(--text3);margin-top:2px} .shift-list{border:1px solid var(--line);border-radius:10px;background:#fff;max-height:48vh;overflow-y:auto} .shift-list-row{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;align-items:flex-start} .shift-list-row:last-child{border-bottom:none} .shift-list-row:hover{background:#f7faf8} .shift-list-row .slr-main{flex:1;min-width:0} .shift-list-row .slr-line1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px} .shift-list-row .slr-date{font-weight:600;font-size:14px;color:var(--text);font-family:monospace} .shift-list-row .slr-time{color:var(--text2);font-size:12.5px;font-family:monospace} .shift-list-row .slr-dur{color:var(--text3);font-size:12px} .shift-list-row .slr-line2{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text);flex-wrap:wrap} .shift-list-row .slr-arrow{color:var(--text3);font-size:14px} .shift-list-row .slr-user b{margin-right:4px} .shift-list-row .slr-note{margin-top:5px;font-size:12px;color:var(--text3);background:#f5f7f9;padding:5px 9px;border-radius:6px;line-height:1.5;max-height:46px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .shift-list-row .slr-side{flex-shrink:0;text-align:right;min-width:120px} .shift-list-row .slr-orders{font-size:14px;color:var(--text2)} .shift-list-row .slr-orders span{font-size:11px;color:var(--text3);margin-left:2px} .shift-list-row .slr-rev{font-size:20px;font-weight:700;color:var(--primary);line-height:1.2;margin:2px 0} .shift-list-row .slr-meta{font-size:11px;color:var(--text3);margin-bottom:6px} .shift-list-row .slr-detail{padding:3px 10px;font-size:12px} .shift-note-box{background:#f7f9fb;border:1px dashed var(--line2);border-radius:8px;padding:10px 12px;font-size:13.5px;color:var(--text);line-height:1.7;white-space:pre-wrap;word-break:break-all} /* ---------- 交接班详情（版式对齐云掌柜） ---------- */ .shift-detail{display:flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff} .sd-main{flex:1;min-width:0;padding:16px 18px} .sd-side{width:252px;flex:none;background:#f7f8fa;border-left:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:11px} .sd-status{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px} .sd-badge{width:20px;height:20px;border-radius:50%;background:#12b76a;color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none} .sd-badge.is-pending{background:var(--primary)} .sd-status-txt{font-size:15px;font-weight:600;color:var(--text)} .sd-store{font-size:12px;color:var(--text2);background:#eef1f4;border-radius:4px;padding:2px 8px} .sd-link{margin-left:auto;font-size:12.5px;color:var(--primary);cursor:pointer;flex:none} .sd-link:hover{text-decoration:underline} .sd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px} .sd-kpi{border-left:3px solid var(--primary);padding-left:10px} .sd-kpi.is-in{border-left-color:#12b76a} .sd-kpi.is-out{border-left-color:#f04438} .sd-kpi b{display:block;font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.25} .sd-kpi span{font-size:11.5px;color:var(--text3)} .sd-sec{font-size:13px;font-weight:600;color:var(--text);margin:0 0 7px} .sd-sec-out{margin-top:18px} .sd-table{width:100%;border-collapse:collapse;font-size:12.5px;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:16px} .sd-table th{background:#f7f8fa;color:var(--text2);font-weight:600;text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);font-size:12px} .sd-table th:first-child,.sd-table td:first-child{text-align:left} .sd-table td{padding:8px 10px;border-bottom:1px solid var(--line2);color:var(--text)} .sd-table tr:last-child td{border-bottom:none} .sd-table .sd-num{text-align:right;font-variant-numeric:tabular-nums} .sd-table .sd-sub{font-weight:600} .sd-table .sd-sub.is-neg{color:#f04438} .sd-table .sd-empty{text-align:center;color:var(--text3);padding:14px;font-size:12px} .sd-field{display:flex;flex-direction:column;gap:4px} .sd-field label{font-size:11.5px;color:var(--text3)} .sd-field b{font-size:12.5px;color:var(--text);font-weight:600;word-break:break-all} .sd-field .f-input{padding:6px 9px;font-size:12.5px;border-radius:7px} .sd-dim{color:var(--text3);font-weight:400;font-size:11.5px} .sd-ok{background:#e7f8ef;color:#0f6b38;font-size:11px;font-weight:600;border-radius:4px;padding:1px 6px} .sd-note-box{background:#fff;border:1px dashed var(--line2);border-radius:7px;padding:7px 9px;font-size:12px;color:var(--text);line-height:1.6;white-space:pre-wrap;max-height:120px;overflow:auto} .sd-orders{max-height:32vh} .modal-shift{max-width:980px} /* ---------- 班次设置 ---------- */ .sd-def-head{display:flex;align-items:center;gap:12px;margin-bottom:12px} .sd-def-tip{flex:1;font-size:13px;color:var(--text2);line-height:1.6} .sd-def-list{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden} .sd-def-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line2);flex-wrap:wrap} .sd-def-row:last-child{border-bottom:none} .sd-def-row.is-editing{background:#f7faf8} .sd-def-name-txt{font-weight:600;font-size:13.5px;color:var(--text);min-width:76px} .sd-def-time-txt{font-family:monospace;font-size:13px;color:var(--text2);flex:1} .sd-def-name-in{max-width:130px;padding:6px 9px;font-size:13px} .sd-def-time-in{width:118px;padding:6px 9px;font-size:13px} .sd-def-sep{color:var(--text3)} .sd-def-empty{padding:20px;text-align:center;color:var(--text3);font-size:13px} .shift-list-row .slr-shiftdef{font-size:11.5px;color:var(--primary-d);background:var(--primary-l);border-radius:4px;padding:1px 7px} @media (max-width:860px){ .shift-detail{flex-direction:column} .sd-side{width:auto;border-left:none;border-top:1px solid var(--line)} .sd-kpis{gap:10px} .sd-kpi b{font-size:17px} .sd-orders{max-height:none} .modal-shift{max-width:100%} } @media (max-width:720px){ .shift-stat-row{grid-template-columns:repeat(2,1fr)} .shift-list-row{flex-direction:column;align-items:stretch} .shift-list-row .slr-side{text-align:left;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .shift-list-row .slr-rev{font-size:16px} .shift-list-row .slr-detail{margin-left:auto} } /* 通用加载占位 */ .loading{padding:36px;text-align:center;color:var(--text3);font-size:13px} /* ================= 订单列表弹窗 ================= */ .ord-filter{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#f7f9fb;border:1px solid var(--line);border-radius:11px;margin-bottom:12px} .ord-filter label{font-size:13px;color:var(--text2)} .ord-filter .f-input{padding:6px 9px;font-size:13px} .ord-agg{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px} .oa-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 8px;text-align:center} .oa-card .num{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--primary-d);line-height:1.25} .oa-card .lab{font-size:11.5px;color:var(--text2);margin-top:2px} .oa-card .sub{font-size:10.5px;color:var(--text3);margin-top:3px} .ord-list{border:1px solid var(--line);border-radius:11px;background:#fff;max-height:46vh;overflow-y:auto} .ord-row{padding:10px 14px;border-bottom:1px dashed var(--line);transition:background .12s} .ord-row:last-child{border-bottom:none} .ord-row:hover{background:#f7faf8} .or-line1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px} .or-no{font-size:15px;font-weight:700} .or-tag{font-size:11px;border-radius:6px;padding:2px 8px;color:#fff;font-weight:600;white-space:nowrap} .or-chip{font-size:11px;border-radius:999px;padding:2px 8px;color:#fff;white-space:nowrap} .or-guest{font-weight:600;font-size:13.5px} .or-phone{font-size:12.5px;color:var(--text2);font-variant-numeric:tabular-nums} .or-line2{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--text2)} .or-meta{color:var(--text3);font-size:11.5px;font-family:monospace} .or-remark{color:var(--text3);background:#f5f7f9;border-radius:6px;padding:2px 8px} @media (max-width:720px){ .ord-agg{grid-template-columns:repeat(2,1fr)} .oa-card .num{font-size:16px} } /* ================= 经营统计（设置页） ================= */ .stat-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#f7f9fb;border:1px solid var(--line);border-radius:11px;margin-bottom:14px} .stat-toolbar .f-input{padding:6px 9px;font-size:13px} .kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:6px} .kpi-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;box-shadow:0 2px 8px rgba(23,43,77,.04)} .kpi-card .lab{font-size:12px;color:var(--text2)} .kpi-card .num{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);line-height:1.3;margin:2px 0} .kpi-card .sub{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:5px;flex-wrap:wrap} .kpi-delta{font-size:11px;font-weight:600;border-radius:6px;padding:1px 6px;white-space:nowrap} .kpi-delta.up{background:#fdeceb;color:#b42318} .kpi-delta.down{background:#e9f7ef;color:#067647} .kpi-delta.flat{background:#eef2f6;color:var(--text2)} .stat-section{font-size:14px;font-weight:600;color:var(--text);margin:18px 0 8px;padding-left:8px;border-left:3px solid var(--primary)} .chart-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px 6px} .chart-box svg{max-height:200px} @media (max-width:720px){ .kpi-row{grid-template-columns:repeat(2,1fr)} .kpi-card .num{font-size:19px} } /* 渠道/房型构成条 */ .bd-row{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:13px} .bd-dot{width:10px;height:10px;border-radius:3px;flex:none} .bd-name{width:88px;flex:none;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bd-bar-wrap{flex:1;height:12px;background:#eef2f6;border-radius:999px;overflow:hidden;min-width:60px} .bd-bar{display:block;height:100%;border-radius:999px} .bd-val{flex:none;font-variant-numeric:tabular-nums;color:var(--text);font-size:12.5px;min-width:120px;text-align:right} @media (max-width:720px){ .bd-name{width:72px} .bd-val{min-width:auto} } /* ================= 房态格子渠道色点 ================= */ .chdot{position:absolute;left:3px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.75);pointer-events:none} .cell .guest{padding-left:2px} /* ================= 设置页 tabs 横向滚动（10 个标签） ================= */ .mg-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .mg-tab{flex:none;white-space:nowrap} /* ================================================================== 订单页（P3 · 独立页面 + 详情抽屉 + CSV 导出） ================================================================== */ #page-orders .page-body{padding:12px 20px 24px;display:flex;flex-direction:column;gap:12px} .ord-page{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0} /* 页头右侧操作 */ .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap} .page-head .ph-actions{display:flex;gap:8px;align-items:center;flex:none} /* 状态页签 */ .ord-tabs{display:flex;gap:2px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:3px;align-self:flex-start} .ord-tabs .ot{border:none;background:transparent;padding:6px 16px;font-size:13.5px;color:var(--text2);border-radius:8px;cursor:pointer;font-weight:500;transition:.15s;white-space:nowrap} .ord-tabs .ot:hover{color:var(--text)} .ord-tabs .ot.active{background:var(--primary);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(13,148,136,.25)} .ord-tabs .ot .otn{font-size:11px;opacity:.85;margin-left:4px;font-variant-numeric:tabular-nums} /* 筛选工具条 */ .ord-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px} .ord-toolbar .f-input{padding:6px 9px;font-size:13px} .ord-toolbar label{font-size:13px;color:var(--text2)} .ord-quick{display:flex;gap:4px;flex-wrap:wrap} .ord-quick .qk{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 11px;font-size:13px;color:var(--text2);cursor:pointer;transition:.15s;white-space:nowrap} .ord-quick .qk:hover{border-color:var(--line2);color:var(--text)} .ord-quick .qk.active{background:var(--primary-l);border-color:var(--primary);color:var(--primary-d);font-weight:600} .ord-search{position:relative;flex:1;min-width:160px;max-width:280px} .ord-search input{width:100%;border:1px solid var(--line2);border-radius:9px;padding:7px 11px 7px 30px;font-size:13px;outline:none;transition:.15s} .ord-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,124,102,.12)} .ord-search::before{content:'🔍';position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.55;pointer-events:none} /* KPI 汇总卡 */ .ord-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .ord-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;box-shadow:0 2px 8px rgba(23,43,77,.04);position:relative;overflow:hidden} .ord-kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--k-color,var(--primary))} .ord-kpi .k-lab{font-size:12px;color:var(--text2)} .ord-kpi .k-num{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25;margin:2px 0 0} .ord-kpi .k-sub{font-size:11px;color:var(--text3);margin-top:2px} /* 订单表 */ .ord-table-wrap{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:auto;flex:1;min-height:180px} .ord-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px} .ord-table thead th{position:sticky;top:0;z-index:2;background:#f7f9fb;border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;font-weight:600;color:var(--text2);font-size:12.5px;white-space:nowrap} .ord-table tbody td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap} .ord-table tbody tr{cursor:pointer;transition:background .12s} .ord-table tbody tr:last-child td{border-bottom:none} .ord-table tbody tr:hover{background:#f7faf8} .ord-table tbody tr.sel{background:var(--primary-l)} .ord-table .c-room b{font-size:14.5px;font-weight:700} .ord-table .c-guest{white-space:normal;min-width:104px} .ord-table .c-guest .g-n{font-weight:600} .ord-table .c-guest .g-p{font-size:11.5px;color:var(--text3);font-variant-numeric:tabular-nums} .ord-table .c-amt{font-weight:700;color:var(--primary-d);font-variant-numeric:tabular-nums;text-align:right} .ord-table .c-money{font-variant-numeric:tabular-nums} .ord-table .c-date{font-variant-numeric:tabular-nums;color:var(--text2)} .ord-table .c-no{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--text3)} .ord-table .c-act{text-align:right} .o-st{display:inline-block;font-size:11px;border-radius:6px;padding:2px 8px;color:#111827;font-weight:600;white-space:nowrap} .o-st.booking{background:var(--st-booked)} .o-st.checked_in{background:var(--st-occupied)} .o-st.checked_out{background:var(--st-checkedout)} .o-st.cancelled{background:#cbd5e1;color:#64748b} /* ——— 详情抽屉 ——— */ .odrawer-mask{position:fixed;inset:0;background:rgba(20,30,45,.35);z-index:120;animation:fadeIn .16s} .odrawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:94vw;z-index:130;background:#fff;display:flex;flex-direction:column;box-shadow:-10px 0 34px rgba(15,23,42,.2);animation:odIn .24s cubic-bezier(.22,1,.36,1)} @keyframes odIn{from{transform:translateX(100%)}} .od-head{flex:none;display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)} .od-head h3{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;min-width:0} .od-head .x{margin-left:auto;cursor:pointer;font-size:20px;color:var(--text3);background:none;border:none;padding:2px 8px;border-radius:8px;flex:none} .od-head .x:hover{background:#f0f2f5;color:var(--text)} .od-body{flex:1;overflow:auto;padding:14px 18px 18px} .od-hero{background:linear-gradient(135deg,#0d9488,#14b8a6);border-radius:12px;padding:14px 16px;color:#fff;margin-bottom:14px} .od-hero .h-room{font-size:22px;font-weight:800;line-height:1.1;display:flex;align-items:baseline;gap:8px} .od-hero .h-room .h-type{font-size:12px;font-weight:500;opacity:.9} .od-hero .h-guest{font-size:14px;margin-top:6px;opacity:.96} .od-hero .h-range{font-size:12.5px;margin-top:3px;opacity:.88;font-variant-numeric:tabular-nums} .od-hero .h-amt{font-size:26px;font-weight:800;margin-top:8px;font-variant-numeric:tabular-nums} .od-hero .h-amt small{font-size:12px;font-weight:500;opacity:.85;margin-left:4px} .od-sec{font-size:13px;font-weight:700;color:var(--text);margin:16px 0 8px;padding-left:8px;border-left:3px solid var(--primary)} .od-kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px} .od-kv .k{color:var(--text3);white-space:nowrap} .od-kv .v{color:var(--text);word-break:break-all} .od-kv .v.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px} .od-steps{display:flex;flex-direction:column;gap:0;margin-top:4px} .od-step{display:flex;gap:10px;font-size:12.5px;position:relative;padding-bottom:14px} .od-step:last-child{padding-bottom:0} .od-step::before{content:'';position:absolute;left:5px;top:14px;bottom:0;width:1px;background:var(--line)} .od-step:last-child::before{display:none} .od-step .dot{width:11px;height:11px;border-radius:50%;flex:none;margin-top:3px;background:var(--line2);border:2px solid #fff;box-shadow:0 0 0 1px var(--line2)} .od-step.done .dot{background:var(--primary);box-shadow:0 0 0 1px var(--primary)} .od-step .sw{flex:1;min-width:0} .od-step .sw b{display:block;color:var(--text);font-weight:600} .od-step .sw span{color:var(--text3);font-size:11.5px;font-variant-numeric:tabular-nums} .od-foot{flex:none;display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:#fafbfc;flex-wrap:wrap} .od-foot .btn{flex:1;min-width:88px;justify-content:center;text-align:center} .od-empty{padding:60px 20px;text-align:center;color:var(--text3)} @media (max-width:900px){ .ord-kpis{grid-template-columns:repeat(3,1fr)} } @media (max-width:720px){ .ord-kpis{grid-template-columns:repeat(2,1fr)} .ord-kpi .k-num{font-size:18px} .ord-toolbar{padding:8px} .ord-search{max-width:none} #page-orders .page-body{padding:10px 12px 20px} } /* ================================================================== 统计页（P4 · 客房运营 / 营业统计表 / 营收明细） ================================================================== */ #page-stats .page-body{padding:12px 20px 24px} .stat-page{display:flex;flex-direction:column;gap:12px} .stat-page .stat-toolbar{margin-bottom:0} .stat-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} .stat-cols .stat-section{margin-top:0} .stat-cols .chart-box{min-height:96px} #page-stats .ord-table-wrap{max-height:calc(100vh - 300px)} #page-stats .kpi-row{margin-bottom:0} @media (max-width:820px){ .stat-cols{grid-template-columns:1fr} #page-stats .page-body{padding:10px 12px 20px} #page-stats .ord-table-wrap{max-height:none} } /* ============ 设置页（P5） ============ */ .set-body{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;min-height:440px;display:flex;flex-direction:column} .set-body-head{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)} .set-body-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:3px} .set-body-desc{font-size:13px;color:var(--text3);line-height:1.5} .set-body-content{flex:1} .set-body-content .loading{padding:30px;text-align:center;color:var(--text3)} .set-body-content .table-list{margin-bottom:8px} .set-body-content .mg-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#f7f9fb;margin-bottom:6px;font-size:13px} .set-body-content .mg-row .grow{flex:1} /* 上下移按钮组（上下排列，省空间；只在设置页出现） */ .set-body-content .mg-order{display:inline-flex;flex-direction:column;gap:2px;flex:none} .set-body-content .btn-order{width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text2);font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:system-ui,-apple-system,sans-serif;transition:.12s} .set-body-content .btn-order:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:var(--primary-l)} .set-body-content .btn-order:disabled{opacity:.25;cursor:not-allowed} .set-body-content .op-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .set-body-content .op-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:11px;cursor:pointer;transition:.15s;text-align:left} .set-body-content .op-btn:hover{border-color:var(--line2);transform:translateY(-1px);box-shadow:0 2px 8px rgba(15,23,42,.06)} .set-body-content .op-btn .t{font-size:14.5px;font-weight:600;color:var(--text)} .set-body-content .op-btn .s{font-size:12px;color:var(--text3)} .set-body-content .op-btn.primary{border-color:var(--primary);background:linear-gradient(135deg,#f0fdfa,#fff)} .set-body-content .op-btn.danger{border-color:#fda4af;background:#fff5f5} .set-body-content .op-btn.danger .t{color:#be123c} .set-body-content .shift-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px} .set-body-content .ss-card{background:#f7f9fb;border:1px solid var(--line);border-radius:11px;padding:12px 14px;text-align:center} .set-body-content .ss-card .num{font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} .set-body-content .ss-card .lab{font-size:12px;color:var(--text3);margin-top:2px} @media (max-width:820px){ .set-body-content .op-grid{grid-template-columns:1fr} .set-body-content .shift-stat-row{grid-template-columns:repeat(2,1fr)} #page-settings .page-body{padding:10px 12px 20px} .set-body{padding:14px 14px;min-height:0} } /* ============================================================ 云掌柜风格 · 新增订单 / 登记入住表单（.yz-*） 参照云掌柜「新增订单」弹窗：标签页头 + 通栏输入格 + 分组卡片行 + teal 圆标链接 + 右对齐提交 ============================================================ */ /* v64：修「弹窗太大、底部确定按钮被挤出屏幕」。 现象（实测 headless 1440x700）：modal 到 583 就结束，但 .yz-body 仍按内容自然高度 533px 布局，把 .yz-foot 顶到 611~682，确定按钮 626~668 完全落在视口(607)外 → 点不到。 原因：.yz-body{flex:1 1 0%} 在这条 flex 链里拿不到可收缩的确定高度（父级高度来自 .modal 的 max-height 约束，子项仍按 auto 撑开），所以给滚动区显式上限才可靠： .yz-body 的 max-height = 弹窗高(92vh) - 头部(54) - 底栏(72) - 边距余量(8) 这样无论内容多长，底栏都稳定贴在弹窗底部、按钮始终可点。 */ .modal.yz-modal{max-width:980px;height:92vh;max-height:92vh;min-height:0} .modal.yz-modal .modal-body{padding:0;display:flex;flex-direction:column;overflow:hidden;flex:1;min-height:0} .yz-modal .yz-body{flex:1 1 auto;min-height:0;overflow:auto;max-height:calc(92vh - 134px)} .yz-modal .yz-foot{flex:none} /* ---- 头部：标题 + 标签页 + 关闭 ---- */ .yz-head{display:flex;align-items:flex-end;gap:28px;padding:16px 22px 0;position:relative;flex:none} .yz-title{font-size:17px;font-weight:600;color:var(--text);padding-bottom:13px;white-space:nowrap} .yz-tabs{display:flex;gap:28px} .yz-tab{background:none;border:0;padding:0 0 13px;font-size:16px;color:var(--text2);position:relative;line-height:1} .yz-tab:hover{color:var(--text)} .yz-tab.active{color:var(--primary);font-weight:600} .yz-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--primary)} .yz-x{position:absolute;right:18px;top:14px;background:none;border:0;font-size:17px;color:var(--text3);padding:4px 8px;border-radius:6px;line-height:1} .yz-x:hover{background:#f0f2f5;color:var(--text)} /* ---- 内容滚动区 ---- */ .yz-body{flex:1;min-height:0;overflow:auto;padding:0 22px} /* ---- 分区 ---- */ .yz-sec{padding:16px 0;border-top:1px solid var(--line)} .yz-sec:first-child{border-top:0;padding-top:18px} .yz-sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px} .yz-sec-title{font-size:14.5px;font-weight:600;color:var(--text)} .yz-sec-sub{font-size:12.5px;color:var(--text3)} .yz-sec-sub b{color:var(--text2);font-weight:600} .yz-due{color:var(--danger);font-weight:600} /* ---- 输入网格 ---- */ .yz-grid{display:grid;gap:8px;margin-bottom:8px} .yz-grid:last-child{margin-bottom:0} .yz-grid.r4{grid-template-columns:1fr 1fr .95fr 1.35fr} .yz-grid.r3{grid-template-columns:1fr 1.5fr .95fr} .yz-grid.r1{grid-template-columns:1fr} .yz-in{width:100%;height:42px;border:1px solid var(--line2);border-radius:5px;padding:0 12px;background:#fff;outline:none;font-size:14px;color:var(--text);transition:border-color .15s} .yz-in::placeholder{color:var(--text3)} .yz-in:focus{border-color:var(--primary)} select.yz-in{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px} .yz-in[readonly]{background:#f7f9fb;color:var(--text2)} /* ---- 卡片行（多格拼接的带框行） ---- */ .yz-card{display:flex;border:1px solid var(--line2);border-radius:5px;overflow:hidden;margin-bottom:8px} .yz-card:last-child{margin-bottom:0} .yz-cell{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:46px;padding:0 12px;border-right:1px solid var(--line2)} .yz-cell:last-child{border-right:0} .yz-cell .k{font-size:13.5px;color:var(--text3);white-space:nowrap;flex:none} .yz-cell .v{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:14px;color:var(--text);height:100%} .yz-cell .v::placeholder{color:var(--text3)} .yz-cell.w-d{flex:0 0 92px} .yz-cell.w-n{flex:0 0 104px} .yz-cell .ico{flex:none;color:var(--text3);font-size:15px;line-height:1;display:flex;align-items:center} .yz-btn-ico{background:none;border:0;padding:2px 4px;color:var(--text3);font-size:14px;display:flex;align-items:center;border-radius:4px} .yz-btn-ico:hover{color:var(--primary);background:var(--primary-l)} /* ---- 圆标链接（添加房间 / 添加消费 / 添加收银） ---- */ .yz-links{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px} .yz-link{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-size:14px;background:none;border:0;padding:0} .yz-link:hover{color:var(--primary-d)} .yz-link .ico{width:17px;height:17px;flex:none;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;font-weight:400;padding-bottom:1px} .yz-link.mut{color:var(--text2)} .yz-link.mut .ico{background:var(--text3)} /* ---- 费用/收银 汇总条 ---- */ .yz-sum{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--text2);margin-bottom:12px} .yz-sum b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums} .yz-sum .due b{color:var(--danger)} /* ---- 其他消费 / 收银 行列表 ---- */ .yz-rows{display:flex;flex-direction:column;gap:8px} .yz-rows:empty{display:none} .yz-row{display:flex} .yz-row .yz-cell{height:44px} /* ---- 底部 ---- */ .yz-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;border-top:1px solid var(--line);background:#fff} .yz-switch{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text2);cursor:pointer;user-select:none} .yz-switch input{display:none} .yz-switch .tg{width:38px;height:21px;border-radius:11px;background:#d1d5db;position:relative;transition:.18s;flex:none} .yz-switch .tg::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)} .yz-switch input:checked+.tg{background:var(--primary)} .yz-switch input:checked+.tg::after{left:19px} .yz-acts{display:flex;gap:12px} .yz-btn{height:42px;padding:0 26px;border-radius:5px;font-size:15px;border:1px solid var(--line2);background:#fff;color:var(--text);transition:.15s} .yz-btn:hover{border-color:var(--text3)} .yz-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500} .yz-btn.primary:hover{background:var(--primary-d);border-color:var(--primary-d)} .yz-btn:disabled{opacity:.5;cursor:not-allowed} /* 「直接入住」描边按钮（云掌柜式：开单弹窗左下角，与主按钮「提交订单」区分） */ .yz-btn.outline{background:#fff;border-color:var(--primary);color:var(--primary);font-weight:500} .yz-btn.outline:hover{background:var(--primary-l);border-color:var(--primary-d);color:var(--primary-d)} @media (max-width:860px){ .yz-grid.r4{grid-template-columns:1fr 1fr} .yz-grid.r3{grid-template-columns:1fr 1fr} .yz-card{flex-wrap:wrap} .yz-cell{flex:1 0 45%} .yz-head{gap:16px;padding:14px 16px 0} .yz-tabs{gap:18px} .yz-body{padding:0 16px} .yz-foot{padding:12px 16px} } /* =================================================================== 云掌柜风格 · 修改订单弹窗补充（.yz-* 扩展） =================================================================== */ .yz-ro{display:flex;align-items:center;gap:7px;margin-bottom:12px} .yz-ro .pen{background:none;border:0;color:var(--primary);font-size:14px;padding:0;display:flex;align-items:center;gap:6px} .yz-ro .pen:hover{color:var(--primary-d)} .yz-chip{display:inline-flex;align-items:center;gap:6px;height:32px;border:1px solid var(--line2);border-radius:5px;padding:0 10px;background:#fff;font-size:13px;color:var(--text)} .yz-chip .av{width:18px;height:18px;border-radius:4px;background:#ff8a3d;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:600} .yz-chip .cnt{background:#eef1f5;color:var(--text2);border-radius:9px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:11px} .yz-fee-line{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--text2);margin-left:auto} .yz-fee-line b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums} .yz-fee-line .gray{color:var(--text3)} .yz-fee-line .due b{color:var(--danger)} .yz-dotch{width:12px;height:12px;border-radius:3px;flex:none;display:inline-block;margin-right:-2px} .yz-home{color:var(--text3);font-size:15px;flex:none;display:flex;align-items:center;padding:0 4px} .yz-tag-pre{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:var(--primary-l);color:var(--primary-d);font-size:12px} /* =================================================================== 房态图 · 拖拽换房 =================================================================== */ .cell.can-drag{cursor:grab} .cell.can-drag:active{cursor:grabbing} .cell.dragging{opacity:.42;outline:2px dashed var(--primary);outline-offset:-2px} .cell.drop-ok{outline:2px solid var(--primary);outline-offset:-2px;box-shadow:inset 0 0 0 3px rgba(20,184,166,.18)} .cell.drop-ok::after{content:'换到这里';position:absolute;inset:auto 0 4px 0;text-align:center;font-size:10px;color:var(--primary-d);font-weight:600} .cell.drop-no{outline:2px solid #ef4444;outline-offset:-2px;cursor:not-allowed} .drag-banner{position:fixed;left:50%;transform:translateX(-50%);top:64px;z-index:200;background:var(--primary-d);color:#fff;border-radius:9px;padding:8px 16px;font-size:13.5px;box-shadow:0 8px 24px rgba(15,23,42,.25);display:flex;align-items:center;gap:12px} .drag-banner .k{background:rgba(255,255,255,.18);border-radius:5px;padding:2px 7px;font-size:12.5px} .drag-banner button{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:5px;padding:4px 10px;font-size:12.5px} .drag-banner button:hover{background:rgba(255,255,255,.28)} /* =================================================================== 统计页 · 云掌柜风格（.st-*） =================================================================== */ .st-page{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:100%} .st-filter{background:#fff;border:1px solid var(--line);border-radius:4px;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px} .st-fq{display:flex;gap:2px;flex-wrap:wrap} .st-fq .fq{border:0;background:none;padding:5px 11px;font-size:13.5px;color:var(--text2);border-radius:4px;position:relative} .st-fq .fq:hover{color:var(--text);background:#f4f6f8} .st-fq .fq.active{color:var(--primary);font-weight:600} .st-fq .fq.active::after{content:'';position:absolute;left:11px;right:11px;bottom:0;height:2px;background:var(--primary);border-radius:2px} .st-dates{display:flex;align-items:center;gap:6px;margin-left:6px} .st-dates .in{height:32px;border:1px solid var(--line2);border-radius:4px;padding:0 10px;font-size:13px;color:var(--text);background:#fff;outline:none} .st-dates .in:focus{border-color:var(--primary)} .st-dates .sep{color:var(--text3)} .st-tabs{display:flex;gap:26px;padding:2px 2px 0;border-bottom:1px solid var(--line);margin-bottom:2px} .st-tab{border:0;background:none;padding:8px 0 11px;font-size:15px;color:var(--text2);position:relative} .st-tab:hover{color:var(--text)} .st-tab.active{color:var(--primary);font-weight:600} .st-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);border-radius:2px} .st-kpis3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .st-kpi{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 16px} .st-kpi .k-lab{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:5px} .st-kpi .k-lab .q{width:13px;height:13px;border-radius:50%;border:1px solid var(--line2);color:var(--text3);font-size:9px;display:inline-flex;align-items:center;justify-content:center} .st-kpi .k-num{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3;margin:4px 0 2px;color:var(--text)} .st-kpi .k-sub{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--text3)} .st-kpi .k-sub .up{color:var(--danger)} .st-kpi .k-sub .down{color:#0f9d6b} .st-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 16px;min-width:0;max-width:100%} .st-card .st-scroll{overflow:auto;max-width:100%} .st-tbl-wrap{overflow:auto;max-width:100%} .st-card-h{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap} .st-card-h .t{font-size:15px;font-weight:600;color:var(--text)} .st-card-h .sub{font-size:12.5px;color:var(--text3)} .st-card-h .right{margin-left:auto;display:flex;align-items:center;gap:10px} .st-dl{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border:1px solid var(--line2);border-radius:4px;background:#fff;color:var(--text);font-size:13px} .st-dl:hover{border-color:var(--primary);color:var(--primary)} .st-sub-tabs{display:flex;gap:20px} .st-sub-tab{border:0;background:none;padding:2px 0 8px;font-size:13.5px;color:var(--text2);position:relative} .st-sub-tab.active{color:var(--primary);font-weight:600} .st-sub-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary)} .st-seg{display:flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden} .st-seg button{border:0;background:#fff;padding:5px 11px;font-size:13px;color:var(--text2)} .st-seg button.active{background:var(--primary-l);color:var(--primary-d);font-weight:600} .st-cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .st-chart{height:260px;position:relative} .st-chart svg{width:100%;height:100%;display:block} .st-sumline{font-size:13px;color:var(--text2);display:flex;flex-wrap:wrap;gap:18px;padding:0 2px 10px} .st-sumline b{color:var(--text);font-weight:600} .st-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px} .st-tbl th{background:#f7f9fb;color:var(--text2);font-weight:600;font-size:12.5px;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap} .st-tbl td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--text)} .st-tbl tbody tr:hover{background:#fbfcfd} .st-tbl .num{text-align:right;font-variant-numeric:tabular-nums} .st-tbl .in{color:var(--primary-d)} .st-tbl .out{color:var(--danger)} .st-tbl tfoot td{background:#f7f9fb;font-weight:700} .st-tbl .isep{border-left:1px solid var(--line)} .st-dist{display:flex;flex-direction:column;gap:2px} .st-dist-row{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:13px} .st-dist-row .dot{width:8px;height:8px;border-radius:50%;flex:none} .st-dist-row .nm{color:var(--text);min-width:70px} .st-dist-row .rt{margin-left:auto;color:var(--text2);font-variant-numeric:tabular-nums;display:flex;gap:26px} .st-donut{display:flex;align-items:center;justify-content:center;padding:6px 0} .st-bars{display:flex;flex-direction:column;gap:9px} .st-bar-row{display:flex;align-items:center;gap:10px;font-size:13px} .st-bar-row .nm{width:150px;flex:none;color:var(--text2);text-align:right} .st-bar-row .track{flex:1;height:22px;background:#f2f5f8;border-radius:3px;overflow:hidden} .st-bar-row .fill{height:100%;background:var(--primary);border-radius:3px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:11.5px;font-variant-numeric:tabular-nums;min-width:44px} .st-bar-row .fill.over{background:var(--primary-d)} .st-empty{text-align:center;color:var(--text3);font-size:13px;padding:40px 0} /* ================= v61 财务流水 · 记一笔流水（分析 + 明细可编辑） ================= */ .fin-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:14px;margin-bottom:14px} .fin-big{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);margin:4px 0 6px;line-height:1.25} .fin-big.neg,.fin-big.out{color:var(--danger)} .fin-big.in{color:var(--primary-d)} .fin-sumline{display:flex;gap:16px;font-size:12.5px;color:var(--text2);margin-bottom:10px} .fin-sumline .in{color:var(--primary-d)} .fin-sumline .out{color:var(--danger)} .fin-paylist{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:8px} .fin-payrow{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:13px} .fin-payrow .idx{width:19px;height:19px;border-radius:50%;background:#e6f4f1;color:var(--primary-d);font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none} .fin-payrow .nm{color:var(--text)} .fin-payrow .amt{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text3)} .fin-payrow .amt.in{color:var(--primary-d)} .fin-payrow .amt.out{color:var(--danger)} .fin-switch{display:inline-flex;border:1px solid var(--line2);border-radius:3px;overflow:hidden;margin-left:auto} .fin-switch button{background:#fff;border:0;padding:3px 12px;font-size:12px;color:var(--text2);cursor:pointer} .fin-switch button.on{background:var(--primary);color:#fff} .fin-chart{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .fin-chart .st-dist{flex:1;min-width:168px} .fin-days{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px} .fin-day{flex:none;min-width:132px;border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:#fff} .fin-day .d{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:6px} .fin-day .b{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;margin-bottom:6px} .fin-day .b.neg{color:var(--danger)} .fin-day .l{font-size:12px;color:var(--text2);display:flex;justify-content:space-between;gap:8px;padding:2px 0} .fin-day .l b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums} .fin-day .l b.in{color:var(--primary-d)} .fin-day .l b.out{color:var(--danger)} .fin-tbl td.mono{font-family:ui-monospace,Consolas,monospace} .fin-rmk{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)} .fin-edited{display:inline-block;margin-left:5px;font-size:10px;padding:0 4px;border-radius:2px;background:#fff3e0;color:#c2740a;vertical-align:1px} .fin-tag{display:inline-block;font-size:11.5px;border-radius:2px;padding:1px 7px;white-space:nowrap} .fin-tag.in{background:#e6f4f1;color:var(--primary-d)} .fin-tag.out{background:#fdecea;color:var(--danger)} .fin-ops{white-space:nowrap} .fin-op{background:none;border:0;color:var(--primary-d);font-size:12.5px;cursor:pointer;padding:2px 5px} .fin-op:hover{text-decoration:underline} .fin-op.del{color:var(--danger)} .fin-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 2px 2px;font-size:12.5px;color:var(--text2)} .fin-pager-r{display:flex;align-items:center;gap:8px} .fin-pager-r select{height:28px;border:1px solid var(--line2);border-radius:3px;background:#fff;font-size:12.5px;padding:0 4px} .fin-pg{height:28px;padding:0 10px;border:1px solid var(--line2);border-radius:3px;background:#fff;font-size:12.5px;color:var(--text);cursor:pointer} .fin-pg:disabled{opacity:.45;cursor:not-allowed} .fin-pgn{font-variant-numeric:tabular-nums} .nt-row .nt-room{max-width:150px} @media (max-width:980px){ .st-kpis3{grid-template-columns:repeat(2,1fr)} .st-cols2{grid-template-columns:1fr} .st-bar-row .nm{width:96px} } /* 统计表：固定列宽 + 分组表头 */ .st-tbl.tbl-fixed{table-layout:fixed;min-width:1000px} .st-tbl th.vl-btm{vertical-align:bottom} .st-tbl thead tr:first-child th{border-bottom:1px solid var(--line)} .st-tbl thead tr:last-child th{background:#fbfcfd} /* 修改弹窗 · 入住人徽章不换行 */ .yz-chip{white-space:nowrap} .yz-chip .av,.yz-chip .cnt{flex:none} /* 注释保留占位：颜色变量已全部集中在顶部 :root，删去末尾重复定义 */ /* =================================================================== 云掌柜风格 · 精细对齐（实测 v2.yunzhanggui.net） · 顶栏 #006b5d / 工具条 #eef3f2 / 页面底 #fafafa · 房态格子：**黑字**（用户指定）、12px、2px 圆角 · 主色 #00796b（按钮、激活态） =================================================================== */ .topnav{background:var(--nav)} .tn-item{color:rgba(255,255,255,.72)} .tn-item:hover{color:#fff;background:rgba(255,255,255,.10)} .tn-item.active{color:#fff;border-bottom-color:#fff;background:rgba(255,255,255,.12);font-weight:600} .tn-logo{background:rgba(255,255,255,.18)} .tn-btn{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.22)} .tn-ico{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:6px;color:rgba(255,255,255,.92);font-size:13px;padding:5px 11px;cursor:pointer;transition:.15s;white-space:nowrap} .tn-ico:hover{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.42)} .tn-ico-label{font-weight:500} .tn-ico svg{display:block} .user-chip{color:rgba(255,255,255,.92);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)} #page-room .control-bar{background:var(--tool);border-bottom:1px solid var(--line);min-height:48px} #page-room .sum-strip{background:#fff;border-bottom:1px solid var(--line2)} .legend-bar{background:#fff;border-top:1px solid var(--line2)} #page-room{background:#fff} /* ---- 房态格子：云掌柜彩色底 + 黑字（用户指定：字色必须黑，不随底色变白）---- 底色可用 CSS 变量覆盖（「设置 → 房态颜色」）---- */ :root{ --cell-ink:#111827; /* 主文字：近黑（强制） */ --cell-ink2:#374151; /* 次级文字：深灰 */ --cell-ink3:#4b5563; /* 三级文字 */ } .cell{border-radius:2px;color:var(--cell-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif} .cell .cell-c,.cell-r1,.cell-r1 .nm{color:var(--cell-ink)} .cell-r2{color:var(--cell-ink2);opacity:1} .cell-r3{color:var(--cell-ink2);opacity:1} .cell-r3 .arr{background:rgba(17,24,39,.14);color:var(--cell-ink);font-weight:600} .cell-r3 .dep{background:rgba(17,24,39,.10);color:var(--cell-ink)} /* v60 起 .cell-r1 .cc 已移除 */ /* 已订（橙）/ 在住（青绿）：彩色底 + 黑字 */ .cell.booked{background:var(--cell-booked)} .cell.occupied{background:var(--cell-occupied)} .cell.booked,.cell.occupied{color:var(--cell-ink)} /* 已退房：灰底 + 黑字 */ .cell.checked_out{background:var(--cell-checked-out);color:var(--cell-checked-out-ink)} .cell.checked_out .cell-c{color:var(--cell-checked-out-ink)} .cell.checked_out .cell-r2,.cell.checked_out .cell-r3{color:#374151} /* 空净房 */ .cell.clean{background:#fff;color:#9aa5b1} .cell.clean .cell-c{color:#b9c2ca} /* 脏房 */ .cell.dirty{background:repeating-linear-gradient(45deg,#f8fafc 0 7px,#eef2f6 7px 14px);color:#475569} .cell.dirty .cell-c{color:#475569} /* 锁房 / 维修 */ .cell.locked{background:repeating-linear-gradient(0deg,#f3f0ff 0 7px,#e9e4fd 7px 14px);color:#4c1d95} .cell.locked .cell-c{color:#4c1d95} .cell.maintenance{background:#e2e8f0;color:#334155} .cell.maintenance .cell-c{color:#334155} .cell-r1{font-size:12px;font-weight:600} .cell-r2{font-size:11px} .cell-r3{font-size:11px} /* 住店进度条：深色 */ .cell .staybar{background:rgba(17,24,39,.16)} .cell .staybar i{background:rgba(17,24,39,.62)} /* 分组条药丸：浅色底 → 黑字 */ .grp .g-now .now{color:var(--cell-ink)} .grp .g-now .now.booked{background:var(--cell-booked);color:var(--cell-ink)} .grp .g-now .now.occupied{background:var(--cell-occupied);color:var(--cell-ink)} .grp .g-now .now.checked_out{background:var(--cell-checked-out);color:var(--cell-checked-out-ink)} .grp .g-now .now.clean{background:#fff;color:#9aa5b1} /* ================= 统计页：去掉大标题 ================= */ #page-stats .page-head{display:none !important} /* ================= 手机端适配（登录页 + 主界面） ================= */ @media (max-width:768px){ /* --- 登录页 --- */ #view-login{align-items:flex-start;padding:0;background:#fff;overflow-y:auto} .login-card{width:100%;max-width:100%;min-height:100vh;border-radius:0;box-shadow:none; padding:48px 22px 32px;border:none;margin:0;display:flex;flex-direction:column;justify-content:center} .login-logo{width:64px;height:64px;font-size:30px;margin:0 auto 6px} .login-title{font-size:23px;margin:10px 0 4px} .login-sub{font-size:13.5px;margin-bottom:22px} .login-card .f-label{font-size:14px;margin:14px 0 7px} .login-card .f-input{height:48px;font-size:16px;border-radius:10px} .login-card .btn{height:48px;font-size:16px;border-radius:10px} .login-card .btn-block{margin-top:18px} .login-foot{margin-top:20px;font-size:13.5px} #login-err,#reg-err{font-size:13px} /* 避免 iOS 自动放大 */ .login-card input,.login-card select{font-size:16px !important} /* --- 主界面：顶栏强制「单行」（门店胶囊 + 导航 + 操作图标） --- padding-top 让出 iOS standalone 的状态栏高度，内容区仍是 48px（border-box） */ .topnav{height:calc(48px + var(--sat, 0px));min-height:calc(48px + var(--sat, 0px));flex-wrap:nowrap;padding:var(--sat, 0px) 8px 0;gap:4px;align-items:center;overflow:hidden} /* 门店区可收缩（让位给导航），导航本身不收缩（5 项始终排得下） */ .tn-left{flex:0 1 auto;flex-wrap:nowrap;min-width:0;height:100%;gap:4px} .tn-brand{display:none} /* 单行空间优先给门店名，手机端不显示品牌 logo */ .tn-name{display:none} /* 移动端：下拉 select 隐藏，用胶囊按钮 + 底部抽屉代替 */ .store-switch{display:none !important} .store-picker{display:inline-flex;align-items:center;gap:4px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24); border-radius:999px;color:#fff;font-size:12.5px;padding:0 9px; max-width:150px;height:30px;cursor:pointer;transition:.15s;flex:0 1 auto;min-width:0} .store-picker:hover{background:rgba(255,255,255,.22)} .store-picker:active{transform:scale(.97)} #btn-store-picker svg:first-child{display:none} /* 手机端去掉门店图标，宽度留给门店名 */ .store-pick-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left} .tn-store-wrap{display:flex;flex:0 1 auto;min-width:0;margin-right:0;height:auto} /* 主导航：始终留在这一行；窄屏也优先保证 5 项都在（实在放不下才横滑） */ .tn-menu{order:2;flex:1 0 auto;min-width:0;height:100%;overflow-x:auto;gap:0;padding-left:2px} .tn-item{padding:0 8px;font-size:13px} /* 右侧操作区：同一行，图标化省宽度 */ .tn-right{order:3;gap:4px;flex:none;margin-left:0} .tn-ico{padding:0;width:30px;height:30px;justify-content:center;border-radius:6px} .tn-ico-label{display:none} .tn-btn{padding:0;width:30px;height:30px;justify-content:center} .tn-btn-ico{display:block} .tn-btn-label{display:none} #btn-shift{display:none} .user-chip{display:none} .sidebar{display:none !important} /* 手机端：段控件（单日/3日/7日/15日/30日）与房型筛选不显示，只留日期导航 */ #view-mode{display:none !important} #filter-type{display:none !important} /* 房态工具条：日期导航 + 房型筛选（新增订单入口已移除） */ .control-bar{padding:6px 10px 0;gap:6px} .cb-main{width:100%;flex-wrap:wrap;row-gap:6px;gap:6px;overflow:visible} .date-nav{flex:1 1 auto;padding:3px;gap:3px;justify-content:flex-start} .date-nav .btn{padding:4px 8px;font-size:12.5px} .range-label{font-size:12px;margin:0 4px;white-space:nowrap} .filter-row{width:auto;margin-left:0;gap:6px;flex:0 0 auto} .filter-row .f-inline{flex:1;padding:6px 9px;font-size:13px} .filter-row .btn-sm{padding:7px 12px;white-space:nowrap} .main-area{padding:6px 6px 4px} /* 图例：单行横向滚动，省纵向空间 */ .legend-bar{padding:5px 10px calc(8px + var(--sab, 0px));font-size:11px;gap:10px;flex-wrap:nowrap; overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;scrollbar-width:none} .legend-bar::-webkit-scrollbar{display:none} .legend-bar>div:last-child{display:none} /* 房态图：日期行字号保持可读（不缩小），写不下就换行；格子略收窄省纵向空间 */ :root{--roomw:66px;--dayw:60px;--cellh:54px;--ghh:50px} .gh{padding:3px 1px;gap:1px} .gh-md{font-size:12px} .gh-wk{font-size:11px} .gh-today{font-size:10.5px;padding:1px 4px} .gh-avail{font-size:12px} .gh-avail .u{font-size:9px} .gh-corner .gc-t{font-size:11px;line-height:1.2} .gh-corner .gc-r{font-size:10px} .gh-corner .gc-r b{font-size:12px} .grp{font-size:12px;padding:4px 8px;gap:8px} .room-lab{padding:4px 6px;min-height:var(--cellh)} .room-lab .no{font-size:13px;gap:5px} .cell{padding:4px 5px} .cell-r1{font-size:12px;gap:4px} .cell-r2,.cell-r3{font-size:10px} .cell.center .cell-c{font-size:11.5px} /* 统计页 */ .st-kpis3{grid-template-columns:1fr 1fr !important} .st-filter,.st-card-h{flex-wrap:wrap;gap:8px} .st-tbl{font-size:12px} .st-tbl th,.st-tbl td{padding:7px 8px;white-space:nowrap} /* 通用弹窗：底部抽屉式全屏化 */ .yz-modal,.modal{width:100% !important;max-width:100% !important;height:auto;max-height:92vh; border-radius:14px 14px 0 0;align-self:flex-end} .modal-mask{align-items:flex-end} /* 记一笔：表单分行，避免挤压（用 !important 压过文件末尾的基础样式块） */ .nt-modal .yz-body{padding:12px 12px 2px !important} .nt-line{flex-wrap:wrap !important;gap:7px !important} .nt-line .nt-sel[data-f="storeId"]{flex:1 1 100% !important} .nt-time{flex:1 1 36% !important} .nt-date{flex:1 1 58% !important} .nt-line .nt-sel[data-f="type"]{flex:1 1 32% !important} .nt-line .nt-sel[data-f="category"]{flex:1 1 62% !important} .nt-line .nt-sel[data-f="payMethod"]{flex:1 1 100% !important} .nt-amt{flex:1 1 100% !important;height:38px !important} .nt-row{padding:10px !important} .nt-sel,.nt-in{height:38px !important;font-size:14px !important} .nt-add,.nt-del{font-size:14px !important} .yz-foot .yz-btn{height:42px;font-size:15px;padding:0 20px} } @media (max-width:420px){ .tn-item{padding:0 4px;font-size:12px} .store-picker{max-width:132px;font-size:12px} .tn-ico,.tn-btn{width:28px;height:28px} .login-card{padding:36px 16px 28px} .sum-card{min-width:104px} .st-kpis3{grid-template-columns:1fr !important} } .nt-modal .yz-body{padding:14px 16px 4px} .nt-rows{display:flex;flex-direction:column;gap:10px} .nt-row{background:#f7f9f9;border:1px solid var(--line2);border-radius:8px;padding:9px 10px;display:flex;flex-direction:column;gap:8px} .nt-line{display:flex;align-items:center;gap:8px;flex-wrap:nowrap} .nt-sel{height:34px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 8px;font-size:13px;color:var(--text);min-width:0;flex:1;cursor:pointer} .nt-sel:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(0,121,107,.10)} .nt-time{flex:0 0 92px} .nt-date{flex:0 0 140px} .nt-in{height:34px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 10px;font-size:13px;flex:1;min-width:0} .nt-in:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(0,121,107,.10)} .nt-remark{flex:1} .nt-amt{display:flex;align-items:center;gap:4px;flex:0 0 150px;height:34px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 9px} .nt-amt:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px rgba(0,121,107,.10)} .nt-amt span{color:var(--primary-d);font-size:14px;font-weight:700} .nt-amt .nt-amt-in{flex:1;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--text);outline:none;min-width:0;font-variant-numeric:tabular-nums} .nt-no{font-size:12px;color:var(--text3);white-space:nowrap;flex:none} .nt-more{padding:10px 2px 2px} .nt-add{border:none;background:transparent;color:var(--primary-d);font-size:13px;font-weight:600;cursor:pointer;padding:4px 2px} .nt-add:hover{text-decoration:underline} .nt-del-wrap{padding-top:6px} .nt-del{border:none;background:transparent;color:#dc2626;font-size:13px;cursor:pointer;padding:4px 2px} .nt-del:hover{text-decoration:underline} .yz-tag-pre.exp{background:#fef2f2;color:#dc2626} /* ================= 移动端 · 门店切换抽屉 ================= */ .store-sheet-mask{ position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:210; display:flex;align-items:flex-end;justify-content:center; animation:fadeIn .18s ease; } .store-sheet{ width:100%;max-width:520px;background:#fff; border-radius:14px 14px 0 0;display:flex;flex-direction:column; max-height:78vh;overflow:hidden; animation:slideUp .22s cubic-bezier(.2,.7,.3,1); padding-bottom:env(safe-area-inset-bottom,0); } .store-sheet-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--line)} .store-sheet-hd h3{margin:0;font-size:16px;font-weight:700;color:var(--text)} .store-sheet-hd .store-close{border:none;background:transparent;font-size:24px;color:var(--text3);line-height:1;padding:0 6px;cursor:pointer} .store-sheet-hd .store-close:active{color:var(--text)} .store-sheet-tip{padding:10px 16px 4px;font-size:12.5px;color:var(--text3)} .store-sheet-body{padding:4px 0 8px;overflow-y:auto;-webkit-overflow-scrolling:touch} .store-row{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:15px;border-bottom:1px solid var(--line2);cursor:pointer;transition:.12s;min-height:50px} .store-row:last-child{border-bottom:none} .store-row:active{background:#f0fdfa} .store-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .store-row .check{color:var(--primary);font-weight:700;font-size:18px;width:22px;text-align:center;opacity:0} .store-row.cur{background:#f0fdfa;color:var(--primary-d);font-weight:600} .store-row.cur .check{opacity:1} .store-row.cur .nm{color:var(--primary-d)} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}} /* 桌面端抽屉略小一些，居中弹起，与底部门店单页风格一致 */ @media (min-width:769px){ .store-sheet-mask{align-items:center;padding:24px} .store-sheet{border-radius:14px;max-height:80vh} @keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}} } /* =================================================================== 已退房格子（云掌柜风格 · 灰块保留客人姓名 + 渠道来源） =================================================================== */ .cell.checked_out{background:var(--cell-checked-out);color:var(--cell-checked-out-ink)} .cell.checked_out .cell-r1,.cell.checked_out .cell-r1 .nm{color:var(--cell-checked-out-ink);font-weight:600} .cell.checked_out .cell-r2{color:#374151} .cell.checked_out .cell-r3{color:#374151} .cell.checked_out .cell-r3 .dep{background:rgba(17,24,39,.12);color:var(--cell-checked-out-ink)} .cell.checked_out .cell-r3 .dep.dirty{background:#fde68a;color:#92400e;font-weight:700} .cell.checked_out .staybar{display:none} .cell.checked_out.chb{box-shadow:inset 4px 0 0 var(--chcolor,transparent)} .cell.checked_out:hover{filter:brightness(.96)} /* 渠道来源文字：弱化但始终可见 */ .cell-r2 .chn{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top} /* =================================================================== 拖拽换房 / 改期（指针拖拽） =================================================================== */ body.dragging-cell,body.dragging-cell *{cursor:grabbing !important;user-select:none} .cell.can-drag{cursor:grab} .cell.can-drag:active{cursor:grabbing} /* v60：可拖格右上角的三角形小色块已按需求去掉（可拖仍由 cursor:grab 与 hover 提示体现） */ .cell.dragging{opacity:.4;outline:2px dashed var(--primary);outline-offset:-2px} .cell.drop-ok{outline:2px solid var(--primary);outline-offset:-2px;box-shadow:inset 0 0 0 3px rgba(20,184,166,.18)} .cell.drop-ok::after{content:attr(data-drop-hint);position:absolute;inset:auto 0 0 0;text-align:center; font-size:9.5px;line-height:1.5;color:#fff;background:var(--primary);font-weight:700;letter-spacing:.2px} .cell.drop-no{outline:2px solid #ef4444;outline-offset:-2px;cursor:not-allowed} .drag-banner{z-index:240} /* 换房 / 改期 确认弹窗 */ .mv-arrow{display:flex;align-items:center;gap:12px;margin-bottom:12px} .mv-side{flex:1;min-width:0;background:#f7f9fb;border:1px solid var(--line);border-radius:8px;padding:9px 11px} .mv-side.to{background:var(--primary-l);border-color:#a7ded6} .mv-side .mv-room{font-size:17px;font-weight:800;color:var(--text);line-height:1.2} .mv-side.to .mv-room{color:var(--primary-d)} .mv-side .mv-type{font-size:12px;color:var(--text3);margin-top:1px} .mv-side .mv-date{font-size:12.5px;color:var(--text2);margin-top:3px;font-variant-numeric:tabular-nums} .mv-go{flex:none;color:var(--primary);font-size:20px;font-weight:700} .mv-warn{margin-top:8px;background:#fff7e6;border:1px solid #f0dfa0;border-radius:8px;padding:8px 11px;font-size:12.5px;color:#8a5a00} .mv-radio{display:flex;align-items:center;gap:8px;height:auto !important;padding:10px 12px;font-size:13.5px;color:var(--text2)} @media (max-width:768px){ .mv-arrow{gap:8px} .mv-side{padding:8px} .mv-side .mv-room{font-size:15px} .mv-go{font-size:17px} .drag-banner{top:auto;bottom:14px;left:50%;transform:translateX(-50%);width:calc(100% - 24px); font-size:12.5px;padding:9px 12px;justify-content:space-between;box-sizing:border-box} } /* =================================================================== 一单多房：联房标记（房态格 · 订单表） =================================================================== */ .cell .lmk{ display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; background:rgba(255,255,255,.75);color:#4b5563;border-radius:3px; padding:0 4px;font-size:9px;font-weight:700;line-height:1.55;flex:none; } .cell.is-lian .cell-r1 .nm{font-weight:600} /* 已过入住日期：整单禁止拖拽（改房改期请用「修改订单」） */ .cell.no-drag{cursor:pointer} .ord-table .or-lian{ display:inline-block;margin-top:2px;background:#eef2f7;color:#5b6973; border-radius:4px;padding:0 5px;font-size:10.5px;font-weight:600;line-height:1.6; } /* =================================================================== 一单多房：房间行（新增订单 / 修改订单 共用） =================================================================== */ .or-card{flex-wrap:wrap} .or-card .or-room{flex:1.6 1 168px;min-width:132px} .or-card .yz-cell{flex:1 1 118px;min-width:96px} .or-card .yz-cell.w-d{flex:0 0 92px;min-width:0} .or-card .yz-cell.w-n{flex:0 0 88px;min-width:0} .yz-chip2{ display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px; background:var(--primary-l);color:var(--primary-d);font-size:11.5px;font-weight:700;white-space:nowrap; } .yz-cnt{ display:inline-flex;align-items:center;height:19px;padding:0 7px;margin-left:4px;border-radius:9px; background:var(--primary-l);color:var(--primary-d);font-size:11.5px;font-weight:600;vertical-align:1px; } .yz-hint{font-size:12px;color:var(--text3);margin-top:9px;line-height:1.5} .yz-hint.warn{color:#b45309;font-weight:600} .yz-hint:empty{display:none} /* =================================================================== v63 逐间夜房价（新增订单 / 修改订单 共用） —— 每个间夜单独设价；留空则沿用统一房价 =================================================================== */ .yz-nights{ flex:1 1 100%;width:100%;margin-top:8px;padding-top:8px; border-top:1px dashed var(--line2); } .yz-np-head{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-size:12px;color:var(--text2);line-height:1.6; } .yz-np-head b{color:var(--text);font-weight:700} .yz-np-head .yz-link.mini{font-size:12px;margin-left:auto} .yz-np-single{font-size:12px;color:var(--text3);margin-left:auto} .yz-np-list{ display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:6px;margin-top:8px; } .yz-np-row{ display:flex;align-items:center;gap:6px;justify-content:space-between; border:1px solid var(--line2);border-radius:5px;padding:4px 8px;background:#fafbfc; } .yz-np-d{font-size:11.5px;color:var(--text2);display:flex;flex-direction:column;line-height:1.35;white-space:nowrap} .yz-np-d i{font-style:normal;color:var(--text3);font-size:10.5px} .yz-np-in{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--text3);flex:none} .yz-np-in input{ width:62px;height:26px;border:1px solid var(--line2);border-radius:4px; padding:0 5px;font-size:12.5px;text-align:right;background:#fff;color:var(--text); } .yz-np-in input:focus{outline:none;border-color:var(--primary)} .yz-np-in input[readonly]{background:#f4f5f7;color:var(--text3)} /* 「补录」标记（过去日期的订单） */ .yz-back{ display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:6px;border-radius:4px; background:#fff4e5;color:#b45309;font-size:11.5px;font-weight:700;vertical-align:2px; } /* 房态格里「逐晚设价」小角标（v63）：只在逐间夜价不一致时出现 */ .cell .ptag{ display:inline-block;margin-left:3px;padding:0 3px;border-radius:3px; background:rgba(255,255,255,.72);color:#7c4a00; font-size:8.5px;font-weight:700;line-height:1.5;vertical-align:1px;white-space:nowrap; } /* 办理续住弹窗（v65，参照云掌柜「办理续住」） */ .ext-tip{ background:var(--primary-l);border-radius:8px;padding:9px 12px;margin-bottom:12px; font-size:12.5px;color:var(--primary-d);line-height:1.65; } .ext-ro{color:var(--text2);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ext-custom{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text2);margin-left:6px} .ext-custom .ext-n{ width:76px;height:34px;border:1px solid var(--line2);border-radius:8px;padding:0 8px; font-size:13.5px;background:#fff;color:var(--text);text-align:center; } .ext-custom .ext-n:focus{outline:none;border-color:var(--primary)} /* 内容较少的弹窗（办理续住）：高度随内容收紧，避免大片留白 */ .modal.yz-modal.yz-compact{height:auto} @media (max-width:768px){ .or-card{display:flex;flex-wrap:wrap;gap:0} .or-card .yz-cell{flex:1 1 50%;min-width:0;height:46px} .or-card .or-room{flex:1 1 100%} .or-card .yz-cell.w-d,.or-card .yz-cell.w-n{flex:1 1 33.333%} .yz-hint{font-size:11.5px} .cell .lmk{font-size:8.5px;padding:0 3px} }