/* ========================================================================== 纷齐集团有限公司内网门户 —— 后台管理样式 v2 风格：互联网化（大字号 / 卡片浮起 / 渐变 / 图标化） 品牌：Logo #004EAD　·　主色 #1156E8　·　思源黑体 + Inter ========================================================================== */ *{margin:0;padding:0;box-sizing:border-box} :root{ /* 主色梯度（沿用前台） */ --brand:#1156E8;--brand-d:#0E4BC7;--brand-l:#2E72EE; --brand-50:#EEF3FE;--brand-100:#DCE7FD;--brand-200:#B9CFFB;--brand-700:#0B3FA8; /* 品牌色（Logo） */ --logo:#004EAD;--logo-deep:#00327A;--logo-lite:#1B74D6; /* 明度梯度 */ --c1:#0B3FA8;--c2:#0E4BC7;--c3:#1156E8;--c4:#2E72EE;--c5:#5A90F2; /* 中性 */ --bg:#F4F7FD;--bg-2:#FAFCFF;--bg-3:#EDF2FB;--card:#F7FAFF;--card-2:#E6EEFC; --line:#E3EAF7;--line-2:#CFDCF2;--line-3:#B4C8EC; /* 旧别名：审批流与审计报表模块从原型迁移过来时沿用了 --bd / --bg2 / --gold。 未定义会让整条声明失效（进度条变白、步骤卡无边框无底色）， 这里补齐映射，指向本表已有的中性色与品牌色。 */ --bd:var(--line-2);--bg2:var(--card);--gold:var(--c5); /* 三级文字 --tx3 是最浅的一档，用在面包屑、统计小字、侧栏分组名上。 原值 #9AA1B1 在白卡片上只有 2.59:1、在页面底色上只有 2.41:1， 远低于 WCAG AA 对正文的 4.5:1 要求 —— 巡检实测 31 个页面 全部命中，本质是「灰得看不清」。 调到 #666E7D 后：白卡片 5.13:1、页面底 4.78:1，两种底色都达标， 且仍明显浅于 --tx2(#5C6273, 6.09:1)，三级层次没有塌掉。 */ --tx:#16181D;--tx2:#5C6273;--tx3:#666E7D; /* 语义 */ --ok:#0A7A39;--ok-bg:#E3F6EB;--ok-bd:#B9E4CC; --warn:#9C5A06;--warn-bg:#FFF6E6;--warn-bd:#F2DFBB; --err:#D02238;--err-bg:#FCE9EC;--err-bd:#F5C9D0; --info:#1156E8;--info-bg:#EEF3FE; /* 阴影 */ --sh-xs:0 1px 2px rgba(16,32,72,.05); --sh-sm:0 2px 10px rgba(16,32,72,.06); --sh-md:0 8px 26px rgba(16,32,72,.09); --sh-lg:0 16px 44px rgba(16,32,72,.14); /* 圆角 */ --r-sm:7px;--r:11px;--r-lg:16px;--r-xl:20px; /* 布局 */ --sb:264px;--hd:68px; /* 字号 */ --fs-xs:13px;--fs-sm:14.5px;--fs:15.5px;--fs-md:17px;--fs-lg:20px; --fs-xl:25px; --f:"Source Han Sans SC","Noto Sans SC","SourceHanSansSC", "Microsoft YaHei","PingFang SC",sans-serif; --fnum:"Inter","Source Han Sans SC","Noto Sans SC","Segoe UI",system-ui,sans-serif; --fmono:"JetBrains Mono","SFMono-Regular",Consolas,Monaco,monospace; } body{ font-family:var(--f); background:var(--bg);color:var(--tx); font-size:var(--fs);line-height:1.75;-webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{display:block} /* 数字与英文走 Inter */ .tb td:not(:first-child),.si b,.si em,.kv b, .kv,.docno,.dt td,.tb .cd2,code,.cd2,.mono{ font-family:var(--fnum);font-variant-numeric:tabular-nums; } /* 滚动进场：仅位移，不做透明度 */ .rise{opacity:1;transform:none} html.js-anim .rise{transform:translateY(16px);transition:transform .42s cubic-bezier(.22,.8,.3,1)} html.js-anim .rise.in{transform:none} @media(prefers-reduced-motion:reduce){html.js-anim .rise{transform:none!important;transition:none!important}} /* ========================================================================== 顶栏 ========================================================================== */ .hd{ height:var(--hd);background:#fff; display:flex;align-items:center;padding:0 24px;gap:14px; position:fixed;top:0;left:0;right:0;z-index:100; box-shadow:0 1px 0 rgba(16,32,72,.06),0 4px 18px rgba(16,32,72,.06); } .hd .lg{ display:flex;align-items:center;gap:13px;font-weight:700;font-size:18px; letter-spacing:-.2px;flex-shrink:0; } .hd .lg img{height:38px;width:auto} .hd .lg .cn{display:flex;flex-direction:column;line-height:1.22} .hd .lg .cn b{font-size:17px;font-weight:700} .hd .lg .cn em{ /* 12px：原来 10.5px 在 2x 屏和缩放 125% 的笔记本上几乎糊成一团， 而且字母间距 2.2px 让它显得更挤。放大到 12px 后可读， 靠 letter-spacing 保留英文全大写的正式感。 */ font-style:normal;font-size:13px;color:var(--tx3);letter-spacing:1.6px; font-family:var(--fnum);font-weight:600; } .hd .tg{ padding:6px 15px;border-radius:999px;font-size:var(--fs-xs);font-weight:600; background:var(--brand-50);color:var(--brand);border:1px solid var(--brand-100); flex-shrink:0; } .hd .sp{flex:1} .hd .u{display:flex;align-items:center;gap:12px;font-size:var(--fs-sm);flex-shrink:0} .hd .u .av{ width:38px;height:38px;border-radius:50%;color:#fff; display:grid;place-items:center;font-weight:700;font-size:16px; background:linear-gradient(140deg,var(--logo-deep),var(--brand-l)); box-shadow:0 5px 14px rgba(17,86,232,.28); } .hd .u .who{display:flex;flex-direction:column;line-height:1.28} .hd .u .who b{font-size:var(--fs-sm);font-weight:600} .hd .u .who em{font-style:normal;font-size:13px;color:var(--tx3);font-family:var(--fnum)} .hd .u a{ display:inline-flex;align-items:center;gap:5px; padding:9px 18px;border-radius:999px;font-size:var(--fs-xs);font-weight:500; color:var(--brand);background:var(--brand-50);border:1px solid var(--brand-100); transition:.16s; } .hd .u a:hover{background:var(--brand);color:#fff;border-color:var(--brand)} /* ========================================================================== 侧栏 ========================================================================== */ .sb{ width:var(--sb);background:#fff; position:fixed;top:var(--hd);bottom:0;left:0;overflow-y:auto;z-index:90; padding-bottom:28px; box-shadow:1px 0 0 rgba(16,32,72,.05),4px 0 20px rgba(16,32,72,.04); } .sb::-webkit-scrollbar{width:5px} .sb::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px} .sb::-webkit-scrollbar-thumb:hover{background:var(--line-3)} .sb-tools{ display:flex;gap:9px;padding:14px 16px; border-bottom:1px solid var(--line);background:var(--bg-2); position:sticky;top:0;z-index:3;backdrop-filter:blur(8px); } .sb-tools .tb{ flex:1;padding:8px 0;font-size:var(--fs-xs);font-weight:500; background:#fff;border:1px solid var(--line-2);border-radius:9px; color:var(--tx2);cursor:pointer;font-family:inherit;transition:.15s; } .sb-tools .tb:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)} /* 一级：板块 */ .sec-btn{ width:100%;display:flex;align-items:center;gap:12px; padding:14px 17px;background:transparent;border:none; border-bottom:1px solid var(--line); font-family:inherit;cursor:pointer;text-align:left;transition:.16s; } .sec-btn:hover{background:var(--brand-50)} .sec-btn .sic{ width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0; font-size:16px;transition:.18s;background:var(--bg-3,var(--card-2));color:var(--c3); } .sec-btn[data-sec="0"] .sic{color:var(--c1);background:#E8EFFC} .sec-btn[data-sec="1"] .sic{color:var(--c2);background:#EAF1FD} .sec-btn[data-sec="2"] .sic{color:var(--c3);background:#EDF3FE} .sec-btn:hover .sic{background:var(--brand);color:#fff;box-shadow:0 5px 14px rgba(17,86,232,.28)} .sec-btn .stt{ flex:1;font-size:var(--fs-sm);font-weight:700;letter-spacing:.3px;color:var(--tx); } .sec-btn[aria-expanded="true"] .stt{color:var(--brand)} .caret{ font-size:20px;color:var(--tx3);line-height:1;flex-shrink:0; transition:transform .2s ease;transform:rotate(0deg); } .sec-body{overflow:hidden;max-height:0;transition:max-height .26s ease} .sec-body.open{max-height:900px} /* 二级：分组 */ .grp-btn{ width:100%;display:flex;align-items:center;gap:8px; padding:9px 17px 9px 38px;background:transparent;border:none; font-family:inherit;cursor:pointer;text-align:left;transition:.14s; } .grp-btn:hover{background:var(--brand-50)} .grp-btn .gtt{flex:1;font-size:var(--fs-xs);color:var(--tx3);letter-spacing:.5px;font-weight:500} .grp-btn .gcnt{ /* 12px 并加深字色：原来是 11.5px + --tx3， 侧栏计数在灰蓝底上几乎看不清，很容易漏掉待办数量。 */ font-size:13px;color:var(--tx2);background:var(--card-2); border-radius:8px;padding:1px 8px;font-family:var(--fnum);font-weight:600; } .grp-btn[aria-expanded="true"] .gtt{color:var(--brand);font-weight:600} .grp-panel{overflow:hidden;max-height:0;transition:max-height .24s ease} .grp-panel.open{max-height:600px} /* 三级：菜单项 */ .mi{ display:flex;align-items:center;gap:10px; padding:10px 17px 10px 54px; font-size:var(--fs-sm);color:var(--tx2); border-left:3px solid transparent;transition:.15s;position:relative; } .mi:hover{background:var(--brand-50);color:var(--brand);padding-left:58px} .mi.on{ background:var(--brand-50);color:var(--brand); border-left-color:var(--brand);font-weight:600; } .mi .dot{ width:6px;height:6px;border-radius:50%; background:var(--line-2);flex-shrink:0;transition:.15s; } .mi:hover .dot{background:var(--brand-200)} .mi.on .dot{background:var(--brand);box-shadow:0 0 0 3px rgba(17,86,232,.16)} /* ========================================================================== 主体 ========================================================================== */ .mn{margin-left:var(--sb);padding:calc(var(--hd) + 24px) 28px 56px;min-height:100vh} .crumb{font-size:var(--fs-xs);color:var(--tx3);margin-bottom:16px;display:flex;align-items:center;gap:4px} .crumb b{color:var(--tx2);font-weight:500} .ph{ font-size:var(--fs-xl);color:var(--tx);margin-bottom:22px;font-weight:800; letter-spacing:-.4px;display:flex;align-items:center;gap:13px; } .ph::before{ content:'';width:5px;height:26px;border-radius:3px;flex-shrink:0; background:linear-gradient(180deg,var(--logo-deep),var(--brand-l)); } /* ========================================================================== 卡片 ========================================================================== */ .cd{ background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);padding:24px 28px 22px;margin-bottom:20px; box-shadow:var(--sh-xs);transition:box-shadow .22s; } .cd:hover{box-shadow:var(--sh-sm)} .cd h4{ font-size:var(--fs-md);color:var(--tx);margin-bottom:18px; display:flex;align-items:center;gap:10px;font-weight:700; } .cd h4::before{ content:'';width:4px;height:19px;border-radius:2px;flex-shrink:0; background:linear-gradient(180deg,var(--c2),var(--c5)); } .cd h4 .s{font-size:var(--fs-xs);color:var(--tx3);font-weight:400;margin-left:auto} /* ========================================================================== 统计卡 ========================================================================== */ .st{ display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:16px;margin-bottom:20px; } .si{ position:relative;overflow:hidden; background:linear-gradient(140deg,#fff,var(--card)); border:1px solid var(--line);border-radius:var(--r-lg); padding:20px 22px 18px;box-shadow:var(--sh-xs);transition:.24s; } .si::after{ content:'';position:absolute;right:-26px;top:-26px;width:110px;height:110px; border-radius:50%;background:radial-gradient(circle,rgba(17,86,232,.10),transparent 70%); } .si:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--brand-200)} .si::before{ content:'';position:absolute;left:0;top:18px;bottom:18px;width:4px; border-radius:0 3px 3px 0;background:var(--c3); } .st > .si:nth-child(1)::before{background:var(--c1)} .st > .si:nth-child(2)::before{background:var(--c2)} .st > .si:nth-child(3)::before{background:var(--c3)} .st > .si:nth-child(4)::before{background:var(--c4)} .st > .si:nth-child(5)::before{background:var(--c5)} .st > .si:nth-child(6)::before{background:var(--c2)} .si b{ display:block;font-size:32px;color:var(--tx);line-height:1.14; font-weight:800;letter-spacing:-1px; } .si span{font-size:var(--fs-sm);color:var(--tx2);margin-top:6px;display:block;font-weight:500} .si em{font-style:normal;font-size:13px;color:var(--tx3);display:block;margin-top:3px;font-family:var(--fnum)} /* ========================================================================== 表格 ========================================================================== */ .tbwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px} .tb{ width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm); border:1px solid var(--line);border-radius:var(--r);overflow:hidden; box-shadow:var(--sh-xs); } .tb th{ background:linear-gradient(180deg,var(--brand-50),var(--card)); text-align:left;padding:13px 16px; font-size:var(--fs-xs);color:var(--tx);font-weight:700; border-bottom:1px solid var(--line);white-space:nowrap; } /* 2026-10-20：分隔线画在 tr 上，不再画在每个 td 上。 之前 border-bottom 写在 .tb td 上 —— 同一行各单元格高度不同时 （比如操作列放了 26px 按钮，比文字行高）， 各自的边框就落在不同高度上，看上去「线的宽窄窄宽宽高高低低」。 tr 的边框是横贯整行的，无论单元格多高都对齐成一条线。 */ .tb td{padding:13px 16px;color:var(--tx);vertical-align:middle;border-bottom:none} .tb tbody tr{border-bottom:1px solid var(--line);transition:background .13s} .tb tbody tr:last-child{border-bottom:none} .tb tbody tr:hover{background:var(--brand-50)} .tb .cd2{font-family:var(--fnum);font-size:var(--fs-xs);color:var(--brand);font-weight:700} .tb .sm{font-size:var(--fs-xs);color:var(--tx3);font-family:var(--fnum)} /* 路径 / 文件名这类等宽内容：原来用内联 style 写 11.5px， 是全站最小字号。提到 --fs-xs(13px) 并给等宽字体。 */ .tb .mono-s{font-size:var(--fs-xs);color:var(--tx3);font-family:var(--fmono)} /* 表格里的主标题链接（文档名 / 文章名）。 短标题只有 20px 高、宽度也常常不足 150px，热区不够。 加纵向内边距撑到 32px，负 margin 抵掉，行高不受影响。 */ .tb a.ttl{ display:inline-block;padding:8px 8px;margin:-8px -8px; color:var(--brand);font-weight:500;border-radius:6px;transition:.15s; } .tb a.ttl:hover{background:var(--brand-50)} /* 表格内的操作链接（详情 / 查看 / 编辑） a 是 inline 元素，尺寸完全由文字撑出来，只有 26×19px， 手指或鼠标很难点准 —— 而它所在的单元格有 72px 高， 有大量空间可以点却没用上。 用 inline-block + 纵向内边距把热区撑到 32px 以上， 行高不变（padding 只影响盒子高度，td 本身仍有 72px）。 */ .tb a.sm{ display:inline-block;padding:7px 10px;margin:-7px -10px; border-radius:6px;transition:background .15s; } .tb a.sm:hover{background:var(--brand-50)} /* 操作列（下载 / 撤回 / 流程 / 删除 …） 之前这些链接和按钮全靠内联 style 写颜色字号，三宗罪一起犯： · 下载用 var(--gold)，映射到 #5A90F2，在白表格上只有 3.13:1 · 全部 12px，后台最密集的一列表格反而字最小 · a/button 原生 inline，盒子只有 17px 高，几乎点不准 统一收进 .ops：品牌色 5.4:1、13px、内边距撑到 30px 以上， 行高不变（padding 只影响自身盒子）。 */ .ops a,.ops button{ display:inline-block;padding:9px 10px;margin:-3px -4px; border:0;background:none;font:inherit;font-size:13px;line-height:1.5; color:var(--brand);cursor:pointer;border-radius:6px;transition:.15s; } /* 操作项必须横排。热区撑宽后如果不锁 nowrap， 「下载/撤回/流程/删除」会被列宽挤成四行竖排， 一屏能看的行数直接少一半。 */ .ops{white-space:nowrap} /* .btn 类是带框按钮（配置/新增等），自带 border/背景， 不能被 .ops 的 border:0;background:none 抹掉，用 .btn 提权还原。 */ .ops .btn{border:1px solid var(--line-2);background:var(--card); color:var(--tx2);padding:7px 14px;font-size:13px;border-radius:8px} .ops .btn:hover{background:var(--brand-50);color:var(--brand);border-color:var(--brand-200)} .ops .btn.o{border-color:var(--brand);color:var(--brand);background:var(--brand-50)} .ops a:hover,.ops button:hover{background:var(--brand-50)} .ops .sep{color:var(--line-3);font-size:13px;user-select:none} .ops form{display:inline} /* 危险与中性操作：删除类用红色，中性类（流程/预览）用 tx2 */ .ops .danger{color:var(--err)} .ops .danger:hover{background:var(--err-bg)} .ops .mute{color:var(--tx2)} .ops .mute:hover{background:var(--card-2);color:var(--tx)} /* 审批动作按语义着色：同意=绿、退回=橙、提交=品牌蓝、撤回=中性 */ .ops .ok{color:var(--ok)} .ops .ok:hover{background:var(--ok-bg)} .ops .warn{color:var(--warn)} .ops .warn:hover{background:var(--warn-bg)} .ops .brand{color:var(--brand)} /* ========================================================================== 标签 ========================================================================== */ .tg{ display:inline-block;padding:4px 13px;border-radius:999px; font-size:var(--fs-xs);font-weight:600;white-space:nowrap; } .tg.d{background:var(--info-bg);color:var(--info)} .tg.x{background:var(--ok-bg);color:var(--ok)} .tg.p{background:var(--err-bg);color:var(--err)} .tg.dd{background:var(--card-2);color:var(--tx2)} /* ========================================================================== 按钮 ========================================================================== */ .btn{ display:inline-flex;align-items:center;gap:7px;padding:10px 20px; background:linear-gradient(135deg,var(--c2),var(--c4));color:#fff;border:none; border-radius:10px;font-size:var(--fs-sm);cursor:pointer;font-family:inherit; font-weight:600;transition:.18s;box-shadow:0 5px 14px rgba(17,86,232,.22); } .btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 8px 20px rgba(17,86,232,.28)} .btn.o{ background:#fff;color:var(--brand);border:1.5px solid var(--brand-200); box-shadow:none; } .btn.o:hover{background:var(--brand-50);transform:translateY(-2px);box-shadow:var(--sh-sm)} .btn.d,.btn.rd{background:linear-gradient(135deg,#B42330,#D8434F);box-shadow:0 5px 14px rgba(212,34,56,.22)} .btn.rd:hover{background:linear-gradient(135deg,#9C1D28,#C4303C)} .btn.gn{background:linear-gradient(135deg,#0B8240,#0E9F4A);box-shadow:0 5px 14px rgba(14,159,74,.22)} .btn.gn:hover{background:linear-gradient(135deg,#096B34,#0B8240)} .cd .btn.o,.cd form .btn:not(.p):not(.rd):not(.gn){ background:#fff;color:var(--tx2);border:1px solid var(--line-2);box-shadow:none; } .cd form .btn:not(.p):not(.rd):not(.gn):hover{ background:var(--brand-50);color:var(--brand);border-color:var(--brand-200) } .cd .fx .btn{font-size:var(--fs-xs);padding:8px 16px} /* ========================================================================== 工具条 / 表单 ========================================================================== */ .fx{display:flex;align-items:center;gap:11px;flex-wrap:wrap} .cd .fx{margin-bottom:16px} .cd .fx h4{margin-bottom:0} .fm{margin-bottom:18px} .fm label{ display:block;font-size:var(--fs-sm);color:var(--tx2);margin-bottom:7px;font-weight:600; } .fm label i{color:var(--err);font-style:normal;margin-left:2px} .fm small{display:block;font-size:var(--fs-xs);color:var(--tx3);margin-top:6px} .fm hr,.cd hr{border:none;border-top:1px solid var(--line);margin:22px 0} input.ip,select.ip{ width:100%;max-width:380px;padding:11px 15px; border:1px solid var(--line-2);border-radius:10px; font-size:var(--fs-sm);font-family:inherit;background:#fff;color:var(--tx); outline:none;transition:.16s; } input.ip:focus,select.ip:focus{ border-color:var(--brand);box-shadow:0 0 0 4px rgba(17,86,232,.09);background:#fff } input.ip.w0,select.ip.w0{width:130px;max-width:none} input.ip.w1,select.ip.w1{width:200px} select.ip{width:210px;max-width:none;cursor:pointer} /* ========================================================================== 复选组 ========================================================================== */ .chk{display:flex;flex-wrap:wrap;gap:10px 22px;max-width:900px} .ck{ display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm); color:var(--tx2);cursor:pointer;font-weight:400; } .ck input{margin:0;cursor:pointer;width:16px;height:16px;accent-color:var(--brand)} /* ========================================================================== 权限面板 ========================================================================== */ .permbox{ border:1px solid var(--line);border-radius:var(--r);padding:14px; background:var(--bg-2);max-height:400px;overflow:auto; } .pm{margin-bottom:12px} .pm-h{ padding:8px 12px;background:var(--brand-50);border-radius:8px; color:var(--brand);font-weight:600;font-size:var(--fs-sm); } .pm-c{display:flex;flex-wrap:wrap;gap:9px 20px;padding:12px 12px 6px 26px} /* ========================================================================== 键值 / 辅助 ========================================================================== */ .kv{display:inline-flex;align-items:baseline;gap:7px;font-size:var(--fs-sm);color:var(--tx3)} .kv i{font-style:normal;color:var(--tx3)} .kv b{font-size:19px;color:var(--brand);font-weight:700} .kv b.gn{color:var(--ok)} .kv b.rd{color:var(--err)} .dim{color:var(--tx3);opacity:.8} .dim:hover{text-decoration:underline;cursor:help} .cd2{font-family:var(--fnum);font-size:var(--fs-xs);color:var(--brand);font-weight:700} /* ========================================================================== 空态 ========================================================================== */ .emp{text-align:center;padding:64px 24px;color:var(--tx3)} .emp .i{font-size:44px;opacity:.35;margin-bottom:14px} /* ========================================================================== 提示条 ========================================================================== */ .alert{ background:linear-gradient(120deg,var(--brand-50),#F5F8FF); border:1px solid var(--brand-200);border-radius:var(--r); padding:16px 20px;font-size:var(--fs-sm);color:var(--tx2); margin-bottom:20px;line-height:1.85; } .alert b{color:var(--brand)} .alert.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:#1B5E38} .alert.ok b{color:#134D2E} .alert.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:#7A6020} .alert.warn b{color:#5C4815} /* ========================================================================== 登录页专用 ========================================================================== */ .login-wrap{ min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr; background:var(--bg); } .login-art{ position:relative;overflow:hidden;color:#fff;padding:56px 60px; display:flex;flex-direction:column;justify-content:space-between; background:linear-gradient(140deg,var(--logo-deep),var(--logo) 45%,var(--brand-l)); } .login-art::before{ content:'';position:absolute;right:-140px;top:-160px;width:520px;height:520px; border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 68%); } .login-art::after{ content:'';position:absolute;left:-120px;bottom:-200px;width:460px;height:460px; border-radius:50%;background:radial-gradient(circle,rgba(56,225,196,.18),transparent 68%); } .login-art > *{position:relative;z-index:2} .login-art .lgm{display:flex;align-items:center;gap:15px} .login-art .lgm img{height:64px} .login-art .lgm .cn b{font-size:27px;font-weight:800;letter-spacing:-.3px;display:block;line-height:1.24} .login-art .lgm .cn em{ font-style:normal;font-size:13px;letter-spacing:3.4px;opacity:.78; font-family:var(--fnum);font-weight:600; } .login-art h1{font-size:38px;font-weight:800;line-height:1.32;letter-spacing:-.6px;margin-bottom:16px} .login-art p{font-size:17px;line-height:1.9;opacity:.92;max-width:480px} /* 登录页能力卡 替代原 kpis 数字块：不暴露任何业务量，只讲系统能力。 版式沿用原 kpis 的毛玻璃卡片，保持左侧视觉重量一致。 */ .login-art .caps{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;margin-top:30px; } .login-art .cap{ background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(6px);border-radius:14px;padding:18px 18px 16px; transition:transform .28s ease,background .28s ease,border-color .28s ease; } .login-art .cap:hover{ transform:translateY(-3px); background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.42); } .login-art .cap i{ display:block;font-style:normal;font-size:20px;line-height:1; opacity:.92;margin-bottom:10px; } .login-art .cap b{ display:block;font-size:17px;font-weight:700;line-height:1.3; letter-spacing:.2px;margin-bottom:7px; } .login-art .cap span{ display:block;font-size:13px;line-height:1.7;opacity:.78; } /* 窄屏下三列会挤成一条，先降为两列再降为一列 */ @media(max-width:1500px){ .login-art .caps{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:1320px){ .login-art .caps{grid-template-columns:1fr} } .login-art .feats{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px} .login-art .feats span{ background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26); padding:8px 18px;border-radius:999px;font-size:14px;font-weight:500; } .login-box{ display:flex;align-items:center;justify-content:center;padding:48px 56px; } .login-form{width:100%;max-width:400px} .login-form h2{font-size:30px;font-weight:800;margin-bottom:8px;letter-spacing:-.4px} .login-form .sub{font-size:var(--fs-sm);color:var(--tx3);margin-bottom:32px} .login-form .fm{margin-bottom:20px} .login-form .fm label{font-size:var(--fs-sm)} .login-form input.ip{max-width:none} .login-form .rowb{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px} .login-form .rowb a{font-size:var(--fs-xs);color:var(--brand);font-weight:500} .login-form .rowb a:hover{text-decoration:underline} .login-form .btn{width:100%;justify-content:center;padding:14px;font-size:var(--fs-md);border-radius:12px} .login-form .tip{ margin-top:26px;padding:16px 20px;background:var(--warn-bg); border:1px solid var(--warn-bd);border-radius:var(--r); font-size:var(--fs-xs);color:#7A6020;line-height:1.85; } /* ========================================================================== 响应式 ========================================================================== */ @media(max-width:1200px){ :root{--sb:238px} .login-wrap{grid-template-columns:1fr} .login-art{display:none} } @media(max-width:900px){ :root{--sb:0px} .sb{display:none} .mn{margin-left:0;padding:calc(var(--hd) + 18px) 16px 40px} .hd{padding:0 16px;gap:10px} .hd .lg .cn{display:none} .hd .tg{display:none} .hd .u .who{display:none} .st{grid-template-columns:repeat(2,1fr)} .cd{padding:20px 18px} .ph{font-size:22px} .tb{font-size:var(--fs-xs)} .tb th,.tb td{padding:11px 12px} .login-box{padding:36px 22px} } @media(max-width:560px){ .st{grid-template-columns:1fr} .si b{font-size:28px} } /* ==================== 审批流模块 ==================== */ /* 进度条：横向条 + 百分比，列表里多处复用 */ .pbar{ flex:1;min-width:54px;height:6px;border-radius:99px; background:var(--bd);overflow:hidden; } .pbar>i{ display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--gold)); transition:width .3s ease; } /* 状态筛选胶囊 */ .pill{ display:inline-block;padding:6px 15px;border-radius:99px; border:1px solid var(--bd);background:var(--bg2);color:var(--tx2); font-size:13.5px;font-weight:500;transition:all .15s; } .pill:hover{border-color:var(--brand);color:var(--brand)} .pill.cur{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} /* 审批链路：横向节点条 */ .steps{display:flex;gap:10px;flex-wrap:wrap} .step{ flex:1;min-width:150px;padding:13px 15px;border-radius:11px; border:1px solid var(--bd);background:var(--bg2);position:relative; } .step .sname{font-size:14.5px;font-weight:600;margin-bottom:5px;color:var(--tx)} /* 小尺寸按钮 */ /* 小尺寸按钮：5px 纵向内边距 + 12.5px 只有 26px 高，低于 32px 可点下限， 且 12.5px 是全站最小正文字号。提到 7px/13px，高度刚好过线。 */ .btn.xs{padding:7px 12px;font-size:13px;border-radius:8px} .btn.off{opacity:.4;pointer-events:none} @media(max-width:760px){ .steps{flex-direction:column} .step{min-width:0} } /* ==================== 审计报表 ==================== */ /* 空状态：列表/报表查无数据时的占位。 之前只在前台定义了 .empty，后台查不到数据会显示成一片空白， 用户分不清是「没有数据」还是「页面坏了」。 */ .empty{ padding:38px 20px;text-align:center;color:var(--tx2); font-size:14px;background:var(--bg2);border:1px dashed var(--bd); border-radius:10px; } /* KPI 卡片行 */ .kpis{display:flex;gap:12px;flex-wrap:wrap} .kpis .kpi{ flex:1;min-width:140px;padding:16px 18px;background:var(--bg2); border:1px solid var(--bd);border-radius:12px; } .kpis .kv{font-size:26px;font-weight:700;letter-spacing:.5px;line-height:1.2} .kpis .kl{font-size:13px;color:var(--tx2);margin-top:4px} /* 筛选条 */ .filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .filters .seg{display:inline-flex;gap:6px;margin-right:4px} /* 筛选条里的字段名与区间连接词：颜色用 tx3（面包屑同级）， 字号给到 13.5px，避免 12.5px 以下在后台密集布局里看不清。 */ .fld{font-size:13.5px;color:var(--tx3);margin-right:-4px} .fld-sep{font-size:13.5px;color:var(--tx2)} .btn.on{background:var(--brand);color:#fff;border-color:var(--brand)} /* 表格内的条形分布列 */ .tbl .pbar{min-width:100px} @media (max-width:768px){ .kpis .kpi{min-width:calc(50% - 6px)} } /* 登出改 POST 后，入口从 变成表单里的