/* ============================================================ miya ops · 移动端适配补丁 必须在 app.css / admin.css / login.css 之后加载 断点：1100(平板) / 820(大屏手机) / 700(管理后台) / 560(手机) / 400(小屏) ============================================================ */ html{-webkit-text-size-adjust:100%} button,input,select,textarea,a,label{-webkit-tap-highlight-color:transparent} button{touch-action:manipulation} /* 顶部导航条在 .app-header 内占用的高度：按钮 32px + 上下内边距 11px + 1px 分隔线 */ :root{--nav-row-h:44px} /* ------------------------------------------------------------ 工作台里「只在手机端出现」的两个控件（结算节点标题行、人员清单「处理」菜单）。 桌面端一律 display:none，DOM 与 PC 排版完全不受影响，仅手机端媒体查询里再打开。 ------------------------------------------------------------ */ .steps-hd{display:none} /* 结算节点区的容器：桌面/平板端 display:contents（不生成盒子，排版与包裹前完全一致）， 只有手机端媒体查询里才把它变成一张真正的卡。 */ .steps-block{display:contents} .dash-actions{display:flex;align-items:center;position:relative} .dash-more-btn{display:none} .dash-more-panel{display:none} /* ============================================================ 一、运营台（index.html）≤1100px 顶部导航在窄屏被隐藏，这里改成底部可横向滚动的标签栏 ============================================================ */ @media (max-width:1100px){ /* 顶部"露底"防护：app.css 里 html,body 都是 --bg 浅灰， 一旦滚动越界/回弹露出的是浅灰条；这里让 html 变白与顶栏同色， 并让 body 至少铺满一屏，避免底部也露出白边。 */ html{background:#fff} body{min-height:100vh;min-height:100dvh} /* 头部有 backdrop-filter，会成为 fixed 子元素的包含块，必须去掉。 同时 height 改为 auto 并预留 padding-bottom，作为导航条的第二行空间。 */ .app-header{ backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff; height:auto; min-height:calc(64px + env(safe-area-inset-top,0px)); padding-top:calc(10px + env(safe-area-inset-top,0px)); padding-bottom:var(--nav-row-h); /* 导航条占位，高度跟随断点变量 */ padding-left:calc(14px + env(safe-area-inset-left,0px)); padding-right:calc(14px + env(safe-area-inset-right,0px)); } /* 顶部导航条：.app-header 是 sticky（已定位），所以 absolute 的包含块是 header 本身， 而不是 brand 那一层内联 flex 包裹 —— 这样导航条能横跨整个顶栏宽度。 header 用 padding-bottom 给它留位，因此永远不会盖住品牌行。 */ .nav{ display:flex; position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0; padding:5px 10px 6px; gap:6px; background:transparent; border-top:1px solid var(--border); overflow-x:auto;overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .nav::-webkit-scrollbar{display:none} /* 导航按钮与顶栏其他控件（用户标签 / 日期范围按钮）共用同一套高度与圆角， 避免一屏里出现「胶囊 + 圆角矩形」两种语言。 361px 以上 6 项等分，每项可用文字宽度约 50px，横向内边距必须留小， 否则「数据导入」会被省略号截断（361px 以下改由自然宽度 + 横向滑动接管）。 */ .nav button{ flex:1 1 0;min-width:0;height:32px;padding:0 2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:12px; border:1px solid var(--border);border-radius:9px; background:var(--head);color:var(--muted); } .nav button.active{ background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600; } /* 底部不再有固定栏，恢复常规留白 */ .page{padding-bottom:32px} } /* ============================================================ 二、运营台 ≤820px（大屏手机 / 竖屏平板） ============================================================ */ @media (max-width:820px){ /* ---- 顶栏：只收字号与间距，不动结构 ---- */ .app-header{min-height:calc(54px + env(safe-area-inset-top,0px));padding-left:calc(10px + env(safe-area-inset-left,0px));padding-right:calc(10px + env(safe-area-inset-right,0px));gap:8px} .brand{font-size:13.5px;gap:7px} .brand-mark{width:24px;height:24px} .header-right{gap:7px;font-size:11.5px} .dropdown-tenant{max-width:120px;min-width:88px} .user-chip{max-width:132px;padding:4px 20px 4px 8px;font-size:11px} /* ---- 页面骨架 ---- */ .page{padding:16px 12px 32px} .page-title-row{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:14px} .page-title{font-size:24px} .page-meta{text-align:left;font-size:12px} /* ---- 统计范围条 ---- */ .range-bar{padding:10px 12px;gap:10px} .range-copy{flex-wrap:wrap;gap:4px 8px} .range-hint{white-space:normal} .range-actions{width:100%} .range-actions .btn{flex:1;justify-content:center} /* ---- 表格横向滚动提示 ---- */ .table-wrap::-webkit-scrollbar{height:6px;width:6px} .table-wrap::-webkit-scrollbar-thumb{background:#c9d5d0;border-radius:6px} /* ---- 指标卡 ---- */ .metric{padding:14px} .metric .value{font-size:26px} .metric .sub{font-size:12px} /* ---- 卡片 ---- */ .card-hd{flex-wrap:wrap;padding:14px 12px} .card-bd{padding:12px} .card-hd h2{font-size:15px} /* ---- 步骤条 ---- */ .steps{grid-template-columns:1fr 1fr;gap:8px} .step{padding:12px 12px 30px} /* ---- 工具条 / 搜索 / 分段控件 ---- */ .toolbar{gap:8px;margin-bottom:10px} .search{min-width:0;width:100%;flex:1 1 100%;font-size:16px} .seg{width:100%;overflow-x:auto;scrollbar-width:none} .seg::-webkit-scrollbar{display:none} .seg button{flex:1 0 auto;white-space:nowrap;padding:9px 14px} /* ---- 表格：容器内横向滚动，去掉嵌套的纵向限高 ---- */ .table-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:12px} div.table-wrap[style*="max-height"]{max-height:none !important} .calendar-table-wrap{max-height:none !important} table.data{font-size:12px} table.data th,table.data td{height:auto;padding:10px;font-size:12px} table.data input.cell{width:100%;min-width:60px;max-width:110px;font-size:16px} .footer-note{font-size:11px} /* ---- 导入页 ---- */ .import-actions .btn{flex:1 1 auto;justify-content:center} .dropzone{padding:14px 16px;min-height:130px} .dz-file-list{grid-template-columns:1fr} .dz-file-summary{flex-wrap:wrap} .collection-heading{flex-wrap:wrap;gap:8px} .collection-rate{align-self:flex-start} .collection-input textarea, .collection-grid .collection-input textarea{min-height:110px;height:auto;font-size:16px} /* ---- 租户/账号（旧管理区）表单 ---- */ .admin-form-row{gap:8px} .admin-form-row .search, .admin-form-row .btn, .admin-form-row .dropdown-block{flex:1 1 100%;min-width:0} .admin-form-row .btn{justify-content:center} .admin-select{flex:1 1 100%} /* ---- 弹层：统一改成底部抽屉 ---- */ .login-overlay{padding:0;place-items:end stretch;align-items:flex-end} .login-panel{ width:auto;max-width:none; border-radius:18px 18px 0 0; max-height:92vh;overflow-y:auto; padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px)); animation:mobileSheetIn .2s ease-out; } .wizard-panel,.edit-panel,.cleanup-panel, .announcement-panel,.expiration-reminder-panel{width:auto;max-width:none} .login-panel input{font-size:16px} .wizard-actions{gap:8px} .wizard-actions .btn{flex:1;justify-content:center} .announcement-actions{margin-top:14px} .announcement-actions .btn{width:100%} .expiration-reminder-actions{flex-wrap:wrap;justify-content:stretch;gap:10px} .expiration-reminder-actions .btn{flex:1 1 100%;justify-content:center} /* ---- 提示条：导航条已移到顶部，这里不再需要避让 ---- */ .toast{ left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:auto; } } @keyframes mobileSheetIn{from{transform:translateY(16px);opacity:.4}to{transform:translateY(0);opacity:1}} /* ============================================================ 三、运营台 ≤560px（手机） ============================================================ */ @media (max-width:560px){ .page{padding:14px 10px 28px} .page-title{font-size:21px} .app-header{padding-left:calc(6px + env(safe-area-inset-left,0px));padding-right:calc(6px + env(safe-area-inset-right,0px))} .nav{padding-left:6px;padding-right:6px} .brand{font-size:13px;gap:6px} .brand-mark{width:23px;height:23px} /* 身份标签 / 厅下拉 / 剩余天数：缩小字号与内边距，把横向空间让给彼此 */ .header-right{gap:6px;font-size:11px} .dropdown-tenant{max-width:126px;min-width:84px} .user-chip{max-width:126px;padding:3px 19px 3px 7px;font-size:11px} .expiration-days{font-size:10.5px} .metrics{gap:8px} #welfareMetrics{grid-template-columns:1fr 1fr} .metric{padding:12px} .metric .label{font-size:12px} .metric .value{font-size:22px} .metric .sub{font-size:11px;margin-top:6px} .metric-visibility-btn{width:22px;height:22px} .range-bar{flex-direction:column;align-items:stretch;gap:10px} .range-copy{flex-direction:column;align-items:flex-start;gap:3px} .range-actions{margin-top:0} .step{padding:12px 12px 32px} .card-hd{padding:12px 10px} .card-hd>.btn,.card-hd .btn:not(.icon-btn){width:100%;justify-content:center} .card-bd{padding:10px} .table-wrap{border-radius:10px} table.data th,table.data td{padding:9px 8px} table.data#welfareTable th,table.data#welfareTable td{padding:8px 6px;font-size:12px} .kv{grid-template-columns:1fr;gap:2px} .kv+.kv{margin-top:10px} .referral-status-row{grid-template-columns:1fr} .referral-status-row .referral-remaining{justify-self:start} .calendar-detail .metrics{grid-template-columns:1fr 1fr;gap:8px} .dz-actions{gap:8px} /* 图片/规则原图弹层也走底部抽屉 */ .reference-modal{padding:0;place-items:end stretch} .reference-modal-panel{ width:100%;max-width:none;max-height:94vh; border-radius:14px 14px 0 0; } .reference-modal-hd{padding:10px 12px} .reference-modal-bd{padding:8px;max-height:none} .reference-modal-bd img{max-height:calc(94vh - 92px)} .referral-modal-panel{width:100%} .referral-modal-bd{padding:10px;max-height:calc(94vh - 96px)} } @media (max-width:400px){ .page-title{font-size:19px} .metric .value{font-size:20px} .brand{font-size:12px} /* 导航按钮字号不再下调：361~400px 仍等分一排，空间够； ≤360px 由下面的规则改成自然宽度 + 横向滑动。 */ } /* ≤360px（iPhone SE / 320 等）：6 项等分已放不下 4 字标签， 改为按内容宽度排布 + 横向滑动（露半截的标签本身就是可滑动提示）， 而不是把标签压到变形或截断。361px 以上空间足够，仍保持等分一排。 */ @media (max-width:360px){ .nav{gap:5px;padding-left:6px;padding-right:6px} .nav button{flex:0 0 auto;padding:0 11px} } /* ============================================================ 四、管理后台（admin.html）≤700px 侧栏图标栏改为底部可横向滚动标签栏，并保留注销入口 ============================================================ */ @media (max-width:700px){ .shell{display:block} /* 底栏外观与用户端 .tabbar 一致：白底毛玻璃 + 1px 顶描边、 图标(单色 SVG mask)在上、文字在下，选中品牌绿，未选中浅灰蓝。 8 个入口 + 注销放不下时容器横向滚动（与用户端 5 项均分的差别仅在此）。 */ .sidebar{ position:fixed;left:0;right:0;bottom:0;top:auto; width:auto;height:calc(58px + env(safe-area-inset-bottom,0px)); padding:0 calc(4px + env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) calc(4px + env(safe-area-inset-left,0px)); flex-direction:row;align-items:stretch;gap:0; overflow-x:auto;overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; z-index:70; background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); border-top:1px solid var(--line); box-shadow:none; } .sidebar::-webkit-scrollbar{display:none} .sidebar .brand,.side-label{display:none} .sidebar nav{display:flex;gap:0;flex:1 0 auto} .nav-item{ flex:1 0 auto;min-width:58px; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;padding:0 4px; font-size:11px !important;line-height:1.1; white-space:nowrap;text-align:center; border-radius:0;background:transparent;color:#9dabbd; -webkit-tap-highlight-color:transparent; } .nav-item.active{background:transparent !important;color:var(--brand) !important;font-weight:600} /* admin.css 的 html[data-admin-view=N] [data-view=N]{color:#fff;background:#1d5348} 特异度更高，必须 !important 压回 */ /* 图标：隐藏原字符字形，改用单色 SVG mask 上色（同用户端 .tab-ico） */ .nav-icon{ display:block !important; width:22px;height:22px;font-size:0 !important;color:transparent; background-color:#9dabbd; -webkit-mask-image:var(--ico);mask-image:var(--ico); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:22px 22px;mask-size:22px 22px; } .nav-item.active .nav-icon{background-color:var(--brand)} .nav-item[data-view="overview"] .nav-icon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.4'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.4'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.4'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.4'/%3E%3C/svg%3E")} .nav-item[data-view="tenants"] .nav-icon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.4V6.8L12 4l8 2.8v13.6'/%3E%3Cpath d='M4 20.4h16'/%3E%3Cpath d='M9.6 20.4v-4.8h4.8v4.8'/%3E%3Cpath d='M9.6 9.4h1.2M13.2 9.4h1.2M9.6 12.6h1.2M13.2 12.6h1.2'/%3E%3C/svg%3E")} .nav-item[data-view="users"] .nav-icon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.4'/%3E%3Cpath d='M5.4 19.6c0-3.4 2.9-5.6 6.6-5.6s6.6 2.2 6.6 5.6'/%3E%3C/svg%3E")} .nav-item[data-view="data"] .nav-icon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 19.4h14.8'/%3E%3Cpath d='M8 19.4v-5.2M12 19.4V8.4M16 19.4v-8'/%3E%3C/svg%3E")} .nav-item[data-view="announcements"] .nav-icon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 14.2V9.8a1.4 1.4 0 0 1 1.4-1.4h2.6L14 4.6v14.8L8.4 15.6H5.8a1.4 1.4 0 0 1-1.4-1.4z'/%3E%3Cpath d='M17 9.4a3.6 3.6 0 0 1 0 5.2'/%3E%3C/svg%3E")} .nav-item[data-view="rules"] .nav-icon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8.4h14M5 15.6h14'/%3E%3Ccircle cx='9.4' cy='8.4' r='2'/%3E%3Ccircle cx='14.6' cy='15.6' r='2'/%3E%3C/svg%3E")} .nav-item[data-view="cleanup"] .nav-icon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M8.4 7V5.2A1.2 1.2 0 0 1 9.6 4h4.8a1.2 1.2 0 0 1 1.2 1.2V7'/%3E%3Cpath d='M6.8 7l.9 12a1.4 1.4 0 0 0 1.4 1.3h5.8a1.4 1.4 0 0 0 1.4-1.3l.9-12'/%3E%3Cpath d='M10.2 10.6v6M13.8 10.6v6'/%3E%3C/svg%3E")} .nav-item[data-view="recycle"] .nav-icon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 9.2a7.6 7.6 0 1 1-1 4.6'/%3E%3Cpath d='M4.2 4.6v4.8H9'/%3E%3C/svg%3E")} /* 注销入口跟着底栏排在最后，样式与导航项一致（电源图标 + 注销） */ .sidebar-foot{ display:flex !important; flex:0 0 auto;order:9;margin:0;padding:0; background:transparent;border-radius:0; } .sidebar-foot .identity{display:none !important} .logout-btn{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-width:58px;height:auto;padding:0 4px; border:0;border-radius:0;background:transparent; color:#9dabbd;font:inherit;font-size:11px;line-height:1.1;cursor:pointer; } .logout-btn::before{ content:"";width:22px;height:22px; background-color:#9dabbd; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v6.4'/%3E%3Cpath d='M7.2 6.8a7 7 0 1 0 9.6 0'/%3E%3C/svg%3E") center/22px 22px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v6.4'/%3E%3Cpath d='M7.2 6.8a7 7 0 1 0 9.6 0'/%3E%3C/svg%3E") center/22px 22px no-repeat; } .main{padding:16px 12px calc(86px + env(safe-area-inset-bottom,0px))} /* 弹窗必须盖在底栏之上（底栏 z-index 70，同用户端 reference-modal 的处理） */ .modal{z-index:120} .topbar{margin-bottom:16px} .topbar h1{font-size:22px !important} .eyebrow,.section-kicker,.hero-kicker{font-size:10px} .hero-band{min-height:0;padding:20px 16px;flex-wrap:wrap;gap:10px;border-radius:10px} .hero-band h2{font-size:21px !important;margin:8px 0 6px} .hero-mark{display:none} .stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin:14px 0} .stat{padding:14px} .stat-value{font-size:24px;margin-top:7px} .view-intro h2{font-size:22px !important} .view-intro p{font-size:12px} .panel-head,.table-toolbar{padding:14px 12px;gap:10px;flex-wrap:wrap} .panel h2{font-size:16px;margin-top:5px} .compact-list{padding:6px 12px 14px} .role-summary{padding:16px;gap:14px} .role-line{grid-template-columns:64px 1fr 38px;gap:8px} .search{font-size:16px;width:100%} .table-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} th,td{padding:12px !important;white-space:nowrap} /* 公会/账号表列多：首列与操作列固定在两端，中间横向滚动 */ #view-tenants .table-wrap th:first-child,#view-users .table-wrap th:first-child{ position:sticky;left:0;z-index:3;background:#fbfdfc;box-shadow:1px 0 0 var(--line); } #view-tenants .table-wrap td:first-child,#view-users .table-wrap td:first-child{ position:sticky;left:0;z-index:2;background:#fff;box-shadow:1px 0 0 var(--line); } #view-tenants .table-wrap th:last-child,#view-users .table-wrap th:last-child, #view-tenants .table-wrap td:last-child,#view-users .table-wrap td:last-child{ position:sticky;right:0;min-width:126px; } #view-tenants .table-wrap th:last-child,#view-users .table-wrap th:last-child{ z-index:3;background:#fbfdfc;box-shadow:-1px 0 0 var(--line); } #view-tenants .table-wrap td:last-child,#view-users .table-wrap td:last-child{ z-index:2;background:#fff;box-shadow:-1px 0 0 var(--line); } /* 操作按钮换行，避免操作列过宽挤掉中间内容 */ #view-tenants .actions,#view-users .actions{ display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:center; gap:5px;max-width:118px;margin-left:auto; } #view-tenants .actions .small-btn,#view-users .actions .small-btn{ margin:0;padding:6px 6px;font-size:12px;flex:0 0 auto; } /* 弹窗 / 确认框：底部抽屉 */ .modal{padding:0;place-items:end stretch;align-items:flex-end;z-index:70} .modal-card{ width:100% !important;max-width:none !important; max-height:92vh;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)); border-radius:14px 14px 0 0; animation:mobileSheetIn .2s ease-out; } .modal-head{margin-bottom:14px} .modal-head h2{font-size:19px} .modal-actions{flex-wrap:wrap;gap:8px} .modal-actions button{flex:1 1 auto;min-width:100px;justify-content:center} .confirm-dialog{padding:0;place-items:end stretch;align-items:flex-end;z-index:80} .confirm-card{ width:100%;max-width:none; padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px)); border-radius:14px 14px 0 0; } .confirm-actions{flex-wrap:wrap;gap:8px} .confirm-actions button{flex:1 1 auto;min-width:110px;justify-content:center} .flash{margin-bottom:12px} /* 横向并排的规则/数据工作区在手机上单列 */ .announcement-layout{grid-template-columns:1fr} .announcement-compose,.announcement-recipients{min-height:0;padding:16px} .announcement-compose textarea{min-height:180px} .cleanup-form-grid,.ocr-summary-grid,.ocr-category-grid{grid-template-columns:1fr !important} .effective-rules-grid{grid-template-columns:1fr !important} .data-metrics{grid-template-columns:1fr 1fr !important} .rules-result-grid,.rule-change-grid{grid-template-columns:1fr !important} .rules-drawer-panel{width:100%} .data-calendar-popover{position:fixed;top:auto;right:12px;bottom:12px;left:12px;width:auto} } @media (max-width:400px){ .nav-item{padding:9px 11px;font-size:12px} .logout-btn{padding:9px 11px;font-size:12px} .stats-grid{gap:8px} .stat{padding:12px} .stat-value{font-size:21px} .data-metrics{grid-template-columns:1fr !important} } /* ============================================================ 五、登录页（login.html）≤760px 把桌面端左侧品牌视觉搬到顶部做 Hero 区，表单跟随其下 ============================================================ */ /* 移动端专用标题节点：桌面端始终隐藏（桌面端用 .visual-copy + .form-heading 各一套） */ .visual-heading-mobile{display:none} @media (max-width:760px){ .login-page{padding:0;background:#fff;display:block} .login-shell{ display:flex;flex-direction:column; min-height:100vh;border:0;border-radius:0;box-shadow:none;background:#fff; } /* ---- 顶部 Hero：沿用桌面端左侧渐变 + 品牌 + 主标题 ---- */ .login-visual{ display:block; position:relative; padding:calc(20px + env(safe-area-inset-top,0px)) 22px 26px; background:linear-gradient(150deg,#f4fcf9 0%,#e6f7f0 52%,#f8fcfb 100%); border-radius:0 0 26px 26px; box-shadow:0 8px 22px rgba(8,122,104,.07); overflow:hidden; } .login-visual .brand{font-size:17px;gap:10px} .login-visual .brand-mark{ width:38px;height:38px;border-radius:12px;font-size:19px; box-shadow:0 6px 14px rgba(8,122,104,.18); } /* 窄屏只保留一组标题：Hero 里的「欢迎登录」； 桌面端的左侧 slogan（.visual-copy）与右栏表单标题（.form-heading）在窄屏都不再重复出现 */ .visual-copy{display:none} .visual-heading-mobile{display:block;margin-top:20px} .visual-heading-mobile h2{margin:0;font-size:26px;line-height:1.2;letter-spacing:-.6px} .visual-heading-mobile p{margin:8px 0 0;font-size:13px} /* ---- 迷你数据看板：把桌面端大图压缩成紧凑尺寸，不做整体缩放以免文字发虚 ---- */ .visual-stage{ position:relative;inset:auto; display:block;margin-top:18px;height:auto;overflow:visible; } .glow,.float-card,.trend-card{display:none} .dashboard-art{ width:100%;max-width:400px;margin:0 auto; border-radius:16px;transform:none; box-shadow:0 14px 28px rgba(25,117,98,.14); } .browser-bar{height:34px;gap:6px;padding:0 12px;font-size:10.5px} .browser-bar i{width:7px;height:7px} .art-body{grid-template-columns:1.25fr .85fr;gap:10px;padding:12px} .chart-panel,.donut-panel{border-radius:10px;padding:10px} .chart-head{font-size:10.5px} .bars{height:56px;gap:7px;padding:6px 3px 5px} .bars i{min-height:8px;border-radius:4px 4px 1px 1px} .chart-foot{padding-top:5px} .chart-foot span{width:13px;height:3px} .donut{width:52px;height:52px} .donut:after{inset:11px} .legend{gap:5px;font-size:9px} .dot{width:5px;height:5px;margin-right:4px} .art-row{gap:7px;padding:0 12px 12px} .pill{width:18px;height:18px;border-radius:6px} .line{height:5px} .w1{width:52px}.w2{width:86px}.w3{width:34px} /* ---- 表单区 ---- */ .login-form-side{ flex:1;min-height:0; justify-content:space-between; padding:20px 20px calc(22px + env(safe-area-inset-bottom,0px)); } .form-wrap{width:100%} /* 标题已上移到 Hero，这里整块隐藏，避免与「欢迎登录」重复 */ .form-heading{display:none} .field-label{margin-bottom:8px;font-size:14px} .input-wrap{height:52px;margin-bottom:16px;border-radius:12px} .input-wrap input{font-size:16px;padding-right:10px} .input-icon{width:48px;flex:0 0 48px} .user-icon:before{left:17px;top:14px} .user-icon:after{left:13px;bottom:12px} .lock-icon:before{left:15px;top:22px} .lock-icon:after{left:19px;top:13px} .toggle-password{width:48px} .form-row{font-size:14px;margin:-2px 0 18px} .form-error{font-size:12px} .submit-button{height:52px;font-size:17px;border-radius:12px} .form-footer{ font-size:11px;flex-direction:column; align-items:center;text-align:center; /* 桌面端是 space-between 两端对齐，窄屏竖排后必须居中 */ gap:6px;margin-top:22px; } } @media (max-width:560px){ .login-visual{padding:calc(18px + env(safe-area-inset-top,0px)) 18px 22px;border-radius:0 0 22px 22px} .visual-heading-mobile{margin-top:16px} .visual-heading-mobile h2{font-size:23px} .visual-heading-mobile p{font-size:12.5px} .visual-stage{margin-top:15px} .dashboard-art{max-width:340px} .login-form-side{padding:18px 18px calc(20px + env(safe-area-inset-bottom,0px))} .input-wrap{height:50px;margin-bottom:14px} .submit-button{height:50px} } @media (max-width:380px){ .visual-heading-mobile h2{font-size:21px} .dashboard-art{max-width:300px} } /* ============================================================ 七、工作台（index.html #page-dashboard）移动端 · ≤768px ------------------------------------------------------------ 目标：手机上是一套「为手机重新设计的运营 Dashboard」，而不是 PC 后台缩小版。 约束：业务逻辑 / 接口 / 统计口径 / 导出逻辑一律不动；桌面端（≥769px） 一行样式都不受影响 —— 除下面三条顶层规则外所有规则都包在本媒体查询里。 新增的两个控件（.steps-hd、.dash-actions）在桌面端是 display:none， 天生不参与 PC 排版。 布局：第一排 2 张大卡（有流水人数 / 总流水），第二排 3 张小卡（收益 / 福利 / 利润） 用 flex 换行承载：第一排按 1.1 : 0.9 分配（约 55% : 45%，主卡稍宽、避免等宽大砖头）， 第二排三张严格三等分，利润不会单独掉行。 层级：日期范围 → 核心营收数据 → 本周结算节点 → 人员清单（首屏优先看到前三块）。 圆角：主容器 14px / 小卡 14px / 小方块与按钮 9~12px；层级靠浅灰底 + 1px 描边 + 留白。 ============================================================ */ @media (max-width:768px){ /* ---------- 0. 骨架：左右安全边距 14px（比内容区再宽一点，卡片不贴边） ---------- */ .page{padding:14px 14px 28px} /* ---------- 1. 标题区：更新时间与周期并成一行，去掉秒 ---------- */ #page-dashboard .page-title-row{margin-bottom:12px;gap:5px} #page-dashboard .page-title{font-size:22px;letter-spacing:-.02em;line-height:1.15} #page-dashboard .page-meta{ display:flex;flex-direction:row;align-items:center;flex-wrap:wrap; column-gap:5px;row-gap:2px; font-size:11px;line-height:1.4;color:#7b8698; } /* JS 把紧凑文案写在 data-mobile-text 上，窄屏用它替换原文案： 元素本身 font-size:0 隐藏长文本，::after 用属性值渲染。 这条规则只在 ≤768px 存在，桌面端两行原文一个字都不变。 */ #dashUpdated[data-mobile-text],#dashPeriod[data-mobile-text]{font-size:0} #dashUpdated[data-mobile-text]::after{content:attr(data-mobile-text);font-size:11px} #dashPeriod[data-mobile-text]::after{content:attr(data-mobile-text);font-size:11px} /* ---------- 2. 统计范围：压成两行，日期独占一行做视觉重点 ---------- */ /* 用 display:contents 把 .range-copy 拆开，让「统计范围 / 共N天 / 按钮」共占第一行， 日期单独占第二行占满宽度；相比原来三行省下约 25px。 */ .range-bar{ display:grid; grid-template-columns:auto auto minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:2px 6px; min-height:0; margin-bottom:10px; padding:9px 11px; border-radius:14px; box-shadow:none; } .range-copy{display:contents} .range-kicker{grid-area:1/1/2/2;font-size:10.5px;letter-spacing:.02em;white-space:nowrap;color:#93a0ae} .range-hint{grid-area:1/2/2/3;font-size:10.5px;white-space:nowrap;color:#93a0ae} #rangeLabel{ grid-area:2/1/3/4; font-size:clamp(17px,4.8vw,19px); font-weight:750;line-height:1.25;letter-spacing:-.01em; color:var(--brand-dark);font-variant-numeric:tabular-nums; } /* 按钮缩到 28px，与导航按钮同一套圆角 */ .range-actions{grid-area:1/3/2/4;justify-self:end;width:auto;gap:6px;margin-top:0} .range-actions .btn{flex:0 0 auto;white-space:nowrap;height:28px;min-width:0;padding:0 10px;font-size:11.5px;border-radius:9px} /* 日期选择器 → 从「上周 / 全部日期」按钮下方弹出的一小片浮层。 原先是 static + width:100%，既把统计范围卡撑成三行，又把下面所有卡片往下推； 改成脱离文档流后，卡片高度回到两行，浮层只盖住下方一点点内容。 ⚠️ 必须显式写 grid-area:auto：绝对定位的 grid 子元素会以声明的网格区域为静态位置。 */ .range-picker{ grid-area:auto; position:absolute; right:10px; top:44px; /* 第一行按钮底边 = padding-top 9 + 按钮 28 + 7 */ z-index:30; /* 高于指标卡、低于底栏（70） */ width:248px; max-width:calc(100% - 20px); margin-top:0; padding:9px 9px 10px; border-radius:12px; /* 手机端唯一保留阴影的地方：浮层需要一点分离感，否则和下面的卡片糊在一起 */ box-shadow:0 10px 26px rgba(16,24,40,.16); } .range-picker-hd{gap:8px;margin-bottom:9px} .range-picker-hd strong{font-size:13.5px} .range-picker-hd span{margin-top:2px;font-size:10.5px} .range-picker .calendar-nav{gap:4px} .range-picker .calendar-nav .icon-btn{width:24px;height:24px;font-size:16px;border-radius:7px} .calendar-week,.range-picker-grid{column-gap:3px} .calendar-week{margin-bottom:4px;font-size:10.5px} .range-picker-grid{row-gap:3px} /* 格子不再是正方形：固定 28px 高，整块日历再矮一截 */ .range-picker-grid .calendar-day{aspect-ratio:auto;height:28px;border-radius:6px;font-size:12px} .range-picker-grid .day-mark{bottom:3px;width:2.5px;height:2.5px} /* ---------- 3. 核心指标：2 张大卡 + 3 张小卡 ---------- */ /* flex 换行取代原来的 6 列等分栅格：第一排两张大卡等分（各 1/2）， 第二排三张小卡仍严格三等分：basis 正好 1/3，必然换到第二行，无需额外换行控制。 */ #dashMetrics{ display:flex;flex-wrap:wrap;align-items:stretch; gap:11px; /* 卡片之间多留一点呼吸感 */ margin-bottom:12px; } #dashMetrics>.metric{ display:flex;flex-direction:column; min-width:0; padding:11px 10px; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:none; /* 层级靠浅灰底 + 1px 描边 + 留白，不再用阴影 */ } /* basis 用百分比而不是 0：两张大卡的 basis 加起来正好铺满一行（各 50% 再各让掉 gap 的一半）， 小卡就必然被挤到第二行，不会出现「三张卡挤在同一行」的情况。 */ #dashMetrics>.metric:nth-child(1){flex:1 1 calc(50% - 5.5px)} #dashMetrics>.metric:nth-child(2){flex:1 1 calc(50% - 5.5px)} #dashMetrics>.metric:nth-child(n+3){flex:1 1 calc((100% - 22px) / 3)} /* 卡片图标：纯 CSS 绘制（data-URI SVG），桌面端不参与渲染，因此无需改 HTML。 小卡 24px 底座（第一排大卡是 22px 的角标，见下方覆盖）。 */ #dashMetrics>.metric::before{ content:"";flex:0 0 auto; width:24px;height:24px;border-radius:8px; margin-bottom:6px; background-color:var(--m-ico-bg,#eef2f6); background-image:var(--m-ico); background-repeat:no-repeat;background-position:center;background-size:14px 14px; } /* 统一层级：图标 → 指标名 → 数值 → 辅助说明；辅助说明最弱（浅灰蓝） */ #dashMetrics>.metric .metric-label-row{margin-bottom:5px;gap:6px} #dashMetrics>.metric .label{font-size:12px;line-height:1.3;color:#5b6675} #dashMetrics>.metric .value{ font-weight:750;line-height:1.1;letter-spacing:-.02em; font-variant-numeric:tabular-nums;overflow-wrap:anywhere; } #dashMetrics>.metric .sub{margin-top:4px;font-size:10.5px;line-height:1.35;color:#7b8698} #dashMetrics>.metric .sub[data-mobile-text]{font-size:0} #dashMetrics>.metric .sub[data-mobile-text]::after{content:attr(data-mobile-text);font-size:10.5px} #dashMetrics>.metric:nth-child(n+3) .value{font-size:clamp(16px,4.6vw,19px)} /* 三张小卡：padding / 图标 / 标题 / 数值 / 眼睛按钮 / 辅助说明六项完全统一。 眼睛按钮钉在卡片右上角，指标名独占整行； 标题区 flex:1 吃掉剩余空间，于是三张卡的数值与辅助说明统一贴卡片底部对齐， 即使某张卡标题折成两行也不会把数字顶偏 （三张小卡在同一 flex 行里由 align-items:stretch 强制等高）。 */ #dashMetrics>.metric:nth-child(n+3){position:relative} #dashMetrics>.metric:nth-child(n+3) .metric-label-row{display:block;flex:1 1 auto} #dashMetrics>.metric:nth-child(n+3) .metric-visibility-btn{position:absolute;right:8px;top:10px} /* 第一排两张核心卡：左上「图标 + 指标名」→ 中间核心数字 → 底部辅助说明。 图标绝对定位在左上角（不占行高，比原来「图标竖跨三行」矮一层）； 指标名用 padding-left 让位并与图标垂直居中，整体收紧、不再又宽又敦实。 */ #dashMetrics>.metric:nth-child(-n+2){ position:relative; padding:11px 12px 12px; } #dashMetrics>.metric:nth-child(-n+2)::before{ position:absolute;left:12px;top:11px; width:22px;height:22px;border-radius:7px; margin-bottom:0; background-size:13px 13px; } #dashMetrics>.metric:nth-child(-n+2) .metric-label-row{ display:flex;align-items:center; min-height:22px;margin-bottom:6px;padding-left:29px; } #dashMetrics>.metric:nth-child(-n+2) .label{font-size:11.5px;line-height:1.25} /* 带眼睛按钮的大卡：标题右侧留出按钮宽度，320 窄屏下标题才不会与眼睛贴在一起 （用 :has 精准命中，没有眼睛的卡不浪费宽度；浏览器不支持 :has 时只是回到改前表现） */ #dashMetrics>.metric:nth-child(-n+2) .metric-label-row:has(.metric-visibility-btn){padding-right:24px} #dashMetrics>.metric:nth-child(-n+2) .value{ margin-top:0; font-size:clamp(22px,6.2vw,29px); line-height:1.05;letter-spacing:-.03em; } #dashMetrics>.metric:nth-child(-n+2) .sub{margin-top:4px} /* 大卡的眼睛按钮钉在右上角，指标名不再被挤成两行 */ #dashMetrics>.metric:nth-child(-n+2) .metric-visibility-btn{position:absolute;right:9px;top:9px} /* 主色卡「有流水人数」：品牌绿轻渐变，不做玻璃拟态、不加多层阴影 */ #dashMetrics>.metric.primary{ border-color:transparent; background:linear-gradient(155deg,#158a76 0%,#0f6b5c 76%); box-shadow:none; } /* 绿底上白字透明度要够高，否则辅助说明会糊进背景 */ #dashMetrics>.metric.primary .label{color:rgba(255,255,255,.9)} #dashMetrics>.metric.primary .sub{color:rgba(255,255,255,.82)} #dashMetrics>.metric.primary .metric-visibility-btn{color:rgba(255,255,255,.85)} /* 各卡图标配色（浅底 + 低饱和图标色） */ #dashMetrics>.metric:nth-child(1){--m-ico-bg:rgba(255,255,255,.16);--m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 19.6c0-3.3 3.2-5.6 7.2-5.6s7.2 2.3 7.2 5.6'/%3E%3C/svg%3E")} #dashMetrics>.metric:nth-child(2){--m-ico-bg:#fff4e0;--m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d99a2b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.6'/%3E%3Cpath d='M9.4 9.6h5.2M9.4 12.8h5.2M12 7.6v8.8'/%3E%3C/svg%3E")} #dashMetrics>.metric:nth-child(3){--m-ico-bg:#e9f1fd;--m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16.4l4.8-4.8 3 3L20 6.6'/%3E%3Cpath d='M15.2 6.6H20v4.8'/%3E%3C/svg%3E")} #dashMetrics>.metric:nth-child(4){--m-ico-bg:#fdeee2;--m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dd7a34' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 8.4h13.2l-1 11a1.4 1.4 0 01-1.4 1.2H7.8a1.4 1.4 0 01-1.4-1.2l-1-11z'/%3E%3Cpath d='M9 8.4V6.6a3 3 0 016 0v1.8'/%3E%3C/svg%3E")} #dashMetrics>.metric:nth-child(5){--m-ico-bg:#e6f4ef;--m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6b5c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 19.4v-6.2M12 19.4V5.6M18.4 19.4v-9.4'/%3E%3C/svg%3E")} /* ---------- 4. 本周结算节点：一张卡 = 标题行 + 一行 4 个轻量入口 ---------- */ /* 原来每张卡底部各挂一个「导出本范围」，手机上收进标题右侧的统一入口。 这里把标题行和 4 个节点收进同一个盒子（.steps-block），和下方「本周人员清单」 保持同一套卡片语言；盒子里再放 4 块浅色磁贴，层级才收得住。 */ .steps-block{ display:block; padding:11px 11px 12px; margin-bottom:10px; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:none; } .steps-hd{ display:flex;align-items:center;justify-content:space-between; gap:8px;margin:0 0 9px; } .steps-hd h2{margin:0;font-size:13px;font-weight:650;letter-spacing:-.01em} /* 入口按钮原来靠白底+描边从灰页面上「浮」出来；进了白卡后改成品牌浅底实心块 */ .steps-hd .steps-export{ display:inline-flex;align-items:center;flex:0 0 auto; height:26px;padding:0 10px; font-size:11.5px;font-weight:600;text-decoration:none; color:var(--brand); background:var(--brand-soft);border:1px solid transparent;border-radius:9px; } #dashSteps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:0; /* 外边距交给 .steps-block 承担 */ } /* 只保留 图标 + 名称 + 状态：去掉图标底座和底部链接，卡片高度约 76px（原来约 95px） */ #dashSteps .step{ position:relative; display:flex;flex-direction:column;align-items:center; min-width:0; padding:9px 4px 8px; border:0; border-radius:12px; background:var(--s-bg,#f4f6f8); box-shadow:none; text-align:center; } #dashSteps .step.waiting{opacity:.72} #dashSteps .step .n{display:none} /* 「节点 1~4」在手机上省略，图标即序号 */ #dashSteps .step::before{ content:"";flex:0 0 auto; width:22px;height:22px;border-radius:0;margin-bottom:4px; background-color:transparent; /* 去掉图标底座，整块更轻 */ background-image:var(--s-ico); background-repeat:no-repeat;background-position:center;background-size:22px 22px; } #dashSteps .step .t{ font-size:11.5px;font-weight:600;line-height:1.25;margin:0; max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #dashSteps .step .s{margin-top:2px;font-size:10px;line-height:1.3;color:var(--muted)} #dashSteps .step-download{display:none} #dashSteps .step.running::after{right:7px;top:7px;width:9px;height:9px} /* 四个入口的低饱和底色 + 图标 */ #dashSteps .step:nth-child(1){--s-bg:#eef8f4;--s-ico-bg:#d8efe6;--s-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6b5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8.6 12.2l2.4 2.4 4.4-4.6'/%3E%3C/svg%3E")} #dashSteps .step:nth-child(2){--s-bg:#eef4fd;--s-ico-bg:#dbe8fb;--s-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.6 4.4A7.6 7.6 0 1019.6 12h-8z'/%3E%3C/svg%3E")} #dashSteps .step:nth-child(3){--s-bg:#fdf5ed;--s-ico-bg:#fbe3d0;--s-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dd7a34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 12h13.2M13.4 8l4 4-4 4'/%3E%3C/svg%3E")} #dashSteps .step:nth-child(4){--s-bg:#f4f1fc;--s-ico-bg:#e7dffa;--s-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b5bd6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6l2.3 4.6 5.1.7-3.7 3.6.9 5.1-4.6-2.4-4.6 2.4.9-5.1L4.6 9.9l5.1-.7z'/%3E%3C/svg%3E")} /* ---------- 5. 本周人员清单：紧凑卡头 + 「处理」菜单 + 容器内横滑 ---------- */ #page-dashboard .card{ border-radius:14px; box-shadow:none; } #page-dashboard .card-hd{ flex-wrap:nowrap;align-items:center;gap:8px; padding:11px 12px; } #page-dashboard .card-hd>div:first-child{flex:1 1 auto;min-width:0} #page-dashboard .card-hd h2{font-size:14.5px;line-height:1.3} /* 卡头副标题与上面「统计范围」卡信息重复，手机上省略，把卡头压成一行 */ #page-dashboard .card-hd .desc{display:none} /* 橙色主按钮「生成 / 重跑流水线」在手机上会抢走核心数据的注意力， 整颗收进「处理 ⌄」次级菜单；桌面端仍是原来那颗按钮。 */ #page-dashboard .card-hd #btnRunPipeline{display:none} #page-dashboard .dash-actions .dash-more-btn{ display:inline-flex;align-items:center; height:30px;padding:0 10px; font-size:12px;font-weight:600;letter-spacing:0;border-radius:9px;white-space:nowrap; color:var(--text); } #page-dashboard .dash-more-panel:not(.hidden){ display:flex;flex-direction:column; position:absolute;right:0;top:calc(100% + 6px);z-index:40; min-width:136px;padding:4px; background:#fff;border:1px solid var(--border);border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,.10); } #page-dashboard .dash-more-panel button, #page-dashboard .dash-more-panel a{ display:flex;align-items:center; height:36px;padding:0 10px; border:0;border-radius:8px; background:transparent;color:var(--text); font-size:12.5px;text-align:left;text-decoration:none;cursor:pointer; } #page-dashboard .dash-more-panel button:active, #page-dashboard .dash-more-panel a:active{background:var(--head)} #page-dashboard .card-bd{padding:10px 12px 12px} #page-dashboard .toolbar{margin-bottom:9px} #page-dashboard .search{height:36px;border-radius:10px;font-size:16px} /* 表格只在容器内横向滚动（整页绝不横向溢出）；容器限高让表头吸顶生效， 首列由 app.css 的 .sticky 负责固定在左侧。字号保持 12px，不靠缩小字体硬塞。 */ #page-dashboard .table-wrap{max-height:min(60vh,520px);border-radius:12px} #dashTable{min-width:880px} #page-dashboard .table-wrap td.sticky,#page-dashboard .table-wrap th.sticky{background-clip:padding-box} } /* ≤360px（含 iPhone SE / 320 窄屏）：进一步收紧卡片内边距与字号， 保证「1,492.75」这类 8 位数字在 1/3 宽度的小卡里仍能完整显示 */ @media (max-width:360px){ #dashMetrics{gap:9px} #dashMetrics>.metric{padding:11px 9px} #dashMetrics>.metric:nth-child(n+3){flex-basis:calc((100% - 18px) / 3)} #dashMetrics>.metric:nth-child(-n+2){flex-basis:calc(50% - 4.5px);padding:10px 10px 11px} #dashMetrics>.metric:nth-child(-n+2) .metric-label-row{padding-left:27px;margin-bottom:5px} #dashMetrics>.metric::before{width:22px;height:22px;border-radius:7px;background-size:13px 13px;margin-bottom:5px} #dashMetrics>.metric:nth-child(-n+2)::before{width:21px;height:21px;border-radius:6px;background-size:12px 12px;left:10px;top:10px;margin-bottom:0} /* 320 屏：小卡 1/3 宽度里要放下「1,492.75」，数值降到 15px 仍明显大于 11px 的标题； 大卡数值控制在 22px，避免「29,734」被挤到换行。 */ #dashMetrics>.metric:nth-child(n+3) .value{font-size:15px} #dashMetrics>.metric:nth-child(-n+2) .value{font-size:22px} #dashMetrics>.metric .label{font-size:11px} #dashMetrics>.metric .sub{font-size:10px} #dashMetrics>.metric .sub[data-mobile-text]::after{font-size:10px} #dashSteps{gap:6px} #dashSteps .step{padding:8px 3px 7px} #dashSteps .step .t{font-size:11px} #dashSteps .step .s{font-size:9.5px} .steps-hd h2{font-size:12.5px} .range-actions .btn{padding:0 8px;font-size:11px} /* 人员清单标题 + 「处理」按钮在 320 屏一行放不下：标题独占一行，按钮降第二行靠右 */ #page-dashboard .card-hd{flex-wrap:wrap;gap:8px} #page-dashboard .card-hd h2{font-size:14px} #page-dashboard .dash-actions{margin-left:auto} } /* 顶栏在超窄屏也要保证「厅选择 / 剩余天数」不被遮挡： 厅下拉与用户标签同一时刻只会出现一个（单租户时 #tenantSelect 带 hidden）， 所以按各自出现时的最坏情况收窄即可。 */ @media (max-width:400px){ .dropdown-tenant{max-width:118px;min-width:0} /* 124px 是「7474 · 十一 + 运营标签」在一行里不被省略号截断的最小宽度 */ .user-chip{max-width:124px} .expiration-days{max-width:none;overflow:visible;text-overflow:clip;font-size:10px} .header-right{gap:5px} } /* ============================================================ 八·前置：手机端顶栏第二行导航「只给手机端用」的账户菜单项 （出勤营收 / 规则配置不在底栏里，顶栏导航隐藏后从这里进） ------------------------------------------------------------ 顶层 display:none → PC / 平板完全看不到；≤820px 才显示。 选择器比 app.css 的 `.account-menu-panel button` 多一个类，能稳定压过去。 ============================================================ */ .account-menu-panel .only-mobile{display:none} /* ============================================================ 八、移动端底部主导航 Bottom Navigation（≤820px 手机端） ------------------------------------------------------------ · 桌面端顶层 .tabbar{display:none}，DOM 存在但不参与 PC 排版。 · 5 个入口：工作台 / 数据 / 日历 / 结算 / 出勤营收（与顶栏共用 data-page）。 · fixed + 左右 0 + 底部 0，高度 58px + 安全区；z-index 70 高于表格 与所有页面内浮层；弹窗/登录层在本段被抬到 120/200，仍盖在底栏之上。 · 页面主体 padding-bottom 让出 74px + 安全区，表格最后一行不会被盖住。 · 图标用一套单色 SVG + mask 上色（未选中浅灰蓝 / 选中品牌绿）， 避免维护两套颜色资源。 ============================================================ */ .tabbar{display:none} @media (max-width:820px){ .tabbar{ display:flex;align-items:stretch; position:fixed;left:0;right:0;bottom:0;z-index:70; height:calc(58px + env(safe-area-inset-bottom,0px)); padding:0 calc(4px + env(safe-area-inset-left,0px)) env(safe-area-inset-bottom,0px) calc(4px + env(safe-area-inset-right,0px)); background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); border-top:1px solid var(--border); box-shadow:none; /* 只留 1px 顶部描边，不要重阴影 */ } .tabbar-item{ flex:1 1 0;min-width:0; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;padding:0;border:0;background:transparent; color:#9dabbd; /* 未选中：浅灰蓝 */ font-family:inherit;cursor:pointer; -webkit-tap-highlight-color:transparent; } .tabbar-item span{font-size:11px;line-height:1.1;font-weight:500;white-space:nowrap} .tabbar-item .tab-ico{ flex:0 0 auto;width:22px;height:22px; background-color:#9dabbd; -webkit-mask-image:var(--ico);mask-image:var(--ico); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:22px 22px;mask-size:22px 22px; } /* 选中项：品牌绿高亮（图标 + 文字同色） */ .tabbar-item.active{color:var(--brand)} .tabbar-item.active .tab-ico{background-color:var(--brand)} .tabbar-item.active span{font-weight:600} .tabbar-item:active{background:transparent} .tabbar-item:active .tab-ico{background-color:var(--brand)} /* 图标：单色描边 SVG（mask 上色，stroke 颜色不参与渲染） */ .tabbar-item:nth-child(1) .tab-ico{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.1 12 4.6l8 6.5V19a1 1 0 0 1-1 1h-4.6v-5.3H9.6V20H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")} .tabbar-item:nth-child(2) .tab-ico{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16.2V5.4M8.2 9.2 12 5.4l3.8 3.8'/%3E%3Cpath d='M4.6 15.4v2.8a1.4 1.4 0 0 0 1.4 1.4h12a1.4 1.4 0 0 0 1.4-1.4v-2.8'/%3E%3C/svg%3E")} .tabbar-item:nth-child(3) .tab-ico{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='16' height='14' rx='2'/%3E%3Cpath d='M4 10.6h16M8.6 4v4M15.4 4v4'/%3E%3C/svg%3E")} .tabbar-item:nth-child(4) .tab-ico{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.6h13.6A1.8 1.8 0 0 1 19.4 10.4v6.2a1.8 1.8 0 0 1-1.8 1.8H5.8A1.8 1.8 0 0 1 4 16.6z'/%3E%3Cpath d='M4 9.6V7.4a1.8 1.8 0 0 1 1.8-1.8h9.4'/%3E%3Ccircle cx='15.6' cy='13.5' r='1.1'/%3E%3C/svg%3E")} .tabbar-item:nth-child(5) .tab-ico{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 19.4h14.8'/%3E%3Cpath d='M8 19.4v-5.2M12 19.4V8.4M16 19.4v-8'/%3E%3C/svg%3E")} /* 页面底部让出底栏高度 + 安全区（覆盖前面媒体查询里的 28/32px） */ .page{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))} /* 悬浮提示上移到底栏之上，避免被底栏压住 */ .toast{bottom:calc(74px + env(safe-area-inset-bottom,0px));right:12px;width:min(360px,calc(100vw - 24px))} /* 弹窗与登录层必须盖在底栏之上（底栏 z-index 70） */ .reference-modal{z-index:120} .login-overlay{z-index:200} } /* ============================================================ 九、手机端移除顶栏第二行导航（≤820px） ------------------------------------------------------------ 底栏已经承担主导航，顶部再排一行同一层级的导航属于重复， 手机端（有底栏的那一档）直接隐藏 `.nav`。 821~1100px 平板段没有底栏，顶栏导航保留，因此这条只在 ≤820px 生效。 · `--nav-row-h` 归零：`.app-header` 的 padding-bottom 就是它， 不归零会在品牌行下面留下一行空白（约 44px）。 · 规则配置 改从顶栏用户标签的账户菜单进入，见第 八·前置 段。 ============================================================ */ @media (max-width:820px){ :root{--nav-row-h:0px} .nav{display:none} /* 顶栏只剩品牌行，恢复成单行高度 */ .app-header{min-height:calc(54px + env(safe-area-inset-top,0px));padding-bottom:0} .account-menu-panel .only-mobile{display:block} .account-menu-panel #btnGoRules{margin-top:3px;padding-top:10px;border-top:1px solid var(--border);border-radius:0 0 5px 5px} } /* ============================================================ 十、数据导入页（#page-import）移动端 · ≤768px ------------------------------------------------------------ 参考设计：标题 + 常显说明 + 三个带图标操作按钮； 上传区与名单区都改成两列小卡： · 上传卡 = 角标图标 + 标题(+?) → 说明 → 「点击选择文件」框 → 拖拽提示条 · 名单卡 = 角标图标 + 标题(+?) + 右上徽标 → 说明 → 预览框 → 共N条 / 查看全部 · 只在手机端出现的节点（.import-sub / .btn-ico / .dz-pick / .dz-drop / .collection-ico / .collection-foot / .card-help-btn）在顶层 display:none， PC 端等于没有这些元素，不参与桌面排版。 · 卡片说明文字（.dz-desc / 名单卡的

）在手机端也收起来，改由卡片右上角的 .card-help-btn「?」点开 #helpPop 弹窗显示；PC 端仍直接显示在卡面上。 · 名单卡的 textarea 手机端降级成「预览框」（readonly 由 app.js 切换）， 点它或点「查看全部」打开底部抽屉编辑；抽屉里的输入框才是 16px（防 iOS 缩放）。 · 抽屉 z-index 140 > 底栏 70，不会被底部导航压住。 ============================================================ */ .import-sub,.btn-ico,.dz-pick,.dz-drop,.collection-ico,.collection-foot,.card-help-btn{display:none} .m-sheet{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-end;justify-content:center} .m-sheet-mask{position:absolute;inset:0;background:rgba(15,31,27,.52)} .m-sheet-panel{ position:relative;width:100%;max-width:560px;max-height:88vh; display:flex;flex-direction:column;gap:10px; background:#fff;border-radius:16px 16px 0 0; padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px)); box-shadow:0 -6px 24px rgba(16,24,40,.14); } .m-sheet-hd{display:flex;align-items:center;justify-content:space-between;gap:10px} .m-sheet-hd h3{margin:0;font-size:15px} .m-sheet-desc{margin:0;color:var(--muted);font-size:11.5px;line-height:1.5} .m-sheet-done{height:32px;padding:0 13px;border:1px solid var(--brand);border-radius:9px;background:var(--brand-soft);color:var(--brand);font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer} .m-sheet textarea{width:100%;height:min(44vh,300px);resize:none;border:1px solid var(--border);border-radius:12px;padding:10px;font-size:16px;line-height:1.6;color:var(--text);background:#fff;outline:none} .m-sheet textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,107,92,.1)} /* 卡片右上角「?」说明弹窗（只有手机端点得开，桌面端说明直接显示在卡面） */ .help-pop{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:26px 20px} .help-pop-mask{position:absolute;inset:0;background:rgba(15,31,27,.5)} .help-pop-panel{ position:relative;width:100%;max-width:320px; display:flex;flex-direction:column; background:#fff;border-radius:16px;padding:16px 16px 14px; box-shadow:0 18px 46px rgba(16,24,40,.24); } .help-pop-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:7px} .help-pop-hd h3{margin:0;font-size:15px;line-height:1.35} .help-pop-x{ flex:0 0 auto;width:26px;height:26px;margin:-3px -4px 0 0;padding:0; border:0;border-radius:8px;background:transparent;color:var(--muted); font-family:inherit;font-size:19px;line-height:1;cursor:pointer; } .help-pop-bd{margin:0;color:var(--muted);font-size:12.5px;line-height:1.65;white-space:pre-line} .help-pop-ok{ margin-top:14px;width:100%;height:40px;border:0;border-radius:11px; background:var(--brand);color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer; } .help-pop-ok:active{filter:brightness(.94)} @media (max-width:768px){ /* ---------- 1. 标题 + 常显说明 + 三个操作按钮 ---------- */ .import-title-row{gap:0} .import-sub{display:block;margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.5} .import-actions.import-title-actions{display:flex;flex-wrap:wrap;gap:7px;width:100%;margin-top:12px} .import-actions .btn{ flex:1 1 auto;min-width:0;height:44px;padding:0 9px;gap:5px;justify-content:center; border-radius:12px;font-size:12px;font-weight:650;white-space:nowrap;box-shadow:none; } .import-actions #btnUpload{flex:1.4 1 auto} .btn-ico{ display:block;flex:0 0 auto;width:15px;height:15px;background-color:currentColor; -webkit-mask-image:var(--b-ico);mask-image:var(--b-ico); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:15px 15px;mask-size:15px 15px; } .btn-ico[data-ico="upload"]{--b-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 17.2h9a3.3 3.3 0 0 0 .3-6.6 5 5 0 0 0-9.6-1.2 3.7 3.7 0 0 0 .3 7.8z'/%3E%3Cpath d='M12 20.4v-6.2'/%3E%3Cpath d='M9.7 16.3 12 14l2.3 2.3'/%3E%3C/svg%3E")} .btn-ico[data-ico="file"]{--b-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.8 3.8H7.6A1.6 1.6 0 0 0 6 5.4v13.2a1.6 1.6 0 0 0 1.6 1.6h8.8a1.6 1.6 0 0 0 1.6-1.6V7.8z'/%3E%3Cpath d='M13.8 3.8v4h4.2'/%3E%3C/svg%3E")} .btn-ico[data-ico="trash"]{--b-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 7.4h14.4'/%3E%3Cpath d='M9.6 7.4V5.8a1.2 1.2 0 0 1 1.2-1.2h2.4a1.2 1.2 0 0 1 1.2 1.2v1.6'/%3E%3Cpath d='M6.8 7.4l.8 11a1.6 1.6 0 0 0 1.6 1.5h5.6a1.6 1.6 0 0 0 1.6-1.5l.8-11'/%3E%3Cpath d='M10.4 11v5.2'/%3E%3Cpath d='M13.6 11v5.2'/%3E%3C/svg%3E")} /* ---------- 2. 上传区：两张并排小卡 ---------- */ .upload-grid{grid-template-columns:1fr 1fr;gap:10px} .dropzone{ display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;column-gap:9px;row-gap:0; padding:11px;min-height:0; border:1px solid var(--border);border-radius:16px;background:#fff; } .dropzone:hover,.dropzone.dragover{border-color:var(--brand);background:#f8fcfa;box-shadow:none} .dropzone.has-file{border-color:#b9dfcb;background:#fff} /* 卡片角标图标：一层浅色底 + 一层单色 SVG（mask 上色） */ .dropzone .dz-icon{ grid-area:1/1/2/2;position:relative;display:block; width:40px;height:40px;border-radius:13px;margin:0; font-size:0;line-height:0;color:transparent; } .dropzone .dz-icon::after{ content:"";position:absolute;inset:0;background-color:var(--dz-fg); -webkit-mask-image:var(--dz-ico);mask-image:var(--dz-ico); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:20px 20px;mask-size:20px 20px; } /* --dz-fg 定义在整张卡上：卡图标与「点击选择文件」里的云图标共用同一个主色 */ #dzAttendance{--dz-fg:#2f7bf6;--pick-bg:#f6f9ff;--pick-bd:#dbe7fb;--pick-tile:#e4edff} #dzRevenue{--dz-fg:#18a05a;--pick-bg:#f6fdf9;--pick-bd:#d6ecdf;--pick-tile:#dcf1e5} #dzAttendance .dz-icon{background-color:#e9f1ff;--dz-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.8 3.8H7.6A1.6 1.6 0 0 0 6 5.4v13.2a1.6 1.6 0 0 0 1.6 1.6h8.8a1.6 1.6 0 0 0 1.6-1.6V7.8z'/%3E%3Cpath d='M13.8 3.8v4h4.2'/%3E%3Cpath d='M9.4 12.4h5.2'/%3E%3Cpath d='M9.4 15.6h3.4'/%3E%3C/svg%3E")} #dzRevenue .dz-icon{background-color:#e8f7ee;--dz-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 19.4h14.8'/%3E%3Cpath d='M8.2 19.4v-5.6'/%3E%3Cpath d='M12 19.4V8.6'/%3E%3Cpath d='M15.8 19.4v-8.4'/%3E%3C/svg%3E")} .dropzone .dz-title{grid-area:1/2/2/3;display:flex;align-items:center;gap:5px;margin:0;font-size:14px;font-weight:700;min-width:0} /* 说明「?」固定在卡片右上角；说明文字收进弹窗（见下） */ .dropzone .card-help-btn{grid-area:1/3/2/4;align-self:center;justify-self:end} .dropzone .dz-desc{grid-area:2/1/3/3;margin:8px 0 0;font-size:11.5px;line-height:1.5} .dropzone .dz-actions{display:none} .dropzone .dz-pick{ grid-area:3/1/4/4;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; column-gap:7px;row-gap:1px;margin-top:10px;padding:9px 10px; border:1px solid var(--pick-bd);border-radius:12px;background:var(--pick-bg); } .dz-pick-ico{grid-area:1/1/3/2;position:relative;width:28px;height:28px;border-radius:9px;background-color:var(--pick-tile)} .dz-pick-ico::after{ content:"";position:absolute;inset:0;background-color:var(--dz-fg); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 17.2h9a3.3 3.3 0 0 0 .3-6.6 5 5 0 0 0-9.6-1.2 3.7 3.7 0 0 0 .3 7.8z'/%3E%3Cpath d='M12 20.4v-6.2'/%3E%3Cpath d='M9.7 16.3 12 14l2.3 2.3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 17.2h9a3.3 3.3 0 0 0 .3-6.6 5 5 0 0 0-9.6-1.2 3.7 3.7 0 0 0 .3 7.8z'/%3E%3Cpath d='M12 20.4v-6.2'/%3E%3Cpath d='M9.7 16.3 12 14l2.3 2.3'/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:17px 17px;mask-size:17px 17px; } .dz-pick-t{grid-area:1/2/2/3;font-size:12px;font-weight:700;white-space:nowrap} .dz-pick-s{grid-area:2/2/3/3;font-size:10px;color:var(--muted);white-space:nowrap} .dz-pick-go{grid-area:1/3/3/4;width:7px;height:7px;border-top:1.7px solid #98a4b8;border-right:1.7px solid #98a4b8;transform:rotate(45deg)} .dropzone .dz-drop{ grid-area:4/1/5/4;display:flex;align-items:center;justify-content:center;gap:6px; margin-top:8px;height:32px;border-radius:10px; background:#eef8f1;color:#0f7a4f;font-size:11.5px;font-weight:600; } .dz-drop-ico{ flex:0 0 auto;width:13px;height:13px;background-color:currentColor; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6a5.2 5.2 0 0 1 3.1 9.4c-.5.4-.8 1-.8 1.6v.4H9.7v-.4c0-.6-.3-1.2-.8-1.6A5.2 5.2 0 0 1 12 3.6z'/%3E%3Cpath d='M9.9 17.8h4.2'/%3E%3Cpath d='M10.6 20.4h2.8'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6a5.2 5.2 0 0 1 3.1 9.4c-.5.4-.8 1-.8 1.6v.4H9.7v-.4c0-.6-.3-1.2-.8-1.6A5.2 5.2 0 0 1 12 3.6z'/%3E%3Cpath d='M9.9 17.8h4.2'/%3E%3Cpath d='M10.6 20.4h2.8'/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:13px 13px;mask-size:13px 13px; } .dropzone .dz-file{grid-area:5/1/6/4;margin-top:10px;padding:9px 10px;border-radius:12px} .dropzone .dz-file .name{font-size:12px} .dropzone .dz-file .meta,.dropzone .dz-file .badge{font-size:11px} /* ---------- 3. 名单区：四张两列小卡 ---------- */ .collection-grid{grid-template-columns:1fr 1fr;gap:9px;margin-top:10px} .collection-grid .collection-input{border-radius:16px;box-shadow:none} .collection-grid .collection-input .card-bd{padding:9px} /* 标题行用 flex + wrap 而不是定宽栅格：宽度不够时「按账号规则」徽标自动换到 下一行右对齐，永远不会挤掉标题文字（栅格定宽会在 375 以下把标题压成 20px 宽）。 justify-content 必须改回 flex-start：桌面端的 space-between 会漏到这里， 徽标换行后第一行只剩「图标+标题」，标题会被均分空隙推到卡片右侧。 */ .collection-heading{ display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start; gap:4px 3px;margin-bottom:9px; } .collection-heading>.collection-ico{display:block;order:0;flex:0 0 auto;position:relative;width:24px;height:24px;border-radius:8px;background-color:var(--ci-bg)} .collection-ico::after{ content:"";position:absolute;inset:0;background-color:var(--ci-fg); -webkit-mask-image:var(--ci);mask-image:var(--ci); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:15px 15px;mask-size:15px 15px; } .collection-ico[data-ico="light"]{--ci-bg:#feece6;--ci-fg:#e8663f;--ci:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.2' r='3.2'/%3E%3Cpath d='M3.6 19.4c0-3.1 2.5-5.2 5.6-5.2s5.6 2.1 5.6 5.2'/%3E%3Cpath d='M16.2 5.6a3.2 3.2 0 0 1 0 5.2'/%3E%3Cpath d='M17.8 14.6c1.6.8 2.6 2.3 2.6 4.2'/%3E%3C/svg%3E")} .collection-ico[data-ico="referral"]{--ci-bg:#f0ecfe;--ci-fg:#7c5cf6;--ci:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.2' r='3.2'/%3E%3Cpath d='M3.6 19.4c0-3.1 2.5-5.2 5.6-5.2s5.6 2.1 5.6 5.2'/%3E%3Cpath d='M16.2 5.6a3.2 3.2 0 0 1 0 5.2'/%3E%3Cpath d='M17.8 14.6c1.6.8 2.6 2.3 2.6 4.2'/%3E%3C/svg%3E")} .collection-ico[data-ico="fullmic"]{--ci-bg:#e7f1fe;--ci-fg:#2f7bf6;--ci:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9.4' y='3.4' width='5.2' height='9.4' rx='2.6'/%3E%3Cpath d='M6.8 11.6a5.2 5.2 0 0 0 10.4 0'/%3E%3Cpath d='M12 16.8v3'/%3E%3Cpath d='M9.6 20.2h4.8'/%3E%3C/svg%3E")} .collection-ico[data-ico="taskslot"]{--ci-bg:#fdf0e4;--ci-fg:#ef8f2b;--ci:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 4.8H7.8A1.6 1.6 0 0 0 6.2 6.4v12a1.6 1.6 0 0 0 1.6 1.6h8.4a1.6 1.6 0 0 0 1.6-1.6v-12a1.6 1.6 0 0 0-1.6-1.6h-1.8'/%3E%3Crect x='9.6' y='3' width='4.8' height='3.2' rx='1'/%3E%3Cpath d='M9.8 13.4l1.8 1.8 3.2-3.4'/%3E%3C/svg%3E")} /* 标题与说明拆进父级 flex：标题跟图标同一行，说明独占一行（左边缘对齐图标） */ .collection-heading>div{display:contents} .collection-heading>div>*{min-width:0} .collection-heading>div> :first-child{order:1;display:flex;align-items:center;gap:3px;margin:0;font-size:12px;font-weight:700;white-space:nowrap} .collection-heading>div>p{order:3;flex:1 1 100%;margin:0;font-size:11.5px;line-height:1.45} .collection-heading>.collection-rate{ order:2;margin-left:auto;align-self:center; display:inline-flex;align-items:center;height:19px;padding:0 5px; font-size:9.5px;font-weight:700;border-radius:999px;white-space:nowrap; } .collection-heading .inline-help-btn{width:16px;height:16px;font-size:10px} /* 内推关系标题后那个「?」是「查看内推关系记录」的功能入口，不是说明； 手机端换成列表图标，免得和右上角的说明「?」并排后分不清点哪个 */ .collection-title .inline-help-btn{font-size:0;color:transparent;position:relative} .collection-title .inline-help-btn::after{ content:"";position:absolute;inset:3px;background-color:var(--brand); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.6 6.6h14.8'/%3E%3Cpath d='M4.6 12h14.8'/%3E%3Cpath d='M4.6 17.4h9.6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.6 6.6h14.8'/%3E%3Cpath d='M4.6 12h14.8'/%3E%3Cpath d='M4.6 17.4h9.6'/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:10px 10px;mask-size:10px 10px; } /* ---------- 卡片右上角「?」说明按钮（点开 #helpPop 弹窗） ---------- */ .card-help-btn{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; position:relative;z-index:2; /* 压住 .dropzone 里那层铺满整卡的透明 input[type=file] */ width:19px;height:19px;padding:0;border:1px solid var(--border);border-radius:50%; background:#fff;color:var(--brand);font-family:inherit;font-size:11px;font-weight:750; line-height:1;cursor:pointer; } .card-help-btn:active{border-color:var(--brand);background:var(--brand-soft)} /* 名单卡：说明「?」钉在标题行右上角。用绝对定位而不是 flex item —— 标题长的卡 （内推关系/任务排报备）标题行会换行，排在流里就会被挤到第二行去。 */ .collection-heading{position:relative;padding-right:20px} .collection-heading>.card-help-btn{position:absolute;top:2px;right:0} /* 说明文字收进弹窗；徽标（按账号规则 / 2%·4 周）手机端不显示，标题行保持单行 */ #page-import .dz-desc, #page-import .collection-heading>div>p, #page-import .collection-heading>.collection-rate{display:none} /* 打卡记录那个「支持来源」气泡也并进弹窗，避免一个标题上挂两个「?」 */ #page-import .upload-source-help{display:none} /* 预览框：只显示一条（单行高、小字号），只读（readonly 由 app.js 按手机端切换）； 点开抽屉（.m-sheet）里才能看全/编辑全部内容。 white-space:pre 禁止 textarea 软换行 → 永远只有一行，长内容水平裁掉， 不会像 height 裁剪那样露出半截第二行。 */ .collection-input textarea, .collection-grid .collection-input textarea{ height:32px;min-height:32px;max-height:32px;resize:none;overflow:hidden; padding:7px 10px;font-size:11.5px;line-height:16px;white-space:pre; border:1px solid var(--border);border-radius:12px;background:#fff; } .collection-input textarea::placeholder{color:#8f98a8} .collection-input textarea.is-preview{cursor:pointer;caret-color:transparent} .collection-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px} .collection-count{font-size:11.5px;color:var(--muted)} .collection-more{ display:inline-flex;align-items:center;gap:5px;height:22px;padding:0;border:0;background:transparent; color:#5b6577;font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer; } .collection-more .m-chev{width:6px;height:6px;border-top:1.7px solid currentColor;border-right:1.7px solid currentColor;transform:rotate(45deg)} .collection-more:active{color:var(--brand)} /* ---------- 日历表：首列左对齐 + 一行最多 4 个名字 ---------- 左对齐：内容长短不一，居中会参差难看；桌面端仍居中。 pre-line 配合 app.js 的 calendarNamesText()：手机端每 4 个名字插入 \n 强制换行 */ table.data#calendarTable th:first-child, table.data#calendarTable td:first-child{text-align:left;white-space:pre-line} /* ---------- 结算页（福利）参考设计改版 ---------- */ /* 指标卡：3 列网格；图标 = 浅色圆角块（.label::before）+ 品牌色单色 SVG（.label::after，mask 上色）。 data-ico 与颜色由 JS 下发，桌面端不渲染这些伪元素，零影响 */ #welfareMetrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px} #welfareMetrics .metric{padding:10px 9px;border-radius:14px;box-shadow:none} #welfareMetrics .metric .label{ position:relative;margin:0 0 7px;padding-left:30px; font-size:11px;line-height:24px;color:var(--muted);white-space:nowrap; } #welfareMetrics .metric .label::before{ content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:8px; background:#e7f1ec; } #welfareMetrics .metric .label::after{ content:"";position:absolute;left:0;top:0;width:24px;height:24px; background-color:var(--brand); -webkit-mask:var(--w-ico) center/14px 14px no-repeat;mask:var(--w-ico) center/14px 14px no-repeat; } #welfareMetrics .metric .value{font-size:19px;line-height:1.15} #welfareMetrics .metric .sub{margin-top:4px;font-size:9.5px;line-height:1.35;color:#8f98a8} /* 主卡（福利合计）：品牌绿渐变 + 白字 + 半透明圆块白图标 */ #welfareMetrics .metric.primary{ background:linear-gradient(160deg,#1b8a68,var(--brand) 70%); border-color:transparent;color:#fff; } #welfareMetrics .metric.primary .label{color:rgba(255,255,255,.85)} #welfareMetrics .metric.primary .label::before{background:rgba(255,255,255,.24)} #welfareMetrics .metric.primary .label::after{background-color:#fff} #welfareMetrics .metric.primary .sub{color:rgba(255,255,255,.72)} /* 九个图标（24 viewBox 单色 path，颜色交给 background-color/mask） */ #welfareMetrics .metric[data-ico="total"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 4.4h5.6l2.4 3.4c.8 1.1.5 2.3-.4 3L12 14.6l-4.8-3.8c-.9-.7-1.2-1.9-.4-3z'/%3E%3Cpath d='M12 14.6V17'/%3E%3Cpath d='M9.2 4.4 12 7l2.8-2.6'/%3E%3Cpath d='M6 20h12'/%3E%3Cpath d='M8.6 17h6.8l.8 3H7.8z'/%3E%3C/svg%3E")} #welfareMetrics .metric[data-ico="host"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.2' r='3.2'/%3E%3Cpath d='M3.6 19.4c0-3.1 2.5-5.2 5.6-5.2s5.6 2.1 5.6 5.2'/%3E%3Cpath d='M16.2 5.6a3.2 3.2 0 0 1 0 5.2'/%3E%3Cpath d='M17.8 14.6c1.6.8 2.6 2.3 2.6 4.2'/%3E%3C/svg%3E")} #welfareMetrics .metric[data-ico="mic"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9.4' y='3.4' width='5.2' height='9.4' rx='2.6'/%3E%3Cpath d='M6.8 11.6a5.2 5.2 0 0 0 10.4 0'/%3E%3Cpath d='M12 16.8v3'/%3E%3Cpath d='M9.6 20.2h4.8'/%3E%3C/svg%3E")} #welfareMetrics .metric[data-ico="weekly"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20v-7'/%3E%3Cpath d='M12 20V5'/%3E%3Cpath d='M19 20v-10'/%3E%3C/svg%3E")} #welfareMetrics .metric[data-ico="fullmic"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 17.6h15.2'/%3E%3Cpath d='M5.6 17.6 4 8.4l5 3.2L12 5.2l3 6.4 5-3.2-1.6 9.2z'/%3E%3C/svg%3E")} #welfareMetrics .metric[data-ico="taskslot"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.4'/%3E%3C/svg%3E")} #welfareMetrics .metric[data-ico="light"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4-3.9-3.8 5.4-.8z'/%3E%3C/svg%3E")} #welfareMetrics .metric[data-ico="referral"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8.2' r='3.2'/%3E%3Cpath d='M4.4 19.4c0-3.1 2.5-5.2 5.6-5.2s5.6 2.1 5.6 5.2'/%3E%3Cpath d='M18.4 7.4v6'/%3E%3Cpath d='M15.4 10.4h6'/%3E%3C/svg%3E")} #welfareMetrics .metric[data-ico="trend"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 16.8l5.2-5.2 3.4 3.4 8-8'/%3E%3Cpath d='M15.4 7h4.8v4.8'/%3E%3C/svg%3E")} /* 人员周福利卡：标题行小图标 */ #page-welfare .card-hd h2{display:flex;align-items:center;gap:6px;font-size:14px} #page-welfare .card-hd h2::before{ content:"";flex:0 0 auto;width:20px;height:20px;background-color:var(--brand); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.2' r='3.2'/%3E%3Cpath d='M3.6 19.4c0-3.1 2.5-5.2 5.6-5.2s5.6 2.1 5.6 5.2'/%3E%3Cpath d='M16.2 5.6a3.2 3.2 0 0 1 0 5.2'/%3E%3Cpath d='M17.8 14.6c1.6.8 2.6 2.3 2.6 4.2'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.2' r='3.2'/%3E%3Cpath d='M3.6 19.4c0-3.1 2.5-5.2 5.6-5.2s5.6 2.1 5.6 5.2'/%3E%3Cpath d='M16.2 5.6a3.2 3.2 0 0 1 0 5.2'/%3E%3Cpath d='M17.8 14.6c1.6.8 2.6 2.3 2.6 4.2'/%3E%3C/svg%3E") center/contain no-repeat; } /* 工具栏：搜索框整行、筛选小胶囊换到下一行 */ #page-welfare .toolbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px} #page-welfare .toolbar .search{flex:1 1 100%;height:38px;border-radius:10px;font-size:16px;padding:0 12px} #page-welfare .toolbar .seg{flex:1 1 100%;display:flex;gap:6px} #page-welfare .toolbar .seg button{flex:1 1 0;height:28px;font-size:11px;border-radius:8px} /* 表格与其他 tab 一致：整表放进容器横向滚动、首列吸左固定（.sticky 由 app.css 负责）， 不再隐藏列、不再改成 3 列列表式。容器限高让表头吸顶、纵向也可滑。 */ table.data#welfareTable{min-width:1500px} #page-welfare .table-wrap{max-height:min(60vh,520px) !important;overflow:auto;border-radius:12px} #page-welfare .table-wrap td.sticky{background:#fff} #page-welfare .table-wrap td.sticky, #page-welfare .table-wrap th.sticky{background-clip:padding-box} #page-welfare .footer-note{font-size:10.5px;line-height:1.5;color:#9aa5a0} /* ---------- 出勤营收页：同结算页参考设计风格 ---------- */ /* 指标卡：6 列网格 —— 前 2 张（营收合计/总流水）各占 1/2 大卡，后 3 张各占 1/3 小卡。 图标复用结算页的 mask 方案（--w-ico 变量 + data-ico） */ #mergeMetrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:10px} #mergeMetrics .metric{padding:10px 9px;border-radius:14px;box-shadow:none;min-width:0} #mergeMetrics .metric:nth-child(-n+2){grid-column:span 3} #mergeMetrics .metric:nth-child(n+3){grid-column:span 2} #mergeMetrics .metric .label{ position:relative;margin:0 0 7px;padding-left:30px; font-size:11px;line-height:24px;color:var(--muted);white-space:nowrap; } #mergeMetrics .metric .label::before{ content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:8px; background:#e7f1ec; } #mergeMetrics .metric .label::after{ content:"";position:absolute;left:0;top:0;width:24px;height:24px; background-color:var(--brand); -webkit-mask:var(--w-ico) center/14px 14px no-repeat;mask:var(--w-ico) center/14px 14px no-repeat; } #mergeMetrics .metric .value{font-size:19px;line-height:1.15} #mergeMetrics .metric .sub{margin-top:4px;font-size:9.5px;line-height:1.35;color:#8f98a8} /* 大卡字号更大（前 2 张） */ #mergeMetrics .metric:nth-child(-n+2) .value{font-size:23px} /* 主卡（营收合计）：品牌绿渐变 + 白字 + 半透明圆块白图标 */ #mergeMetrics .metric.primary{ background:linear-gradient(160deg,#1b8a68,var(--brand) 70%); border-color:transparent;color:#fff; } #mergeMetrics .metric.primary .label{color:rgba(255,255,255,.85)} #mergeMetrics .metric.primary .label::before{background:rgba(255,255,255,.24)} #mergeMetrics .metric.primary .label::after{background-color:#fff} #mergeMetrics .metric.primary .sub{color:rgba(255,255,255,.72)} /* 五个图标（钱袋/蜜豆堆/礼物/房子/趋势） */ #mergeMetrics .metric[data-ico="total"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 4.4h5.6l2.4 3.4c.8 1.1.5 2.3-.4 3L12 14.6l-4.8-3.8c-.9-.7-1.2-1.9-.4-3z'/%3E%3Cpath d='M12 14.6V17'/%3E%3Cpath d='M9.2 4.4 12 7l2.8-2.6'/%3E%3Cpath d='M6 20h12'/%3E%3Cpath d='M8.6 17h6.8l.8 3H7.8z'/%3E%3C/svg%3E")} #mergeMetrics .metric[data-ico="flow"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.6' rx='7' ry='2.8'/%3E%3Cpath d='M5 6.6v10.8c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8V6.6'/%3E%3Cpath d='M5 12c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8'/%3E%3C/svg%3E")} #mergeMetrics .metric[data-ico="gift"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.4' y='8.4' width='15.2' height='4' rx='1'/%3E%3Cpath d='M6 12.4v7a1.6 1.6 0 0 0 1.6 1.6h8.8a1.6 1.6 0 0 0 1.6-1.6v-7'/%3E%3Cpath d='M12 8.4v12.6'/%3E%3Cpath d='M12 8.4s-4.4.4-5.4-1.6c-.7-1.4.4-3 2-3 2.4 0 3.4 4.6 3.4 4.6z'/%3E%3Cpath d='M12 8.4s4.4.4 5.4-1.6c.7-1.4-.4-3-2-3-2.4 0-3.4 4.6-3.4 4.6z'/%3E%3C/svg%3E")} #mergeMetrics .metric[data-ico="party"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 10.4 12 4l7.4 6.4'/%3E%3Cpath d='M6.4 9v10.6h11.2V9'/%3E%3Cpath d='M10 19.6v-5.2h4v5.2'/%3E%3C/svg%3E")} #mergeMetrics .metric[data-ico="income"] .label::after{--w-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 16.8l5.2-5.2 3.4 3.4 8-8'/%3E%3Cpath d='M15.4 7h4.8v4.8'/%3E%3C/svg%3E")} /* 主播营收明细卡：标题小图标 + 搜索框整行 */ #page-merge .card-hd h2{display:flex;align-items:center;gap:6px;font-size:14px} #page-merge .card-hd h2::before{ content:"";flex:0 0 auto;width:20px;height:20px;background-color:var(--brand); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.2' r='3.2'/%3E%3Cpath d='M3.6 19.4c0-3.1 2.5-5.2 5.6-5.2s5.6 2.1 5.6 5.2'/%3E%3Cpath d='M16.2 5.6a3.2 3.2 0 0 1 0 5.2'/%3E%3Cpath d='M17.8 14.6c1.6.8 2.6 2.3 2.6 4.2'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.2' r='3.2'/%3E%3Cpath d='M3.6 19.4c0-3.1 2.5-5.2 5.6-5.2s5.6 2.1 5.6 5.2'/%3E%3Cpath d='M16.2 5.6a3.2 3.2 0 0 1 0 5.2'/%3E%3Cpath d='M17.8 14.6c1.6.8 2.6 2.3 2.6 4.2'/%3E%3C/svg%3E") center/contain no-repeat; } #page-merge .toolbar{display:flex;gap:7px;margin-bottom:9px} #page-merge .toolbar .search{flex:1 1 100%;height:38px;border-radius:10px;font-size:16px;padding:0 12px} /* 表格与其他 tab 一致：整表放进容器横向滚动、首列吸左固定（.sticky 由 app.css 负责）， 不再隐藏列、不再改成 4 列列表式。容器限高让表头吸顶、纵向也可滑。 */ table.data#mergeTable{min-width:800px} /* !important 压过 mobile.css 顶部 div.table-wrap[style*=max-height]{max-height:none !important} */ #page-merge .table-wrap{max-height:min(60vh,520px) !important;overflow:auto;border-radius:12px} #page-merge .table-wrap td.sticky{background:#fff} #page-merge .table-wrap td.sticky, #page-merge .table-wrap th.sticky{background-clip:padding-box} /* ≤400：小卡更窄，标题/图标再收一档防裁字 */ .metrics#mergeMetrics .metric:nth-child(n+3) .label{padding-left:27px;font-size:10px;line-height:22px;letter-spacing:0} .metrics#mergeMetrics .metric:nth-child(n+3) .label::before{width:22px;height:22px;border-radius:7px} .metrics#mergeMetrics .metric:nth-child(n+3) .label::after{width:22px;height:22px} .metrics#mergeMetrics .metric:nth-child(n+3) .value{font-size:17px} } @media (max-width:375px){ /* 375 以下「总收益（元）」还差 2px，小卡标题再降 0.5px */ .metrics#mergeMetrics .metric:nth-child(n+3) .label{font-size:9.5px} } @media (max-width:400px){ /* 375 以下名单卡的标题最长 5 字，再把标题与徽标各收 0.5px 才放得下同一行； 右上角那个「?」还要占 18px，所以图标与徽标一起再瘦一点，避免徽标被挤到第二行 */ .collection-heading{padding-right:18px} .collection-heading>.collection-ico{width:22px;height:22px;border-radius:7px} .collection-heading>div> :first-child{font-size:11.5px} .collection-heading>.collection-rate{font-size:9px;padding:0 3px;height:18px} .collection-heading>.card-help-btn{width:17px;height:17px;font-size:10px} } @media (max-width:360px){ .import-sub{font-size:11.5px} /* 超窄屏三个按钮一行放不下：主按钮独占一行，两个次级按钮各占一半 */ .import-actions .btn{flex:1 1 0} .import-actions #btnUpload{flex:1 1 100%} .dropzone{padding:9px} .dropzone .dz-icon{width:34px;height:34px;border-radius:11px} .dropzone .dz-title{font-size:13px} .dropzone .dz-desc{font-size:11px} .dropzone .dz-pick{padding:8px;column-gap:6px} .dz-pick-ico{width:26px;height:26px} .dz-pick-t{font-size:12px} .dz-pick-s{font-size:10px} .dropzone .dz-drop{font-size:11px} .collection-heading>.collection-ico{width:20px;height:20px;border-radius:7px} .collection-ico::after{-webkit-mask-size:13px 13px;mask-size:13px 13px} .collection-heading>div>p{font-size:11px} .collection-input textarea, .collection-grid .collection-input textarea{font-size:11px} .collection-more{font-size:11px} } /* ============================================================ 十、管理后台总览改版（admin.html，≤700px） 按参考稿重排：手机端顶栏（公会管理+管理端徽标+铃铛）、 浅绿渐变 hero、2x2 图标指标卡、头像式最近公会列表、 圆角进度条账号分布、底栏选中项改深绿胶囊。 顶层规则保证 PC（>700px）完全不渲染这些效果。 ============================================================ */ /* 手机端专属顶栏：PC 端不渲染 */ .m-head{display:none} @media (max-width:700px){ /* —— 页面基调：白底 —— */ body{background:#fff} .main{padding:12px 14px calc(96px + env(safe-area-inset-bottom,0px))} .topbar{display:none} /* —— 手机端顶栏：标题 + 徽标 + 铃铛 —— */ .m-head{display:flex;align-items:center;gap:8px;margin:2px 2px 14px} .m-head-title{font-size:23px;font-weight:800;color:#123b30;letter-spacing:-.3px} .m-head-badge{font-size:11px;font-weight:700;color:#fff;background:#0f6b5c;border-radius:999px;padding:3px 9px;line-height:1.4} .m-head-bell{position:relative;margin-left:auto;width:24px;height:24px;background-color:#1c3d33;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 0 1 12 0v5l1.6 2.4H4.4z'/%3E%3Cpath d='M10 20.6a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E") center/24px 24px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 0 1 12 0v5l1.6 2.4H4.4z'/%3E%3Cpath d='M10 20.6a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E") center/24px 24px no-repeat} .m-head-bell::after{content:"";position:absolute;top:0;right:0;width:7px;height:7px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 1.5px #fff} /* —— hero 横幅：浅绿渐变 + 右侧插画 —— */ .hero-band{position:relative;min-height:148px;padding:20px 122px 22px 16px;border-radius:16px;border:0;box-shadow:none;background:linear-gradient(105deg,#ecf8f0 0%,#d5efdf 55%,#bfe7d2 100%)} .hero-kicker{font-size:12px;letter-spacing:.4px} .hero-band h2{font-size:20px !important;margin:8px 0 7px;color:#123b30;white-space:nowrap} .hero-band h2 em{font-style:normal;color:#e8632c} .hero-band p{font-size:12px;line-height:1.7;color:#4c6d61;max-width:100%} .hero-band::after{content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);width:102px;height:88px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104'%3E%3Ccircle cx='98' cy='16' r='9' fill='%23a8dfc6'/%3E%3Crect x='42' y='8' width='60' height='60' rx='14' fill='%232e9e74'/%3E%3Crect x='20' y='36' width='78' height='60' rx='13' fill='%23ffffff'/%3E%3Crect x='34' y='66' width='10' height='18' rx='4' fill='%23bfe7d2'/%3E%3Crect x='50' y='56' width='10' height='28' rx='4' fill='%2357c397'/%3E%3Crect x='66' y='46' width='10' height='38' rx='4' fill='%23149262'/%3E%3Crect x='82' y='58' width='10' height='26' rx='4' fill='%232e9e74'/%3E%3C/svg%3E") center/contain no-repeat} /* —— 指标卡 2x2：左侧彩色圆底图标 + 标签/数值/入口 —— */ .stats-grid{gap:12px;margin:14px 0 16px} .stat{position:relative;display:grid;grid-template-columns:52px 1fr;grid-template-rows:1fr auto 1fr;align-items:center;min-height:136px;padding:16px 14px;border-radius:16px;border-color:#e7eeea;box-shadow:none} .stat::before,.stat::after{content:"";grid-column:1;grid-row:1/4;border-radius:50%;justify-self:start} .stat::before{width:52px;height:52px;margin-right:12px} .stat::after{width:26px;height:26px;margin-right:12px;-webkit-mask:var(--m-ico) center/26px 26px no-repeat;mask:var(--m-ico) center/26px 26px no-repeat} .stat>*{grid-column:2;min-width:0} .stat-label{font-size:13px;color:#5c6f68;margin:0;align-self:end} .stat-value{font-size:29px;font-weight:800;margin:3px 0 5px;color:#173d35} .stat-note{display:flex;align-items:center;gap:1px;font-size:12px;font-weight:600;color:#0f8a5f;margin:0;align-self:start} .stat-note::after{content:"›";font-size:16px;line-height:1;margin-top:-2px} .stat:nth-child(1)::before{background:#d9f2e3} .stat:nth-child(2)::before{background:#dfeafc} .stat:nth-child(3)::before{background:#fdeeda} .stat:nth-child(4)::before{background:#e9e5fd} .stat:nth-child(1)::after{--m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.2 19c0-3.2 2.6-5.2 5.8-5.2s5.8 2 5.8 5.2'/%3E%3Cpath d='M15.4 5.4a3.2 3.2 0 0 1 0 5.9'/%3E%3Cpath d='M17 13.9c2.3.5 3.8 2.1 3.8 4.6'/%3E%3C/svg%3E");background-color:#1d8a56} .stat:nth-child(2)::after{--m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.4 19.6c0-3.4 2.9-5.6 6.6-5.6s6.6 2.2 6.6 5.6'/%3E%3C/svg%3E");background-color:#3b82f6} .stat:nth-child(3)::after{--m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l7 2.6v5c0 4.6-3 7.6-7 9.2-4-1.6-7-4.6-7-9.2v-5z'/%3E%3Cpath d='M9 11.8l2.2 2.2 4-4.2'/%3E%3C/svg%3E");background-color:#e8930c} .stat:nth-child(4)::after{--m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19.4h14'/%3E%3Cpath d='M8 19.4v-5M12 19.4V8M16 19.4v-8'/%3E%3C/svg%3E");background-color:#7c5cf0} /* —— 面板卡片：圆角 + 左上角小图标 —— */ .overview-grid{gap:12px} #view-overview .panel{border-radius:16px;border-color:#e7eeea;box-shadow:none} #view-overview .panel-head{position:relative;padding:16px 14px 12px 64px} #view-overview .panel-head::before{content:"";position:absolute;left:14px;top:16px;width:38px;height:38px;border-radius:50%;background:#d9f2e3} #view-overview .panel-head::after{content:"";position:absolute;left:20px;top:22px;width:26px;height:26px;background-color:#1d8a56;-webkit-mask:var(--p-ico) center/26px 26px no-repeat;mask:var(--p-ico) center/26px 26px no-repeat} #view-overview .panel:first-child .panel-head::after{--p-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.2 19c0-3.2 2.6-5.2 5.8-5.2s5.8 2 5.8 5.2'/%3E%3Cpath d='M15.4 5.4a3.2 3.2 0 0 1 0 5.9'/%3E%3Cpath d='M17 13.9c2.3.5 3.8 2.1 3.8 4.6'/%3E%3C/svg%3E")} #view-overview .panel:last-child .panel-head::after{--p-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19.4h14'/%3E%3Cpath d='M8 19.4v-5M12 19.4V8M16 19.4v-8'/%3E%3C/svg%3E")} #view-overview .panel-head .section-kicker{font-size:11px;letter-spacing:.3px} #view-overview .panel-head h2{font-size:17px;font-weight:800;margin-top:2px} #view-overview .panel-head .text-btn{font-size:13px;align-self:center} /* —— 最近公会：头像式列表行 —— */ #view-overview .compact-list{padding:2px 14px 12px} #view-overview .compact-row{position:relative;padding:13px 0 13px 52px} #view-overview .compact-row::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:12px;background:#e3f4ea} #view-overview .compact-row::after{content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);width:26px;height:26px;background-color:#1d8a56;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.2 19c0-3.2 2.6-5.2 5.8-5.2s5.8 2 5.8 5.2'/%3E%3Cpath d='M15.4 5.4a3.2 3.2 0 0 1 0 5.9'/%3E%3Cpath d='M17 13.9c2.3.5 3.8 2.1 3.8 4.6'/%3E%3C/svg%3E") center/26px 26px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.2 19c0-3.2 2.6-5.2 5.8-5.2s5.8 2 5.8 5.2'/%3E%3Cpath d='M15.4 5.4a3.2 3.2 0 0 1 0 5.9'/%3E%3Cpath d='M17 13.9c2.3.5 3.8 2.1 3.8 4.6'/%3E%3C/svg%3E") center/26px 26px no-repeat} #view-overview .compact-row:nth-child(even)::before{background:#eef1ef} #view-overview .compact-row:nth-child(even)::after{background-color:#7c8a84} #view-overview .compact-row strong{font-size:14px;color:#173d35} #view-overview .compact-row small{font-size:11px;color:#93a39d;margin-top:3px} #view-overview .compact-row>span{display:flex;align-items:center;font-size:13px;font-weight:600;color:#3f524b} #view-overview .compact-row>span::after{content:"›";margin-left:6px;font-size:17px;line-height:1;color:#9fb0a9;font-weight:400} /* —— 账号分布：圆角进度条 —— */ #view-overview .role-summary{padding:4px 14px 18px} .role-line{grid-template-columns:70px 1fr 24px;gap:10px} .role-line>span{font-size:12.5px;color:#3f524b;white-space:nowrap} .bar{height:8px;border-radius:999px;background:#e9efec} .bar i{border-radius:999px;background:#0f8a5f} .role-line strong{font-size:13px;font-weight:700;color:#173d35;text-align:right} /* —— 底部标签栏：选中项改深绿胶囊（同参考稿） —— */ .nav-item.active{background:#0e5c47 !important;color:#fff !important;border-radius:999px;height:46px;align-self:center;box-shadow:0 4px 10px rgba(14,92,71,.25)} .nav-item.active .nav-icon{background-color:#fff !important} }