:root{ /* 主色：清新绿；辅助：暖黄；大量留白 */ --green:#1fa85c; --green-2:#3cc472; --green-deep:#158048; --green-soft:#e7f7ee; --green-tint:#f2fbf6; --yellow:#f5c445; --yellow-soft:#fef6dd; --yellow-deep:#d9a417; --ink:#20302a; --muted:#7c8a83; --line:#e6efe9; --bg:#f5faf7; /* 次要 UI 保留原蓝色调 */ --blue:#2f7bff; --blue-soft:#e8f1ff; --blue-ico:#3b82f6; /* 语义色 */ --ok:#1fa85c; --ok-bg:#e7f7ee; --fail:#e0483d; --fail-bg:#fdeceb; --wait:#d9a417; --wait-bg:#fef6dd; /* 主强调统一走绿 */ --accent:#1fa85c; --accent-soft:#e7f7ee; --accent-ico:#22b45e; --sidebar-w:250px; --radius:10px; --radius-sm:5px; --radius-lg:16px; --font: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif; /* 间距：8pt 网格。新增样式一律用这些，别再写裸 px */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; /* 阴影：统一带绿色调，和主题一致（此前全站手写了 9 处深浅不一的 rgba） */ --shadow-sm:0 1px 3px rgba(31,128,72,.06); --shadow:0 4px 16px rgba(31,128,72,.08); --shadow-lg:0 12px 32px rgba(31,128,72,.12); /* 字号 */ --fs-xs:12px; --fs-sm:13px; --fs-base:13.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:22px; /* 控件高度：只允许这三档（此前 30/36/38/40/42/46 六种并存）。 --h-md 定 40px，让按钮和输入框同高，同一行里不会一高一矮。 */ --h-sm:32px; --h-md:40px; --h-lg:46px; } *{box-sizing:border-box} html,body{margin:0;height:100%;font-family:var(--font);color:var(--ink);background:var(--bg)} button{font-family:inherit;cursor:pointer} a{color:inherit;text-decoration:none} /* ---------- 登录 ---------- */ .auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px; background:linear-gradient(135deg,#eafaf0 0%,#f2fbf6 40%,#fef9e6 100%);position:relative;overflow:hidden} .auth-wrap::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(60,196,114,.18),transparent 70%);top:-160px;left:-120px} .auth-wrap::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%; background:radial-gradient(circle,rgba(245,196,69,.16),transparent 70%);bottom:-160px;right:-100px} .auth-card{position:relative;z-index:1;width:820px;max-width:100%;background:#fff;border-radius:16px; box-shadow:0 30px 70px rgba(31,128,72,.16);display:grid;grid-template-columns:1fr 1fr;overflow:hidden} .auth-illus{background:linear-gradient(160deg,var(--green-tint),var(--yellow-soft));display:flex; align-items:center;justify-content:center;padding:36px} .auth-illus svg{width:100%;height:auto;max-width:300px} .auth-form{padding:44px 40px} .auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:6px} .auth-brand .mark{width:38px;height:38px;border-radius:11px; background:linear-gradient(135deg,var(--green),var(--green-2));display:grid;place-items:center;color:#fff;font-weight:800; box-shadow:0 5px 14px rgba(31,168,92,.3)} .auth-brand b{font-size:19px;letter-spacing:.3px} .auth-hello{font-size:28px;font-weight:800;margin:22px 0 4px;color:var(--ink)} .auth-hello span{color:var(--green)} .auth-sub{color:var(--muted);font-size:13.5px;margin-bottom:22px} .field{margin-bottom:14px} .field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px} .field input{width:100%;height:46px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 14px;font-size:14px;outline:none;background:var(--green-tint)} .field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:#fff} /* 按钮：默认按后台内联按钮设计（自适应宽度）。 此前 .btn 是按登录页设计的（width:100%+46px 高），导致后台 97 个按钮里 93 个 必须写内联样式覆盖，写出了 18 种变体、6 种并存高度。现在默认值就是后台要的， 登录页那种通栏按钮改用作用域规则（.auth-form .btn）或 .btn.block。 用 inline-flex 居中，顺带让 不必再手写 line-height 对齐。 */ .btn{height:var(--h-md);border:none;border-radius:8px;background:var(--accent);color:#fff;font-weight:700; width:auto;padding:0 var(--sp-5);font-size:var(--fs-md);white-space:nowrap; display:inline-flex;align-items:center;justify-content:center;gap:6px; box-shadow:0 4px 12px rgba(31,168,92,.24);transition:.15s} .btn:hover{filter:brightness(1.04);transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn.block{width:100%} .btn.sm{height:var(--h-sm);padding:0 var(--sp-4);font-size:var(--fs-sm)} .btn.lg{height:var(--h-lg);padding:0 var(--sp-6);font-size:14.5px} .btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:none} .btn.ghost:hover{background:var(--green-tint);transform:none} .btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none;filter:none} /* 登录/注册页保持原有的通栏大按钮观感，不受后台默认值影响 */ .auth-form .btn{width:100%;height:var(--h-lg);font-size:14.5px;box-shadow:0 6px 16px rgba(31,168,92,.28)} .auth-form .btn.ghost{margin-top:10px;box-shadow:none} .auth-lang{display:flex;gap:6px;justify-content:center;margin-top:18px} .auth-lang button{background:none;border:none;color:var(--muted);font-size:12.5px;padding:5px 8px;border-radius:7px} .auth-lang button.on{color:var(--accent);background:var(--accent-soft);font-weight:600} .auth-legal-links{text-align:center;margin-top:14px;font-size:12px;color:var(--muted)} .auth-legal-links a{color:var(--muted);text-decoration:underline} .auth-legal-links a:hover{color:var(--accent)} .legal-body{font-size:14px;line-height:1.7;color:var(--ink)} .legal-body h1,.legal-body h2,.legal-body h3{margin:16px 0 8px} .legal-body p{margin:8px 0} .auth-err{color:var(--fail);font-size:13px;min-height:18px;margin-bottom:4px} /* 登录成功绿条动画 */ .auth-success{position:relative;height:46px;border-radius:8px;overflow:hidden;margin:6px 0 4px; background:var(--green-soft);display:flex;align-items:center;justify-content:center; color:var(--green-deep);font-weight:700;font-size:14px} .auth-success::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--green),var(--green-2)); animation:fill 1.1s ease forwards} .auth-success span{position:relative;z-index:1;animation:flip .5s .3s both} @keyframes fill{to{width:100%}} @keyframes flip{from{color:var(--green-deep)}to{color:#fff}} @media (max-width:720px){ .auth-card{grid-template-columns:1fr} .auth-illus{display:none} .auth-form{padding:36px 28px} } /* ---------- 布局 ---------- */ .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh} .sidebar{background:#fff;color:var(--ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh; border-right:1px solid var(--line)} .side-brand{display:flex;align-items:center;gap:11px;padding:20px 22px;border-bottom:1px solid var(--line)} .side-brand .mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--green-2)); display:grid;place-items:center;color:#fff;font-weight:800;flex:0 0 auto;box-shadow:0 4px 12px rgba(31,168,92,.28)} .side-brand b{color:var(--ink);font-size:16.5px;letter-spacing:.4px} .side-role{margin:16px 22px 8px;font-size:11px;letter-spacing:1px;color:var(--yellow-deep);text-transform:uppercase;font-weight:700} .nav{padding:6px 12px;overflow-y:auto;flex:1} .nav::-webkit-scrollbar{width:6px}.nav::-webkit-scrollbar-thumb{background:var(--green-soft);border-radius:6px} .nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;color:#5a6b63; font-size:14.5px;font-weight:600;cursor:pointer;user-select:none;transition:.15s} .nav-item:hover{background:var(--green-tint);color:var(--green-deep)} .nav-item.active{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(31,168,92,.3)} .nav-item.active .ico{opacity:1} .nav-item .ico{width:18px;height:18px;flex:0 0 auto;opacity:.75} .nav-item .caret{margin-left:auto;transition:transform .2s;opacity:.6} .nav-item.open .caret{transform:rotate(90deg)} /* 侧边栏未读角标（工单）：红色圆牌贴右，选中态用半透明白底 */ .nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px; background:var(--fail);color:#fff;font-size:11.5px;font-weight:700;display:inline-grid;place-items:center;line-height:1} .nav-item.active .nav-badge{background:rgba(255,255,255,.25);color:#fff} /* 工单列表里未读行加粗主题，不另起一列（省地方，和角标数字语义一致） */ .tr-unread{font-weight:700} .tr-unread td:first-child a{color:var(--green-deep)} .nav-sub{margin:0;padding-left:44px;max-height:0;overflow:hidden;transition:max-height .24s ease;display:none} .nav-sub.show{display:block;margin:2px 0 6px} .nav-sub a{display:block;padding:9px 10px;font-size:13.5px;color:#7c8a83;border-radius:8px} .nav-sub a:hover{color:var(--green-deep);background:var(--green-tint)} .nav-sub a.active{color:var(--accent);background:var(--accent-soft);font-weight:600} /* ---------- 主区 ---------- */ .main{display:flex;flex-direction:column;min-width:0} .topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center; gap:16px;padding:0 26px;position:sticky;top:0;z-index:5} .topbar .spacer{flex:1} .lang-sel{position:relative} .lang-sel .cur{border:1px solid var(--line);border-radius:6px;height:var(--h-md);padding:0 12px;display:flex; align-items:center;gap:8px;font-size:13.5px;color:var(--ink);white-space:nowrap;cursor:pointer} .lang-sel .cur:hover{border-color:var(--accent);color:var(--accent)} .lang-menu{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:10px; box-shadow:0 12px 30px rgba(20,26,45,.12);min-width:160px;overflow:hidden;display:none} .lang-menu.show{display:block} .lang-menu button{display:block;width:100%;text-align:left;padding:10px 14px;background:none;border:none;font-size:13.5px} .lang-menu button:hover{background:var(--bg)} .lang-menu button.on{color:var(--accent);font-weight:600} .user-chip{display:flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap} .user-chip .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--green-2),var(--green)); display:grid;place-items:center;color:#fff;font-weight:700} .user-chip .nm{font-size:13.5px;font-weight:600} .user-chip .rl{font-size:11.5px;color:var(--muted)} .logout-btn{border:1px solid var(--line);background:#fff;border-radius:6px;height:36px;padding:0 12px;font-size:13px;color:var(--muted)} .content{padding:26px;min-width:0} .page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .page-head h1{font-size:22px;margin:0} .crumb{color:var(--muted);font-size:13px} .crumb b{color:var(--ink)} /* 卡片 */ .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px} /* 卡片/面板此前是「扁平描边盒子、零阴影」，而登录页是柔和投影的悬浮卡片， 两者观感差一档。这里把后台拉到登录页的水准：更大圆角 + 极淡描边 + 带绿调的柔和投影。 */ .stat{background:#fff;border-radius:var(--radius-lg);padding:var(--sp-5);display:flex;align-items:center;gap:18px; border:1px solid rgba(230,239,233,.8);box-shadow:var(--shadow-sm);position:relative;overflow:hidden; transition:box-shadow .18s,transform .18s} .stat:hover{box-shadow:var(--shadow);transform:translateY(-2px)} .stat .blob{position:absolute;width:120px;height:120px;border-radius:50%;background:var(--accent-soft); right:-40px;bottom:-46px;opacity:.6} .stat .ic{width:58px;height:58px;flex:0 0 auto;color:var(--accent-ico);z-index:1} .stat .meta{z-index:1} .stat .lbl{color:var(--muted);font-size:13.5px;margin-bottom:6px} .stat .val{font-size:26px;font-weight:800;letter-spacing:.5px} .panel{background:#fff;border:1px solid rgba(230,239,233,.8);border-radius:var(--radius-lg); padding:var(--sp-5);box-shadow:var(--shadow-sm)} .panel + .panel{margin-top:var(--sp-4)} .panel h2{font-size:var(--fs-lg);margin:0 0 4px} .panel .sub{color:var(--muted);font-size:13px;margin-bottom:16px} /* 面板内的分区小标题：粗体标题 + 一行说明，用于把一个 panel 里的多组设置拆清楚 */ .section-head{font-size:15px;font-weight:700;color:var(--ink);margin:22px 0 4px} .section-head:first-child{margin-top:0} .section-desc{font-size:12.5px;color:var(--muted);margin-bottom:14px} /* 公告 */ .notice{padding:18px 0;border-top:1px solid var(--line)} .notice:first-of-type{border-top:none} .notice h3{margin:0 0 8px;font-size:15.5px} .notice p{margin:0;color:#5c6577;font-size:13.5px;line-height:1.7} .notice .pin{display:inline-block;font-size:11px;color:var(--accent);background:var(--accent-soft); padding:2px 8px;border-radius:6px;margin-left:8px;vertical-align:middle} /* 表格 */ /* 横向滚动容器：th 是 nowrap 且单元格左右各 14px，6 列表格最小宽度约 700-800px， 窄屏上会把整个内容区顶出横向滚动。给表格套一层 .table-wrap 把滚动关在局部。 */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .empty-cell{text-align:center;color:var(--muted);padding:var(--sp-6) var(--sp-4)} /* 面板内「说明文字 + 右侧按钮」的标题行。此前各处手写 flex，且左侧文字没有 min-width:0， 窄屏下文字撑到最小内容宽度、按钮又不收缩，把整页顶出横向滚动。 */ .row-head{display:flex;justify-content:space-between;align-items:center; gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap} .row-head > :first-child{flex:1 1 200px;min-width:0;margin-right:0} /* 右对齐的操作行（此前 14 处手写 justify-content:flex-end） */ .row-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)} /* 列表页的搜索筛选行：输入框可伸缩、下拉不被压扁，窄屏自然换行 */ .filter-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-3)} .filter-row input{flex:1 1 180px;min-width:0;height:var(--h-md);border:1px solid var(--line); border-radius:var(--radius-sm);padding:0 var(--sp-3);font-size:var(--fs-base);background:var(--card)} .filter-row select{flex:0 1 auto;min-width:0;height:var(--h-md);border:1px solid var(--line); border-radius:var(--radius-sm);padding:0 var(--sp-2);font-size:var(--fs-sm);background:var(--card)} /* 同一行里的控件必须等高，否则输入框 40px、.btn.sm 32px 会一高一矮 */ .filter-row .btn{height:var(--h-md);flex:0 0 auto} .filter-row .hint-note{margin:0;flex:1 1 100%} /* 勾选后浮出的批量操作条。用 [hidden] 控制显隐，别再写 style.display —— 内联 display 会盖掉 hidden 属性，两套机制打架。 */ .bulk-bar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center; padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3); background:var(--green-tint);border:1px solid var(--green);border-radius:var(--radius-sm)} .bulk-bar[hidden]{display:none} .bulk-bar b{margin-right:var(--sp-2);font-size:var(--fs-sm)} .col-chk{width:36px;text-align:center} .col-chk input{width:16px;height:16px;cursor:pointer;accent-color:var(--green-deep)} .table tbody tr.tr-picked td{background:var(--green-tint)} .table{width:100%;border-collapse:collapse;font-size:var(--fs-base)} .table th{text-align:left;color:var(--muted);font-weight:600;padding:var(--sp-3) var(--sp-3); border-bottom:1px solid var(--line);white-space:nowrap;font-size:var(--fs-sm); letter-spacing:.2px;background:var(--green-tint)} .table th:first-child{border-top-left-radius:var(--radius-sm)} .table th:last-child{border-top-right-radius:var(--radius-sm)} .table td{padding:var(--sp-3);border-bottom:1px solid var(--line);color:var(--ink)} .table tr:last-child td{border-bottom:none} .table tbody tr{transition:background .12s} .table tbody tr:hover td{background:var(--green-tint)} .tag{display:inline-block;padding:3px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:600} .tag.ok{color:var(--ok);background:var(--ok-bg)} .tag.fail{color:var(--fail);background:var(--fail-bg)} .tag.wait{color:var(--wait);background:var(--wait-bg)} /* 可点击复制的码块（邀请码等）*/ .code-copy{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px dashed var(--line);border-radius:8px;background:var(--green-tint);cursor:pointer;transition:.15s;user-select:none} .code-copy:hover{border-color:var(--accent);background:var(--accent-soft)} .code-copy code{font-family:monospace;font-size:15px;font-weight:700;letter-spacing:.5px;color:var(--ink)} .code-copy-hint{margin-left:auto;font-size:11px;color:var(--muted)} .code-copy:active{transform:scale(.99)} /* 服务商测试连接内联面板 */ .svc-testpanel{padding:10px 12px;margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg,#fafafa)} .svc-testpanel code{font-size:12px;background:#fff;padding:2px 6px;border-radius:4px;border:1px solid var(--line)} /* 服务商管理卡片 */ .svc-cat h3{font-size:15px;font-weight:700;color:var(--ink)} .svc-card{margin-bottom:12px} .svc-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .svc-card-title{font-weight:700;font-size:15px} .svc-repo{font-size:11px;color:var(--muted);text-decoration:none;font-family:monospace} .svc-repo:hover{color:var(--accent)} .svc-channel{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:8px;background:#fff} .svc-channel.is-off{opacity:.6} .svc-channel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .svc-channel-name{font-weight:600} .svc-channel-state{margin-left:auto} .svc-channel-actions{display:flex;gap:6px} /* 模态弹窗 */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px} .modal{background:#fff;border-radius:12px;padding:24px;max-width:640px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)} .modal h3{margin:0 0 16px;font-size:18px} /* chips：此前只有 padding 没有 height，窄屏下文字换行会把 chip 撑到 100px+， 而且和 .btn/.mini 不在同一基线上。现在固定高度 + 不换行 + 容器允许折行。 */ .chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)} .chip{border:1px solid var(--line);background:#fff;border-radius:6px;padding:0 var(--sp-3); height:var(--h-sm);display:inline-flex;align-items:center;white-space:nowrap; font-size:var(--fs-sm);color:var(--muted)} .chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} /* 二级子导航：与一级 .chips 视觉区分开，无边框贴底线样式 */ /* 子导航项是 nowrap 的，窄屏下装不下会把页面顶出横向滚动。 这里让它自己横滑（和 .table-wrap 一个思路：把溢出关在局部）。 */ .subnav{display:flex;gap:22px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:0; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .subnav::-webkit-scrollbar{display:none} .subnav > *{flex:0 0 auto} .subnav a{position:relative;padding:4px 2px 10px;font-size:13px;color:var(--muted);white-space:nowrap} .subnav a.on{color:var(--green-deep);font-weight:600} .subnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px} /* .mini 同时用在