/* ========================================================================== 江苏省低空AI安防平台 · 统一视觉系统 theme.css 设计基调：公安藏蓝 + 警徽金 + 数据青；政务指挥中心风格 ========================================================================== */ :root{ /* 底色层次 */ --bg-0:#04101f; --bg-1:#071a2f; --bg-2:#0a2440; --bg-3:#0e2f52; --card:rgba(9,32,58,.78); --card-2:rgba(12,42,74,.72); --line:rgba(90,150,220,.20); --line-2:rgba(90,150,220,.32); /* 文字 */ --tx:#e9f2ff; --tx2:#9fbfe2; --tx3:#6f92b8; /* 主题色 */ --brand:#1e6fd9; --brand-2:#3aa0ff; --gold:#e6bd5f; --gold-2:#f4d68a; --ok:#2ecc71; --warn:#f5a623; --bad:#e5484d; --purple:#a855f7; --cyan:#22d3ee; /* 尺寸 */ --head-h:78px; --side-w:240px; --r-sm:8px; --r:12px; --r-lg:16px; --sh:0 10px 28px rgba(2,10,20,.45); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0;color:var(--tx);font-size:14px;line-height:1.6; font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif; background: radial-gradient(1100px 620px at 18% -8%, rgba(30,111,217,.22), transparent 62%), radial-gradient(900px 520px at 88% 4%, rgba(34,211,238,.12), transparent 60%), linear-gradient(180deg,var(--bg-0),var(--bg-1) 45%,#061528 100%); background-attachment:fixed; -webkit-font-smoothing:antialiased; } /* 细网格纹理（指挥中心感） */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5; background-image:linear-gradient(rgba(90,150,220,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(90,150,220,.05) 1px,transparent 1px); background-size:56px 56px,56px 56px; } a{color:inherit;text-decoration:none} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:rgba(90,150,220,.28);border-radius:6px} ::-webkit-scrollbar-track{background:transparent} /* ===================== 顶部标题栏（标题严格居中） ===================== */ .app-head{ position:relative;z-index:20;height:var(--head-h); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px; padding:0 22px; background:linear-gradient(180deg,rgba(6,26,48,.96),rgba(6,21,40,.86)); border-bottom:1px solid var(--line-2); box-shadow:0 8px 26px rgba(2,10,20,.5); } .app-head::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:linear-gradient(90deg,transparent,rgba(230,189,95,.75) 22%,rgba(58,160,255,.85) 50%,rgba(230,189,95,.75) 78%,transparent); } .ah-left,.ah-right{display:flex;align-items:center;gap:12px} .ah-right{justify-content:flex-end} .ah-brand{display:flex;align-items:center;gap:10px} .ah-emblem{width:38px;height:38px;flex:none;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(230,189,95,.35))} .ah-sys{display:flex;flex-direction:column;line-height:1.25} .ah-sys b{font-size:12.5px;color:var(--gold-2);letter-spacing:1px;font-weight:600} .ah-sys span{font-size:11px;color:var(--tx3)} .ah-title{text-align:center} .ah-title h1{ margin:0;font-size:30px;line-height:1.15;letter-spacing:6px;font-weight:700; background:linear-gradient(180deg,#ffffff 12%,#cfe6ff 62%,#8fc4ff 100%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 2px 18px rgba(58,160,255,.28);white-space:nowrap; } .ah-title p{margin:2px 0 0;font-size:11.5px;color:var(--tx3);letter-spacing:3.5px} .ah-title .ah-rule{display:block;width:230px;height:1px;margin:6px auto 0; background:linear-gradient(90deg,transparent,rgba(230,189,95,.8),transparent)} .chip{ display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px; font-size:11.5px;color:var(--tx2);background:rgba(12,42,74,.6);border:1px solid var(--line); } .chip b{color:var(--tx);font-weight:600} .chip.ok{border-color:rgba(46,204,113,.4);color:#8ff0bb} .chip.gold{border-color:rgba(230,189,95,.42);color:var(--gold-2)} .clock{font-variant-numeric:tabular-nums;font-size:13px;color:#cfe6ff;letter-spacing:.5px} .clock small{display:block;font-size:10.5px;color:var(--tx3);letter-spacing:1.2px} /* ===================== 主体：左导航 + 右内容 ===================== */ .app-shell{position:relative;z-index:1;display:grid;grid-template-columns:var(--side-w) 1fr; height:calc(100vh - var(--head-h))} .side{ border-right:1px solid var(--line); background:linear-gradient(180deg,#081d36,#061427 60%,#05101f); /* 不透明，避免底纹透出 */ overflow-y:auto;padding:14px 12px 24px; } .side .grp{margin:0 0 14px} .side .grp>h4{ margin:0 0 7px;padding:0 10px;font-size:11px;font-weight:600;letter-spacing:2px;color:var(--tx3); display:flex;align-items:center;gap:7px; } .side .grp>h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)} .nav-i{ position:relative;display:flex;align-items:center;gap:10px;padding:9px 11px;margin:2px 0; border-radius:var(--r-sm);color:var(--tx2);font-size:13.5px;cursor:pointer; border:0;transition:.16s; } .nav-i svg{width:17px;height:17px;flex:none;opacity:.85} .nav-i:hover{background:rgba(30,111,217,.18);color:#dceaff} .nav-i.on{ background:linear-gradient(90deg,rgba(30,111,217,.36),rgba(30,111,217,.05)); box-shadow:inset 0 0 0 1px rgba(58,160,255,.34);color:#fff;font-weight:600; } .nav-i.on::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:3px; background:linear-gradient(180deg,var(--gold),var(--brand-2))} .nav-i .tag{margin-left:auto;font-size:10.5px;color:var(--tx3)} .nav-i.ext .tag{color:var(--brand-2)} .side-foot{margin-top:10px;padding:10px;border-top:1px dashed var(--line);font-size:11px;color:var(--tx3);line-height:1.9} .side-foot .sf-emblem{width:20px;height:20px;vertical-align:-5px;margin-right:6px} .main{overflow-y:auto;padding:16px 20px 34px} .view{display:none} .view.on{display:block;animation:fade .22s ease} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .page-t{display:flex;align-items:center;gap:12px;margin:2px 0 14px} .page-t h2{margin:0;font-size:17px;letter-spacing:2px;font-weight:600} .page-t .desc{color:var(--tx3);font-size:12px} .page-t .right{margin-left:auto;display:flex;gap:8px} /* ===================== KPI ===================== */ .kpi-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px} @media(max-width:1500px){.kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}} .kpi-card{ position:relative;overflow:hidden;padding:13px 15px;border-radius:var(--r); background:linear-gradient(160deg,rgba(14,47,82,.9),rgba(8,28,52,.78)); border:1px solid var(--line);box-shadow:var(--sh); } .kpi-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--brand-2),rgba(58,160,255,.1))} .kpi-card.gold::before{background:linear-gradient(180deg,var(--gold),rgba(230,189,95,.1))} .kpi-card.bad::before{background:linear-gradient(180deg,var(--bad),rgba(229,72,77,.1))} .kpi-card.ok::before{background:linear-gradient(180deg,var(--ok),rgba(46,204,113,.1))} .kpi-card.purple::before{background:linear-gradient(180deg,var(--purple),rgba(168,85,247,.1))} .kpi-card .lb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tx2)} .kpi-card .nm{font-size:33px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px; margin:4px 0 0;color:#dff0ff;line-height:1.1} .kpi-card .nm small{font-size:12.5px;color:var(--tx3);font-weight:400;margin-left:4px} .kpi-card .ft{font-size:11px;color:var(--tx3);margin-top:2px} .kpi-card.bad .nm{color:#ffb4b6}.kpi-card.gold .nm{color:var(--gold-2)} .kpi-card.ok .nm{color:#8ff0bb}.kpi-card.purple .nm{color:#dcb6ff} /* ===================== 卡片 / 表格 / 徽章 ===================== */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:14px 16px;box-shadow:var(--sh);backdrop-filter:blur(3px)} .card>h3{margin:0 0 11px;font-size:13px;font-weight:600;letter-spacing:1.6px;color:#a9cdf3; display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid var(--line)} .card>h3::before{content:"";width:3px;height:13px;border-radius:2px; background:linear-gradient(180deg,var(--gold),var(--brand-2))} .card>h3 .hint{margin-left:auto;font-size:11px;font-weight:400;color:var(--tx3);letter-spacing:0} .cols{display:grid;gap:14px} .c-3-1{grid-template-columns:1.6fr 1fr} .c-2{grid-template-columns:1fr 1fr} @media(max-width:1280px){.c-3-1,.c-2{grid-template-columns:1fr}} .mb14{margin-bottom:14px} .tbl{width:100%;border-collapse:collapse;font-size:12.5px} .tbl th{text-align:left;font-weight:600;color:#bcd8f5;background:rgba(30,111,217,.16); padding:8px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap} .tbl td{padding:7px 10px;border-bottom:1px dashed rgba(90,150,220,.14);color:var(--tx)} .tbl tbody tr:hover{background:rgba(30,111,217,.09)} .tbl .num{font-variant-numeric:tabular-nums;color:var(--gold-2);font-weight:600} .tbl .mono{font-family:Consolas,"Courier New",monospace;color:#7fd4c9} .bdg{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11px; border:1px solid var(--line-2);color:var(--tx2);background:rgba(12,42,74,.5);white-space:nowrap} .bdg.lv1{color:#ffc9cb;border-color:rgba(229,72,77,.55);background:rgba(229,72,77,.16)} .bdg.lv2{color:#ffd9ae;border-color:rgba(245,166,35,.55);background:rgba(245,166,35,.14)} .bdg.lv3{color:#ffe9a8;border-color:rgba(230,189,95,.5);background:rgba(230,189,95,.13)} .bdg.lv4{color:#bcd8ff;border-color:rgba(58,160,255,.5);background:rgba(58,160,255,.14)} .bdg.ok{color:#a9f0c8;border-color:rgba(46,204,113,.5);background:rgba(46,204,113,.14)} .bdg.pu{color:#e0c1ff;border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.14)} .empty{color:var(--tx3);font-size:12.5px;padding:10px 2px} .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0; border-bottom:1px dashed rgba(90,150,220,.14);font-size:12.5px} .row:last-child{border-bottom:0} .row .v{color:var(--gold-2);font-variant-numeric:tabular-nums} .btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-sm); font-size:12.5px;color:#eaf4ff;cursor:pointer;border:1px solid rgba(58,160,255,.45); background:linear-gradient(180deg,rgba(30,111,217,.42),rgba(30,111,217,.18));transition:.16s} .btn:hover{border-color:var(--brand-2);box-shadow:0 4px 14px rgba(30,111,217,.35)} .btn.gold{border-color:rgba(230,189,95,.5); background:linear-gradient(180deg,rgba(230,189,95,.32),rgba(230,189,95,.1));color:#ffeec2} .btn.ghost{background:rgba(12,42,74,.5);border-color:var(--line-2);color:var(--tx2)} .bar-line{height:6px;border-radius:4px;background:rgba(90,150,220,.16);overflow:hidden} .bar-line>i{display:block;height:100%;border-radius:4px; background:linear-gradient(90deg,var(--brand),var(--brand-2))} .frame{width:100%;height:calc(100vh - var(--head-h) - 128px);min-height:520px;border:1px solid var(--line); border-radius:var(--r);background:#05121f} .footer-note{margin-top:16px;text-align:center;font-size:11px;color:var(--tx3);letter-spacing:1px} /* ===================== 登录 ===================== */ .login-mask{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center; background: radial-gradient(900px 520px at 50% 8%, rgba(30,111,217,.30), transparent 62%), linear-gradient(180deg,#04101f,#061a30 60%,#04101f)} .login-box{width:440px;padding:34px 34px 26px;border-radius:18px;text-align:center; background:linear-gradient(180deg,rgba(10,36,64,.96),rgba(6,22,42,.96)); border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(2,10,20,.65)} .login-box .em{width:64px;height:64px;margin-bottom:10px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(230,189,95,.4))} .login-box h1{margin:0;font-size:27px;letter-spacing:6px;font-weight:700; background:linear-gradient(180deg,#fff,#9fc9ff);-webkit-background-clip:text;background-clip:text;color:transparent} .login-box .sub{margin:6px 0 20px;font-size:12px;color:var(--tx3);letter-spacing:3px} .login-box input{width:100%;padding:11px 13px;margin-bottom:11px;border-radius:var(--r-sm); border:1px solid var(--line-2);background:rgba(6,22,42,.85);color:var(--tx);font-size:13.5px;outline:none} .login-box input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(58,160,255,.16)} .login-box button{width:100%;padding:11px;border:0;border-radius:var(--r-sm);cursor:pointer; font-size:14px;font-weight:600;letter-spacing:3px;color:#04203c; background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 8px 20px rgba(230,189,95,.28)} .login-box .err{color:#ffb4b6;font-size:12px;min-height:18px;margin:8px 0 0} .login-box .tip{margin-top:12px;font-size:11px;color:var(--tx3);line-height:1.9} #toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:1000;display:none; padding:10px 22px;border-radius:var(--r-sm);font-size:13px;color:#d9f7ee; background:linear-gradient(180deg,rgba(14,80,72,.96),rgba(9,58,52,.96)); border:1px solid rgba(46,204,113,.45);box-shadow:var(--sh)} /* ===== 页头细节修正：右侧不换行、徽章不挤压 ===== */ .ah-left,.ah-right{flex-wrap:nowrap !important;min-width:0} .ah-right{gap:9px} .chip,.btn,.ah-right .clock{white-space:nowrap;flex:none} .ah-right .btn{padding:6px 12px;font-size:12px} .ah-left .ah-brand{flex:none} @media(max-width:1560px){ .ah-right .chip.opt{display:none} } .nav-i,.nav-i *{text-decoration:none !important;border-bottom:0 !important} /* ===== 驾驶舱紧凑化：KPI 条压缩，把版面让给态势地图 ===== */ .kpi-row{gap:10px;margin-bottom:12px} .kpi-card{padding:10px 14px} .kpi-card .nm{font-size:27px;margin-top:2px} .kpi-card .ft{font-size:10.5px;margin-top:1px} .kpi-card .lb{font-size:11.5px} @media(max-height:760px){ .kpi-card .ft{display:none} } /* 页标题与说明同行不挤压 */ .page-t{flex-wrap:wrap;align-items:baseline} .page-t h2{white-space:nowrap;flex:none} .page-t .desc{flex:1;min-width:260px} /* ===== 左侧导航层级（M48 重做）：二级项缩进 3 字宽，层级靠"引导线 + 圆点"表达 ===== */ .side .grp{position:relative} .side .nav-i{margin-left:27px} /* 无二级的独立项（平台支撑）缩进两个字宽 */ .side .kids .nav-i{margin-left:40px} /* 二级项：缩进三个字宽，明显靠内（原 27px） */ .side .grp.has-kids::before{ /* 该模块**展开时**才出现层级引导线 */ content:"";position:absolute;left:22px;top:42px;bottom:10px;width:1px;pointer-events:none; background:linear-gradient(180deg,rgba(90,150,220,.34),rgba(90,150,220,.05)); } .side .grp.closed::before{display:none} /* 收起时不留悬空的线 */ .nav-i.on::before{left:-11px} /* 选中金色竖条随缩进对齐引导线 */ /* ===== 左侧导航：按《开发方案》6.0「模块总览与迭代归属」M1–M11 布局 ===== */ /* M48：默认收起二级后，模块之间只需 2px；展开的那个模块下方多留白，与下一个模块分开 */ .side .grp{margin:0 0 2px} .side .grp.has-kids:not(.closed){margin-bottom:9px} .side .mod-h{ position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;margin:1px 0; border-radius:9px;color:var(--tx2);font-size:13.5px;font-weight:600; cursor:pointer;transition:background .16s,color .16s,box-shadow .16s; white-space:nowrap;user-select:none; } .side .mod-h>svg.ico{width:17px;height:17px;flex:none;opacity:.85;transition:opacity .16s} .side .mod-h .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .side .mod-h:hover{background:rgba(30,111,217,.18);color:#dceaff} .side .mod-h.on{ background:linear-gradient(90deg,rgba(30,111,217,.38),rgba(30,111,217,.05)); box-shadow:inset 0 0 0 1px rgba(58,160,255,.34);color:#fff; } .side .grp.on>.mod-a>.mod-h>svg.ico{opacity:1} .side .mod-h.on::before{ content:"";position:absolute;left:-9px;top:6px;bottom:6px;width:3px;border-radius:3px; background:linear-gradient(180deg,var(--gold),var(--brand-2)); } .side .mod-h .tag{margin-left:0;font-size:10.5px;letter-spacing:0;font-weight:400} .side .mod-h>svg.cv{ width:13px;height:13px;flex:none;margin-left:auto;opacity:.5; transition:transform .2s ease,opacity .16s; } .side .mod-h:hover>svg.cv{opacity:.95} .side .grp.closed .mod-h>svg.cv{transform:rotate(-90deg)} .side .grp.closed .kids{display:none} .side .tag.g2{color:#e6bd5f} @media(max-height:940px){ .side } /* 屏高不足时回收导航纵向空间 */ /* ===== 迭代规划说明页（二期模块） ===== */ .plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px} .plan-box{background:rgba(30,111,217,.10);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px} .plan-box h5{margin:0 0 7px;font-size:11.5px;font-weight:600;letter-spacing:1px;color:var(--tx3)} .plan-box p{margin:0;font-size:13px;line-height:1.9;color:var(--tx2)} .plan-note{font-size:12.5px;line-height:2;color:var(--tx2);margin:6px 0 0} /* ===== M48：侧栏二级子项（圆点标记 + 更清楚的当前项） ===== */ .side .kids{position:relative;padding:2px 0 4px} .side .kids .nav-i{ display:flex;align-items:center;gap:9px; padding:7px 10px;border-radius:7px;font-size:12.6px;color:var(--tx2); text-decoration:none;transition:background .15s,color .15s; } .side .kids .nav-i .dt{ width:5px;height:5px;border-radius:50%;background:currentColor; opacity:.38;flex:none;transition:opacity .15s,background .15s,transform .15s; } .side .kids .nav-i:hover{background:rgba(30,111,217,.16);color:#dceaff} .side .kids .nav-i:hover .dt{opacity:.8} .side .kids .nav-i.on{ background:linear-gradient(90deg,rgba(30,111,217,.3),rgba(30,111,217,.04)); color:#fff;box-shadow:inset 0 0 0 1px rgba(58,160,255,.26); } .side .kids .nav-i.on .dt{opacity:1;background:var(--gold-2);box-shadow:0 0 6px rgba(230,189,95,.7)} .side .kids .nav-i.on::before{display:none} /* 二级项用“背景 + 金色圆点”表示选中，不要再叠竖条 */ .side .nav-i .dt{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45;flex:none} /* 分节定位后高亮闪两下，便于看出"跳到了哪张卡" */ @keyframes secflash{0%{box-shadow:0 0 0 0 rgba(230,189,95,.6)}100%{box-shadow:0 0 0 12px rgba(230,189,95,0)}} .card.sec-flash{animation:secflash 1.1s ease-out 2} /* ===== M37 拆页：模块页外壳 + 数据表组件（分页/筛选/排序/CSV 导出） ===== 这些类由 static/js/core.js 的 renderShell() 与 DataTable 渲染，所有独立模块页共用。 页面骨架：
+