/* ============================================================================ LC LAB · Liquid Glass Design System 材质：半透明 + backdrop blur + 高光内边 + 分层柔和阴影 克制原则：数据表格保持可读（玻璃只做衬托，不牺牲对比度） ============================================================================ */ :root { /* 品牌（logo 像素实测） */ --brand-50:#F1F6FF; --brand-100:#E4EDFF; --brand-200:#CFDEFE; --brand-300:#AEC8FB; --brand-400:#87ABF6; --brand-500:#5B8DEF; --brand-600:#4A79D6; --brand-700:#3B62B4; --brand-800:#2C4A88; --brand-900:#1B2F58; --accent-50:#FFF9F0; --accent-100:#FFF1DC; --accent-200:#FFE3BB; --accent-300:#FFD08C; --accent-400:#FFBC5C; --accent-500:#FFAB00; --accent-600:#E09400; --accent-700:#B07600; /* 中性（略偏冷，贴合玻璃材质） */ --n-50:#F7F9FC; --n-100:#F1F4F9; --n-200:#E6EAF1; --n-300:#D6DCE6; --n-400:#B6BECB; --n-500:#8B94A3; --n-600:#5C6675; --n-700:#333B48; --n-800:#1D2430; --n-900:#0E131B; /* 功能色 */ --ok:#4FBE6B; --ok-fg:#2E7D46; --ok-tint:rgba(79,190,107,.14); --warn:#E9A23B; --warn-fg:#8A5A16; --warn-tint:rgba(233,162,59,.16); --danger:#EC5B62; --danger-fg:#A63A40; --danger-tint:rgba(236,91,98,.14); --info:#8B94A3; --info-tint:rgba(139,148,163,.12); /* 玻璃材质 */ --glass-1: rgba(255,255,255,.52); /* 卡片 */ --glass-2: rgba(255,255,255,.68); /* 浮层 */ --glass-3: rgba(255,255,255,.82); /* 密集数据面 */ --glass-bar: rgba(255,255,255,.60); --glass-line: rgba(255,255,255,.72); --hairline: rgba(29,36,48,.08); --hairline-strong: rgba(29,36,48,.14); --blur-s: saturate(170%) blur(14px); --blur-m: saturate(180%) blur(24px); --blur-l: saturate(190%) blur(40px); --shadow-1: 0 1px 1px rgba(17,24,39,.03), 0 2px 6px rgba(17,24,39,.04); --shadow-2: 0 1px 2px rgba(17,24,39,.04), 0 8px 20px rgba(17,24,39,.06); --shadow-3: 0 2px 4px rgba(17,24,39,.04), 0 14px 34px rgba(17,24,39,.08); --shadow-4: 0 4px 8px rgba(17,24,39,.05), 0 28px 70px rgba(17,24,39,.14); --shadow-brand: 0 1px 2px rgba(59,98,180,.18), 0 10px 24px rgba(59,98,180,.24); --shadow-accent: 0 1px 2px rgba(176,118,0,.16), 0 10px 24px rgba(224,148,0,.22); --r-xs:3px; --r-sm:7px; --r-md:11px; --r-lg:15px; --r-xl:20px; --r-2xl:26px; --r-pill:999px; --sans:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text","Segoe UI",Roboto, "PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",Arial,sans-serif; --mono:"SF Mono",ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace; } * { box-sizing:border-box; margin:0; padding:0; } html,body { height:100%; } body { font-family:var(--sans); font-size:14px; line-height:22px; color:var(--n-700); background:#EEF2F9; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-variant-numeric:tabular-nums; overflow:hidden; } /* 壁纸：柔和 mesh 渐变 + 极细噪点，让玻璃有"可折射的东西" */ body::before { content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none; background: radial-gradient(42% 38% at 14% 10%, rgba(91,141,239,.34), transparent 62%), radial-gradient(34% 30% at 84% 8%, rgba(255,171,0,.26), transparent 66%), radial-gradient(46% 42% at 76% 84%, rgba(126,180,255,.30), transparent 64%), radial-gradient(40% 36% at 22% 88%, rgba(255,194,108,.20), transparent 62%), linear-gradient(165deg,#F6F9FE 0%,#EAF0FA 48%,#E6ECF6 100%); filter:saturate(115%); } body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color:var(--brand-700); text-decoration:none; } a:hover { color:var(--brand-600); } button { font-family:inherit; font-size:inherit; cursor:pointer; } input,select,textarea { font-family:inherit; font-size:inherit; color:var(--n-700); } ul { list-style:none; } ::-webkit-scrollbar { width:9px; height:9px; } ::-webkit-scrollbar-thumb { background:rgba(29,36,48,.16); border-radius:999px; border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover { background:rgba(29,36,48,.26); background-clip:content-box; } ::-webkit-scrollbar-track { background:transparent; } /* ===== 外壳：悬浮面板式 ===== */ .app { display:flex; flex-direction:column; height:100vh; padding:10px; gap:10px; } .topbar { height:56px; flex:0 0 56px; border-radius:var(--r-lg); display:flex; align-items:center; gap:14px; padding:0 14px 0 12px; position:relative; z-index:60; background:var(--glass-bar); backdrop-filter:var(--blur-m); -webkit-backdrop-filter:var(--blur-m); border:1px solid var(--glass-line); box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(29,36,48,.03); } .logo { display:flex; align-items:center; gap:9px; } .logo .mark { width:32px; height:32px; border-radius:9px; flex:0 0 32px; padding:4px; background:linear-gradient(180deg,#fff,rgba(255,255,255,.86)); box-shadow:0 1px 2px rgba(17,24,39,.08), inset 0 1px 0 #fff, 0 0 0 1px rgba(29,36,48,.05); display:flex; align-items:center; justify-content:center; } .logo .mark img { width:100%; height:100%; object-fit:contain; display:block; } .logo b { font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--n-800); } .logo span { font-size:11.5px; color:var(--n-500); letter-spacing:.02em; } .topbar .spacer { flex:1; } .top-actions { display:flex; align-items:center; gap:6px; } .icon-btn { width:34px; height:34px; border-radius:10px; border:1px solid transparent; background:transparent; color:var(--n-600); display:flex; align-items:center; justify-content:center; position:relative; transition:.16s cubic-bezier(.32,.72,0,1); } .icon-btn:hover { background:rgba(255,255,255,.7); border-color:var(--glass-line); color:var(--brand-700); box-shadow:var(--shadow-1), inset 0 1px 0 #fff; } .icon-btn .dot { position:absolute; top:7px; right:7px; width:6px; height:6px; border-radius:50%; background:var(--accent-500); box-shadow:0 0 0 2px rgba(255,255,255,.9); } .avatar { width:30px; height:30px; border-radius:50%; color:#fff; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--brand-500),var(--brand-700)); box-shadow:0 1px 2px rgba(17,24,39,.14), inset 0 1px 0 rgba(255,255,255,.4); } .searchbox { display:flex; align-items:center; gap:7px; height:34px; padding:0 11px; width:266px; border-radius:10px; background:rgba(255,255,255,.55); border:1px solid rgba(29,36,48,.07); box-shadow:inset 0 1px 2px rgba(17,24,39,.05); transition:.16s; } .searchbox:focus-within { background:#fff; border-color:var(--brand-300); box-shadow:0 0 0 3px var(--brand-100), inset 0 1px 2px rgba(17,24,39,.03); } .searchbox svg { color:var(--n-400); flex:0 0 15px; } .searchbox input { border:0; background:transparent; outline:none; font-size:12.5px; width:100%; color:var(--n-700); } .searchbox input::placeholder { color:var(--n-400); } .body { flex:1; display:flex; gap:10px; min-height:0; } .sidenav { width:230px; flex:0 0 230px; border-radius:var(--r-lg); padding:10px 8px; overflow:hidden auto; background:var(--glass-1); backdrop-filter:var(--blur-m); -webkit-backdrop-filter:var(--blur-m); border:1px solid var(--glass-line); box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9); transition:width .22s cubic-bezier(.32,.72,0,1), flex-basis .22s cubic-bezier(.32,.72,0,1); } .app.nav-mini .sidenav { width:62px; flex-basis:62px; padding:10px 7px; } .nav-group { padding:4px 0; } .nav-group + .nav-group { margin-top:4px; } .nav-label { font-size:10.5px; color:var(--n-500); padding:8px 10px 5px; letter-spacing:.08em; font-weight:500; } .nav-item { display:flex; align-items:center; gap:9px; height:35px; padding:0 10px; margin:1px 0; border-radius:9px; color:var(--n-600); font-size:13px; cursor:pointer; white-space:nowrap; transition:.15s cubic-bezier(.32,.72,0,1); position:relative; } .nav-item:hover { background:rgba(255,255,255,.62); color:var(--n-800); } .nav-item.active { background:linear-gradient(180deg,#fff,rgba(255,255,255,.88)); color:var(--brand-700); font-weight:500; box-shadow:0 1px 2px rgba(17,24,39,.06), 0 4px 12px rgba(59,98,180,.10), inset 0 1px 0 #fff; } .nav-item.active .ic, .nav-item.active svg { opacity:1; color:var(--brand-600); } .nav-item .ic, .nav-item svg { width:17px; height:17px; flex:0 0 17px; opacity:.72; } .nav-item.active .ic, .nav-item.active svg { opacity:1; color:var(--brand-600); } .nav-item .cnt { margin-left:auto; font-size:10.5px; font-weight:600; color:var(--accent-700); background:var(--accent-100); border:1px solid rgba(224,148,0,.18); padding:0 6px; height:17px; line-height:16px; border-radius:999px; } .app.nav-mini .nav-label, .app.nav-mini .nav-item .t, .app.nav-mini .nav-item .cnt { display:none; } .app.nav-mini .nav-item { justify-content:center; padding:0; } .app.nav-mini .nav-item.active::before { display:none; } .main { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; } .crumbbar { height:32px; flex:0 0 32px; display:flex; align-items:center; gap:7px; padding:0 12px; font-size:12px; color:var(--n-500); border-radius:var(--r-md); background:rgba(255,255,255,.34); backdrop-filter:var(--blur-s); -webkit-backdrop-filter:var(--blur-s); border:1px solid rgba(255,255,255,.5); } .crumbbar b { color:var(--n-700); font-weight:500; } .crumbbar .sep { color:var(--n-300); } .content-wrap { flex:1; display:flex; gap:10px; min-height:0; } .content { flex:1; min-width:0; overflow:auto; padding:2px 2px 96px; } .ctxpanel { width:310px; flex:0 0 310px; overflow:auto; padding:14px; border-radius:var(--r-lg); background:var(--glass-1); backdrop-filter:var(--blur-m); -webkit-backdrop-filter:var(--blur-m); border:1px solid var(--glass-line); box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9); } .app.immersive .ctxpanel { display:none; } .app.immersive .content { padding:2px 2px 96px; } /* ===== 页头 ===== */ .page-head { display:flex; align-items:flex-start; gap:14px; margin:2px 0 14px; } .page-head h1 { font-size:21px; line-height:29px; font-weight:600; color:var(--n-800); letter-spacing:-.015em; } .page-head .sub { font-size:12.5px; color:var(--n-500); margin-top:3px; } .page-head .actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } /* ===== 玻璃卡片 ===== */ .card { background:var(--glass-1); backdrop-filter:var(--blur-m); -webkit-backdrop-filter:var(--blur-m); border:1px solid var(--glass-line); border-radius:var(--r-lg); box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9); overflow:hidden; } .card-hd { padding:11px 15px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(29,36,48,.06); background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.16)); } .card-hd h3 { font-size:13.5px; font-weight:600; color:var(--n-800); letter-spacing:-.005em; } .card-hd .extra { margin-left:auto; display:flex; gap:8px; align-items:center; font-size:12.5px; } .card-bd { padding:15px; } .card-bd.tight { padding:0; } .grid { display:grid; gap:12px; } .g2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .g4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .g5 { grid-template-columns:repeat(5,minmax(0,1fr)); } .row { display:flex; gap:12px; align-items:flex-start; } .col { min-width:0; } .stack { display:flex; flex-direction:column; gap:12px; } .stack-s { display:flex; flex-direction:column; gap:8px; } .grow { flex:1; min-width:0; } /* ===== KPI ===== */ .kpi { position:relative; padding:13px 15px; border-radius:var(--r-lg); overflow:hidden; background:var(--glass-1); backdrop-filter:var(--blur-m); -webkit-backdrop-filter:var(--blur-m); border:1px solid var(--glass-line); box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9); } .kpi::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:0; background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 46%); } .kpi > * { position:relative; z-index:1; } .kpi .k-top { font-size:12px; color:var(--n-500); display:flex; align-items:center; gap:5px; } .kpi .k-val { font-size:25px; line-height:33px; font-weight:600; color:var(--n-800); margin-top:3px; letter-spacing:-.02em; } .kpi .k-val small { font-size:12.5px; font-weight:400; color:var(--n-500); margin-left:3px; letter-spacing:0; } .kpi .k-foot { font-size:11.5px; color:var(--n-500); margin-top:3px; display:flex; gap:7px; align-items:center; } .kpi.accent { background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,243,224,.6)); border-color:rgba(255,208,140,.6); } .kpi.brand { background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(232,240,255,.62)); border-color:rgba(174,200,251,.6); } .up { color:var(--danger-fg); } .down { color:var(--ok-fg); } /* ===== 按钮 ===== */ .btn { height:33px; padding:0 13px; border-radius:10px; font-size:13px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:var(--n-700); background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72)); border:1px solid rgba(29,36,48,.09); box-shadow:0 1px 1px rgba(17,24,39,.04), inset 0 1px 0 #fff; transition:.15s cubic-bezier(.32,.72,0,1); } .btn:hover { background:#fff; border-color:rgba(29,36,48,.14); box-shadow:var(--shadow-1), inset 0 1px 0 #fff; } .btn:active { transform:scale(.985); box-shadow:inset 0 1px 3px rgba(17,24,39,.10); } .btn-primary { color:#fff; border-color:rgba(43,74,136,.5); background:linear-gradient(180deg,#6B96F2,var(--brand-600) 55%,var(--brand-700)); box-shadow:var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,.34); } .btn-primary:hover { background:linear-gradient(180deg,#7BA2F5,#4A79D6 55%,var(--brand-700)); color:#fff; } .btn-accent { color:#4A3200; border-color:rgba(176,118,0,.34); background:linear-gradient(180deg,#FFC65C,var(--accent-500) 62%,var(--accent-600)); box-shadow:var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.5); } .btn-accent:hover { background:linear-gradient(180deg,#FFD179,#FFB31F 62%,var(--accent-600)); color:#4A3200; } .btn-danger { color:var(--danger-fg); border-color:rgba(236,91,98,.28); background:rgba(255,255,255,.8); } .btn-danger:hover { background:var(--danger-tint); border-color:rgba(236,91,98,.45); color:var(--danger-fg); } .btn-ghost { border-color:transparent; background:transparent; box-shadow:none; color:var(--brand-700); } .btn-ghost:hover { background:rgba(255,255,255,.6); border-color:var(--glass-line); box-shadow:none; } .btn-sm { height:27px; padding:0 9px; font-size:12px; border-radius:8px; } .btn-lg { height:39px; padding:0 18px; font-size:14px; border-radius:12px; } .btn[disabled], .btn.disabled { opacity:.45; pointer-events:none; } .btn-group { display:inline-flex; } .btn-group .btn { border-radius:0; margin-left:-1px; } .btn-group .btn:first-child { border-radius:10px 0 0 10px; margin-left:0; } .btn-group .btn:last-child { border-radius:0 10px 10px 0; } .btn-group .btn.on { background:#fff; color:var(--brand-700); border-color:var(--brand-300); z-index:1; } /* ===== 徽标 ===== */ .badge { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius:7px; font-size:11px; font-weight:500; letter-spacing:.01em; white-space:nowrap; background:rgba(255,255,255,.72); border:1px solid rgba(29,36,48,.08); color:var(--n-600); } .badge.ok { background:var(--ok-tint); border-color:rgba(79,190,107,.26); color:var(--ok-fg); } .badge.warn { background:var(--warn-tint); border-color:rgba(233,162,59,.28); color:var(--warn-fg); } .badge.danger { background:var(--danger-tint); border-color:rgba(236,91,98,.26); color:var(--danger-fg); } .badge.brand { background:rgba(91,141,239,.12); border-color:rgba(91,141,239,.22); color:var(--brand-700); } .badge.accent { background:rgba(255,171,0,.14); border-color:rgba(224,148,0,.24); color:var(--accent-700); } .badge.ghost { background:transparent; color:var(--n-500); } .dot-s { width:6px; height:6px; border-radius:50%; display:inline-block; background:currentColor; } .tag { display:inline-flex; align-items:center; height:19px; padding:0 6px; border-radius:6px; font-size:10.5px; background:rgba(255,255,255,.7); color:var(--n-600); border:1px solid rgba(29,36,48,.08); } .tag.orange { background:rgba(255,171,0,.12); color:var(--accent-700); border-color:rgba(224,148,0,.2); } .tag.gray { background:rgba(139,148,163,.1); color:var(--n-600); border-color:rgba(29,36,48,.07); } .tag.red { background:var(--danger-tint); color:var(--danger-fg); border-color:rgba(236,91,98,.22); } .tag.brand { background:rgba(91,141,239,.1); color:var(--brand-700); border-color:rgba(91,141,239,.2); } /* ===== 表格（玻璃下的可读性优先） ===== */ .table-wrap { overflow:auto; border-radius:0 0 var(--r-lg) var(--r-lg); } table.tb { width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; background:rgba(255,255,255,.42); } table.tb th { text-align:left; font-weight:500; font-size:11.5px; color:var(--n-600); letter-spacing:.01em; padding:8px 12px; white-space:nowrap; position:sticky; top:0; z-index:2; background:rgba(255,255,255,.72); backdrop-filter:var(--blur-s); -webkit-backdrop-filter:var(--blur-s); border-bottom:1px solid rgba(29,36,48,.09); } table.tb td { padding:8px 12px; border-bottom:1px solid rgba(29,36,48,.055); color:var(--n-700); vertical-align:middle; } table.tb tbody tr:last-child td { border-bottom:0; } table.tb tbody tr { transition:background .12s; } table.tb tbody tr:hover td { background:rgba(91,141,239,.055); } table.tb tbody tr.sel td { background:rgba(91,141,239,.10); } table.tb tbody tr.warn-row td { background:rgba(255,171,0,.07); } table.tb tbody tr.dim td { color:var(--n-500); } table.tb .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } table.tb .mono { font-family:var(--mono); font-size:11.5px; white-space:nowrap; letter-spacing:-.01em; } table.tb.compact td { padding:6px 10px; font-size:12px; } table.tb.compact th { padding:7px 10px; } table.tb.dense td { padding:4px 8px; font-size:11.5px; } table.tb.dense th { padding:5px 8px; } table.tb tr.grp td { background:rgba(255,255,255,.62); font-weight:600; color:var(--n-800); font-size:12px; } table.tb tr.total td { background:rgba(91,141,239,.07); font-weight:600; } .tb-hover-target { cursor:pointer; } .amount { font-variant-numeric:tabular-nums; white-space:nowrap; } .amount.neg { color:var(--danger-fg); } .mono { font-family:var(--mono); } .muted { color:var(--n-500); } .small { font-size:12px; } .xs { font-size:11px; } .right { text-align:right; } .center { text-align:center; } .nowrap { white-space:nowrap; } /* ===== 额度条 ===== */ .bar { height:7px; border-radius:999px; background:rgba(29,36,48,.09); overflow:hidden; display:flex; box-shadow:inset 0 1px 2px rgba(17,24,39,.06); } .bar > i { display:block; height:100%; transition:width .3s; } .bar .used { background:linear-gradient(90deg,var(--brand-600),var(--brand-500)); } .bar .resv { background:linear-gradient(90deg,var(--brand-400),var(--brand-300)); } .bar .over { background:linear-gradient(90deg,var(--danger),#F58B90); } .bar.lg { height:10px; border-radius:999px; } .bar-legend { display:flex; gap:12px; font-size:11px; color:var(--n-500); margin-top:5px; flex-wrap:wrap; } .bar-legend i { width:7px; height:7px; border-radius:2px; display:inline-block; margin-right:4px; } .mini-bar { height:5px; border-radius:999px; background:rgba(29,36,48,.09); overflow:hidden; } .mini-bar > i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--brand-500),var(--brand-400)); } .mini-bar > i.warn { background:linear-gradient(90deg,var(--accent-500),var(--accent-400)); } .mini-bar > i.danger { background:linear-gradient(90deg,var(--danger),#F58B90); } /* ===== 树 ===== */ .tree { font-size:12.5px; user-select:none; } .tree-node { display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:8px; cursor:pointer; transition:.13s; } .tree-node:hover { background:rgba(255,255,255,.66); } .tree-node.active { background:linear-gradient(180deg,#fff,rgba(255,255,255,.85)); color:var(--brand-700); font-weight:500; box-shadow:0 1px 2px rgba(17,24,39,.06), inset 0 1px 0 #fff; } .tree-node .tw { width:13px; text-align:center; color:var(--n-400); font-size:9px; } .tree-node .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tree-node .meta { font-size:10.5px; color:var(--n-500); } .tree-children { margin-left:13px; border-left:1px solid rgba(29,36,48,.07); padding-left:5px; } .tree-children.hide { display:none; } .tnode-ic { width:14px; height:14px; flex:0 0 14px; opacity:.7; } /* ===== 标签页 / 分段 ===== */ .tabs { display:flex; gap:3px; padding:3px; border-radius:11px; margin-bottom:12px; width:fit-content; background:rgba(255,255,255,.44); border:1px solid rgba(255,255,255,.6); backdrop-filter:var(--blur-s); -webkit-backdrop-filter:var(--blur-s); } .tab { padding:6px 13px; font-size:12.5px; color:var(--n-600); border-radius:8px; cursor:pointer; transition:.15s; } .tab:hover { color:var(--n-800); background:rgba(255,255,255,.6); } .tab.on { color:var(--n-800); font-weight:500; background:#fff; box-shadow:0 1px 2px rgba(17,24,39,.07), inset 0 1px 0 #fff; } .seg { display:inline-flex; padding:3px; gap:2px; border-radius:10px; background:rgba(29,36,48,.06); box-shadow:inset 0 1px 2px rgba(17,24,39,.05); } .seg .s { padding:5px 12px; border-radius:8px; font-size:12px; color:var(--n-600); cursor:pointer; transition:.15s; } .seg .s:hover { color:var(--n-800); } .seg .s.on { background:#fff; color:var(--brand-700); font-weight:500; box-shadow:0 1px 2px rgba(17,24,39,.08), inset 0 1px 0 #fff; } /* ===== 提示条 ===== */ .banner { display:flex; gap:10px; padding:11px 13px; border-radius:12px; font-size:12.5px; align-items:flex-start; border:1px solid transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .banner .bi { flex:0 0 18px; width:18px; height:18px; margin-top:1px; display:flex; align-items:center; justify-content:center; } .banner b { font-weight:600; } .banner.danger { background:rgba(236,91,98,.09); border-color:rgba(236,91,98,.2); color:#8E353B; } .banner.warn { background:rgba(233,162,59,.11); border-color:rgba(233,162,59,.22); color:#7C5313; } .banner.ok { background:rgba(79,190,107,.10); border-color:rgba(79,190,107,.22); color:#2E6B41; } .banner.info { background:rgba(91,141,239,.08); border-color:rgba(91,141,239,.18); color:var(--brand-800); } .banner .acts { margin-left:auto; display:flex; gap:8px; align-items:center; } /* ===== 表单 ===== */ .field { display:flex; flex-direction:column; gap:5px; } .field > label { font-size:12px; color:var(--n-600); font-weight:500; } .input, .select, textarea.input { height:33px; border-radius:10px; padding:0 11px; width:100%; outline:none; font-size:13px; background:rgba(255,255,255,.66); border:1px solid rgba(29,36,48,.10); box-shadow:inset 0 1px 2px rgba(17,24,39,.045); transition:.15s; } .input:hover, .select:hover { border-color:rgba(29,36,48,.16); } .input:focus, .select:focus, textarea.input:focus { background:#fff; border-color:var(--brand-400); box-shadow:0 0 0 3.5px rgba(91,141,239,.15), inset 0 1px 2px rgba(17,24,39,.03); } textarea.input { height:auto; padding:9px 11px; line-height:20px; resize:vertical; } .input.sm, .select.sm { height:29px; font-size:12px; border-radius:8px; } .input-group { display:flex; } .input-group .input { border-radius:10px 0 0 10px; } .input-group .btn { border-radius:0 10px 10px 0; height:33px; } .filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; } .filters .input, .filters .select { width:auto; min-width:126px; } .chk { display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:12.5px; } .chk input { width:15px; height:15px; accent-color:var(--brand-600); border-radius:4px; } /* ===== 支付来源卡 ===== */ .pay-card { position:relative; padding:12px 13px; border-radius:13px; cursor:pointer; min-height:136px; background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.6)); border:1px solid rgba(29,36,48,.09); box-shadow:0 1px 2px rgba(17,24,39,.04), inset 0 1px 0 #fff; transition:.16s cubic-bezier(.32,.72,0,1); } .pay-card:hover { border-color:rgba(91,141,239,.35); box-shadow:var(--shadow-2), inset 0 1px 0 #fff; } .pay-card.on { border-color:var(--brand-400); background:linear-gradient(180deg,#fff,rgba(232,240,255,.9)); box-shadow:0 0 0 3px rgba(91,141,239,.16), var(--shadow-2), inset 0 1px 0 #fff; } .pay-card.dis { opacity:.5; cursor:not-allowed; background:rgba(255,255,255,.4); } .pay-card.dis:hover { border-color:rgba(29,36,48,.09); box-shadow:0 1px 2px rgba(17,24,39,.04); } .pay-card .pc-hd { display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; padding-right:26px; } .pay-card .pc-nm { font-weight:500; font-size:12.5px; line-height:19px; color:var(--n-800); } .pay-card .pc-sub { font-size:11px; color:var(--n-500); margin-top:3px; line-height:16px; } .pay-card .pc-amt { font-size:19px; font-weight:600; color:var(--n-800); margin-top:7px; letter-spacing:-.02em; } .pay-card .pc-check { position:absolute; top:11px; right:11px; width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(29,36,48,.18); display:flex; align-items:center; justify-content:center; background:#fff; font-size:10px; color:#fff; transition:.15s; } .pay-card.on .pc-check { border-color:transparent; background:linear-gradient(180deg,var(--brand-500),var(--brand-700)); box-shadow:0 1px 3px rgba(59,98,180,.4), inset 0 1px 0 rgba(255,255,255,.4); } .pay-card.dis .pc-check { border-style:dashed; } .pay-card .tag { font-size:10px; height:17px; padding:0 5px; } .pay-alloc { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed rgba(29,36,48,.12); } .pay-alloc input { width:106px; height:29px; text-align:right; } /* ===== 步骤条 ===== */ .steps { display:flex; align-items:center; } .step { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--n-500); } .step .n { width:21px; height:21px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; background:rgba(255,255,255,.7); border:1px solid rgba(29,36,48,.12); color:var(--n-500); } .step.on { color:var(--brand-700); font-weight:500; } .step.on .n { background:linear-gradient(180deg,var(--brand-500),var(--brand-700)); color:#fff; border-color:transparent; box-shadow:0 2px 6px rgba(59,98,180,.3); } .step.done { color:var(--ok-fg); } .step.done .n { background:var(--ok-tint); color:var(--ok-fg); border-color:rgba(79,190,107,.3); } .step-line { flex:1; height:1px; margin:0 9px; min-width:18px; background:rgba(29,36,48,.12); } /* ===== 审批链 ===== */ .flow { display:flex; align-items:flex-start; } .flow-item { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:92px; text-align:center; } .flow-item .fi-n { width:29px; height:29px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:600; background:rgba(255,255,255,.72); border:1px solid rgba(29,36,48,.1); color:var(--n-500); } .flow-item.done .fi-n { background:var(--ok-tint); color:var(--ok-fg); border-color:rgba(79,190,107,.32); } .flow-item.cur .fi-n { background:linear-gradient(180deg,var(--brand-500),var(--brand-700)); color:#fff; border-color:transparent; box-shadow:0 2px 8px rgba(59,98,180,.34); } .flow-item.rej .fi-n { background:var(--danger-tint); color:var(--danger-fg); border-color:rgba(236,91,98,.3); } .flow-item .fi-t { font-size:11.5px; color:var(--n-700); } .flow-item .fi-s { font-size:10.5px; color:var(--n-500); } .flow-line { flex:1; height:2px; margin-top:14px; min-width:14px; border-radius:2px; background:rgba(29,36,48,.1); } .flow-line.done { background:rgba(79,190,107,.45); } /* ===== 空状态 ===== */ .empty { padding:38px 20px; text-align:center; color:var(--n-500); } .empty .e-ic { width:44px; height:44px; margin:0 auto 12px; color:var(--n-300); } .empty .e-t { font-size:13px; color:var(--n-600); } .empty .e-d { font-size:12px; margin-top:3px; } /* ===== 抽屉 / 弹层 ===== */ .overlay { position:fixed; inset:0; z-index:100; display:flex; justify-content:flex-end; background:rgba(29,36,48,.22); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:fade .18s ease; } @keyframes fade { from{opacity:0} to{opacity:1} } @keyframes rise { from{opacity:0; transform:translateY(8px) scale(.995)} to{opacity:1; transform:none} } .overlay.center { align-items:center; justify-content:center; } .drawer { width:552px; max-width:92vw; height:100%; display:flex; flex-direction:column; background:rgba(255,255,255,.76); backdrop-filter:var(--blur-l); -webkit-backdrop-filter:var(--blur-l); border-left:1px solid rgba(255,255,255,.8); box-shadow:var(--shadow-4); animation:slide .22s cubic-bezier(.32,.72,0,1); } @keyframes slide { from{transform:translateX(24px); opacity:.6} to{transform:none; opacity:1} } .drawer-hd { padding:14px 18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(29,36,48,.07); background:linear-gradient(180deg,rgba(255,255,255,.6),transparent); } .drawer-hd h3 { font-size:14.5px; font-weight:600; color:var(--n-800); } .drawer-bd { flex:1; overflow:auto; padding:16px 18px; } .drawer-ft { padding:12px 18px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid rgba(29,36,48,.07); background:rgba(255,255,255,.4); } .modal { width:552px; max-width:92vw; border-radius:var(--r-2xl); overflow:hidden; background:rgba(255,255,255,.8); backdrop-filter:var(--blur-l); -webkit-backdrop-filter:var(--blur-l); border:1px solid rgba(255,255,255,.85); box-shadow:var(--shadow-4), inset 0 1px 0 #fff; animation:rise .2s cubic-bezier(.32,.72,0,1); } .modal .m-hd { padding:16px 20px 12px; font-size:15px; font-weight:600; color:var(--n-800); } .modal .m-bd { padding:0 20px 18px; max-height:64vh; overflow:auto; } .modal .m-ft { padding:12px 20px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid rgba(29,36,48,.07); background:rgba(255,255,255,.35); } .close-x { margin-left:auto; border:0; background:rgba(29,36,48,.05); width:26px; height:26px; border-radius:50%; color:var(--n-500); font-size:13px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center; } .close-x:hover { background:rgba(29,36,48,.1); color:var(--n-700); } /* ===== 演示导览：悬浮玻璃 dock ===== */ .tourbar { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); width:min(1080px, calc(100vw - 44px)); height:64px; display:flex; align-items:center; gap:16px; padding:0 12px 0 14px; z-index:90; border-radius:var(--r-xl); background:rgba(255,255,255,.62); backdrop-filter:var(--blur-l); -webkit-backdrop-filter:var(--blur-l); border:1px solid rgba(255,255,255,.8); box-shadow:var(--shadow-4), inset 0 1px 0 #fff; } .tourbar .tb-lines { display:flex; gap:3px; padding:3px; border-radius:11px; flex:0 0 auto; background:rgba(29,36,48,.055); box-shadow:inset 0 1px 2px rgba(17,24,39,.05); } .tourbar .tb-lines .t { padding:5px 11px; border-radius:8px; font-size:12px; background:transparent; color:var(--n-600); cursor:pointer; white-space:nowrap; transition:.15s; } .tourbar .tb-lines .t:hover { color:var(--n-800); } .tourbar .tb-lines .t.on { background:#fff; color:var(--brand-700); font-weight:500; box-shadow:0 1px 2px rgba(17,24,39,.09), inset 0 1px 0 #fff; } .tourbar .tb-main { flex:1; min-width:0; padding-left:2px; } .tourbar .tb-no { font-size:10.5px; color:var(--n-500); } .tourbar .tb-row { display:flex; align-items:baseline; gap:9px; margin-top:1px; } .tourbar .tb-t { font-size:13px; font-weight:600; color:var(--n-800); white-space:nowrap; } .tourbar .tb-d { font-size:12px; color:var(--n-600); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tourbar .tb-ft { display:flex; align-items:center; gap:7px; flex:0 0 auto; } .tourbar .tb-hint { font-size:10.5px; color:var(--n-400); } /* ===== 身份切换 ===== */ .identity { display:flex; align-items:center; gap:8px; height:36px; padding:0 10px 0 6px; border-radius:11px; cursor:pointer; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.75); box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(17,24,39,.04); transition:.15s; } .identity:hover { background:#fff; box-shadow:var(--shadow-1), inset 0 1px 0 #fff; } .identity .id-ic { width:24px; height:24px; border-radius:50%; color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--brand-500),var(--brand-700)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } .identity .id-tx { display:flex; flex-direction:column; line-height:1.16; } .identity .id-nm { font-size:12px; color:var(--n-800); font-weight:500; } .identity .id-sub { font-size:10px; color:var(--n-500); } .identity .caret { color:var(--n-400); font-size:8px; margin-left:2px; } .idmenu { position:absolute; top:60px; left:250px; width:352px; z-index:120; overflow:hidden; border-radius:var(--r-lg); background:rgba(255,255,255,.82); backdrop-filter:var(--blur-l); -webkit-backdrop-filter:var(--blur-l); border:1px solid rgba(255,255,255,.85); box-shadow:var(--shadow-4), inset 0 1px 0 #fff; animation:rise .16s cubic-bezier(.32,.72,0,1); } .idmenu .im-hd { padding:9px 13px; font-size:11px; color:var(--n-500); border-bottom:1px solid rgba(29,36,48,.06); } .idmenu .im-it { padding:8px 13px; display:flex; gap:9px; align-items:center; cursor:pointer; transition:.13s; } .idmenu .im-it:hover { background:rgba(91,141,239,.07); } .idmenu .im-it.on { background:rgba(91,141,239,.10); } .idmenu .im-it .im-n { font-size:12.5px; color:var(--n-800); display:flex; gap:6px; align-items:center; } .idmenu .im-it .im-r { font-size:11px; color:var(--n-500); } .idmenu .im-path { font-size:10px; color:var(--brand-700); background:rgba(91,141,239,.1); border-radius:5px; padding:1px 5px; } .identity-strip { height:24px; display:flex; align-items:center; gap:8px; padding:0 12px; font-size:11px; border-radius:var(--r-md); background:rgba(91,141,239,.1); color:var(--brand-800); } .identity-strip b { color:var(--brand-900); font-weight:600; } /* ===== 杂项 ===== */ .divider { height:1px; background:rgba(29,36,48,.075); margin:13px 0; } .kv { display:grid; grid-template-columns:92px 1fr; gap:7px 12px; font-size:12.5px; } .kv dt { color:var(--n-500); } .kv dd { color:var(--n-700); } .list-rows > * + * { border-top:1px solid rgba(29,36,48,.06); } .lr { padding:9px 0; display:flex; gap:10px; align-items:flex-start; } .lr .lr-t { font-size:12.5px; color:var(--n-700); } .lr .lr-d { font-size:11px; color:var(--n-500); margin-top:2px; } .chip { display:inline-flex; align-items:center; gap:5px; height:25px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,.62); border:1px solid rgba(29,36,48,.08); font-size:11.5px; color:var(--n-600); } .chip.on { background:rgba(91,141,239,.12); border-color:rgba(91,141,239,.24); color:var(--brand-700); font-weight:500; } .timeline { position:relative; padding-left:17px; } .timeline::before { content:""; position:absolute; left:4px; top:5px; bottom:5px; width:1px; background:rgba(29,36,48,.1); } .tl-item { position:relative; padding-bottom:13px; } .tl-item::before { content:""; position:absolute; left:-16px; top:4px; width:7px; height:7px; border-radius:50%; background:var(--brand-500); box-shadow:0 0 0 2.5px rgba(255,255,255,.95); } .tl-item .tl-t { font-size:12.5px; color:var(--n-800); font-weight:500; } .tl-item .tl-d { font-size:11px; color:var(--n-500); margin-top:2px; } .risk { color:var(--danger-fg); font-weight:500; } .hint { font-size:11.5px; color:var(--n-500); } .checklist .ck { display:flex; gap:10px; padding:10px 0; align-items:flex-start; } .checklist .ck + .ck { border-top:1px solid rgba(29,36,48,.06); } .checklist .ck-i { width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex:0 0 19px; margin-top:1px; } .checklist .ck-i.ok { background:var(--ok-tint); color:var(--ok-fg); } .checklist .ck-i.block { background:var(--danger-tint); color:var(--danger-fg); } .checklist .ck-i.todo { background:var(--warn-tint); color:var(--warn-fg); } .section-tt { font-size:12.5px; font-weight:600; color:var(--n-800); margin-bottom:9px; display:flex; align-items:center; gap:8px; } .section-tt .line { flex:1; height:1px; background:rgba(29,36,48,.08); } .hl { background:rgba(255,171,0,.18); padding:0 3px; border-radius:3px; } .sticky-sum { position:sticky; top:0; } .scroll-y { overflow:auto; } /* ===== 图标系统（把历史文本符号统一为细描边 svg） ===== */ .gi { display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; vertical-align:-0.14em; } .gi svg { width:100%; height:100%; display:block; } .banner .bi .gi { width:17px; height:17px; vertical-align:0; } .empty .e-ic .gi { width:100%; height:100%; } .ck-i .gi, .step .n .gi, .fi-n .gi, .pc-check .gi { width:11px; height:11px; vertical-align:0; } .kpi .k-top .gi { width:12px; height:12px; color:var(--n-400); vertical-align:-.1em; } /* ============================================================================ v2 · 统一基线 + macOS 动效系统 1) 把 5 位作者各自的字号/间距/圆角/边框漂移收敛到一套 token 2) 动效遵循 macOS 手感：弹簧曲线、短时长、只动 transform/opacity、 进入略慢带轻微过冲、退出更快，列表错峰入场 ============================================================================ */ :root { --fs-display: 25px; --fs-h1: 21px; --fs-h2: 15px; --fs-h3: 13.5px; --fs-body: 13.5px; --fs-table: 12.5px; --fs-meta: 11.5px; --fs-micro: 11px; --ease-spring: cubic-bezier(.32,.72,0,1); --ease-spring-soft: cubic-bezier(.22,.9,.28,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in: cubic-bezier(.4,0,1,1); --t-1: 120ms; --t-2: 200ms; --t-3: 320ms; --t-4: 460ms; } /* ---------- 1. 字体基线：标题/表格/元信息三档锁定 ---------- */ .page-head h1 { font-size: var(--fs-h1) !important; line-height: 1.38 !important; letter-spacing: -.015em; } .page-head .sub { font-size: var(--fs-meta) !important; } .card-hd h3 { font-size: var(--fs-h3) !important; letter-spacing: -.005em; } .section-tt { font-size: var(--fs-meta) !important; letter-spacing: .01em; } table.tb td { font-size: var(--fs-table); line-height: 1.5; } table.tb.compact td { font-size: 12px; } table.tb.dense td { font-size: 11.5px; } table.tb th { font-size: var(--fs-micro); letter-spacing: .02em; } .kpi .k-top { font-size: var(--fs-micro); letter-spacing: .01em; } .kpi .k-foot { font-size: var(--fs-micro); } .kpi .k-val { letter-spacing: -.025em; } .muted, .hint, .xs { letter-spacing: .005em; } /* ---------- 2. 组件基线：卡片 / 表头 / 徽标 / 按钮尺寸统一 ---------- */ .card { border-radius: var(--r-lg); } .card-hd { min-height: 45px; padding: 11px 15px; } .card-bd { padding: 15px; } .card-bd > *:first-child { margin-top: 0; } .card-bd > *:last-child { margin-bottom: 0; } .kpi { padding: 14px 15px; } .banner { padding: 11px 13px; border-radius: 12px; } .badge { height: 20px; padding: 0 7px; border-radius: 7px; font-size: var(--fs-micro); } .tag { height: 19px; border-radius: 6px; font-size: 10.5px; } .btn { border-radius: 10px; font-weight: 500; } .btn:is(.btn-primary, .btn-accent) { font-weight: 500; } .input, .select, textarea.input { border-radius: 10px; font-size: var(--fs-body); } /* 表格行高统一（各视图曾出现 32/34/36/40 混用） */ table.tb td { padding-top: 8px; padding-bottom: 8px; } table.tb.compact td { padding-top: 6px; padding-bottom: 6px; } table.tb.dense td { padding-top: 4px; padding-bottom: 4px; } /* 统一分隔线 */ .divider { background: rgba(29,36,48,.075); } /* ---------- 3. 动效：入场、错峰、按压、悬停 ---------- */ @keyframes vRise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } @keyframes vFade { from { opacity: 0; } to { opacity: 1; } } @keyframes rowIn { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } } @keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes drawerIn { from { opacity: .4; transform: translate3d(36px, 0, 0) scale(.985); } to { opacity: 1; transform: none; } } @keyframes sheetIn { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.965); } to { opacity: 1; transform: none; } } @keyframes menuIn { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.98); } to { opacity: 1; transform: none; } } /* 视图整体入场：直接子块错峰（模拟 macOS 窗口内容渐显） */ .view-in > * { animation: vRise var(--t-4) var(--ease-out) both; } .view-in > *:nth-child(1) { animation-delay: 0ms; } .view-in > *:nth-child(2) { animation-delay: 28ms; } .view-in > *:nth-child(3) { animation-delay: 56ms; } .view-in > *:nth-child(4) { animation-delay: 84ms; } .view-in > *:nth-child(5) { animation-delay: 108ms; } .view-in > *:nth-child(6) { animation-delay: 130ms; } .view-in > *:nth-child(n+7) { animation-delay: 150ms; } /* 表格前 10 行错峰入场（更长的表不再逐行动画，避免卡顿） */ table.tb tbody tr { animation: rowIn 340ms var(--ease-out) both; } table.tb tbody tr:nth-child(1) { animation-delay: 40ms; } table.tb tbody tr:nth-child(2) { animation-delay: 58ms; } table.tb tbody tr:nth-child(3) { animation-delay: 76ms; } table.tb tbody tr:nth-child(4) { animation-delay: 94ms; } table.tb tbody tr:nth-child(5) { animation-delay: 110ms; } table.tb tbody tr:nth-child(6) { animation-delay: 124ms; } table.tb tbody tr:nth-child(7) { animation-delay: 138ms; } table.tb tbody tr:nth-child(8) { animation-delay: 150ms; } table.tb tbody tr:nth-child(9) { animation-delay: 160ms; } table.tb tbody tr:nth-child(10) { animation-delay: 170ms; } table.tb tbody tr:nth-child(n+11) { animation-delay: 0ms; animation-duration: 200ms; } /* 额度条生长（macOS 的"填充"手感） */ .bar > i, .mini-bar > i { transform-origin: left center; animation: growX 620ms var(--ease-out) both; } .bar > i:nth-child(2) { animation-delay: 60ms; } .bar > i:nth-child(3) { animation-delay: 120ms; } /* 按钮：悬停轻抬 + 按压回弹 */ .btn { transition: background var(--t-1) var(--ease-spring), border-color var(--t-1) var(--ease-spring), box-shadow var(--t-2) var(--ease-spring), transform 90ms var(--ease-spring), color var(--t-1); } .btn:hover { transform: translateY(-.5px); } .btn:active { transform: scale(.972) translateY(0); } .btn-primary:hover, .btn-accent:hover { transform: translateY(-1px); } .icon-btn { transition: background var(--t-2) var(--ease-spring), transform 100ms var(--ease-spring), color var(--t-1), box-shadow var(--t-2); } .icon-btn:active { transform: scale(.9); } /* 导航 / 标签 / 分段：切换顺滑 */ .nav-item { transition: background var(--t-2) var(--ease-spring), color var(--t-1), box-shadow var(--t-2) var(--ease-spring), transform 100ms var(--ease-spring); } .nav-item:active { transform: scale(.985); } .tab, .seg .s { transition: background var(--t-2) var(--ease-spring), color var(--t-1), box-shadow var(--t-2) var(--ease-spring), transform 100ms var(--ease-spring); } .tab:active, .seg .s:active { transform: scale(.97); } /* 卡片 / KPI 悬停抬起（有交互意味的才抬，静态卡不动） */ .kpi, .pay-card, .card.interactive { transition: transform var(--t-2) var(--ease-spring), box-shadow var(--t-2) var(--ease-spring), border-color var(--t-2), background var(--t-2); } .kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.9); } .pay-card:hover { transform: translateY(-1px); } /* 抽屉 / 弹层 / 菜单：弹簧入场（覆盖旧的线性动画） */ .overlay { animation: overlayIn var(--t-2) var(--ease-out) both; } .drawer { animation: drawerIn var(--t-4) var(--ease-spring-soft) both; } .modal { animation: sheetIn var(--t-4) var(--ease-spring-soft) both; } .idmenu { animation: menuIn var(--t-2) var(--ease-spring-soft) both; } /* 树节点展开/收起（不改结构，仅给子层淡入） */ .tree-children:not(.hide) { animation: vFade var(--t-2) var(--ease-out) both; } /* 页头操作区与首屏标题的进入 */ .page-head { animation: vRise var(--t-4) var(--ease-out) both; } /* 关注环：键盘可达性 */ .btn:focus-visible, .nav-item:focus-visible, .input:focus-visible, .select:focus-visible, .tab:focus-visible, .tree-node:focus-visible { outline: 2px solid rgba(91,141,239,.55); outline-offset: 2px; } /* ---------- 4. 尊重"减弱动态效果"（macOS 同源设置） ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- 5. 框架层修正（由视图作者反馈） ---------- */ /* .center 只用于布局居中，不应让弹层文字继承居中 */ .modal, .drawer { text-align: left; } .overlay.center .modal .m-bd, .overlay.center .modal .m-hd { text-align: left; } /* 支付来源卡的 140px 最小高度只属于 G07，其它页面用自然高度 */ .pay-card { min-height: 0; } .pay-card.tall { min-height: 136px; } /* ---------- 6. 收尾细节：滚动、停靠条、身份卡 ---------- */ .content { scroll-behavior: smooth; } .tourbar { transition: box-shadow var(--t-3) var(--ease-spring), transform var(--t-3) var(--ease-spring); } .tourbar:hover { box-shadow: 0 6px 14px rgba(17,24,39,.06), 0 30px 80px rgba(17,24,39,.16), inset 0 1px 0 #fff; } .tourbar .tb-lines .t { transition: background var(--t-2) var(--ease-spring), color var(--t-1), transform 100ms var(--ease-spring); } .tourbar .tb-lines .t:active { transform: scale(.96); } .identity { transition: background var(--t-2) var(--ease-spring), box-shadow var(--t-2) var(--ease-spring), transform var(--t-2) var(--ease-spring); } .identity:hover { transform: translateY(-.5px); } .searchbox { transition: background var(--t-2) var(--ease-spring), border-color var(--t-2), box-shadow var(--t-2) var(--ease-spring), width var(--t-3) var(--ease-spring); } .searchbox:focus-within { width: 300px; } /* 树节点与列表行的微交互 */ .tree-node { transition: background var(--t-1) var(--ease-spring), box-shadow var(--t-2); border-radius: 8px; } .tree-node:active { transform: scale(.995); } .lr { transition: background var(--t-1); } .lr:hover { background: rgba(91,141,239,.04); } /* 链接的细微反馈 */ a { transition: color var(--t-1); } /* ---------- 7. 演示导览：折叠成右下角小胶囊（默认收起） ---------- */ .tour { position: fixed; right: 18px; bottom: 18px; z-index: 90; } .tour.collapsed .tour-pill { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer; font-family: inherit; background: rgba(255,255,255,.72); backdrop-filter: var(--blur-l); -webkit-backdrop-filter: var(--blur-l); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 2px 6px rgba(17,24,39,.06), 0 12px 30px rgba(17,24,39,.14), inset 0 1px 0 #fff; transition: transform var(--t-2) var(--ease-spring), box-shadow var(--t-2) var(--ease-spring), background var(--t-2); animation: sheetIn var(--t-3) var(--ease-spring-soft) both; } .tour.collapsed .tour-pill:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 4px 10px rgba(17,24,39,.08), 0 16px 38px rgba(17,24,39,.16), inset 0 1px 0 #fff; } .tour.collapsed .tour-pill:active { transform: scale(.98); } .tour-pill .tp-ic { display:flex; width:16px; height:16px; color:var(--brand-600); } .tour-pill .tp-tx { display:flex; flex-direction:column; line-height:1.15; text-align:left; } .tour-pill .tp-tx b { font-size:12px; font-weight:600; color:var(--n-800); } .tour-pill .tp-tx i { font-size:10.5px; font-style:normal; color:var(--n-500); } .tour-pill .tp-chev { display:flex; width:12px; height:12px; color:var(--n-400); transform:rotate(180deg); } .tour.open { width: 352px; max-width: calc(100vw - 36px); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.8); backdrop-filter: var(--blur-l); -webkit-backdrop-filter: var(--blur-l); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 6px 16px rgba(17,24,39,.08), 0 30px 80px rgba(17,24,39,.18), inset 0 1px 0 #fff; animation: sheetIn var(--t-4) var(--ease-spring-soft) both; } .tour-hd { display:flex; align-items:center; gap:8px; padding:9px 10px 9px 13px; border-bottom:1px solid rgba(29,36,48,.06); background:linear-gradient(180deg,rgba(255,255,255,.55),transparent); } .tour-hd .th-t { font-size:11px; font-weight:600; color:var(--n-500); letter-spacing:.06em; } .tour-hd .th-lines { display:flex; gap:3px; padding:2px; border-radius:9px; background:rgba(29,36,48,.055); box-shadow:inset 0 1px 2px rgba(17,24,39,.05); } .tour-hd .th-lines .t { padding:3px 9px; border-radius:7px; font-size:11.5px; color:var(--n-600); cursor:pointer; transition:background var(--t-2) var(--ease-spring), color var(--t-1), box-shadow var(--t-2); white-space:nowrap; } .tour-hd .th-lines .t:hover { color:var(--n-800); } .tour-hd .th-lines .t.on { background:#fff; color:var(--brand-700); font-weight:500; box-shadow:0 1px 2px rgba(17,24,39,.09), inset 0 1px 0 #fff; } .tour-hd .th-min { margin-left:auto; width:24px; height:24px; border-radius:7px; border:0; background:transparent; color:var(--n-500); display:flex; align-items:center; justify-content:center; transition:background var(--t-1); } .tour-hd .th-min:hover { background:rgba(29,36,48,.06); color:var(--n-700); } .tour-hd .th-min svg { width:13px; height:13px; } .tour-bd { padding:11px 13px 12px; } .tour-no { font-size:10.5px; color:var(--n-500); } .tour-off { color:var(--accent-700); } .tour-title { font-size:13.5px; font-weight:600; color:var(--n-800); margin-top:2px; } .tour-desc { font-size:12px; color:var(--n-600); margin-top:5px; line-height:18px; } .tour-ft { display:flex; align-items:center; gap:7px; padding:9px 13px; border-top:1px solid rgba(29,36,48,.06); background:rgba(255,255,255,.4); } .tour-ft .tour-hint { font-size:10.5px; color:var(--n-400); margin-right:auto; } .tour-ft .btn:first-of-type:not(.btn-accent) { margin-left:auto; } /* 收起后内容区不再需要为通栏让位 */ .content, .app.immersive .content { padding-bottom: 28px; } /* ---------- 8. 折叠胶囊的落位微调：更小、贴角、给内容留避让 ---------- */ .content, .app.immersive .content { padding-bottom: 68px; } .tour { right: 14px; bottom: 14px; } .tour.collapsed .tour-pill { height: 36px; padding: 0 11px 0 9px; gap: 7px; } .tour-pill .tp-ic { width: 14px; height: 14px; } .tour-pill .tp-tx b { font-size: 11.5px; } .tour-pill .tp-tx i { font-size: 10px; } /* ---------- 9. 顶栏图标：与液态玻璃对齐（更小、更轻、更贴合） ---------- */ .top-actions { gap: 2px; } .icon-btn { width: 30px; height: 30px; border-radius: 9px; color: var(--n-500); border: 1px solid transparent; } .icon-btn svg, .icon-btn .ic { width: 16px; height: 16px; display: block; } .icon-btn:hover { color: var(--brand-700); background: rgba(255,255,255,.72); border-color: rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(17,24,39,.05), inset 0 1px 0 #fff; } .icon-btn:active { transform: scale(.94); } .icon-btn .dot { top: 6px; right: 6px; width: 5px; height: 5px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.95); } .avatar { width: 28px; height: 28px; font-size: 11.5px; } /* 搜索框一并收一点，视觉重量更均衡 */ .searchbox { height: 32px; width: 250px; border-radius: 9px; } .searchbox svg { width: 14px; height: 14px; flex: 0 0 14px; } .searchbox input { font-size: 12px; } /* 顶栏右侧整体右对齐间距 */ .topbar .top-actions { margin-left: 4px; } /* ---------- 10. 左侧导航：不再自动折叠，改为用户点击控制 ---------- */ .nav-head { display: flex; align-items: center; gap: 6px; padding: 2px 6px 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(29,36,48,.06); } .nav-head .nh-t { flex: 1; padding-left: 2px; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; color: var(--n-500); } .nav-toggle { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--n-500); display: flex; align-items: center; justify-content: center; transition: background var(--t-2) var(--ease-spring), color var(--t-1), border-color var(--t-2), box-shadow var(--t-2), transform 100ms var(--ease-spring); } .nav-toggle:hover { background: rgba(255,255,255,.72); border-color: rgba(255,255,255,.9); color: var(--brand-700); box-shadow: 0 1px 2px rgba(17,24,39,.05), inset 0 1px 0 #fff; } .nav-toggle:active { transform: scale(.94); } .nav-toggle svg { width: 14px; height: 14px; transform: rotate(180deg); transition: transform var(--t-2) var(--ease-spring); } .app.nav-mini .nav-head { justify-content: center; border-bottom: 0; padding: 2px 0 8px; } .app.nav-mini .nav-head .nh-t { display: none; } .app.nav-mini .nav-toggle svg { transform: rotate(0deg); } /* ============================================================================ 11. 布局契约（全局强约束） 规则编号对应 README 第十一节《布局规则》，任何页面都必须满足： L1 间距只用 4/8 基准：区块 14px、行内 12px、紧凑 8px L2 同一行的卡片必须等高（卡片=flex 列，卡体自动撑满） L3 表格列宽按内容自然展开；容器不足时卡片内横向滚动，绝不挤压换行 L4 短字段（金额/编号/时间/状态/标签）一律不换行 L5 卡片头标题单行省略，不换行撑高 L6 卡片内首尾元素不留多余外边距 ============================================================================ */ :root { --gap-block: 14px; --gap-inline: 12px; --gap-tight: 8px; } /* L1 间距统一 */ .row, .grid, .stack { gap: var(--gap-block); } .stack-s { gap: var(--gap-tight); } .filters, .page-head .actions { gap: 8px; } /* L2 等高卡片 */ .grid > .card, .row > .card, .grid > .kpi, .row > .kpi { display: flex; flex-direction: column; min-width: 0; } .grid > .card > .card-bd, .row > .card > .card-bd { flex: 1 1 auto; min-height: 0; } .grid > .card > .card-hd, .row > .card > .card-hd { flex: 0 0 auto; } /* 卡体最后一屏不需要多余留白 */ .card-bd > .row, .card-bd > .grid, .card-bd > .stack { margin: 0; } /* L3 表格不挤压：列宽按内容，容器不足则卡片内横向滚动 */ .table-wrap { overflow-x: auto; overflow-y: visible; } table.tb { width: max-content; min-width: 100%; } table.tb td { min-width: 56px; } table.tb th { min-width: 56px; } table.tb td.num, table.tb th.num { min-width: 80px; } /* L4 短字段不换行 */ table.tb .num, table.tb .mono, table.tb .nowrap, table.tb .badge, table.tb .tag, table.tb .amount, td .tag, td .badge, .kpi .k-val, .kv dd { white-space: nowrap; } td .tag + .tag, td .badge + .badge { margin-left: 4px; } /* L5 卡片头单行 */ .card-hd h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .card-hd .extra { flex: 0 0 auto; } /* L6 长文本换行策略（不断词、不撑破布局） */ table.tb td, .lr-t, .lr-d, .tour-desc, .hint { overflow-wrap: anywhere; } .page-head { flex-wrap: wrap; } /* 两栏布局里固定侧栏的最小宽度保护 */ .row > [style*="width:340px"], .row > [style*="width:360px"], .row > [style*="width:320px"] { flex-shrink: 0; } /* L7 表格内的 flex 行（标签组、按钮组）必须可换行，避免把表格撑到超宽 */ table.tb td [style*="display:flex"], table.tb td [style*="display: flex"] { flex-wrap: wrap; row-gap: 4px; column-gap: 6px; } table.tb td .tag, table.tb td .badge { max-width: 100%; } /* L8 表格容器内不出现"局部超宽把整页撑开" */ .table-wrap { max-width: 100%; } /* L9 修正：表格不再用 max-content（遇到可换行的 flex 行会按单行算宽，把表撑爆） 改为：占满容器 + 每列最小宽度保护；容器真的不够时卡片内横向滚动 */ table.tb { width: 100%; min-width: 660px; table-layout: auto; } table.tb td, table.tb th { min-width: 56px; } table.tb td.num, table.tb th.num { min-width: 84px; } table.tb td:first-child, table.tb th:first-child { min-width: 96px; } /* ============================================================================ 12. BOM 工作台：复选框列 / 可拖拽分栏 ============================================================================ */ /* L10 复选框列不参与"首列最小 96px"规则，否则选框离内容太远 */ table.tb th:first-child:has(> input[type="checkbox"]), table.tb td:first-child:has(> input[type="checkbox"]), table.tb th:first-child:empty { min-width: 30px; width: 30px; padding-left: 10px; padding-right: 0; } table.tb td:first-child:has(> input[type="checkbox"]) { line-height: 0; } table.tb input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--brand-600); cursor: pointer; } /* 可拖拽分栏 */ .row.resizable { align-items: stretch; } .row.resizable > .rs-pane { min-width: 0; min-height: 0; overflow: hidden; } .row.resizable > .rs-pane.grow { flex: 1 1 auto; } .rs-bar { flex: 0 0 8px; width: 8px; cursor: col-resize; border-radius: 4px; position: relative; background: transparent; transition: background var(--t-1); } .rs-bar::after { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 2px; height: 26px; border-radius: 2px; background: rgba(29,36,48,.14); transition: background var(--t-1), height var(--t-2) var(--ease-spring); } .rs-bar:hover::after, .rs-bar.dragging::after { background: var(--brand-500); height: 44px; } .rs-bar.dragging { background: rgba(91,141,239,.08); } body.rs-dragging { cursor: col-resize !important; user-select: none; } body.rs-dragging * { cursor: col-resize !important; } /* BOM 明细表：紧凑但不拥挤 */ #c04-tbl table.tb.dense td { padding: 4px 8px; line-height: 18px; } #c04-tbl table.tb.dense th { padding: 5px 8px; } /* 选中行高亮 */ table.tb tbody tr.rs-selected td { background: rgba(91,141,239,.12) !important; } /* L11 密集表格（BOM 明细）：列宽收紧 + 可切列，保证关键列不被挤出 */ table.tb.dense { min-width: 0; } table.tb.dense td, table.tb.dense th { min-width: 36px; padding-left: 6px; padding-right: 6px; } table.tb.dense td.num, table.tb.dense th.num { min-width: 58px; } table.tb.dense td:first-child, table.tb.dense th:first-child { min-width: 28px; padding-left: 10px; } /* 紧凑模式：隐藏「来源」(9) 与「备注」(11) 两列 */ table.tb.c04-compact > thead > tr > th:nth-child(9), table.tb.c04-compact > tbody > tr > td:nth-child(9), table.tb.c04-compact > thead > tr > th:nth-child(11), table.tb.c04-compact > tbody > tr > td:nth-child(11) { display: none; } /* ============================================================================ 13. 间距收紧 + 全站卡片可拖拽（无把手，靠间隙自然拖） ============================================================================ */ :root { --gap-block: 10px; --gap-inline: 10px; --gap-tight: 8px; } .row, .grid, .stack { gap: var(--gap-block); } /* 可拖拽的行：间隙由拖拽带本身提供，卡片之间更紧凑 */ .row:has(> .rs-bar) { gap: 0; } .rs-bar { flex: 0 0 8px; width: 8px; cursor: col-resize; position: relative; background: transparent; transition: background var(--t-1); } .rs-bar::after { content: none !important; } /* 不要把手图标 */ .rs-bar:hover, .rs-bar.dragging { background: rgba(91,141,239,.07); } body.rs-dragging { cursor: col-resize !important; user-select: none; } body.rs-dragging * { cursor: col-resize !important; } /* 拖动时的视觉反馈：被调整的卡片轻微高亮 */ .rs-pane.rs-active { box-shadow: 0 0 0 1.5px rgba(91,141,239,.35) inset; border-radius: var(--r-lg); } /* 分页条：窄窗口下不再把文字挤成竖排 */ #c04-pager { flex-wrap: wrap; row-gap: 6px; } #c04-pager > span { white-space: nowrap; } #c04-pager > div { flex-wrap: wrap; } /* 窄窗口（<1100px）下卡片内边距收紧一点，换取内容宽度 */ @media (max-width: 1100px) { .card-bd { padding: 12px; } .card-hd { padding: 9px 12px; min-height: 40px; } .content { padding-left: 10px; padding-right: 10px; } } /* ============================================================================ 14. 响应式：窄窗口下"可拖拽多栏"自动改为竖向堆叠（否则三栏互挤崩坏） ============================================================================ */ /* 卡片头防挤压：标题省略、右侧操作不掉行内重叠 */ .card-hd { flex-wrap: wrap; row-gap: 4px; } .card-hd h3 { min-width: 0; flex: 0 1 auto; } .card-hd .extra { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } @media (max-width: 1180px) { /* 多栏 → 竖排 */ .row.resizable, .row:has(> .rs-bar) { flex-direction: column; gap: 10px; height: auto !important; } .row:has(> .rs-bar) > .rs-bar { display: none; } .row:has(> .rs-bar) > .rs-pane { width: auto !important; flex: 0 0 auto !important; min-height: 0; } /* BOM 工作台：三块各自固定高度，卡片内部滚动 */ .row[data-rid="c04"] > .rs-pane:nth-child(1) { height: 248px; } .row[data-rid="c04"] > .rs-pane.grow { height: 540px; } .row[data-rid="c04"] > .rs-pane:last-child { height: auto; min-height: 300px; } .row[data-rid="c04"] > .rs-pane:last-child > #c04-side { height: 300px; } } /* 表格右侧留白：紧凑模式最后一列不贴卡片边 */ #c04-tbl { padding: 0 8px 0 0; } #c04-tbl table.tb.dense th:last-of-type, #c04-tbl table.tb.dense td:last-of-type { padding-right: 10px; } /* ============================================================================ 15. 物料库：复选框列修正 + 列表/矩阵双视图 ============================================================================ */ /* 复选框常被包在