/* ========== 全局重置与变量 ========== */ *{margin:0;padding:0;box-sizing:border-box;} :root{ --c-normal:#22c55e;--c-warn:#f59e0b;--c-danger:#ef4444;--c-primary:#3b82f6; --c-bg:#0d1520;--c-card:#16202f;--c-border:#24314a;--c-sidebar:#0b111c; --c-sidebar-hover:#16233b;--c-text:#e2e8f0;--c-text-sub:#8b9bb4;--c-header:#0b111c; } body{font-family:"Microsoft YaHei","微软雅黑",sans-serif;background:var(--c-bg);color:var(--c-text);font-size:14px;min-width:1280px;overflow:hidden;} /* 横向滚动动画：从最右边开始，往左滚动 */ @keyframes scroll-left { 0% { left: 100%; } 100% { left: -100%; } } /* 鼠标指向时暂停滚动（.marquee-move：采购管理页与材料物资总览页共用；!important 防 inline animation 简写覆盖暂停） */ .marquee-move:hover { animation-play-state: paused !important; cursor: pointer; text-decoration: underline; } /* ========== 顶部导航 ========== */ .topbar{height:56px;background:var(--c-header);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;} .topbar-left{display:flex;align-items:center;gap:16px;} .topbar-title{font-size:18px;font-weight:700;letter-spacing:1px;} .topbar-project{font-size:13px;color:#bdc3c7;padding-left:16px;border-left:1px solid #555;} .topbar-right{display:flex;align-items:center;gap:10px;} .topbar-date{font-size:13px;color:#bdc3c7;margin-right:12px;} /* 顶部项目信息标签 */ .topbar-project-info{display:flex;align-items:center;gap:8px;margin-left:12px;} .topbar-info-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:rgba(255,255,255,0.1);border-radius:3px;font-size:12px;color:#ecf0f1;cursor:pointer;transition:background 0.2s;max-width:180px;} .topbar-info-tag:hover{background:rgba(255,255,255,0.2);} .topbar-info-tag .tag-label{color:#8b9bb4;flex-shrink:0;} .topbar-info-tag .tag-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .topbar-info-tag.editing{background:rgba(52,152,219,0.3);} .btn{padding:6px 14px;border:none;border-radius:3px;cursor:pointer;font-size:13px;transition:opacity .15s;display:inline-flex;align-items:center;gap:4px;} .btn:hover{opacity:.85;} .btn-primary{background:var(--c-primary);color:#fff;} .btn-success{background:var(--c-normal);color:#fff;} .btn-warn{background:var(--c-warn);color:#fff;} .btn-danger{background:var(--c-danger);color:#fff;} .btn-default{background:#334155;color:#e2e8f0;} .btn-sm{padding:3px 8px;font-size:12px;} .btn-link{background:none;border:none;color:var(--c-primary);cursor:pointer;font-size:12px;padding:2px 4px;} .btn-link:hover{text-decoration:underline;} .btn-link.danger{color:var(--c-danger);} /* ========== 主体布局 ========== */ .main{display:flex;height:calc(100vh - 56px - 24px);} .sidebar{width:190px;background:var(--c-sidebar);overflow-y:auto;flex-shrink:0;} .sidebar::-webkit-scrollbar{width:4px;} .sidebar::-webkit-scrollbar-thumb{background:#555;border-radius:2px;} .menu-item{padding:12px 12px;color:#ecf0f1;cursor:pointer;border-left:3px solid transparent;font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s,border-color .15s,color .15s,transform .15s;} .menu-item:hover{background:var(--c-sidebar-hover);} .menu-item.active{background:var(--c-sidebar-hover);border-left-color:var(--c-primary);color:#fff;font-weight:600;} .menu-icon{width:16px;height:16px;display:inline-block;text-align:center;line-height:16px;font-size:14px;flex-shrink:0;} .menu-badge{margin-left:auto;background:var(--c-danger);color:#fff;font-size:11px;padding:1px 6px;border-radius:8px;min-width:18px;text-align:center;flex-shrink:0;} .menu-group-title{padding:12px 12px;color:#ecf0f1;cursor:pointer;border-left:3px solid transparent;font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s,border-color .15s,color .15s,transform .15s;user-select:none;} .menu-group-title:hover{background:var(--c-sidebar-hover);} .menu-group-title .arrow{margin-left:6px;font-size:10px;transition:transform .2s;} .menu-group-title.expanded .arrow{transform:rotate(90deg);} .menu-sub{display:none;background:rgba(0,0,0,.15);} .menu-sub.show{display:block;} .menu-sub .menu-item{padding-left:32px;font-size:12.5px;} .menu-sub-group{margin:2px 0;} .menu-sub-title{padding:8px 10px 8px 32px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:4px;font-size:12.5px;color:#bdc3c7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background 0.2s;} .menu-sub-title:hover{background:rgba(255,255,255,0.05);} .menu-sub-title .arrow{margin-left:auto;font-size:10px;flex-shrink:0;transition:transform 0.2s;} .menu-sub-title.expanded .arrow{transform:rotate(90deg);} .menu-sub-items{display:none;padding-left:15px;} .menu-sub-group.expanded .menu-sub-items{display:block;} .content{flex:1;overflow-y:auto;padding:14px;} .content::-webkit-scrollbar{width:6px;height:6px;} .content::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px;} .module{display:none;} .module.active{display:block;} /* ========== 卡片 ========== */ .card{background:var(--c-card);border:1px solid var(--c-border);border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.30);margin-bottom:14px;} .card-header{padding:12px 16px;border-bottom:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:center;} .card-title{font-size:15px;font-weight:700;color:var(--c-text);} /* 卡片头右侧工具区：搜索框 + 动作按钮同排，间距统一 （原来没有这条规则，inline 元素之间靠默认间距，宽窄不一） */ .card-tools{display:flex;align-items:center;gap:8px;} .card-body{padding:14px 16px;} /* ========== 机械设备分类标签 ========== */ .machine-tabs{display:flex;gap:8px;margin:0 12px;} .machine-tab{padding:6px 16px;border:1px solid var(--c-border);border-radius:4px;cursor:pointer;font-size:13px;color:var(--c-text2);background:#1b2940;transition:background-color .2s,border-color .2s,color .2s,transform .2s;user-select:none;} .machine-tab:hover{border-color:var(--c-primary);color:var(--c-primary);} .machine-tab.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary);} /* ========== 统计卡片（彩色边框科技风） ========== */ .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:16px;} .stat-card{position:relative;overflow:hidden;border-radius:10px;padding:16px 12px;text-align:center;background:linear-gradient(160deg,#14223c 0%,#0d1830 100%);border:1px solid rgba(56,189,248,0.35);border-top:3px solid #38bdf8;box-shadow:0 3px 14px rgba(0,0,0,0.38);transition:transform .25s ease,box-shadow .25s ease;} .stat-card.normal{border-color:rgba(52,211,153,0.40);border-top-color:#34d399;} .stat-card.warn{border-color:rgba(251,146,60,0.42);border-top-color:#fb923c;} .stat-card.danger{border-color:rgba(248,113,113,0.42);border-top-color:#f87171;} .stat-card.clickable{cursor:pointer;} .stat-card.clickable:hover{transform:translateY(-3px);} .stat-card:not(.normal):not(.warn):not(.danger).clickable:hover{box-shadow:0 8px 22px rgba(56,189,248,0.28);} .stat-card.normal.clickable:hover{box-shadow:0 8px 22px rgba(52,211,153,0.28);} .stat-card.warn.clickable:hover{box-shadow:0 8px 22px rgba(251,146,60,0.28);} .stat-card.danger.clickable:hover{box-shadow:0 8px 22px rgba(248,113,117,0.28);} .stat-num{font-size:26px;font-weight:800;margin-bottom:4px;letter-spacing:.5px;color:#38bdf8;} .stat-card.normal .stat-num{color:#34d399;} .stat-card.warn .stat-num{color:#fb923c;} .stat-card.danger .stat-num{color:#f87171;} .stat-label{font-size:12px;color:#9db0cc;white-space:nowrap;letter-spacing:.3px;} /* 图标横向统计卡片（项目总览）彩色边框 */ .stat-card-icon{display:flex;align-items:center;gap:13px;text-align:left;padding:15px 17px;} .stat-card-icon .stat-icon-wrap{width:46px;height:46px;min-width:46px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(56,189,248,0.12);} .stat-card-icon .stat-icon{width:25px;height:25px;color:#38bdf8;} .stat-card-icon.normal .stat-icon-wrap{background:rgba(52,211,153,0.12);} .stat-card-icon.normal .stat-icon{color:#34d399;} .stat-card-icon.warn .stat-icon-wrap{background:rgba(251,146,60,0.12);} .stat-card-icon.warn .stat-icon{color:#fb923c;} .stat-card-icon.danger .stat-icon-wrap{background:rgba(248,113,113,0.12);} .stat-card-icon.danger .stat-icon{color:#f87171;} .stat-card-icon .stat-content{flex:1;min-width:0;} .stat-card-icon .stat-num{font-size:22px;font-weight:700;line-height:1.2;margin-bottom:2px;} .stat-card-icon .stat-label{font-size:12px;color:#9db0cc;line-height:1.4;} /* ========== 状态标签 ========== */ .tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:12px;color:#fff;line-height:1.5;} .tag-normal{background:var(--c-normal);} .tag-warn{background:var(--c-warn);} .tag-danger{background:var(--c-danger);} .tag-primary{background:var(--c-primary);} .tag-gray{background:#95a5a6;} .tag-dark{background:#34495e;} /* ========== 表格 ========== */ .table-wrap{overflow:auto;max-height:calc(100vh - 200px);} table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;} th,td{padding:8px 10px;text-align:left;border-right:1px solid #18283c;border-bottom:1px solid #18283c;} th{background:#0e1c30;font-weight:600;color:#7fd0ea;white-space:nowrap;} tr:hover{background:rgba(56,189,248,0.10);} td{vertical-align:middle;} .table-actions{display:flex;gap:4px;flex-wrap:nowrap;} /* ===== 全局冻结表头 ===== 【2026-10-08 重新设计】 原写法只给 thead 加 sticky，各页面滚到底时表头会被首行内容顶走（th 仍是 static）。 Chrome 对单行 thead 的 sticky 兼容性尚可，但一旦表头有多行、或 th 设了背景/边框， thead 的吸附会失效——所以这里把 sticky 明确加在 **th** 上（thead 保留一层做兜底）， 并用 z-index 7 > 6 明确层级，保证表头永远压在数据行之上。 ⚠️ th 背景必须不透明（渐变写在 background-image 上）：sticky 是吸顶元素， 半透明背景会让下方数据行透出来，看着像"没冻住"。 */ .card-body{overflow:auto;} thead{position:sticky;top:0;z-index:6;} thead th{ position:sticky;top:0;z-index:7; background:#0e1c30 !important; background-image:linear-gradient(180deg,#0e1d33 0%,#0b1626 100%) !important; color:#6fd2ec !important; border-top:1px solid #18283c; border-left:1px solid #18283c; border-right:1px solid #18283c; border-bottom:2px solid #1d4258 !important; } /* 表头里的图片/文字要压在数据行之上：sticky 元素的子元素若自带 position/z-index， 会在自己的层叠上下文里与数据行错位（实测吊车页照片半截露在表头下方）。 统一给表头后代提层，并禁止表头内元素脱离表头的吸附。 */ thead th img, thead th .cell-photo, thead th span, thead th div{ position:relative; z-index:8; } /* 数据行不得高于表头（保险：即使某处写了更高的 z-index 也压不过表头） */ tbody td, tbody th{ position:relative; z-index:1; } table td{border-right:1px solid #18283c;border-bottom:1px solid #18283c;} tbody tr:nth-child(odd){background:#0e1929;} tbody tr:nth-child(even){background:#0b1524;} tbody tr:hover{background:rgba(34,211,238,0.10) !important;} /* 表头第一列和最后一列边框对齐 */ thead th:first-child{border-left:1px solid #18283c;} thead tr:last-child th{border-bottom:2px solid #1d4258 !important;} #purchaseListPanel.flex-col{display:flex;flex-direction:column;overflow:hidden;} #purchaseListPanel .table-wrap{flex:1 1 auto;min-height:0;overflow:auto;} /* 库存工具栏统一按钮与下拉 */ .stock-tool-btn{height:34px;border:none;border-radius:6px;padding:0 14px;font-size:13px;font-weight:500;line-height:1;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;color:#fff;transition:filter .15s,transform .15s;} .stock-tool-btn:hover{filter:brightness(1.12);} .stock-tool-btn:active{transform:translateY(1px);} .menu-dropdown{position:relative;display:inline-block;} .menu-dropdown .dropdown-menu{display:none;position:absolute;right:0;top:38px;background:#fff;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.22);z-index:80;min-width:132px;padding:4px;} .menu-dropdown.open .dropdown-menu{display:block;} .menu-dropdown .dropdown-menu button{display:flex;width:100%;padding:9px 12px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:13px;border-radius:6px;color:#1e293b;align-items:center;gap:7px;} .menu-dropdown .dropdown-menu button:hover{background:#f1f5f9;} .date-tool{height:34px;border:none;border-radius:6px;padding:0 9px;font-size:12px;background:rgba(27,41,64,.94);color:#e2e8f0;cursor:pointer;box-sizing:border-box;outline:none;} /* ========== 进度条 ========== */ .progress{width:100%;height:16px;background:#24314a;border-radius:2px;overflow:hidden;position:relative;} .progress-fill{height:100%;transition:width .3s;} .progress-fill.normal{background:var(--c-normal);} .progress-fill.warn{background:var(--c-warn);} .progress-fill.danger{background:var(--c-danger);} .progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;color:#2c3e50;font-weight:600;} /* ========== 表单 ========== */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;} .form-group{margin-bottom:0;} .form-group.full{grid-column:1/-1;} .form-group label{display:block;margin-bottom:4px;font-size:12.5px;color:var(--c-text-sub);font-weight:600;cursor:pointer;} .form-group label .req{color:var(--c-danger);} .form-group input,.form-group select,.form-group textarea{width:100%;padding:6px 8px;border:1px solid #dcdfe6;border-radius:3px;font-size:13px;outline:none;font-family:inherit;} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--c-primary);} .form-group textarea{resize:vertical;min-height:60px;} .form-grid.compact{grid-template-columns:1fr 1fr 1fr;gap:8px 10px;} .form-grid.compact .form-group label{margin-bottom:2px;font-size:12px;} .form-grid.compact .form-group input,.form-grid.compact .form-group select,.form-grid.compact .form-group textarea{padding:4px 7px;font-size:12.5px;} .form-grid.compact .form-group textarea{min-height:44px;} .form-grid.compact .sec-bar{margin-top:8px;} /* 【2026-10-10】一行放 3 个控件（跨满整行再做 1:1:1 分栏）—— 设备表单的「机械型号 / 租用类型 / 单位」需要水平对齐在同一行。 直接给 .form-group 加 span 做不到：外层是 1fr 1fr 两列，第 3 个必然换行。 */ .form-row-3{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 16px;align-items:start;} .form-row-3>.form-group{margin-bottom:0;} @media (max-width:900px){.form-row-3{grid-template-columns:1fr 1fr;}} .form-footer{text-align:right;margin-top:16px;padding-top:14px;border-top:1px solid var(--c-border);} .form-footer .btn{margin-left:8px;} /* ========== 模态框 ========== */ .modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none;justify-content:center;align-items:center;z-index:999;} .modal-mask.show{display:flex;} .modal{background:#1b2940;border-radius:4px;width:900px;max-width:95vw;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;padding:20px;} .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--c-border);} .modal-title{font-size:16px;font-weight:700;} .modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--c-text-sub);line-height:1;} /* ========== 预警列表 ========== */ .alert-list{display:flex;flex-direction:column;gap:8px;} .alert-item{padding:10px 14px;border-radius:3px;display:flex;justify-content:space-between;align-items:center;border-left:4px solid;} .alert-item.danger{border-color:var(--c-danger);background:rgba(239,68,68,.12);} .alert-item.warn{border-color:var(--c-warn);background:rgba(245,158,11,.12);} .alert-item.normal{border-color:var(--c-normal);background:rgba(34,197,94,.12);} .alert-info h4{font-size:13px;margin-bottom:2px;} .alert-info p{font-size:11.5px;color:var(--c-text-sub);} /* ========== 简易图表 ========== */ .bar-chart{display:flex;align-items:flex-end;justify-content:space-around;height:200px;padding:20px 10px 30px;border-bottom:1px solid var(--c-border);position:relative;} .bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;} .bar{width:36px;background:var(--c-primary);border-radius:2px 2px 0 0;position:relative;min-height:2px;} .bar-val{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;white-space:nowrap;} .bar-label{font-size:11px;color:var(--c-text-sub);position:absolute;bottom:8px;} /* ========== 进度台账：甘特图 + 完成量（2026-10-10 重写） ========== 原「进度走势」S 曲线样式已整体删除。 现在这一页是「选栋号 → 该栋甘特图」，图上条内叠加完成量，点条可就地填报。 */ .pc-range{display:inline-flex;align-items:center;gap:6px;margin-right:4px;} .pc-range-label{font-size:12px;color:#8fa8c0;} .pc-range select{ padding:5px 8px;border-radius:5px;background:#12233a;color:#dce8f5; border:1px solid rgba(120,200,255,0.2);font-size:12.5px;min-width:130px;font-family:inherit; } /* 【2026-10-10】原 .pc-done-toggle（显示完成量勾选框）已随该控件删除。 */ /* 时间轴档按钮（适应 / 周 / 月）：未选为低调灰，选中用青色高亮 + 描边， 一眼看出当前生效的档位。.active 由 pcSyncScaleBtns() 维护。 */ .pc-scale-btn{ background:#1b2940;color:#93a7bd;border:1px solid rgba(120,200,255,0.18); transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s; } .pc-scale-btn:hover{background:#22335080;color:#c9dcef;border-color:rgba(120,200,255,0.38);opacity:1;} .pc-scale-btn.active{ background:linear-gradient(160deg,#0e7490 0%,#0891b2 100%); color:#fff;border-color:#22d3ee;font-weight:700; box-shadow:0 0 0 1px rgba(34,211,238,0.45),0 2px 8px rgba(8,145,178,0.45); } .pc-scale-btn.active:hover{background:linear-gradient(160deg,#0891b2 0%,#06b6d4 100%);opacity:1;} /* 图例条（静态，永不被 innerHTML 覆盖） */ .pc-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12px;color:#8fa8c0;margin-bottom:10px;} .pc-legend span{display:inline-flex;align-items:center;gap:5px;} .pc-sw{width:11px;height:11px;border-radius:2px;display:inline-block;flex-shrink:0;} .pc-legend-tip{color:#6f8298;font-size:11.5px;} /* 甘特图整体：左名称列 + 右时间轴 【2026-10-10】改为「独立滚动容器」： 纵向在容器内部滚（不用滚整个页面），顶部 .pc-gantt-hd 是 sticky 冻结层 （左标题 + 右月份刻度带），横向主滚在 .pc-right，滚它时把 scrollLeft 同步给 .pc-hd-right。 高度：进度台账模块内由 flex 铺满（见下方 #module-progress.active 规则）； 本基础规则只提供「缺陷兜底高度」，避免非 flex 场景下塌成 0。 */ .pc-gantt-wrap{ border:1px solid rgba(120,200,255,0.14);border-radius:8px;overflow:hidden; max-height:62vh;overflow-y:auto; /* 【2026-10-12 晚】批注便签挂在容器内做绝对定位（随内容滚动、滚到表头下被遮挡） → 容器必须是定位祖先 */ position:relative; } /* 让进度台账卡片吃满内容区剩余高度：卡片体变 flex 列，甘特区 flex:1。 否则卡片高度由内容决定，底部会空出一截（实测 147px）—— 那才是用户看到的「下方空白」。 【2026-10-10 定稿】关键前提：#content 本身是 .main 的 flex 子项（flex:1;overflow-y:auto）， 模块只要 height:100% 就能拿到内容区可视高度；再一路 flex:1 传到甘特容器。 任何一环漏掉 min-height:0，都会被内部 1008px 的 SVG 撑破（实测溢出 386px）。 */ #module-progress.active{ display:flex;flex-direction:column;height:100%;min-height:0; } #module-progress.active .card{ display:flex;flex-direction:column; flex:1 1 auto;min-height:0;margin-bottom:0; } #module-progress.active .card-body{ display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding-bottom:14px; overflow:hidden; /* 防内部超长把卡片体顶破（否则 overflow:auto 会算出更高的 scrollHeight） */ } #module-progress.active .pc-legend{flex:0 0 auto;} #module-progress.active .pc-overall{flex:0 0 auto;} /* #progressChart 自身即滚动容器（.pc-gantt-wrap），flex:1 吃掉卡片剩余高度； 行多时在它内部纵向滚（表头 sticky 冻结）。 */ #module-progress.active .pc-gantt-wrap{ flex:1 1 auto;min-height:120px; max-height:none; /* 由 flex 决定高度，不受基础规则 62vh 限制 */ overflow-y:auto; /* 内容超出（行多）时在容器内滚 */ overflow-x:hidden; } /* ⚠️ 容器(.pc-gantt-wrap)是 display:block + overflow-y:auto， 内部 .pc-gantt 是普通块级子元素，高度由 SVG 决定；超出时由容器滚动承接。 这里只需保证左右两栏自身不被压扁。 */ #module-progress.active .pc-gantt{min-height:0;} #module-progress.active .pc-left, #module-progress.active .pc-right{min-height:0;} .pc-gantt-hd{ position:sticky;top:0;z-index:5;display:flex;align-items:stretch; background:#0d1d31;border-bottom:1px solid rgba(120,200,255,0.22); } .pc-hd-left{flex:0 0 240px;overflow:hidden;border-right:1px solid rgba(120,200,255,0.18);} .pc-hd-right{flex:1 1 auto;overflow:hidden;} .pc-gantt{display:flex;align-items:stretch;min-height:200px;} .pc-left{ flex:0 0 240px;overflow:hidden;position:relative; border-right:1px solid rgba(120,200,255,0.18);background:rgba(18,35,58,0.5); } .pc-left-hd{ height:28px;line-height:28px;padding:0 10px;font-size:12px;font-weight:600; color:#8fb0c8; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* 行 hover：整行提亮（左名称列 + 图上热区同步高亮，靠 JS 给 加 can-hover 类） */ .pc-left-row{display:flex;align-items:center;gap:5px;overflow:hidden;position:relative;} .pc-left-row::before{ content:'';position:absolute;left:0;top:0;right:0;bottom:0; background:rgba(120,200,255,0);transition:background .12s ease;pointer-events:none; } .pc-left-row:hover::before{background:rgba(120,200,255,0.10);} .pc-left-row:hover .pc-left-name{color:#ffffff;} .pc-left-row.is-hl::before{background:rgba(120,200,255,0.16);} .pc-left-row.is-hl .pc-left-name{color:#ffffff;} .pc-left-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;margin-right:2px;position:relative;} .pc-left-name{ font-size:12px;color:#c9dcea;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative; } .pc-right{ flex:1 1 auto;overflow-x:auto;overflow-y:hidden;position:relative; } /* 行 hover 提亮：图上条 + 左侧名称一起亮（靠 g.can-hover 与 .is-hl 同步） */ .pc-right svg g.can-hover:hover rect{filter:brightness(1.38);} .pc-right svg g.can-hover:hover line, .pc-right svg g.can-hover:hover text{filter:brightness(1.3);} .pc-right svg g.can-hover:hover{filter:drop-shadow(0 0 5px rgba(120,200,255,0.5));} .pc-right svg g.can-hover.is-hl rect{filter:brightness(1.38);} .pc-right svg g.can-hover.is-hl{filter:drop-shadow(0 0 5px rgba(120,200,255,0.5));} .pc-right::-webkit-scrollbar{height:8px;} .pc-right::-webkit-scrollbar-thumb{background:rgba(120,160,210,.28);border-radius:4px;} .pc-right::-webkit-scrollbar-thumb:hover{background:rgba(120,160,210,.45);} .pc-right::-webkit-scrollbar-track{background:transparent;} .pc-gantt .empty-chart{text-align:center;color:var(--c-text-sub);padding:80px 0;font-size:13px;line-height:1.9;width:100%;} /* 整体完成进度条（甘特图上方，整栋加权口径） */ .pc-overall{ display:flex;align-items:center;gap:10px;margin-bottom:10px; padding:9px 12px;border-radius:8px; background:rgba(18,35,58,0.55);border:1px solid rgba(120,200,255,0.16); } .pc-overall-tip{font-size:12px;color:#8fa8c0;flex:0 0 auto;} .pc-overall-pct{font-size:17px;font-weight:700;line-height:1;flex:0 0 auto;font-variant-numeric:tabular-nums;} .pc-overall-track{ flex:1 1 auto;height:10px;border-radius:6px;overflow:hidden; background:rgba(120,160,210,0.16);min-width:120px; } .pc-overall-track i{display:block;height:100%;border-radius:6px;transition:width .25s ease;} .pc-overall-meta{font-size:11.5px;color:#6f8298;flex:0 0 auto;white-space:nowrap;} /* 【2026-10-14】批注框定位入口：批注框坐标是台账内容坐标，其他账号在甘特图偏右/偏下 设的框会落在滚动区之外，看着像「没有框」。这个按钮给出存在感 + 一键定位过去。 */ .pc-note-jump{ margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px; height:24px;padding:0 11px;border-radius:12px;cursor:pointer;white-space:nowrap; border:1px solid rgba(245,166,35,0.5);background:rgba(245,166,35,0.13); color:#f5a623;font-size:12px;font-family:inherit; transition:background .15s ease,border-color .15s ease; } .pc-note-jump:hover{background:rgba(245,166,35,0.26);border-color:#f5a623;} .pc-note-jump b{font-weight:700;font-variant-numeric:tabular-nums;} /* 就地填报小弹框（点甘特条弹出） */ .pc-pop{ position:fixed;z-index:9500;width:250px;padding:12px 13px; background:#16283f;border:1px solid rgba(120,200,255,0.28);border-radius:10px; box-shadow:0 10px 32px rgba(0,0,0,0.5);font-family:inherit; } .pc-pop-hd{font-size:13px;font-weight:600;color:#dce8f5;margin-bottom:3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pc-pop-sub{font-size:11.5px;color:#8fa8c0;margin-bottom:10px;} .pc-pop-sub b{color:#4ade80;} .pc-pop-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;} .pc-pop-row label{font-size:12px;color:#8fa8c0;flex:0 0 66px;} .pc-pop-row input{ flex:1 1 auto;min-width:0;padding:6px 8px;border-radius:5px;background:#0d1b2a; color:#dce8f5;border:1px solid rgba(120,200,255,0.22);font-size:13px;font-family:inherit; } .pc-pop-row input:focus{outline:none;border-color:rgba(96,165,250,0.7);} .pc-pop-unit{font-size:12px;color:#8fa8c0;flex:0 0 auto;} .pc-pop-err{font-size:11.5px;color:#f09595;min-height:16px;margin-bottom:4px;} .pc-pop-ft{display:flex;justify-content:flex-end;gap:8px;} /* 强制下调确认框（比普通填报框更醒目：橙色描边 + 顶部警示条） */ .pc-pop-warn{border-color:rgba(251,146,60,0.6);box-shadow:0 14px 40px rgba(0,0,0,0.65);} .pc-pop-warn .pc-pop-hd{color:#fdba74;} .pc-pop-warnbody{font-size:12.5px;color:#c9dcea;line-height:1.65;margin:6px 0 12px;} .pc-pop-warnbody b{color:#fff;} .pc-pop-warnlist{ margin-top:9px;padding:8px 10px;border-radius:6px;font-size:11.5px;color:#a8bdd0;line-height:1.75; background:rgba(251,146,60,0.10);border:1px solid rgba(251,146,60,0.24); } .btn-warn{background:#fb923c;border-color:#fb923c;color:#1a1205;} .btn-warn:hover{background:#f97316;border-color:#f97316;} /* 填报弹窗增强（2026-10-11 深夜；2026-10-12 晚 v5 再调布局） */ /* 【10-12 晚 v5】① 累计完成率输入框**缩小**（124 → 72px）； ② 「批注」按钮与累计完成率**同一行**、垂直居中对齐； ③ 按钮后面新增**单选框**「批注框」—— 勾选才显示批注便签（便签显示由它决定）。 */ .pc-pop{width:352px;} #pcPopRate{flex:0 0 72px;} #pcPopDate{flex:0 0 124px;} /* 统一控件高度：输入类控件定死 34px；同行元素靠 row 的 align-items:center 垂直居中 */ #pcPopRate,#pcPopDate,#pcPopWeather,.pc-pop-notebtn{height:34px;box-sizing:border-box;} #pcPopWeather{flex:1 1 auto;min-width:0;padding:6px 8px;border-radius:5px;font-size:12px; font-family:inherit;background:#0d1b2a;color:#8fd8a0;cursor:pointer; border:1px solid rgba(120,200,255,0.18);} /* 【2026-10-13】#pcPopWeather 由 readonly 文本框改为可手选下拉：去掉只读色规则 */ #pcPopWeather:focus{outline:none;border-color:rgba(96,165,250,0.7);} /* 【2026-10-13】延误原因快捷标签（单据里点一下 = 往批注便签加一条原因） 行内 label 与多行标签块顶部对齐；标签按内容宽度换行排列。 */ .pc-pop-row.pc-pop-reasons{align-items:flex-start;margin-bottom:6px;} .pc-pop-row.pc-pop-reasons>label{padding-top:6px;flex:0 0 66px;} .pc-pop-chips{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:6px;} .pc-pop-chip{padding:3px 9px;border-radius:999px;font-size:11.5px;font-family:inherit; line-height:1.5;cursor:pointer;white-space:nowrap;background:rgba(120,200,255,0.08); border:1px solid rgba(120,200,255,0.26);color:#a9cfe8;} .pc-pop-chip:hover{background:rgba(120,200,255,0.18);color:#dff2ff;} .pc-pop-chip.used{background:rgba(255,138,61,0.18);border-color:rgba(255,138,61,0.5);color:#ffb37a;} /* 【批次⑲】优先级芯片（红/黄/蓝）：选中态按各自颜色点亮 */ .pc-pop-chip.prio-red.on{background:rgba(229,72,77,0.22);border-color:#e5484d;color:#ff9b9e;} .pc-pop-chip.prio-yellow.on{background:rgba(245,166,35,0.20);border-color:#f5a623;color:#ffd27a;} .pc-pop-chip.prio-blue.on{background:rgba(79,141,255,0.20);border-color:#4f8dff;color:#9dc0ff;} .pc-pop-prio .pc-pop-chip{padding:2px 12px;} .pc-pop-priotip{font-size:11px;color:#8fa8c0;flex:0 0 auto;} /* 「批注」按钮：与累计完成率**同一行**（不再独占一行、不拉伸），点它打开批注便签 */ .pc-pop-notebtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; padding:0 12px;border-radius:5px;font-size:12px;font-family:inherit;line-height:1; cursor:pointer;font-weight:600;background:rgba(255,138,61,0.12); border:1px solid rgba(255,138,61,0.45);color:#ffb37a;} .pc-pop-notebtn:hover{background:rgba(255,138,61,0.22);} .pc-pop-notebtn.has{background:var(--bp-accent,#ff8a3d);border-color:var(--bp-accent,#ff8a3d);color:#0a1622;} /* 单选框「批注框」：勾选 = 显示批注便签（便签显示与否以它为准）；右对齐到行尾。 选择器带上 .pc-pop-row 提高优先级，避免被 .pc-pop-row label 的 flex:0 0 66px 覆盖。 */ .pc-pop-row label.pc-pop-notechk{margin-left:auto;display:inline-flex;align-items:center;gap:5px; flex:0 0 auto;font-size:12px;color:#8fa8c0;cursor:pointer;user-select:none;white-space:nowrap;} .pc-pop-row label.pc-pop-notechk input[type=checkbox]{flex:0 0 auto;width:14px;height:14px;margin:0; padding:0;cursor:pointer;accent-color:var(--bp-cyan,#58c6ff);} .pc-pop-row label.pc-pop-notechk:hover{color:#bfe6ff;} /* 批注便签（2026-10-12 夜 v7：**每根进度条一个独立便签，可同时存在 n 个**） ① 主体 = 深蓝净底 + 文件夹标签线框（批次⑲：左上角色块标签页 + 同色描边箱体，缩放不变形）； ② 线色/色块 = 弹窗「优先级」红/黄/蓝（--note-c/--note-tc，localStorage 按工序记忆）； ③ 永远 position:absolute 挂在台账滚动容器内 —— 随内容滚动、滚到表头下面被表头遮挡 （z-index:2 < 表头 5）；落点会避让填报弹窗**与其它便签**（重叠就依次改到左侧/下方/下移）； **每条进度条的显示 / 隐藏由弹窗里该条的「批注框」单选框决定**； 📌 = 锁定位置：锁定后 .locked 生效，标题栏不再是移动光标、拖不动（仍随页面滚动）； ④ 标题栏显示该条工序名（多个框并存时用来分辨是哪根进度条）+ 📌 + ＋； 内容是**延误原因条目列表**：每条前有复选框标记该问题是否已解决（勾选后该条正文锁定、不可编辑）； ＋ 号加一条； 八向缩放手把 .pc-note-rs 可上下左右拉伸（每个便签各自缩放）。 */ /* 【批次⑲ 文件夹标签样式】左上角色块标签页 = 标题栏（含 📌/＋ 按钮），下方同色描边箱体。 颜色 = 弹窗「优先级」红/黄/蓝（js 写 --note-c/--note-tc，localStorage 按工序记忆）。 线框几何由 js 按便签像素尺寸重算（缩放不变形）。 */ /* --note-c / --note-tc = 优先级主色与色块文字色（js 写）； --note-c-soft / --note-c-glow = 同色的半透明版本，给输入框描边与聚焦光晕用 —— 这样「批注框的输入框颜色」永远跟随批注框的优先级颜色（红/黄/蓝）。 */ .pc-note{--note-c:#e5484d;--note-tc:#ffffff; --note-c-soft:rgba(229,72,77,0.45);--note-c-glow:rgba(229,72,77,0.22); position:absolute;z-index:2;width:280px;height:180px;box-sizing:border-box; display:flex;flex-direction:column; padding:3px; background:linear-gradient(180deg,rgba(10,27,44,0.97) 0%,rgba(7,20,32,0.97) 100%); border:none;border-radius:0; box-shadow:0 10px 32px rgba(0,0,0,0.6),0 0 22px var(--note-c-glow,rgba(88,198,255,0.10)); /* 便签位置/尺寸由 js 直接写，任何过渡都会让「拖动跟手 / 松手定位」产生滞后与跳动 */ transition:none;font-family:inherit;} /* SVG 线框层：绝对覆盖便签，不参与命中测试；内容抬到 z-index:1 避免被线框压住 */ .pc-note-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0; color:var(--note-c,#e5484d);} .pc-note-frame .nf-main{fill:none;stroke:currentColor;stroke-width:1.6;stroke-opacity:0.9;} .pc-note-frame .nf-tab{fill:currentColor;fill-opacity:0.95;} .pc-note > .pc-note-hd,.pc-note > .pc-note-list{position:relative;z-index:1;} /* 标题栏 = 色块标签页本体：高度固定 24px（与 SVG 标签页同高），宽度与窗体同宽（全宽直边，不再斜切） */ .pc-note-hd{flex:0 0 auto;align-self:flex-start;width:max-content;max-width:100%; display:flex;align-items:center;justify-content:space-between;gap:6px; height:24px;margin:0;padding:0 8px;box-sizing:border-box; font-size:12px;font-weight:600;cursor:move;user-select:none; background:var(--note-c,#e5484d);color:var(--note-tc,#ffffff);} /* 📌 已锁定位置 → 标题栏不再是「可拖动」光标，拖也拖不动（拖动逻辑在 pcNoteDragStart 里拦掉） */ .pc-note.locked .pc-note-hd{cursor:default;} /* 标题栏显示**该条工序名**（n 个便签并存时用来分辨）：占满剩余宽度、过长省略号 */ .pc-note-title{flex:1 1 auto;min-width:0;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pc-note-hd-r{display:flex;align-items:center;gap:8px;flex-shrink:0;} /* ＋号：标题栏右侧，点一下在列表末尾增加一条延误原因（颜色继承色块文字色） */ .pc-note-add{cursor:pointer;font-size:15px;font-weight:700;line-height:1;padding:0 3px; color:inherit;transition:opacity .15s,transform .15s;user-select:none;} .pc-note-add:hover{opacity:.75;transform:scale(1.18);} /* 「改」按钮：标题栏色块内，点开该工序的填报弹窗（累计完成率/日期/天气/延误原因） */ .pc-note-edit{cursor:pointer;font-size:12px;font-weight:700;line-height:1;padding:1px 5px; color:inherit;border:1px solid currentColor;border-radius:3px;opacity:.9;user-select:none; transition:opacity .15s,background .15s;} .pc-note-edit:hover{opacity:1;background:rgba(255,255,255,0.18);} /* －号：每条原因行尾，**只删空行**（有内容的条目是历史记录，要沉淀下来）。 不可删时加 .is-off —— 用 visibility:hidden 而不是不渲染，保证与可删行同宽、输入框左右对齐不跳。 */ .pc-note-del{cursor:pointer;font-size:15px;font-weight:700;line-height:1;padding:0 4px; color:var(--note-c,#e5484d);opacity:.6;user-select:none;flex-shrink:0;transition:opacity .15s,background .15s;} .pc-note-del:hover{opacity:1;background:rgba(0,0,0,0.18);border-radius:3px;} .pc-note-del.is-off{visibility:hidden;pointer-events:none;} /* 📌 锁定位置开关：未锁定弱化；锁定后不透明 + 歪 32°（钉下去的角度），无外框。 语义 = 锁位置（锁定后拖不动便签）。 */ .pc-note-pin{cursor:pointer;font-size:13px;line-height:1;padding:1px 3px; opacity:.55;filter:grayscale(1);transition:transform .15s,opacity .15s,filter .15s;user-select:none;} .pc-note-pin:hover{opacity:.95;filter:grayscale(.2);} .pc-note-pin.pinned{opacity:1;filter:none;transform:rotate(-32deg) scale(1.08);} /* 【2026-10-13 性能】拖动 / 缩放进行中（js 加 .is-moving）：关掉投影与 SVG 发光滤镜， 并显式禁用一切过渡。这两样每帧都要重新栅格化，是「拖动批注窗口卡顿」的主要来源； 松手后 .is-moving 移除即恢复。 注意：**不要**给便签加 will-change / transform 预览 —— 拖动直接写 left/top， 松手不再折算位置，才不会出现「松开鼠标跳一下」的合成层切换。 */ .pc-note.is-moving{box-shadow:none;transition:none;} .pc-note.is-moving > .pc-note-frame{filter:none;} /* 【2026-10-14】定位高亮：点「📌 批注框」把视图滚过去后，用 outline 呼吸一圈 （outline 不参与布局，不会像 box-shadow 那样把框撑出容器边缘） */ .pc-note.is-reveal{animation:pcNoteReveal 1.7s ease-out;} @keyframes pcNoteReveal{ 0%{outline:3px solid rgba(245,166,35,0);outline-offset:2px;} 18%{outline:3px solid rgba(245,166,35,0.95);outline-offset:2px;} 55%{outline:3px solid rgba(245,166,35,0.45);outline-offset:2px;} 100%{outline:3px solid rgba(245,166,35,0);outline-offset:2px;} } body.pc-note-moving .pc-note-line line{filter:none;} /* 延误原因条目列表：撑满标题栏（标签页）以下的箱体；条目多了内部滚动（缩放便签时自动变高变矮） */ .pc-note-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column; gap:6px;padding:7px 10px 8px;} .pc-note-item{display:flex;align-items:center;gap:6px;} /* 条目前的复选框（用户口中的「选中框」）：标记该条原因是否已完成。 【批次㉑】完全自绘外观 —— 原来只靠 accent-color，**仅**能染「勾选后」的填充， 未勾选时仍是系统默认的白底灰框，跟批注框优先级色无关（用户反馈「选中框也要跟随变」）。 自绘后任何时候都跟随 --note-c： 未勾选 = 半透明主色描边 + 深底；悬停 = 主色描边；勾选 = 主色填充 + 用 --note-tc 画对勾。 （theme-blueprint.css 的全局 input 规则都带 :not([type=checkbox])，不会打到复选框； 这里也不必提权，直接用类选择器即可。） */ .pc-note-chk{appearance:none;-webkit-appearance:none;flex:0 0 auto; width:14px;height:14px;margin:0;padding:0;cursor:pointer;position:relative;box-sizing:border-box; border:1.5px solid var(--note-c-soft,rgba(88,198,255,0.5));border-radius:3px; background:rgba(7,20,31,0.72); transition:border-color .15s,background .15s;} .pc-note-chk:hover{border-color:var(--note-c,#e5484d);} .pc-note-chk:checked{background:var(--note-c,#e5484d);border-color:var(--note-c,#e5484d);} .pc-note-chk:checked::after{content:'';position:absolute;left:4px;top:1px; width:3px;height:7px;border:solid var(--note-tc,#ffffff);border-width:0 2px 2px 0; transform:rotate(45deg);} /* 【批次⑳】输入框颜色跟随批注框：描边 = 优先级色的半透明版；光标 / 聚焦描边 / 亮环 = 优先级色本身。 ⚠️ 这里的选择器为什么要写这么长（5 个类级 + 重复一次 .pc-note-inp）： theme-blueprint.css 有一条全局规则 input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]){ … !important } 权重 (0,4,1) 且**带 !important**，还在 main.css 之后加载 —— 光写 .pc-note-inp 或只加 !important 都压不住它（同为 !important 时仍按权重比）。 所以：权重抬到 (0,5,0) 以上 + 继续用 !important，才能让便签输入框真正拿到自己的颜色。 全站仅此一处便签输入框，重复类名只用于提权，无副作用。 */ .pc-note .pc-note-list .pc-note-item .pc-note-inp.pc-note-inp{ flex:1 1 auto;min-width:0;height:26px;box-sizing:border-box;padding:0 8px;border-radius:4px; background:rgba(7,20,31,0.85) !important;color:#dcecf9 !important; border:1px solid var(--note-c-soft,rgba(88,198,255,0.28)) !important; caret-color:var(--note-c,#e5484d); font-size:12.5px;font-family:inherit;line-height:24px;outline:none;} /* 悬停时也给一点本框主色的提示（未聚焦时能看出这条输入框属于哪个优先级）。 ⚠️ 必须写在 :focus 之前 —— 两者权重相同（同为 6 个类级），后写的赢， 悬停+聚焦同时成立时要让**聚焦**的纯色描边胜出。 */ .pc-note .pc-note-list .pc-note-item .pc-note-inp.pc-note-inp:hover{ border-color:var(--note-c-soft,rgba(88,198,255,0.28)) !important;} .pc-note .pc-note-list .pc-note-item .pc-note-inp.pc-note-inp:focus{ border-color:var(--note-c,#e5484d) !important; box-shadow:0 0 6px var(--note-c-glow,rgba(88,198,255,0.18)) !important;} /* 已勾选（= 问题已解决）的条目：正文锁死不可编辑，视觉上弱化 ── 取消勾选即恢复。 锁定态**不跟随**优先级色，保持禁用灰（语义：这条已经关闭了）。 */ .pc-note .pc-note-list .pc-note-item.is-done .pc-note-inp.pc-note-inp{ opacity:.5;cursor:not-allowed; border-style:dashed !important;border-color:rgba(120,160,190,0.28) !important; background:rgba(7,20,31,0.5) !important;} .pc-note .pc-note-list .pc-note-item.is-done .pc-note-inp.pc-note-inp:focus{ box-shadow:none !important;border-color:rgba(120,160,190,0.28) !important;} /* 【批次㉒ 用户要求「批注框内的输入框选中的颜色随批注框体颜色」】 输入框里「按下鼠标拉出的文本选中高亮」之前是全局橙色（theme-blueprint.css: ::selection{background:rgba(255,138,61,.35) !important;color:#fff !important} 权重 (0,0,1) 同样带 !important）。这里用便签路径 (0,4,1) 压过去 —— 同 !important 时比权重，赢。 底色 = 优先级主色本身、文字 = 色块文字色（与标题栏同款）：选中一片时整框一色，最直观。 ⚠️ 必须把选择器写到 .pc-note-inp 且带 ::selection，光写 .pc-note ::selection 权重不够。 */ .pc-note .pc-note-list .pc-note-item .pc-note-inp::selection{ background:var(--note-c,#e5484d) !important;color:var(--note-tc,#ffffff) !important;} .pc-note .pc-note-list .pc-note-item .pc-note-inp::-moz-selection{ background:var(--note-c,#e5484d) !important;color:var(--note-tc,#ffffff) !important;} /* 已锁定条目（勾选=问题已解决、正文只读）：沿用禁用灰，选中高亮不跟随优先级色（与上面的锁定态口径一致） */ .pc-note .pc-note-list .pc-note-item.is-done .pc-note-inp::selection{ background:rgba(120,160,190,0.38) !important;color:#eaf2fa !important;} .pc-note .pc-note-list .pc-note-item.is-done .pc-note-inp::-moz-selection{ background:rgba(120,160,190,0.38) !important;color:#eaf2fa !important;} .pc-note-item.is-done .pc-note-chk{opacity:.65;} /* 八向缩放手把（上下左右 + 四角）：透明热区，拖它改便签宽高 */ .pc-note-rs{position:absolute;z-index:3;} .pc-note-rs.rs-n{left:10px;right:10px;top:-3px;height:7px;cursor:ns-resize;} .pc-note-rs.rs-s{left:10px;right:10px;bottom:-3px;height:7px;cursor:ns-resize;} .pc-note-rs.rs-w{top:10px;bottom:10px;left:-3px;width:7px;cursor:ew-resize;} .pc-note-rs.rs-e{top:10px;bottom:10px;right:-3px;width:7px;cursor:ew-resize;} .pc-note-rs.rs-nw{left:-4px;top:-4px;width:14px;height:14px;cursor:nwse-resize;} .pc-note-rs.rs-ne{right:-4px;top:-4px;width:14px;height:14px;cursor:nesw-resize;} .pc-note-rs.rs-sw{left:-4px;bottom:-4px;width:14px;height:14px;cursor:nesw-resize;} .pc-note-rs.rs-se{right:-4px;bottom:-4px;width:14px;height:14px;cursor:nwse-resize;} /* 牵引线（全屏固定 SVG 覆盖层，JS 定位）：斜线 + 延误文字下划线（.pc-note-line-ul）， 颜色与批注框边框/标签页同源（--note-c）。【2026-10-14】按用户样例去掉端点圆点。 */ .pc-note-line line{stroke:var(--note-c,#e5484d);stroke-width:1.6; filter:drop-shadow(0 0 2px rgba(0,0,0,0.55));} @media (max-width:768px){ .pc-legend{gap:10px;font-size:11.5px;} .pc-range select{min-width:100px;} } /* ========== 流程步骤 ========== */ .steps{display:flex;justify-content:space-between;margin:14px 0;position:relative;} .steps::before{content:'';position:absolute;top:14px;left:8%;right:8%;height:2px;background:var(--c-border);z-index:0;} .step{text-align:center;position:relative;z-index:1;flex:1;} .step-circle{width:28px;height:28px;border-radius:50%;background:#24314a;color:var(--c-text-sub);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:12px;font-weight:700;} .step.done .step-circle{background:var(--c-normal);color:#fff;} .step.active .step-circle{background:var(--c-primary);color:#fff;} .step-label{font-size:11.5px;color:var(--c-text-sub);} .step.done .step-label,.step.active .step-label{color:var(--c-text);font-weight:600;} /* ========== 项目信息 ========== */ .info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 16px;} .info-row{display:flex;font-size:13px;} .info-key{color:var(--c-text-sub);width:72px;flex-shrink:0;} .info-val{color:var(--c-text);font-weight:500;} /* ========== 两栏布局 ========== */ .two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;} .three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;} .setting-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;} /* ========== 登录界面 ========== */ .login-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#1a2332 0%,#2c3e50 100%);display:flex;align-items:center;justify-content:center;z-index:9999;} .login-box{background:#1b2940;border-radius:8px;padding:40px;width:380px;box-shadow:0 10px 40px rgba(0,0,0,.3);} .login-title{text-align:center;font-size:22px;font-weight:700;color:#2c3e50;margin-bottom:8px;} .login-subtitle{text-align:center;font-size:13px;color:#7f8c8d;margin-bottom:30px;} .login-form .form-group{margin-bottom:18px;} .login-form label{display:block;font-size:13px;color:#34495e;margin-bottom:6px;font-weight:600;} .login-form input{width:100%;padding:10px 12px;border:1px solid #dce4ec;border-radius:4px;font-size:14px;box-sizing:border-box;} .login-form input:focus{outline:none;border-color:#3498db;} .login-btn{width:100%;padding:12px;background:#2980b9;color:#fff;border:none;border-radius:4px;font-size:15px;font-weight:600;cursor:pointer;margin-top:10px;} .login-btn:hover{background:#1a6ca0;} .login-tip{text-align:center;font-size:12px;color:#8b9bb4;margin-top:20px;line-height:1.8;} .login-error{background:rgba(239,68,68,.12);border:1px solid #e74c3c;color:#fca5a5;padding:10px;border-radius:4px;font-size:13px;margin-bottom:15px;text-align:center;display:none;} /* ========== 顶部用户信息 ========== */ .top-user{display:flex;align-items:center;gap:12px;color:#ecf0f1;font-size:13px;} .top-user .user-name{font-weight:600;} .top-user .user-role{background:rgba(255,255,255,.15);padding:2px 8px;border-radius:3px;font-size:11px;} .logout-btn{background:rgba(231,76,60,.8);color:#fff;border:none;padding:5px 12px;border-radius:3px;cursor:pointer;font-size:12px;} .logout-btn:hover{background:#e74c3c;} /* ========== 空状态 ========== */ .empty{text-align:center;padding:40px;color:var(--c-text-sub);font-size:13px;} /* ========== Toast ========== */ .toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:#2c3e50;color:#fff;padding:10px 18px;border-radius:6px;font-size:13px;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;display:inline-flex;align-items:center;gap:8px;max-width:80vw;} .toast.show{opacity:1;} .toast.success{background:var(--c-normal);} .toast.error{background:var(--c-danger);} .toast.warn{background:var(--c-warn);} .toast.sticky{pointer-events:auto;cursor:default;} .toast .toast-msg{line-height:1.4;word-break:break-word;} .toast .toast-close{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:16px;cursor:pointer;line-height:1;flex:0 0 auto;} .toast .toast-close:hover{background:rgba(255,255,255,.42);} /* ========== 部署说明 ========== */ .deploy-guide{background:#1b2940;border:1px solid var(--c-border);border-radius:4px;padding:20px;margin-top:20px;} .deploy-guide h3{font-size:15px;margin-bottom:12px;color:var(--c-text);} .deploy-guide ol{padding-left:20px;} .deploy-guide li{margin-bottom:8px;font-size:13px;line-height:1.7;} .deploy-guide code{background:#1b2940;padding:1px 5px;border-radius:2px;font-size:12px;} .deploy-guide .note{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.50);padding:10px;border-radius:3px;margin-top:12px;font-size:12.5px;} /* ========== 响应式设计 - 平板适配 (768px - 1024px) ========== */ @media screen and (max-width: 1024px){ body{min-width:auto;font-size:12px;} .sidebar{width:190px;} .menu-item{padding:10px 14px;font-size:12px;} .menu-sub .menu-item{padding-left:32px;font-size:11.5px;} .content{padding:10px;} .stats-row{grid-template-columns:repeat(3,1fr);gap:10px;} .stat-num{font-size:22px;} .card-body{padding:12px;} .topbar-title{font-size:16px;} .topbar-project{display:none;} .form-grid{grid-template-columns:repeat(2,1fr);} .table-wrap{overflow-x:auto;} table{min-width:600px;} } /* ========== 响应式设计 - 手机适配 (<768px) ========== */ @media screen and (max-width: 768px){ *{-webkit-tap-highlight-color:transparent;} body{min-width:auto;font-size:14px;overflow-x:hidden;-webkit-text-size-adjust:100%;} .topbar{height:52px;padding:0 12px;} .topbar-left{gap:8px;} .topbar-title{font-size:15px;} .topbar-project{display:none;} .topbar-date{display:none;} .topbar-right{gap:6px;} .btn{padding:10px 16px;font-size:14px;min-height:44px;border-radius:6px;} .btn-sm{padding:6px 12px;font-size:13px;min-height:36px;} .btn-link{padding:8px 10px;font-size:14px;min-height:44px;} /* 主体布局 - 侧边栏可折叠 */ .main{flex-direction:column;height:calc(100vh - 52px);} .sidebar{ width:100%; max-height:0; overflow:hidden; transition:max-height .3s ease; position:relative; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.15); } .sidebar.mobile-open{max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;} .menu-item{padding:14px 18px;font-size:15px;min-height:48px;} .menu-sub .menu-item{padding-left:42px;font-size:14px;min-height:44px;} .menu-group-title{padding:14px 18px;font-size:15px;min-height:48px;} .menu-icon{width:20px;height:20px;font-size:18px;} .menu-badge{min-height:20px;line-height:20px;padding:0 8px;font-size:12px;} /* 内容区 */ .content{padding:12px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;} .card{margin-bottom:12px;border-radius:8px;} .card-header{padding:12px 14px;flex-wrap:wrap;gap:10px;} .card-title{font-size:16px;} .card-body{padding:12px 14px;} /* 统计卡片 - 2列 */ .stats-row{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px;} .stat-card{padding:14px 10px;border-radius:8px;} .stat-num{font-size:22px;} .stat-label{font-size:12px;} /* 机械设备标签 */ .machine-tabs{flex-wrap:wrap;margin:0 10px;gap:8px;} .machine-tab{padding:10px 16px;font-size:14px;min-height:40px;border-radius:6px;} /* 表单 - 单列 */ .form-grid{grid-template-columns:1fr;gap:14px;} .form-group.full{grid-column:1;} .form-group label{font-size:14px;margin-bottom:6px;display:block;} .form-group input[type="text"], .form-group input[type="number"], .form-group input[type="date"], .form-group input[type="time"], .form-group input[type="password"], .form-group select, .form-group textarea{ width:100%; padding:12px 14px; font-size:15px; min-height:48px; border:1px solid #2b3a55; border-radius:6px; box-sizing:border-box; -webkit-appearance:none; appearance:none; } .form-group textarea{min-height:80px;resize:vertical;} .form-group input[type="file"]{ width:100%; padding:10px; font-size:14px; min-height:48px; } .form-actions{flex-direction:column;gap:10px;} .form-actions .btn{width:100%;justify-content:center;min-height:48px;font-size:15px;} /* 表格 - 横向滚动 */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:6px;} table{min-width:500px;font-size:13px;border-collapse:collapse;} th,td{padding:10px 8px;white-space:nowrap;border-bottom:1px solid #24314a;} th{background:#1b2940;font-weight:600;} td .btn-link{padding:6px 8px;min-height:36px;font-size:13px;} /* 弹窗 - 接近全屏 */ .modal-mask{padding:0;} .modal-box{width:100%;max-width:100%;max-height:100vh;height:100vh;margin:0;border-radius:0;overflow-y:auto;-webkit-overflow-scrolling:touch;} .modal-header{padding:14px 16px;min-height:52px;position:sticky;top:0;background:#1b2940;z-index:10;border-bottom:1px solid #24314a;} .modal-title{font-size:16px;} .modal-close{font-size:24px;padding:8px;min-height:44px;min-width:44px;} .modal-body{padding:14px 16px;} .modal-footer{padding:12px 16px;flex-wrap:wrap;gap:10px;position:sticky;bottom:0;background:#1b2940;border-top:1px solid #eee;} .modal-footer .btn{flex:1;min-height:48px;font-size:15px;} /* 登录界面 */ .login-mask{padding:20px;align-items:flex-start;padding-top:60px;} .login-box{width:100%;max-width:100%;padding:28px 24px;border-radius:12px;} .login-title{font-size:22px;margin-bottom:8px;} .login-subtitle{font-size:14px;margin-bottom:24px;} .login-form .form-group{margin-bottom:16px;} .login-form input{ width:100%; padding:14px 16px; font-size:16px; min-height:52px; border:1px solid #2b3a55; border-radius:8px; box-sizing:border-box; } .login-btn{ width:100%; padding:14px; font-size:16px; min-height:52px; border-radius:8px; margin-top:8px; } .login-default{font-size:12px;line-height:1.8;} /* 搜索和筛选栏 */ .filter-bar{flex-wrap:wrap;gap:10px;} .filter-bar select,.filter-bar input{ flex:1; min-width:calc(50% - 5px); padding:10px 12px; font-size:14px; min-height:44px; border:1px solid #2b3a55; border-radius:6px; } /* 图片预览 */ .photo-preview img{max-width:100%;height:auto;border-radius:6px;} .photo-preview{margin-top:10px;} .photo-preview .btn-link{margin-left:10px;font-size:14px;} /* 图片查看器 */ .photo-viewer{padding:10px;} .photo-viewer img{max-width:100%;max-height:80vh;} /* Toast提示 */ .toast{ max-width:90%; padding:14px 20px; font-size:14px; border-radius:8px; bottom:30px; } /* 分页 */ .pagination{flex-wrap:wrap;gap:6px;justify-content:center;} .pagination button{min-width:40px;min-height:40px;font-size:14px;padding:6px 12px;} /* 标签页 */ .tabs{flex-wrap:wrap;gap:6px;} .tab{padding:10px 16px;font-size:14px;min-height:44px;border-radius:6px;} /* 进度条 */ .progress-bar{height:24px;border-radius:12px;} .progress-bar span{font-size:12px;line-height:24px;} /* 隐藏桌面端元素 */ .desktop-only{display:none !important;} /* 显示移动端元素 */ .mobile-only{display:block !important;} /* 输入框聚焦效果 */ input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--c-primary,#2980b9); box-shadow:0 0 0 3px rgba(41,128,185,.1); } } /* ========== 响应式设计 - 小屏手机 (<480px) ========== */ @media screen and (max-width: 480px){ body{font-size:13px;} .stats-row{grid-template-columns:1fr;} .stat-card{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:12px 14px;} .stat-num{font-size:20px;margin-bottom:0;} .stat-label{font-size:13px;} .topbar-title{font-size:14px;} .btn{padding:10px 14px;font-size:14px;min-height:44px;} table{min-width:450px;font-size:12px;} th,td{padding:8px 6px;} .modal-box{width:100%;height:100vh;margin:0;border-radius:0;} .login-box{width:100%;padding:24px 20px;} .login-title{font-size:20px;} .filter-bar select,.filter-bar input{min-width:100%;} .form-group input[type="text"], .form-group input[type="number"], .form-group input[type="date"], .form-group input[type="time"], .form-group input[type="password"], .form-group select, .form-group textarea{ font-size:16px; /* 防止iOS自动缩放 */ } } /* ========== 移动端菜单按钮 ========== */ .mobile-menu-btn{ display:none; background:none; border:none; color:#fff; font-size:20px; cursor:pointer; padding:4px 8px; } @media screen and (max-width: 768px){ .mobile-menu-btn{display:block;} } /* 【2026-10-26】打印预览页 neutralize：主题皮肤给全站表格行加了半透明斑马纹 （tbody tr:nth-child !important），并覆写 td 边框/内边距/文字色。预览纸面变白后 条纹显成灰块、"底色乱"。用 #modalBody ID 级选择器压过主题规则； td 自己的内联底色（表头深蓝 #1b2940）不受影响；打印走 iframe 独立样式。 */ #modalBody .print-page tr, #modalBody .print-page tr:hover{ background:transparent !important; } #modalBody .print-page table{ color:#fff !important; } #modalBody .print-page td, #modalBody .print-page th{ border:1px solid #3b4a63 !important; padding:6px !important; } /* 【2026-10-26】打印预览（屏幕）：每个打印页显示为独立 A4 纸张，页与页之间留白分隔。 仅屏幕生效（@media screen），实际打印由 @media print / iframe 内样式接管，互不影响。 解决预览里所有页连续堆叠、看起来"一页塞 8 张照片"的问题。 */ @media screen{ #modalBody .print-page{ background:#0d1520; width:794px; /* A4 纵向 @96dpi */ max-width:100%; min-height:1100px; margin:0 auto 28px; padding:24px 28px; box-sizing:border-box; box-shadow:0 2px 14px rgba(0,0,0,.45); border-radius:2px; color:#fff; overflow:hidden; } #modalBody .print-page:last-of-type{ margin-bottom:0; } } /* 打印样式 */ @page { size: A4; margin: 10mm; } @media print{ html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; } /* 隐藏所有body直接子元素，除了弹窗遮罩 */ body > *:not(#modalMask) { display: none !important; } #modalMask { display: block !important; position: static !important; background: #fff !important; opacity: 1 !important; visibility: visible !important; width: 100% !important; height: auto !important; top: auto !important; left: auto !important; z-index: auto !important; } .modal-close, .no-print { display: none !important; } .modal-content { box-shadow: none !important; border: none !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important; display: block !important; } .modal-header { display: none !important; } .modal-body { padding: 0 !important; max-height: none !important; overflow: visible !important; display: block !important; } .modal-footer { display: none !important; } /* 打印分页样式 */ .print-page { display: block !important; page-break-inside: avoid; break-inside: avoid; } .print-page:first-child { page-break-after: always; break-after: page; } /* 【2026-10-27】派工单打印高对比度：打印时不输出背景色，深底白字会印成白底白字。 打印媒体强制白纸黑字黑框，标签格改浅灰底加粗；用 ID 级选择器压过主题规则。 */ #modalBody .print-page{ background:#fff !important; color:#000 !important; box-shadow:none !important; } #modalBody .print-page td, #modalBody .print-page th{ background:#fff !important; color:#000 !important; border:1px solid #000 !important; } #modalBody .print-page .dispatch-print-table td[style*="1b2940"]{ background:#fff !important; color:#000 !important; font-weight:bold !important; } #modalBody .print-page .dispatch-print-head{ background:#fff !important; color:#000 !important; } #modalBody .print-page .dispatch-print-note{ color:#000 !important; } } /* ===== 全局进度条（原内联 style 块） ===== #globalProgressBar.show { display:block !important; } #globalProgressBar.indeterminate #globalProgressFill { animation: progressIndeterminate 1.5s infinite ease-in-out; } @keyframes progressIndeterminate { 0% { width:0%; margin-left:0%; } 50% { width:70%; margin-left:15%; } 100% { width:0%; margin-left:100%; } } /* ========== 深色仪表盘主题（参照 Fanbook 风格） ========== */ body{background:#0d1520;color:#e2e8f0;} /* 顶部导航 */ .topbar{background:linear-gradient(90deg,#0b1220,#12203a);border-bottom:1px solid #1e2c44;box-shadow:0 2px 12px rgba(0,0,0,.4);} .topbar-project{color:#8b9bb4;border-left-color:#2a3a55;} .topbar-date{color:#8b9bb4;} .topbar-info-tag{background:rgba(59,130,246,.15);border-radius:6px;} .topbar-info-tag:hover{background:rgba(59,130,246,.28);} .top-user .user-role{background:rgba(59,130,246,.22);color:#93c5fd;border-radius:6px;} /* 侧边栏 */ .sidebar{background:#0b111c;border-right:1px solid #1a2438;} .menu-item{color:#c3cfe0;border-radius:8px;margin:2px 6px;padding:10px 12px;border-left:3px solid transparent;} .menu-item:hover{background:#141f33;color:#fff;} .menu-item.active{background:linear-gradient(90deg,rgba(59,130,246,.28),rgba(59,130,246,.06));border-left-color:#3b82f6;color:#fff;} .menu-group-title{color:#c3cfe0;border-radius:8px;margin:2px 6px;padding:10px 12px;border-left:3px solid transparent;} .menu-group-title:hover{background:#141f33;} .menu-sub{background:rgba(0,0,0,.25);border-radius:8px;margin:0 6px;} .menu-sub .menu-item{padding-left:28px;} .menu-sub-title{color:#8b9bb4;border-radius:6px;} .menu-sub-title:hover{background:rgba(59,130,246,.14);color:#c3cfe0;} .menu-sub-title.expanded{color:#e2e8f0;} /* 内容区 */ .content{padding:16px;} /* 卡片 */ .card{background:#16202f;border:1px solid #24314a;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.25);margin-bottom:16px;} .card-header{border-bottom:1px solid #24314a;padding:14px 18px;} .card-title{color:#e8eef7;} .card-body{padding:16px 18px;} /* 统计卡片 */ .stat-card{position:relative;overflow:hidden;border-radius:12px;padding:16px 18px;background:linear-gradient(160deg,#13203a 0%,#0c1729 100%);border:1.5px solid rgba(56,189,248,.55);box-shadow:0 0 16px rgba(56,189,248,.20),inset 0 0 24px rgba(56,189,248,.06);transition:transform .22s ease,box-shadow .22s ease;} .stat-card.normal{border-color:rgba(52,211,153,.55);box-shadow:0 0 16px rgba(52,211,153,.20),inset 0 0 24px rgba(52,211,153,.06);} .stat-card.warn{border-color:rgba(251,146,60,.60);box-shadow:0 0 16px rgba(251,146,60,.24),inset 0 0 24px rgba(251,146,60,.07);} .stat-card.danger{border-color:rgba(248,113,113,.60);box-shadow:0 0 16px rgba(248,113,113,.24),inset 0 0 24px rgba(248,113,113,.07);} .stat-card.clickable{cursor:pointer;} .stat-card.clickable:hover{transform:translateY(-3px);} .stat-label{color:#9db4d4;} .stat-card-icon{background:linear-gradient(160deg,#13203a,#0c1729);border:1.5px solid rgba(56,189,248,.55);border-radius:12px;box-shadow:0 0 16px rgba(56,189,248,.20),inset 0 0 24px rgba(56,189,248,.06);} .stat-card-icon.normal{border-color:rgba(52,211,153,.55);box-shadow:0 0 16px rgba(52,211,153,.20),inset 0 0 24px rgba(52,211,153,.06);} .stat-card-icon.warn{border-color:rgba(251,146,60,.60);box-shadow:0 0 16px rgba(251,146,60,.24),inset 0 0 24px rgba(251,146,60,.07);} .stat-card-icon.danger{border-color:rgba(248,113,113,.60);box-shadow:0 0 16px rgba(248,113,113,.24),inset 0 0 24px rgba(248,113,113,.07);} .stat-card-icon .stat-icon-wrap{background:rgba(56,189,248,.15);border-radius:10px;} .stat-card-icon .stat-label{color:#9db4d4;} /* 表格 */ .table-wrap{scrollbar-color:#2b3a55 #0f1728;} table{color:#dbe4f0;} th,td{border:1px solid #24314a;padding:9px 12px;} th{background:linear-gradient(180deg,#0e1d33 0%,#0b1626 100%);color:#7fe2f5;font-weight:600;border-bottom:1.5px solid #2fd0ef;box-shadow:0 3px 9px -3px rgba(47,208,239,.55);} tr:hover{background:rgba(56,189,248,0.12);} tr:nth-child(even){background:rgba(255,255,255,.02);} tr:nth-child(even):hover{background:rgba(56,189,248,0.12);} /* 按钮 */ .btn{border-radius:8px;font-weight:500;box-shadow:0 2px 6px rgba(0,0,0,.22);} .btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);} .btn-primary:hover{background:linear-gradient(135deg,#4b8ff7,#2f6ff0);opacity:1;} .btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);} .btn-success:hover{background:linear-gradient(135deg,#2fd56b,#17a94e);opacity:1;} .btn-warn{background:linear-gradient(135deg,#f59e0b,#d97706);} .btn-warn:hover{background:linear-gradient(135deg,#faa916,#e0820a);opacity:1;} .btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);} .btn-danger:hover{background:linear-gradient(135deg,#f15252,#e02a2a);opacity:1;} .btn-default{background:#334155;color:#e2e8f0;} .btn-default:hover{background:#3d4c63;opacity:1;} .btn-link{color:#38d6f5;} /* 表单 */ .form-group label{color:#93a5c0;} .form-group input,.form-group select,.form-group textarea{background:#0f1728;border:1px solid #2b3a55;border-radius:8px;color:#e2e8f0;padding:8px 10px;} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15);} .form-group input::placeholder,.form-group textarea::placeholder{color:#7c8aa0;} .form-group select option{background:#16202f;color:#e2e8f0;} .form-footer{border-top-color:#24314a;} /* 通用输入控件（页面内散落的搜索框/筛选框等） */ input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),select,textarea{background:#0f1728;border:1px solid #2b3a55;color:#e2e8f0;border-radius:8px;} input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):focus,select:focus,textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15);outline:none;} select option{background:#16202f;color:#e2e8f0;} input::placeholder,textarea::placeholder{color:#7c8aa0;} /* 模态框 */ .modal-mask{background:rgba(4,8,15,.72);backdrop-filter:blur(4px);} .modal{background:#16202f;border:1px solid #24314a;border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.5);color:#e2e8f0;} .modal-header{border-bottom-color:#24314a;} .modal-close{color:#8b9bb4;} .modal-close:hover{color:#fff;} /* 状态标签 */ .tag{border-radius:11px;padding:2px 11px;font-size:11.5px;font-weight:500;} .tag-gray{background:#475569;} .tag-dark{background:#1e293b;border:1px solid #334155;} /* 页面内进度条 */ .progress{background:#0f1728;border-radius:8px;} .progress-text{color:#e2e8f0;} /* 预警列表 */ .alert-item{border-radius:10px;} .alert-item.danger{background:rgba(239,68,68,.12);border-color:#ef4444;} .alert-item.warn{background:rgba(245,158,11,.12);border-color:#f59e0b;} .alert-item.normal{background:rgba(34,197,94,.12);border-color:#22c55e;} .alert-info h4{color:#e2e8f0;} .alert-info p{color:#8b9bb4;} /* 简易图表 */ .bar-chart{border-bottom-color:#24314a;} .bar{background:linear-gradient(180deg,#60a5fa,#3b82f6);border-radius:4px 4px 0 0;} .bar-val{color:#e2e8f0;} .bar-label{color:#8b9bb4;} .pie-legend .legend-row{color:#dbe4f0;} /* 流程步骤 */ .steps::before{background:#24314a;} .step-circle{background:#1b2940;color:#8b9bb4;} .step.done .step-circle{background:#22c55e;color:#fff;} .step.active .step-circle{background:#3b82f6;color:#fff;} /* 项目信息 */ .info-key{color:#8b9bb4;} .info-val{color:#e2e8f0;} /* 空状态 */ .empty{color:#8b98ad;} /* Toast */ .toast{background:#1e293b;border:1px solid #2b3a55;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.45);} /* 登录界面 */ .login-mask{background:linear-gradient(135deg,#0a0f1c 0%,#101b33 55%,#0d1520 100%);} .login-box{background:rgba(22,32,47,.96);border:1px solid #24314a;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);} .login-title{color:#e8eef7;} .login-subtitle{color:#8b9bb4;} .login-form label{color:#93a5c0;} .login-form input{background:#0f1728;border:1px solid #2b3a55;border-radius:8px;color:#e2e8f0;} .login-form input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15);} .login-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:8px;font-weight:600;} .login-btn:hover{background:linear-gradient(135deg,#4b8ff7,#2f6ff0);} .login-tip{color:#8b98ad;} .login-error{background:rgba(239,68,68,.12);border-color:#ef4444;color:#fca5a5;} /* 机械设备分类标签 */ .machine-tab{background:#0f1728;border-color:#2b3a55;border-radius:8px;color:#93a5c0;} .machine-tab:hover{border-color:#3b82f6;color:#60a5fa;} .machine-tab.active{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#3b82f6;} /* 滚动条 */ .content::-webkit-scrollbar-thumb{background:#2b3a55;border-radius:4px;} .content::-webkit-scrollbar-thumb:hover{background:#3b4a6b;} /* ========== 白色残留清扫（行内样式已批量替换后的兜底） ========== */ input[type=date],input[type=time],input[type=datetime-local]{color-scheme:dark;} .modal-box{background:#16202f;color:#e2e8f0;} /* 兜底：仍有行内白底的弹窗类元素 */ .modal-body, .modal-header, .modal-footer{background:#16202f !important;} table thead th{background:linear-gradient(180deg,#0e1d33,#0b1626) !important;color:#7fe2f5 !important;border-bottom:1.5px solid #2fd0ef !important;} .sidebar::-webkit-scrollbar-thumb{background:#1e2c44;} /* 部署说明 */ .deploy-guide{background:#101a2c;border-color:#24314a;border-radius:10px;} .deploy-guide h3{color:#e8eef7;} .deploy-guide code{background:#1b2940;color:#93c5fd;} .deploy-guide .note{background:rgba(245,158,11,.12);border-color:#f59e0b;color:#fde68a;} /* 表格内链接按钮 */ .table-actions .btn-link{color:#38d6f5;} /* 全局滚动条 */ ::-webkit-scrollbar{width:8px;height:8px;} ::-webkit-scrollbar-track{background:#0d1520;} ::-webkit-scrollbar-thumb{background:#2b3a55;border-radius:4px;} ::-webkit-scrollbar-thumb:hover{background:#3b4a6b;} /* ========== 白色残留清扫（行内样式已批量替换后的兜底） ========== */ input[type=date],input[type=time],input[type=datetime-local]{color-scheme:dark;} .modal-box{background:#16202f;color:#e2e8f0;} /* 兜底：仍有行内白底的弹窗类元素 */ .modal-body, .modal-header, .modal-footer{background:#16202f !important;} table thead th{background:linear-gradient(180deg,#0e1d33,#0b1626) !important;color:#7fe2f5 !important;border-bottom:1.5px solid #2fd0ef !important;} /* ========== 工程量管理宽表 ========== */ #drawingGrid{border-collapse:separate !important;border-spacing:0 !important;font-size:12px;} #drawingGrid th,#drawingGrid td{border-right:1px solid #1e3148;border-bottom:1px solid #1e3148;padding:5px 8px;white-space:nowrap;color:#cfe0f5;background:#0d1a2d;} #drawingGrid thead th{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,#10243c,#0b1a2e) !important;color:#8fd0ff !important;font-weight:700;text-align:center;border-bottom:2px solid #2b6aa0 !important;} #drawingGrid thead tr:first-child th{box-shadow:inset 0 1px 0 #2b6aa0;} #drawingGrid thead th{overflow:visible;} #drawingGrid th .dg-colres{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;user-select:none;z-index:35;} #drawingGrid th .dg-colres:hover{background:rgba(88,198,255,.5);} #drawingGrid th .dg-colres:active{background:rgba(88,198,255,.8);} #drawingGrid th.dg-unlocked{background:linear-gradient(180deg,#7c2d12,#5c1f0d) !important;color:#ffd479 !important;} #drawingGrid .dg-bld td{background:#13294a;font-weight:700;color:#ffd98a;border-bottom:2px solid #2b5a86;} #drawingGrid .dg-sec td{background:#0f2238;color:#9fc8ef;font-weight:600;} #drawingGrid tr.dg-sec td{position:sticky;top:33px;z-index:20;} #drawingGrid .dg-total td{background:#0c1f36;color:#ffd98a;font-weight:700;border-top:2px solid #2b5a86;} #drawingGrid td.dg-itemname{color:#eef5ff;} #drawingGrid td.dg-num{text-align:right;font-family:Consolas,monospace;color:#b8d4f0;} #drawingGrid td.dg-amt{text-align:right;font-family:Consolas,monospace;color:#7fe0a8;} #drawingGrid td.dg-over{color:#ff8a8a !important;} #drawingGrid tr.dg-item:hover td{background:#122c4a;} #drawingGrid .dg-foldarrow{cursor:pointer;display:inline-block;width:16px;color:#8fd0ff;text-align:center;} #drawingGrid input.dg-cell{width:90px;background:#0a2238;border:1px solid #3b82f6;border-radius:3px;color:#fff;padding:2px 5px;font-size:12px;text-align:right;outline:none;} #drawingGrid .dg-mqty{text-align:right;font-family:Consolas,monospace;color:#b8d4f0;min-height:15px;} #drawingGrid .dg-mamt{text-align:right;font-family:Consolas,monospace;font-size:10px;color:#5fb8d8;margin-top:1px;min-height:12px;} #drawingGrid .dg-sub .dg-mamt{color:#7dd3fc;} #drawingGrid .dg-grand .dg-mamt{color:#fbbf24;font-weight:600;} #drawingGrid .dg-cnt{color:#7c93b3;font-size:10px;font-weight:400;margin-left:6px;} #drawingGrid .dg-sec-amt,#drawingGrid .dg-bld-amt,#drawingGrid .dg-bld-done{margin-left:22px;font-size:12px;color:#cfe0f5;} #drawingGrid .dg-bld-done{color:#86efac;} #drawingGrid td.dg-empty{text-align:center;color:#7c8aa0;padding:40px;} #drawingGrid .dg-rowops{display:inline-flex;gap:6px;margin-left:8px;opacity:0;transition:opacity .15s;vertical-align:middle;} #drawingGrid tr.dg-item:hover .dg-rowops{opacity:1;} #drawingGrid .dg-rowops button{background:none;border:none;cursor:pointer;font-size:13px;padding:0 2px;} #drawingGrid .dg-rowops .dg-op-edit{color:#7dd3fc;} #drawingGrid .dg-rowops .dg-op-del{color:#fca5a5;} #drawingGrid th.dg-mh{cursor:default;} /* 班组产值台账：表头下方「每月合计」行（吸顶跟随表头） */ #drawingGrid thead tr.dg-grand-row th{background:#16324f !important;color:#fbbf24 !important;font-weight:700;border-top:2px solid #2b6aa0 !important;box-shadow:inset 0 1px 0 #2b6aa0;} #drawingGrid thead tr.dg-grand-row th.dg-amt{color:#7fe0a8 !important;} #drawingGrid thead tr.dg-grand-row th.dg-num{color:#b8d4f0 !important;} #drawingGrid thead tr.dg-grand-row th .dg-mqty{color:#b8d4f0 !important;font-weight:400;text-align:right;font-family:Consolas,monospace;} #drawingGrid thead tr.dg-grand-row th .dg-mamt{color:#fbbf24 !important;font-weight:700;text-align:right;font-family:Consolas,monospace;font-size:11px;margin-top:1px;} #drawingGrid thead tr.dg-grand-row th.dg-itemname{text-align:left;color:#ffd98a !important;} /* ========== UI 增强（2026-09-27） ========== */ .topbar{background:linear-gradient(135deg,#0f1d33 0%,#0b111c 100%);border-bottom:1px solid #1d3150;} .card{border-radius:10px;box-shadow:0 3px 14px rgba(0,0,0,.32);} .card-header{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));} .btn{border-radius:6px;font-weight:500;} .btn:hover{opacity:.9;filter:brightness(1.12);} .btn:active{transform:translateY(1px);} .menu-item,.menu-group-title{transition:background-color .15s ease,border-color .15s ease,color .15s ease;} .menu-item.active{box-shadow:inset 2px 0 0 var(--c-primary);} .content table th{font-variant-numeric:tabular-nums;} .content::-webkit-scrollbar-thumb{background:rgba(139,155,180,.4);} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}} /* ===== 手机端登录适配（2026-09-26，web-design-guidelines） ===== */ html{-webkit-text-size-adjust:100%;} @media screen and (max-width: 640px){ .login-mask{padding:calc(env(safe-area-inset-top,0px) + 24px) 20px calc(env(safe-area-inset-bottom,0px) + 24px);align-items:center;background:linear-gradient(160deg,#0a0f1c 0%,#101b33 55%,#0d1520 100%);} .login-box{width:100%;max-width:100%;padding:36px 24px 40px;border-radius:20px;background:rgba(22,32,47,.97);border:1px solid #24314a;box-shadow:0 24px 70px rgba(0,0,0,.55);} .login-title{font-size:24px;letter-spacing:3px;color:#e8eef7;} .login-subtitle{font-size:13px;color:#8b9bb4;margin-bottom:30px;} .login-form .form-group{margin-bottom:18px;} .login-form label{font-size:13px;color:#93a5c0;margin-bottom:8px;} .login-form input{height:50px;padding:0 16px;font-size:16px;border-radius:12px;background:#0f1728;border:1px solid #2b3a55;color:#e2e8f0;} .login-form input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.18);} .login-btn{height:52px;font-size:16px;font-weight:600;border-radius:12px;margin-top:16px;background:linear-gradient(135deg,#3b82f6,#2563eb);} .login-btn:active{transform:translateY(1px);opacity:.9;} .login-error{font-size:13px;padding:12px 14px;border-radius:10px;margin-bottom:18px;} .login-tip{font-size:12px;margin-top:22px;} *{-webkit-tap-highlight-color:transparent;} button,.login-btn,input{-webkit-touch-callout:none;} } @media screen and (max-width: 400px){ .login-box{padding:28px 18px 32px;border-radius:16px;} .login-title{font-size:22px;letter-spacing:2px;} .login-subtitle{font-size:12px;margin-bottom:24px;} } @media screen and (max-width: 768px){ .login-form input,.login-btn{touch-action:manipulation;} } } /* ========== 导入冲突确认弹窗（2026-10-06） ========== */ .ic-warn-box{background:rgba(245,158,11,.12);border-left:4px solid #f59e0b;border-radius:3px; padding:10px 14px;font-size:12.5px;line-height:1.7;color:var(--c-text);margin-bottom:12px;} .ic-warn-box b{color:#f59e0b;font-size:14px;} .ic-table-wrap{max-height:46vh;overflow-y:auto;overscroll-behavior:contain; border:1px solid var(--c-border);border-radius:4px;} .ic-table{width:100%;border-collapse:collapse;font-size:12px;} .ic-table th{position:sticky;top:0;background:#1f2c44;color:var(--c-text-sub);font-weight:600; text-align:left;padding:8px 10px;border-bottom:1px solid var(--c-border);white-space:nowrap;z-index:2;} .ic-table td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top;} .ic-table tr:last-child td{border-bottom:none;} .ic-table tbody tr:hover{background:rgba(255,255,255,.04);} .ic-label{max-width:280px;font-weight:600;color:var(--c-text);} .ic-field{width:110px;color:var(--c-text-sub);white-space:nowrap;} .ic-old{width:120px;color:#94a3b8;text-decoration:line-through;text-decoration-color:rgba(148,163,184,.5);} .ic-new{width:120px;color:#4ade80;font-weight:600;} .ic-old-h{color:#94a3b8 !important;} .ic-new-h{color:#4ade80 !important;} /* ===== 进度跟踪（2026-10-13：原「每日填报与偏差」列表 → 跟踪看板）===== 页面 = 筛选栏 + 视图切换 + 流水表 + 导出/打印；明细列：完成量条 / vs 计划 / 天气 / 延误原因。 */ .track-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .track-scope{font-size:12px;color:#8fb0c8;font-variant-numeric:tabular-nums;} .track-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;} .track-ranges{display:inline-flex;border:1px solid rgba(120,200,255,.22);border-radius:6px;overflow:hidden;} .track-range{padding:5px 11px;font-size:12.5px;font-family:inherit;cursor:pointer;border:none; background:#0d1b2a;color:#8fb0c8;border-right:1px solid rgba(120,200,255,.16);} .track-range:last-child{border-right:none;} .track-range:hover{background:#12263d;color:#cfe3f5;} .track-range.on{background:rgba(88,198,255,.18);color:#8fd8ff;font-weight:600;} .track-filter input[type=date],.track-filter select,.track-filter input[type=search]{ height:30px;padding:4px 8px;border-radius:6px;background:#0d1b2a;color:#dce8f5; border:1px solid rgba(120,200,255,.22);font-size:12.5px;font-family:inherit;} .track-filter input[type=search]{min-width:186px;} .track-tilde{color:#8fa8c0;font-size:12px;} .track-chk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#8fb0c8;cursor:pointer;user-select:none;} .track-chk input{accent-color:var(--bp-cyan,#58c6ff);cursor:pointer;} .track-views{display:flex;align-items:center;gap:6px;margin-bottom:8px;} .track-tab{padding:4px 13px;border-radius:999px;font-size:12.5px;font-family:inherit;cursor:pointer; background:transparent;border:1px solid rgba(120,200,255,.22);color:#8fb0c8;} .track-tab:hover{color:#cfe3f5;border-color:rgba(120,200,255,.4);} .track-tab.on{background:rgba(88,198,255,.16);border-color:rgba(88,198,255,.5);color:#8fd8ff;font-weight:600;} .track-count{margin-left:auto;font-size:12px;color:#8fa8c0;} #tableTrack td{font-size:12.5px;color:#cfe3f5;vertical-align:top;} #tableTrack tbody tr:hover{background:rgba(88,198,255,.06);} .track-group td{background:rgba(88,198,255,.10);color:#9fd6ff;font-size:12.5px;font-weight:600;} .track-group-n{color:#8fb0c8;font-weight:400;margin-left:6px;} .track-groupcell{background:rgba(88,198,255,.05);color:#cfe3f5;font-weight:600;} .track-bld{color:#8fd8ff;} .track-bar{display:inline-block;width:74px;height:8px;border-radius:4px;background:rgba(120,200,255,.16); overflow:hidden;vertical-align:middle;margin-right:6px;} .track-bar>span{display:block;height:100%;background:linear-gradient(90deg,#2f9e6b,#4ade80);} .track-pct{color:#dce8f5;font-variant-numeric:tabular-nums;font-weight:600;} .track-up{color:#4ade80;font-size:11.5px;margin-left:6px;} .track-sub{color:#7f93ab;font-size:11.5px;margin-top:2px;} .track-none{color:#5d7387;} .track-ahead{color:#4ade80;font-weight:600;} .track-lag{color:#f09595;font-weight:600;} .track-ok{color:#8fb0c8;} .track-wx{color:#a9cfe8;} /* 延误原因：标签点击即打开编辑面板（批次㉒） */ .track-reasons{display:flex;flex-wrap:wrap;gap:4px 6px;} .track-reason{display:inline-block;font-size:11.5px;line-height:1.55;color:#ffcf8a;cursor:pointer; border-radius:4px;padding:0 3px;transition:background .15s;} .track-reason:hover{background:rgba(255,207,138,.16);} .track-reason.done{color:#7fa88f;text-decoration:line-through;} .track-reason.done:hover{background:rgba(127,168,143,.16);} .track-reason-open{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;font-size:11px; background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.4);color:#fbbf24;} .track-reason-edit{margin-top:5px;padding:1px 8px;font-size:11.5px;font-family:inherit;cursor:pointer; background:transparent;border:1px dashed rgba(120,200,255,.35);border-radius:4px;color:#8fd8ff; transition:background .15s,border-color .15s;} .track-reason-edit:hover{background:rgba(88,198,255,.12);border-style:solid;border-color:rgba(120,200,255,.6);} .track-thumb{width:34px;height:34px;object-fit:cover;border-radius:4px;cursor:pointer;margin-right:4px; border:1px solid rgba(120,200,255,.24);} .track-empty{padding:26px 10px;text-align:center;color:#8fa8c0;font-size:12.5px;line-height:1.8;} /* 延误原因编辑面板（批次㉒）：复用通用弹窗 #modalBody / #modalTitle。 输入框外观沿用主题的全局 input 规则（深底 + 青边），这里只补布局，避免与 !important 打架。 */ .track-edit-hint{margin-bottom:10px;padding:8px 10px;border-radius:6px; background:rgba(88,198,255,.07);border:1px solid rgba(120,200,255,.18);} .track-edit-who{font-size:13px;color:#dce8f5;font-weight:600;} .track-edit-date{margin-left:8px;font-size:12px;color:#8fa8c0;font-variant-numeric:tabular-nums;font-weight:400;} .track-edit-tip{margin-top:4px;font-size:11.5px;color:#8fb0c8;line-height:1.6;} .track-edit-list{display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow-y:auto;padding:2px;} .track-edit-item{display:flex;align-items:center;gap:8px;} .track-edit-chk{flex:0 0 auto;width:15px;height:15px;margin:0;cursor:pointer;accent-color:var(--bp-cyan,#58c6ff);} .track-edit-inp{flex:1 1 auto;min-width:0;height:28px;padding:0 9px;box-sizing:border-box;font-family:inherit;} .track-edit-del{flex:0 0 auto;width:24px;height:24px;line-height:1;font-size:12px;font-family:inherit; cursor:pointer;background:transparent;border:1px solid rgba(240,149,149,.35);border-radius:4px;color:#f09595; transition:background .15s;} .track-edit-del:hover{background:rgba(240,149,149,.16);} .track-edit-ops{display:flex;align-items:center;gap:10px;margin:10px 0 4px;} .track-edit-cnt{font-size:11.5px;color:#8fa8c0;} .stat-card .stat-unit{font-size:14px;color:#8fa8c0;} /* 进度日报：多工序行 + 提示（2026-10-10 去掉 .rate-slider 滑块样式，累计率改直接输入） */ .rp-row{background:rgba(14,26,46,.35);} .rp-hint{margin-top:6px;font-size:12px;color:#8fb0c8;line-height:1.65;} .rp-hint b{color:#dce8f5;font-weight:600;} .rp-force{display:flex;align-items:center;gap:6px;font-size:12px;color:#fbbf24;margin-top:6px;cursor:pointer;} .rp-force input{width:auto;accent-color:#fbbf24;} .rp-history{margin-top:2px;max-height:200px;overflow:auto;border:1px solid rgba(120,200,255,.16); border-radius:8px;background:#0e1a2e;padding:8px 10px;} .rp-history-title{font-size:12px;color:#8fb0c8;margin-bottom:6px;} .rp-history-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 0; border-bottom:1px dashed rgba(120,200,255,.12);} .rp-history-row:last-child{border-bottom:none;} .rp-hist-date{color:#cfe3f5;font-variant-numeric:tabular-nums;} .rp-hist-qty{color:#8fb0c8;} .rp-hist-rate{color:#38d6f5;font-weight:600;font-variant-numeric:tabular-nums;} /* ============================================================ 树形权限勾选 UI（2026-10-07） ------------------------------------------------------------ 父节点三态：.perm-group-box[data-indeterm] 用 CSS 画一个横杠， 不用原生 indeterminate（它在 reset/render 后不可靠，且没法单独样式化）。 ============================================================ */ .perm-tree{border:2px solid #2b3a55;border-radius:8px;background:#16233b;overflow:hidden;} .perm-tree-toolbar{display:flex;align-items:center;gap:14px;padding:7px 12px;background:#101d31; border-bottom:1px solid #2b3a55;font-size:12.5px;} .perm-tree-toolbar .btn-link{font-size:12.5px;} .perm-tree-hint{color:#7f93ab;margin-left:auto;} .perm-tree-hint b{color:#38bdf8;} .perm-tree-scroll{max-height:420px;overflow-y:auto;padding:6px;} .perm-group{border:1px solid #25344f;border-radius:6px;margin-bottom:5px;background:#0f1c2f;overflow:hidden;} .perm-node-head{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;user-select:none; transition:background .15s;} .perm-node-head:hover{background:#1a2942;} /* ⚠️ 叶子容器宽度要放开：里面除了复选框+名称还塞了一个读写下拉， 原来 minmax(150px,1fr) 会被挤成两行、下拉被压成竖条 */ .perm-node-body{padding:4px 10px 9px 34px;display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:3px 10px;} .perm-group.collapsed > .perm-node-body{display:none;} /* 叶子行：复选框 + 名称 + 读写下拉。不用