body { font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif; } .navbar-brand { font-weight: 600; letter-spacing: .5px; } .tab-content { min-height: 60vh; } .table th { white-space: nowrap; font-weight: 600; } .table td { vertical-align: middle; } /* 状态徽章配色（与状态机一一对应） */ .badge-status { color: #fff; padding: .35em .6em; font-size: .8em; border-radius: .35rem; } .badge-PENDING_PRINT { background:#6c757d; } /* 待打印 灰 */ .badge-PRINTED { background:#0dcaf0; color:#000; } /* 已打印 蓝 */ .badge-PENDING_INBOUND { background:#ffc107; color:#000; } /* 待入库 黄 */ .badge-IN_STOCK { background:#198754; } /* 在库 绿 */ .badge-PENDING_OUTBOUND { background:#fd7e14; } /* 待出库 橙 */ .badge-OUTBOUND { background:#212529; } /* 已出库 深 */ .count-card { transition: transform .1s ease; } .count-card .num { font-size: 1.6rem; font-weight: 700; } .count-card .lbl { font-size: .8rem; color:#6c757d; } /* 整行可点勾选：鼠标手型提示（选中高亮由 JS 加 .table-active） */ .row-clickable tr { cursor: pointer; } /* ===== 应用框架：左侧导航 + 顶栏 + 内容区（统一科技深蓝主题） ===== */ :root{ --rfid-navy:#06345f; --rfid-navy-2:#0a4a86; --rfid-cyan:#22d3ee; --rfid-cyan-d:#0891b2; --rfid-bg:#f4f7fb; --rfid-line:#e3eaf2; } html,body{height:100%;} .app-shell{display:flex; height:100vh; overflow:hidden; background:var(--rfid-bg);} /* 左侧导航 */ .app-sidebar{ flex:0 0 232px; max-width:232px; height:100vh; overflow:hidden; background:linear-gradient(180deg,#06345f 0%,#04264a 100%); color:#cfe3f7; display:flex; flex-direction:column; } .app-brand{display:flex; align-items:center; gap:10px; padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.08);} .app-brand-logo{display:flex;} .app-brand-logo img{height:36px; width:auto; display:block;} .app-brand-text{display:flex; flex-direction:column; min-width:0;} .app-brand-title{font-weight:700; color:#fff; font-size:15px; letter-spacing:.3px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; word-break:break-word;} .app-brand-sub{font-size:11px; color:#7fb0dd; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .app-brand-version{font-size:11px; color:#5e88b5; margin-top:6px; white-space:nowrap;} .app-sidenav{flex:1 1 auto; min-height:0; padding:10px; overflow-y:auto; overflow-x:hidden; flex-wrap:nowrap;} .app-sidenav .nav-item{margin-bottom:2px;} .app-sidenav .nav-link{ display:flex; align-items:center; gap:11px; color:#bcd6ef; width:100%; text-align:left; border-radius:9px; padding:10px 12px; font-size:14px; border-left:3px solid transparent; transition:all .15s ease; } .app-sidenav .nav-link .nav-ico{pointer-events:none;} .modal-content{border-radius:12px;} .app-sidenav .nav-link:hover{background:rgba(34,211,238,.10); color:#fff;} .app-sidenav .nav-link.active{ background:linear-gradient(90deg,rgba(34,211,238,.18),rgba(34,211,238,.03)); color:#fff; border-left-color:var(--rfid-cyan); box-shadow:inset 0 0 0 1px rgba(34,211,238,.15); } .app-sidenav .nav-ico{width:19px; height:19px; flex:0 0 19px;} /* 右侧主区 */ .app-main{flex:1 1 auto; display:flex; flex-direction:column; min-width:0; height:100vh; overflow:hidden;} .app-topbar{ height:56px; flex:0 0 56px; background:#fff; border-bottom:1px solid var(--rfid-line); display:flex; align-items:center; justify-content:space-between; padding:0 20px; } .app-crumb{display:flex; align-items:center; gap:8px; font-weight:600; color:#1f2d3d; font-size:15px;} .app-crumb-ico{color:var(--rfid-cyan-d);} .app-topbar-right{display:flex; align-items:center; gap:12px;} .top-lang{color:#5b7088; font-size:13px; text-decoration:none; padding:4px 9px; border-radius:6px; transition:.15s;} .top-lang:hover{background:#eef4fb; color:var(--rfid-navy);} .top-sep{width:1px; height:20px; background:var(--rfid-line);} .top-user{font-size:13px; color:#33475c;} .top-version{font-size:12px; color:#8a9bb0;} .app-content{flex:1 1 auto; overflow:auto; padding:20px; background:var(--rfid-bg);} /* 卡片 / 表格 / 按钮 主题润色 */ .app-content .card{border:1px solid var(--rfid-line); border-radius:12px; box-shadow:0 1px 2px rgba(16,40,70,.04);} .app-content .card-header{background:#f7fafd; border-bottom:1px solid var(--rfid-line); border-radius:12px 12px 0 0 !important;} .table{background:#fff; border-color:var(--rfid-line);} .table thead th{background:#eef4fb !important; color:#33475c; border-color:var(--rfid-line);} .count-card{background:#fff; border:1px solid var(--rfid-line); border-radius:12px; box-shadow:0 1px 2px rgba(16,40,70,.04);} .btn-primary{background:linear-gradient(90deg,var(--rfid-navy),var(--rfid-navy-2)); border-color:transparent;} .btn-primary:hover{background:linear-gradient(90deg,var(--rfid-navy-2),var(--rfid-cyan-d)); border-color:transparent;} /* 窄屏：侧栏变顶部横向滚动导航 */ @media (max-width:900px){ .app-shell{flex-direction:column; height:auto; overflow:visible;} .app-sidebar{flex-basis:auto; width:100%; max-width:100%; height:auto; flex-direction:column;} .app-sidenav{flex-direction:row; overflow-x:auto; padding:8px;} .app-sidenav .nav-link{border-left:none; border-bottom:3px solid transparent; white-space:nowrap; padding:8px 10px;} .app-sidenav .nav-link.active{border-left:none; border-bottom-color:var(--rfid-cyan);} .app-main{height:auto; overflow:visible;} .app-content{overflow:visible;} } /* ===== 登录页：沉浸式科技感 + RFID 射频扫描意象 ===== */ /* 首屏防闪（与 index.html 内联脚本配套）：已登录时首帧就隐藏登录层 */ html.auth-restored #loginPage { display: none !important; } .login-page{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; background: radial-gradient(1200px 600px at 15% 10%, rgba(8,73,134,.55), transparent 60%), radial-gradient(1000px 700px at 90% 100%, rgba(34,211,238,.18), transparent 55%), linear-gradient(135deg,#04101f 0%, #062845 45%, #06345f 100%); overflow:hidden; } .login-bg{position:absolute; inset:0; z-index:0; overflow:hidden;} .login-grid{ position:absolute; inset:-50%; background-image: linear-gradient(rgba(34,211,238,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.08) 1px, transparent 1px); background-size:42px 42px; transform:perspective(600px) rotateX(60deg) translateY(-10%); animation:gridDrift 18s linear infinite; opacity:.45; } @keyframes gridDrift{from{background-position:0 0}to{background-position:0 42px}} .login-shell{ position:relative; z-index:2; display:flex; width:min(940px,94vw); height:min(560px,86vh); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.04); backdrop-filter:blur(6px); box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(34,211,238,.18); } .login-aside{ flex:0 0 42%; max-width:42%; background:linear-gradient(180deg, rgba(6,52,95,.92), rgba(4,38,74,.92)); border-right:1px solid rgba(34,211,238,.25); padding:40px 34px; display:flex; flex-direction:column; justify-content:center; gap:18px; position:relative; overflow:hidden; } .rfid-scan{fill:rgba(34,211,238,.35); animation:tagScan 2.4s ease-in-out infinite;} @keyframes tagScan{0%{transform:translateY(0); opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(64px); opacity:0}} .login-brand-title{font-size:28px; font-weight:800; color:#fff; letter-spacing:.4px;} .login-brand-sub{font-size:15px; color:rgba(143,192,234,.72); margin-top:4px;} .login-feats{list-style:none; padding:0; margin:-4px 0 0; display:flex; flex-direction:column; gap:11px;} .login-feats li{font-size:15px; color:#cfe3f7; padding-left:20px; position:relative;} .login-feats li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px; background:var(--rfid-cyan); border-radius:2px; box-shadow:0 0 8px rgba(34,211,238,.7);} .login-panel{ flex:1 1 auto; position:relative; background:rgba(8,20,38,.35); display:flex; align-items:center; justify-content:center; padding:30px; } .login-langs{position:absolute; top:18px; right:22px; display:flex; gap:8px;} .lang-link{color:#9fc3e8; font-size:13px; text-decoration:none; padding:4px 10px; border:1px solid rgba(34,211,238,.3); border-radius:7px; transition:.15s;} .lang-link:hover{background:rgba(34,211,238,.15); color:#fff;} .login-card{width:320px; max-width:92%;} .login-tag-icon{width:54px; height:54px; margin:0 auto 14px; position:relative; overflow:hidden; border:1px solid rgba(34,211,238,.4); border-radius:10px; background:rgba(34,211,238,.06);} .login-tag-icon svg{width:100%; height:100%;} .login-welcome{text-align:center; font-size:19px; font-weight:600; color:#fff; margin-bottom:22px;} .login-card .form-label{color:#bcd6ef; font-size:13px;} .login-card input.form-control{ background:rgba(255,255,255,.06); border:1px solid rgba(34,211,238,.25); color:#fff; border-radius:9px; transition:.15s; } .login-card input.form-control:focus{background:rgba(255,255,255,.1); border-color:var(--rfid-cyan); box-shadow:0 0 0 .2rem rgba(34,211,238,.2); color:#fff;} .login-card input.form-control::placeholder{color:#7e9cbb;} .login-btn{ width:100%; padding:10px; border:none; border-radius:9px; color:#042033; font-weight:700; font-size:15px; background:linear-gradient(90deg,#22d3ee,#0891b2); box-shadow:0 6px 18px rgba(34,211,238,.35); transition:.15s; } .login-btn:hover{filter:brightness(1.08); box-shadow:0 8px 24px rgba(34,211,238,.5);} .login-ver{text-align:center; color:#7e9cbb; font-size:12px; margin-top:16px;} /* 登录页品牌 Logo：白色图标 + 透明底（PNG 为 RGBA，已重着色为纯白并保留 alpha），位于标题上方；src 由服务端按 locale 选择 */ .login-brand-logo{height:78px; width:auto; display:block; margin:0 auto 16px; align-self:center; background:transparent; transform:translateY(-30px);} /* 登录页页脚：中英双语公司名两行常显居中 */ .login-company{position:absolute; left:0; right:0; bottom:12px; z-index:2; text-align:center; color:rgba(207,227,247,.6); font-size:12px; line-height:1.7; letter-spacing:.6px; pointer-events:none;} /* 模态框置于登录遮罩之上，确保首次改密弹窗可见 */ .modal{z-index:2100 !important;} .modal-backdrop{z-index:2050 !important;} @media (max-width:768px){ .login-aside{display:none;} .login-shell{width:94vw; height:auto; min-height:64vh;} .login-panel{flex-basis:100%;} } /* 系统配置 子菜单（折叠） */ .app-sidenav li.has-submenu > .nav-link .sub-caret { transition: transform .15s; } .app-sidenav li.has-submenu > .nav-link[aria-expanded="true"] .sub-caret { transform: rotate(180deg); } /* flex-wrap 必须禁用：Bootstrap 的 .nav 默认 flex-wrap:wrap， 折叠展开动画期间容器 height 被 Bootstrap 限制（0→scrollHeight）， column 方向 + wrap + 高度受限 → 两个子菜单会换到横向新列（视觉上并成一行）， 动画结束 height 恢复 auto 才回到竖排。设 nowrap 后超出部分只被 overflow 裁剪，逐条露出。 */ .app-sidenav .subnav { margin-left: 6px; border-left: 1px solid rgba(255,255,255,.18); padding-left: 4px; flex-wrap: nowrap; } .app-sidenav .subnav > li { width: 100%; flex: 0 0 auto; } .app-sidenav .subnav .nav-link { width: 100%; text-align: left; font-size: .9rem; padding: .35rem .75rem; opacity: .9; } .app-sidenav .subnav .nav-link.active { background: rgba(34,211,238,.22); color: #fff; } /* ===== 批量操作全屏进度遮罩（1.0.41 起；1.0.42 精简文字 + 换环形动画） ===== 用途：提交入库/出库、标记已打印、批量删除（单请求，不确定进度）与直连打印（逐张，真实进度）。 遮罩覆盖整页 ⇒ 期间页面不可点，天然防连点重复提交。 1.0.42 改动：① 去掉「条数N/已用时」整行、「不会回滚」说明行、「停止等待」按钮； ② 把来回跑的条形动画换成【环形不确定进度】（原地转、无横向位移）； ③ 右上角加「×」只收起提示（请求仍在后台继续）。 */ #pgOvl { position: fixed; inset: 0; z-index: 2000; display: none; background: rgba(24,31,42,.45); align-items: center; justify-content: center; } #pgOvl.show { display: flex; } #pgPanel { position: relative; width: min(460px, calc(100vw - 32px)); background: #fff; border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.22); padding: 22px 24px; } /* 右上角「×」：只收起提示，不中断后台请求 */ #pgPanel .pg-x { position: absolute; top: 10px; right: 13px; width: 22px; height: 22px; line-height: 20px; text-align: center; border-radius: 50%; color: #adb5bd; font-size: 18px; cursor: pointer; user-select: none; } #pgPanel .pg-x:hover { background: #f1f3f6; color: #6c757d; } #pgPanel .pg-head { display: flex; align-items: center; gap: 14px; } /* 环形不确定进度（conic-gradient + 圆环遮罩）：原地旋转，无横向位移。 ⚠️ 1.0.43 修坑：原来写 conic-gradient(#0d6efd 0 28%, #dbe4f0 0 100%) 时， 那个**裸 0 会被解析成 0deg**，和 28% 混用后蓝色段被压成【零长度】⇒ 环全灰、 旋转对称 ⇒ 视觉上完全静止，看起来"没有动画"。 正解：所有色标都写全单位，且不用「双位置」简写。 */ #pgPanel .pg-ring { position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(#0d6efd 0%, #0d6efd var(--pgArc, 28%), #dbe4f0 var(--pgArc, 28%), #dbe4f0 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); animation: pgspin 1.05s linear infinite; } @keyframes pgspin { to { transform: rotate(360deg); } } /* 打印是真实进度：环按百分比填弧，中心显示「已完成/总数」，不再旋转 */ #pgPanel .pg-ring.det { animation: none; } #pgPanel .pg-ringWrap { position: relative; flex: 0 0 44px; width: 44px; height: 44px; } #pgPanel .pg-ringWrap .pg-ring { position: absolute; inset: 2px; width: 40px; height: 40px; flex: none; } #pgPanel .pg-ringTxt { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 500; color: #0d6efd; font-variant-numeric: tabular-nums; } #pgPanel .pg-ringWrap.showTxt .pg-ringTxt { display: flex; } /* 完成态：绿勾；告警态：橙色感叹号（都覆盖在环上，环停转） */ #pgPanel.done .pg-ring, #pgPanel.warn .pg-ring { animation: none; background: none; -webkit-mask: none; mask: none; border: 3px solid #198754; } #pgPanel .pg-ringWrap .pg-ring::after { content: ""; } /* 1.0.48 修复：对勾改用 50%/translate 居中（原 left:9px;top:3px 绕自身中心旋转 ⇒ 偏左上） */ #pgPanel.done .pg-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 14px; border-right: 3px solid #198754; border-bottom: 3px solid #198754; transform: translate(-50%, -50%) rotate(40deg); } #pgPanel.warn .pg-ring { border-color: #fd7e14; } #pgPanel.warn .pg-ring::after { content: "!"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fd7e14; font-weight: 700; font-size: 16px; } #pgPanel.done .pg-ringTxt, #pgPanel.warn .pg-ringTxt { display: none; } #pgPanel .pg-title { font-size: 15px; font-weight: 500; margin: 0; } #pgPanel .pg-sub { font-size: 12.5px; color: #6c757d; margin: 2px 0 0; } #pgPanel .pg-log { margin-top: 12px; max-height: 110px; overflow: auto; border: 1px solid #e7ebf1; border-radius: 8px; padding: 8px 10px; background: #fafbfd; font-size: 12px; } #pgPanel .pg-log div { padding: 1px 0; } #pgPanel .pg-log .ok { color: #198754; } #pgPanel .pg-log .err { color: #dc3545; } #pgPanel .pg-warn { margin-top: 12px; background: #fff8e6; border: 1px solid #ffe6a8; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: #7a5b00; } #pgPanel .pg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } /* ========================================================================= 审计日志表（1.0.50）：① 列不挤在一起 ② 详情「摘要 + 查看全部」弹窗（方案 2） ========================================================================= */ /* 列间距与竖向分隔：table-sm 的 .25rem 内边距太窄，右列文字会贴着左列，看着像连在一起 */ /* ⚠️ 必须用 fixed 布局：详情列里是 nowrap 的摘要，自动布局会按**内容固有宽度**把表格撑开 （实测详情列被撑到 1558px）⇒ IP / 结果被挤到屏幕外。fixed + 明确列宽后，摘要按列宽裁成省略号。 */ #auditTable { font-size: 12.5px; table-layout: fixed; } #auditTable > thead > tr > th { padding: .25rem .375rem; white-space: nowrap; background: #F5F7FA; color: #1A237E; border-bottom: 1px solid #D6DEE8; } /* 空白间距按主人要求**减半**（.5/.75 → .25/.375），省下来的宽度全部让给「详情」列 */ #auditTable > tbody > tr > td { padding: .25rem .375rem; vertical-align: middle; } #auditTable > thead > tr > th + th, #auditTable > tbody > tr > td + td { border-left: 1px solid #E6ECF3; } /* 列之间的竖线更淡，靠留白分隔 */ #auditTable td.adt-time, #auditTable td.adt-ip { color: #495057; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } #auditTable td.adt-detail { white-space: normal; word-break: break-word; line-height: 1.55; color: #343a40; } /* 详情摘要：**单行**省略号 + 行内「查看全部」⇒ 所有数据行高度完全一致（主人 2026-09-27 要求） */ .adt-sum { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; cursor: pointer; } .adt-sum.adt-cut { max-width: calc(100% - 70px); } /* 给「查看全部」留位，避免换行 */ .adt-more { display: inline-block; margin-left: 6px; vertical-align: middle; color: #1565C0; cursor: pointer; font-size: 11.5px; white-space: nowrap; user-select: none; } .adt-more:hover { text-decoration: underline; } /* 弹窗内的字段表与完整详情 */ #auditDetailModal .adt-kv { display: grid; grid-template-columns: 84px 1fr; gap: 7px 12px; font-size: 12.5px; } #auditDetailModal .adt-kv b { color: #616161; font-weight: 700; } #auditDetailModal .adt-full { background: #F5F7FA; border: 1px solid #D6DEE8; border-radius: 6px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.6; max-height: 46vh; overflow: auto; } /* ========================================================================= 统一查询条（1.0.57）—— 方案 A（单行紧凑式） 覆盖界面：① 标签打印 ② 入库申请 ③ 出库申请 ④ 盘库单详情弹窗 ⑤ 监控记录 ⚠️ 类名一律 `q-` 前缀：严禁 `ad-`（Chrome 广告拦截扩展会把 ad-* 直接 display:none）。 ========================================================================= */ .q-filters { padding: 10px 12px; background: #fff; } /* 主行：与审计页 .d-flex.flex-wrap.align-items-end.gap-2 同范式 */ .q-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; } .q-fld { display: flex; flex-direction: column; } .q-fld > label { font-size: 11px; color: #6c757d; font-weight: 500; line-height: 1.4; margin-bottom: 2px; } /* 关键词框：带放大镜图标 */ .q-kw { position: relative; flex: 1 1 300px; min-width: 220px; } .q-kw > input { padding-left: 30px; } .q-kw > .q-ico { position: absolute; left: 9px; bottom: 7px; color: #99a5b2; pointer-events: none; display: flex; } /* 定宽控件 */ .q-w96 { width: 96px; } .q-w110 { width: 110px; } .q-w130 { width: 130px; } .q-w150 { width: 150px; } .q-w170 { width: 170px; } /* 起-止成对控制 */ .q-range { display: flex; align-items: center; gap: 6px; } .q-range .q-sep { color: #6c757d; font-size: 12px; } .q-spacer { flex: 1 1 auto; } /* 「更多筛选 ▾」按钮 */ .q-btn-more { background: #fff; color: #1565c0; border: 1px dashed #1565c0; font-size: 12px; font-weight: 700; padding: .26rem .7rem; border-radius: 6px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; } .q-btn-more:hover { background: #e8f1fb; } .q-caret { font-size: 10px; transition: transform .18s; } .q-btn-more[aria-expanded="true"] .q-caret { transform: rotate(180deg); } /* 展开区 */ .q-more { max-height: 0; overflow: hidden; transition: max-height .22s ease; background: #fbfdff; border-top: 1px dashed transparent; padding: 0 12px; } .q-more.q-open { max-height: 420px; padding: 10px 12px; border-top: 1px dashed #d6dee8; } /* 小字说明（货架/层 关联语义等） */ .q-hint { font-size: 11px; color: #4a5b6e; background: #f7fafd; border: 1px dashed #d6dee8; border-radius: 6px; padding: 4px 10px; margin-top: 6px; line-height: 1.7; } .q-hint b { color: #0a4a86; } /* 已选条件 chips */ .q-chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .q-chip { display: inline-flex; align-items: center; gap: 6px; background: #e8f1fb; color: #1565c0; border: 1px solid #c3ddf7; border-radius: 14px; padding: 2px 6px 2px 10px; font-size: 11.5px; font-weight: 600; } .q-chip .q-x { cursor: pointer; font-size: 13px; line-height: 1; color: #5b8fd6; padding: 0 2px; font-weight: 700; } .q-chip .q-x:hover { color: #c62828; } .q-chip-clear { background: #fff; color: #616161; border: 1px dashed #d6dee8; border-radius: 14px; padding: 2px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit; } .q-chip-clear:hover { color: #c62828; border-color: #c62828; } .q-chips-empty { color: #9aa7b4; font-size: 11.5px; } /* ===== 读写器参数页（方案 A：单表精简 · 每台独立接入方式） ===== */ /* 实时（只读）列底纹：把「可编辑配置」与「运行时状态」在视觉上分开（白底 vs 浅蓝底 + 表头「实时」） */ #readerTable th.rt { background: #eef6fb; color: #0a4a86; } #readerTable td.rt { background: #fafdff; } /* 已停用：整行淡灰 */ #readerTable tr.rdr-off td { color: #9aa7b4; } #readerTable tr.rdr-off td.rt { background: #f7f8fa; } #readerTable tr.rdr-off .rdr-conn, #readerTable tr.rdr-off .rdr-scan { opacity: .85; } /* 名称 / 备注 / 主机 单元格 */ #readerTable td .rdr-sub { display: block; font-size: 11px; color: #6c757d; margin-top: 1px; line-height: 1.4; } #readerTable td .rdr-err { display: block; font-size: 11px; color: #c62828; margin-top: 1px; line-height: 1.4; } #readerTable .rdr-host { font-family: Consolas, "Courier New", monospace; white-space: nowrap; } #readerTable .rdr-host .rdr-port { color: #6c757d; } #readerTable td .rdr-acts { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } /* 图例已按主人要求删除（1.0.78）：底色的含义在行内自带（可编辑控件 / 实时只读标签 / 停用行灰） */ /* 状态列（第一行=连接状态+扫描中；第二行=功率+最近上报；失败多一行红色最后错误） */ .rdr-stcell { display: flex; flex-direction: column; gap: 4px; } .rdr-strow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rdr-stsub { font-size: 11px; color: #6c757d; display: flex; gap: 10px; flex-wrap: wrap; line-height: 1.5; } .rdr-stsub b { color: #33475c; font-variant-numeric: tabular-nums; } /* 连接状态徽标 */ .rdr-conn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: .24em .58em; border-radius: .375rem; white-space: nowrap; } .rdr-conn-ok { background: #e7f5e9; color: #1b5e20; border: 1px solid #a5d6a7; } .rdr-conn-idle { background: #e8f1fb; color: #0a4a86; border: 1px solid #b9d3ee; } .rdr-conn-fail { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6cb; } .rdr-conn-off { background: #f1f3f5; color: #6c757d; border: 1px solid #dee2e6; } .rdr-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 7px; } .rdr-dot-g { background: #2e7d32; } .rdr-dot-r { background: #c62828; } .rdr-dot-x { background: #adb5bd; } .rdr-dot-b { background: #0a4a86; } /* 扫描中徽标（绿/红/灰功能语义色在操作列按钮上；此处为状态显示） */ .rdr-scan { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: .24em .58em; border-radius: .375rem; white-space: nowrap; } .rdr-scan-on { background: #e8f1fb; color: #0a4a86; border: 1px solid #b9d3ee; } .rdr-scan-off { background: #f1f3f5; color: #6c757d; border: 1px solid #dee2e6; } .rdr-pulse { width: 7px; height: 7px; border-radius: 50%; background: #0891b2; display: inline-block; animation: rdr-pl 1.1s ease-in-out infinite; } @keyframes rdr-pl { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .32; transform: scale(.7); } } /* 接入方式下拉（1.0.81 方案 A：把原来的两个分段按钮换成一个