/* ========================================================================== 工作流工作台 · 设计系统 v2 -------------------------------------------------------------------------- 这一版换了方向，不是调色： 1. 深墨顶栏 + 骨白内容区。顶栏是「品牌区」，内容是「工作面」。 之前整页一片浅灰蓝，和所有内部后台长得一样；深顶栏一眼能区分。 2. 工作流从卡片网格改成「编号索引列表」。卡片网格在 5 个时好看， 20 个时会变成一片色块墙；编号列表越加越长反而越像一本目录。 3. 权限矩阵从「一工作流一列」转置成「流程为行、成员为列」。 列头是成员名（短、可读），行头是流程全名（长、需要完整显示）。 20 个流程 = 20 行，纵向滚动天然可用；横向只需容纳成员数。 4. 授权从下拉框改成 24px 状态格，点一下切换「可用 / 不可见」。150 个下拉框没法用， 150 个小方块可以。授权只有两态，没有第三种形态要渲染。 颜色仍然守一条线：品牌色只出现在可操作的焦点上，四类流程各占一个语义色。 ========================================================================== */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} /* 必须显式声明：浏览器默认的 [hidden]{display:none} 会被作者样式里的 display:flex 盖掉，结果是「该藏起来的东西照样显示」。 */ [hidden]{display:none!important} :root{ color-scheme:light; /* 骨白系：比冷灰多一点温度，配深顶栏更像印刷品而不像后台 */ --paper:#faf9f7; --paper-2:#f4f2ee; --paper-3:#ebe8e2; --card:#ffffff; --line:#e8e5df; --line-2:#d8d4cc; /* 墨色：顶栏与最深文字 */ --ink:#15171a; --ink-2:#22252a; --tx-900:#1a1c20; --tx-700:#3d4147; --tx-500:#676c74; --tx-400:#8e939a; --tx-300:#b6bac0; --brand:#4b54e0; --brand-600:#3d45c8; --brand-50:#eeeefc; --brand-100:#dcddfa; --brand-line:#c2c4f5; /* 语义四色，色相往暖偏一点，和骨白底不打架。 每色三档：line 用于描边、bg 用于浅底、本色用于实心； 另有 -50/-600 两档给图标底衬与悬停用（管理台的卡片头在用）； 再有 -700 一档给「浅底上的正文」（见下面那一组）。 */ --ok:#0e7a5c; --ok-bg:#e9f5f0; --ok-line:#bce0d3; --ok-50:#e9f5f0; --ok-600:#0b6350; --info:#1f5fbf; --info-bg:#eaf1fb; --info-line:#c0d6f2; --info-50:#eaf1fb; --info-600:#1a4fa0; --warn:#ac6509; --warn-bg:#fbf2e2; --warn-line:#eed7ae; --warn-50:#fbf2e2; --warn-600:#8e5308; --danger:#b2313a; --danger-bg:#fbecee; --danger-line:#efc7cb; --danger-50:#fbecee; --danger-600:#952a31; /* 浅底上的**正文**色：比 -600 再深一档，给 `.res-*` / `.banner-*` / `.push-err-b` / `.scopec.is-half` 这类「浅色底 + 一段要读的文字」用。 这四个值原来是直接写死在这些类里的 hex（2026-10-08 收进来，**值一字未改**）。 收它们的理由不是洁癖：调 :root 里的语义色时，写死的那批**不会跟着变** —— 表现是「背景换色了、文字还是旧的深色」，而这种不一致**不会报错**，只能靠肉眼。 */ --ok-700:#0a5b45; --info-700:#154a95; --warn-700:#7a4907; --danger-700:#8a242c; --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; /* 内容区最大宽（页面骨架）。⚠️ 顶栏的 .topbar-inner 必须用**同一个**值 —— 只改一个的话，顶栏与内容会左右错位，而那是"一眼看得出但说不上哪不对"的那类毛病。 要整体放宽/收窄，改这一个数就够。2026-10-10 由 1240 放宽到 1360（阿德：数据别那么挤）； 2026-10-13 再放宽到 1480 —— 【主体登录状态管理】加了「密码」列之后，9 列合计 ~1384， 1360 的可用宽（1312）装不下，会被迫横向滚动（阿德明确要求过「不要横向滚动」）。 */ --wrap:1480px; --r-xs:6px; --r-sm:8px; --r:10px; --r-md:12px; --r-lg:16px; --r-full:999px; --sh-xs:0 1px 2px rgba(24,20,12,.05); --sh-sm:0 1px 2px rgba(24,20,12,.05),0 2px 6px -1px rgba(24,20,12,.06); --sh-md:0 2px 4px -2px rgba(24,20,12,.07),0 10px 24px -8px rgba(24,20,12,.14); --sh-lg:0 6px 12px -6px rgba(24,20,12,.10),0 24px 48px -16px rgba(24,20,12,.22); --e-out:cubic-bezier(.22,1,.36,1); --e-inout:cubic-bezier(.4,0,.2,1); --d1:140ms; --d2:220ms; --d3:320ms; } html{-webkit-text-size-adjust:100%} body{ font-family:var(--font);font-size:14px;line-height:1.65;color:var(--tx-900); background:var(--paper); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } a{color:var(--brand-600);text-decoration:none} a:hover{text-decoration:underline} code{font-family:var(--mono);font-size:.92em;background:var(--paper-2);padding:1px 5px;border-radius:var(--r-xs);color:var(--tx-700)} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ic-sm{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .ic-lg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center} .grow{flex:1;min-width:0} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)} ::selection{background:var(--brand-100)} /* ---------------------------------------------------------------- 排版 */ .h-1{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.02em} .h-2{font-size:16px;line-height:1.4;font-weight:600;letter-spacing:-.01em} .h-3{font-size:14px;line-height:1.45;font-weight:600} .t-body{font-size:14px;color:var(--tx-700)} .t-sm{font-size:13px;color:var(--tx-500);line-height:1.6} .t-xs{font-size:12px;color:var(--tx-400);line-height:1.55} .t-cap{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--tx-400)} /* ---------------------------------------------------------------- 顶栏 */ /* 深墨底是这一版最主要的视觉签名：一眼区分品牌区和工作面 */ .topbar{position:sticky;top:0;z-index:40;background:var(--ink);color:#fff} .topbar::after{content:"";display:block;height:1px;background:rgba(255,255,255,.09)} .topbar-inner{ max-width:var(--wrap);margin:0 auto;padding:0 var(--s6); height:62px;display:flex;align-items:center;gap:var(--s5); } .brand{display:flex;align-items:center;gap:var(--s3);min-width:0} /* 品牌标是一张实心方图（深底 + 字标），所以这里不再画图形、也不铺品牌色。 background 留着只是兜底：图万一没加载出来，至少还是一块有色方块，不是一片透明。 */ .brand-mark{ width:32px;height:32px;border-radius:9px;background:var(--brand); display:grid;place-items:center;flex:none;overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.35); } .brand-mark img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit} .brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0} .brand-name{font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;color:#fff} .tabs{display:flex;gap:2px;background:rgba(255,255,255,.07);padding:3px;border-radius:var(--r);margin-left:var(--s2)} .tab{ appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit; font-size:13px;font-weight:500;color:rgba(255,255,255,.6); padding:6px 15px;border-radius:7px; transition:background var(--d1) var(--e-out),color var(--d1) var(--e-out); } .tab:hover{color:#fff;background:rgba(255,255,255,.07)} .tab.is-active{background:rgba(255,255,255,.95);color:var(--ink)} .tab .tab-n{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.4);margin-left:5px;font-weight:400} .tab.is-active .tab-n{color:var(--brand)} .topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--s3)} .conn{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.7);white-space:nowrap} .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--tx-400)} .dot.on{background:#34d399} .dot.off{background:#f87171} .dot.wait{background:#fbbf24} .uchip{display:flex;align-items:center;gap:var(--s2)} .avatar{ width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center; background:rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.02em; } .uchip-name{font-size:13px;font-weight:500;line-height:1.2;color:#fff} .uchip-sub{font-size:11px;color:rgba(255,255,255,.45);line-height:1.2;font-family:var(--mono)} /* ---------------------------------------------------------------- 骨架 */ .app{min-height:100vh;display:flex;flex-direction:column} .main{flex:1;padding:var(--s10) 0 var(--s12)} .container{max-width:var(--wrap);margin:0 auto;padding:0 var(--s6)} .view{display:none} .view.is-active{display:block;animation:viewIn var(--d3) var(--e-out) both} @keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------------------------------------------------------------- 按钮 */ .btn{ appearance:none;cursor:pointer;font-family:inherit; display:inline-flex;align-items:center;justify-content:center;gap:6px; height:38px;padding:0 16px;border-radius:var(--r); font-size:13.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap; border:1px solid transparent;background:var(--card);color:var(--tx-700); transition:background var(--d1) var(--e-out),border-color var(--d1) var(--e-out), color var(--d1) var(--e-out),transform var(--d1) var(--e-out),box-shadow var(--d1) var(--e-out); } .btn:hover{background:var(--paper-2);border-color:var(--line-2)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 1px 2px rgba(75,84,224,.3)} .btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600)} .btn-primary:disabled{background:var(--brand);border-color:var(--brand)} .btn-outline{border-color:var(--line-2);background:var(--card)} .btn-quiet{background:transparent;border-color:transparent;color:var(--tx-500)} .btn-quiet:hover{background:var(--paper-2);border-color:transparent;color:var(--tx-900)} .btn-danger{color:var(--danger);background:var(--card);border-color:var(--line-2)} .btn-danger:hover{background:var(--danger-bg);border-color:var(--danger-line)} .btn-sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:var(--r-sm)} .btn-sm svg{width:14px;height:14px} .btn-lg{height:44px;padding:0 22px;font-size:14.5px} .btn-block{width:100%} /* 深色顶栏上的按钮 */ .topbar .btn-quiet{color:rgba(255,255,255,.72)} .topbar .btn-quiet:hover{background:rgba(255,255,255,.1);color:#fff} /* ---------------------------------------------------------------- 表单 */ .field{display:flex;flex-direction:column;gap:6px;min-width:0} .field > label{font-size:12.5px;font-weight:500;color:var(--tx-500)} .field .req{color:var(--danger);margin-left:2px} input,select,textarea{ font-family:inherit;font-size:13.5px;color:var(--tx-900); width:100%;height:40px;padding:0 12px; background:var(--card);border:1px solid var(--line-2);border-radius:var(--r); transition:border-color var(--d1) var(--e-out),box-shadow var(--d1) var(--e-out); } textarea{height:auto;min-height:88px;padding:10px 12px;line-height:1.6;resize:vertical} input::placeholder,textarea::placeholder{color:var(--tx-300)} input:hover,select:hover{border-color:var(--tx-300)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3.5px var(--brand-50)} select{appearance:none;cursor:pointer;padding-right:32px;background-repeat:no-repeat; background-position:right 11px center;background-size:15px; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238e939a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5L8 10.5L12 6.5'/%3E%3C/svg%3E")} .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4)} .check{display:flex;align-items:center;gap:var(--s2);cursor:pointer;user-select:none} .check input{width:17px;height:17px;padding:0;flex:none;accent-color:var(--brand);cursor:pointer} /* ---------------------------------------------------------------- 卡片 */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)} .card-pad{padding:var(--s5)} /* align-items:center，不是 flex-start（2026-10-10 阿德指出的）。 卡片头里通常是「大字号标题 + 一行小字说明」：顶部对齐时，小字贴在大字的行顶， 视觉上两人没在一根中线上 —— 而它俩本来就该是一行里的两段。居中之后对的是中线。 图标 / 徽章 / 右侧的按钮组跟着一起居中，比原来稳。 */ .card-head{display:flex;align-items:center;gap:var(--s4);padding:var(--s5);border-bottom:1px solid var(--line)} .card-body{padding:var(--s5)} .card-foot{padding:var(--s4) var(--s5);border-top:1px solid var(--line);background:var(--paper);border-radius:0 0 var(--r-md) var(--r-md)} /* ---------------------------------------------------------------- 工作台 */ .hero{margin-bottom:var(--s8)} .hero h1{font-size:30px;line-height:1.18;font-weight:600;letter-spacing:-.028em;margin-bottom:8px} .hero p{font-size:14.5px;color:var(--tx-500);max-width:62ch} .hero-rule{height:1px;background:var(--line);margin-top:var(--s6)} .sec-head{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s8) 0 var(--s4)} .sec-head h2{font-size:13px;font-weight:600;letter-spacing:.09em;color:var(--tx-500)} .sec-head .count{font-size:12.5px;color:var(--tx-300);font-variant-numeric:tabular-nums} /* 编号索引：工作流的容器。 选列表不选卡片网格，是因为流程会长到 20 个——网格那时是一片色块墙， 而编号列表越加越长越像目录，正好符合「一条一条办」的用法。 */ .idx{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .idx-group + .idx-group{border-top:1px solid var(--line)} .idx-gh{ display:flex;align-items:center;gap:var(--s2); padding:9px var(--s5);background:var(--paper-2); font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--tx-400); } .idx-gh i{width:6px;height:6px;border-radius:50%;background:var(--k);flex:none} .idx-row{ position:relative;width:100%;text-align:left;font-family:inherit;color:inherit;cursor:pointer; display:grid;grid-template-columns:46px minmax(0,1fr) auto 22px; gap:var(--s5);align-items:center; padding:18px var(--s5);background:none;border:0;border-top:1px solid var(--line); transition:background var(--d2) var(--e-out); } .idx-group .idx-row:first-child{border-top:0} .idx-row::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent; transition:background var(--d2) var(--e-out); } .idx-row:hover{background:var(--paper)} .idx-row:hover::before{background:var(--k)} .idx-n{font-family:var(--mono);font-size:13px;color:var(--tx-300);text-align:right;transition:color var(--d2) var(--e-out)} .idx-row:hover .idx-n{color:var(--brand)} .idx-b{min-width:0} /* 行内元素必须转块：.idx-row 是 grid，但 .idx-b 里面放的是 span， 不转块就会挤成一行，「标题 描述」连在一起。 */ .idx-t{display:block;font-size:16px;font-weight:600;letter-spacing:-.012em;line-height:1.35;margin-bottom:3px} .idx-d{display:block;font-size:12.5px;color:var(--tx-400);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .idx-a{display:flex;align-items:center;gap:var(--s2)} .idx-go{color:var(--tx-300);display:grid;place-items:center;transition:color var(--d2) var(--e-out),transform var(--d2) var(--e-out)} .idx-row:hover .idx-go{color:var(--brand);transform:translateX(2px)} .idx-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* 授权只有两态，所以工作台上没有「灰掉的流程」这种行。 原来这里还有 .is-locked（可见不可用）与 .is-off（已停用）：前者随三态一起废掉， 后者也没有落点——停用的流程对所有人都不出现，压根渲染不出来。 留着它们的代价不是几行 CSS，而是下一个人会以为「点不动」是被支持的。 */ .k-ro{--k:var(--ok);--k-bg:var(--ok-bg);--k-line:var(--ok-line)} .k-iw{--k:var(--info);--k-bg:var(--info-bg);--k-line:var(--info-line)} .k-ew{--k:var(--warn);--k-bg:var(--warn-bg);--k-line:var(--warn-line)} .k-hs{--k:var(--danger);--k-bg:var(--danger-bg);--k-line:var(--danger-line)} .k-none{--k:var(--tx-400);--k-bg:var(--paper-2);--k-line:var(--line-2)} /* ---------------------------------------------------------------- 徽章 */ .pill{ display:inline-flex;align-items:center;gap:5px;white-space:nowrap; font-size:11.5px;font-weight:500;line-height:1; padding:4px 9px;border-radius:var(--r-full); background:var(--paper-2);color:var(--tx-500);border:1px solid transparent; } .pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;opacity:.8} .pill-kind{background:var(--k-bg);color:var(--k);border-color:var(--k-line)} .pill-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)} .pill-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)} .pill-err{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)} .pill-off{background:var(--paper-2);color:var(--tx-400);border-color:var(--line)} .pill-brand{background:var(--brand-50);color:var(--brand-600);border-color:var(--brand-line)} /* 语义四色里一直缺这一档。app.js 引用 `pill-info` 已经很久了（vivo 那页的「已记基线」）， 而这里没有定义 → 它一直静默落回 `.pill` 的中性灰：**类名写对、样式没定义、不报错**， 页面上只是「颜色不太一样」。2026-10-09 阿德拍板补成全局规则（此前只给 #view-oppo 补过）。 副作用是他知道的：vivo 那页「已记基线」的标签由灰变蓝 —— 那本来就是它该有的样子。 */ .pill-info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)} /* ---------------------------------------------------------------- 结果区 */ .res{margin-top:var(--s4);border-radius:var(--r-md);padding:var(--s4) var(--s5);font-size:13px;line-height:1.65;animation:viewIn var(--d2) var(--e-out) both} .res-info{background:var(--info-bg);border:1px solid var(--info-line);color:var(--info-700)} .res-ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-700)} .res-warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-700)} .res-err{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-700)} .res b{font-weight:600} .res .res-t{font-size:13.5px;font-weight:600;display:block;margin-bottom:2px} .res table{width:100%;border-collapse:collapse;margin:var(--s3) 0} .res th,.res td{padding:6px 10px;text-align:left;border-bottom:1px solid rgba(0,0,0,.08);font-size:12.5px} .res th{font-weight:600;opacity:.86} .res .num{text-align:right} .res tr:last-child td{border-bottom:0} .res .res-f{margin-top:var(--s3);padding-top:var(--s2);border-top:1px dashed rgba(0,0,0,.16);font-size:11.5px;opacity:.78;font-family:var(--mono)} .banner{border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:12.5px;line-height:1.6;margin-bottom:var(--s3);display:flex;gap:var(--s3);align-items:flex-start} .banner svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .banner b{font-weight:600} .banner-warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-700)} .banner-err{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-700)} .banner-info{background:var(--info-bg);border:1px solid var(--info-line);color:var(--info-700)} /* ---------------------------------------------------------------- 运行页 */ .runner{max-width:740px} .back{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--tx-500);cursor:pointer; background:none;border:0;font-family:inherit;padding:4px 0;margin-bottom:var(--s5)} .back:hover{color:var(--brand)} .back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .runner-head{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s6)} .runner-head h1{font-size:22px;font-weight:600;letter-spacing:-.022em;line-height:1.3;margin-bottom:4px} .runner-head p{font-size:13px;color:var(--tx-500)} /* kind 徽章与大标题**同一行、水平居中**（2026-10-12 阿德要求）。 原来它在大标题下面（`margin-top:4px` 的那个 div），看着像副标题； 挪到大标题左边之后，它读作「这一页属于哪一类操作」的前缀。 ⚠️ `.runner-head h1` 那个 `margin-bottom:4px` 是当年给下面的徽章留的间距 —— 徽章挪走后必须清成 0，否则标题和说明之间会多出一条空档。 */ .wf-title{display:flex;align-items:center;gap:var(--s3)} .wf-title h1{margin-bottom:0} .runner-mark{ width:44px;height:44px;border-radius:var(--r-md);flex:none;display:grid;place-items:center; background:var(--k-bg);color:var(--k);border:1px solid var(--k-line); } .runner-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .step-chip{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%; background:rgba(0,0,0,.09);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums} /* -------------------------------------------- vivo 快应用更新监控 这是个常驻的订阅列表页，不是一次性表单，所以有自己的一组样式。 颜色一律走 token，不写死——语义色只用在「有更新 / 巡检出错」这两个状态上。 */ /* 顶部：新增订阅。列表才是主体，所以新增区刻意做得轻，不与列表抢视线 */ .watch-add{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap} .watch-add .field{margin:0;flex:1 1 220px;min-width:180px} .watch-add .field:first-child{flex:1 1 300px} .watch-add .btn{flex:0 0 auto;height:40px} /* 卡片头右侧的操作按钮。不给左边距的话它会紧贴标题， 看起来像标题的一部分而不是一个可点的动作。 */ .card-head .actions{margin-left:auto} /* 列表行：包名是主信息，备注是副信息。 .wt-pkg 用 overflow-wrap:anywhere 而不是 word-break:break-all： 前者只在「整串放不下」时才断，且不改变正常字距；后者会在**任意字符**处断， 24 字符的包名在 150px 里会被断得七零八落。200px 下 com.zhuishushenqi.kyy 正好一行放下（约 173px）。 */ .wt-pkg{font-family:var(--mono);font-size:12px;color:var(--tx-500);overflow-wrap:anywhere} /* 备注/中文名：10 个字以内单行，超出省略号（全文进 title，见 app.js） */ .wt-name{font-size:13.5px;font-weight:500;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wt-note{font-size:11.5px;color:var(--tx-400);margin-top:1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 列宽约束。不给列宽时浏览器按内容分：包名和下载地址都是长串， 会把这两列撑到占满整行、把右边的版本/大小挤成竖排（手机宽度下尤其明显）。 table-layout:fixed 是必须的——只有它才让 width 变成硬约束，否则内容照样顶开。 2026-10-08 重排（阿德按截图反馈「有换行」）： 原来第 1 列是 width:auto，把剩余宽度全吃掉了 —— 而备注/中文名阿德说一般不超过 10 个字，那多出来的宽度全是浪费，代价是右边几列被挤窄： 包名 150px 装不下 com.zhuishushenqi.kyy（24 字符）→ 硬断成两行； 最近更新时间 112px 装不下 2026-02-05 16:07 → 溢出被裁； 定时巡检 78px 装不下表头四个字 → 自己折成两行。 现在第 1 列给固定 140px（10 个汉字 13.5px×10≈135 + 内边距）。 ⚠️ 注意：这里的 px 是**期望值**，浏览器会把表格拉满容器、各列按比例放大约 8% （实测 1440px 视口下 140→151、200→216）。所以「时间列」这类刚好卡住的列 要留出这 8% —— `2026-02-05 16:07` 实测需约 120px 可用宽度， 设 112 会溢出（实测掉进 [内容溢出]），设 124 才稳。 改这些数字后务必跑 `tools/probe_cols.js` 复核，别只看代码。 */ /* ⚠️ 这一组必须限定在 #view-watch 里。 原来它们写的是 `.wt-scroll table.tbl th:nth-child(n)` —— 看着像「vivo 订阅列表的列宽」， 其实匹配**任何**放在 .wt-scroll 里的表格。第二张常驻列表页（企微群推送管理） 照着同样的写法加了群台账，结果它的六列被这里的一至八列规则压住 （特异性 0,3,2 > 0,2,2），列宽全乱：群名称拿到 235px、推送地址拿到 336px。 更隐蔽的是 `thead th{white-space:nowrap}` 也被继承过去，让本该换行的模块表头折不了行。 **一份样式只管一个视图的东西，选择器就得把它圈在那个视图里。** */ #view-watch .wt-scroll table.tbl{table-layout:fixed;min-width:1104px} #view-watch .wt-scroll table.tbl th:nth-child(1),#view-watch .wt-scroll table.tbl td:nth-child(1){width:140px} #view-watch .wt-scroll table.tbl th:nth-child(2),#view-watch .wt-scroll table.tbl td:nth-child(2){width:200px} #view-watch .wt-scroll table.tbl th:nth-child(3),#view-watch .wt-scroll table.tbl td:nth-child(3){width:80px} #view-watch .wt-scroll table.tbl th:nth-child(4),#view-watch .wt-scroll table.tbl td:nth-child(4){width:88px} #view-watch .wt-scroll table.tbl th:nth-child(5),#view-watch .wt-scroll table.tbl td:nth-child(5){width:124px} #view-watch .wt-scroll table.tbl th:nth-child(6),#view-watch .wt-scroll table.tbl td:nth-child(6){width:76px} #view-watch .wt-scroll table.tbl th:nth-child(7),#view-watch .wt-scroll table.tbl td:nth-child(7){width:172px} #view-watch .wt-scroll table.tbl th:nth-child(8),#view-watch .wt-scroll table.tbl td:nth-child(8){width:236px} /* 表头不留折行机会：「定时巡检」这类四字表头一旦允许折行， 窄列就会自己变成两行、把行高带高。列宽已经按表头最长词配好了。 */ #view-watch .wt-scroll table.tbl thead th{white-space:nowrap} /* 「有更新」这一行要一眼看出来。整行加左侧色条 + 淡底， 比在某一格加个徽章更容易扫到——扫一列的时候眼睛沿左边跑。 */ tr.wt-updated td{background:color-mix(in srgb,var(--warn-50) 55%,transparent)} tr.wt-updated td:first-child{box-shadow:inset 3px 0 0 var(--warn-600)} /* 巡检开关：原生 checkbox 在触屏上太小，做成 42px 点击区 */ .wt-sw{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none} .wt-sw input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;margin:0;flex:none} .wt-sw span{font-size:12px;color:var(--tx-500)} @media (hover:none) and (pointer:coarse){ .wt-sw{padding:11px 6px;margin:-11px -6px} .wt-sw input{width:20px;height:20px} } /* 变更详情展开区。这一块单独占一整行（跨列），不塞进第一格 —— 所以它可以有足够宽度放下「从什么变成什么」的两列对照，手机上也不挤。 */ .wt-diff{padding:var(--s3) var(--s4);border-radius:var(--r-sm); background:var(--paper-2);border:1px solid var(--line);width:100%;max-width:640px} .wt-diff-h{font-size:12px;font-weight:600;color:var(--tx-700);margin-bottom:7px; display:flex;align-items:center;gap:6px} /* 检测时间跟标题同一行、右对齐：它是对这一块的限定（「这次是什么时候查到的」）， 单独一行会让人误以为是包的一个属性。 */ .wt-diff-when{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--tx-400); font-variant-numeric:tabular-nums} .wt-diff-r{display:flex;gap:var(--s3);font-size:12.5px;line-height:1.7} .wt-diff-r .k{flex:0 0 50px;color:var(--tx-400)} /* 值一律截断不折行。详情里出现过「版本号」被窄列拆成三行的情况—— 拆行比截断更糟：读者会以为自己在读一个列表项。完整内容放 title。 */ .wt-diff-r .v{flex:1 1 auto;min-width:0;color:var(--tx-900); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wt-diff-r .v .old{color:var(--tx-400);text-decoration:line-through} /* 新旧版本之间必须有可见的分隔，否则「3.8.6」划掉后紧贴「3.8.7」会读成一串。 用中性色：箭头是结构，不承担语义（语义由 .pill-warn 那层的橙色承担）。 */ .wt-diff-r .v .arw{color:var(--tx-400);margin:0 5px} /* 下载地址不整条展示：它最长且没人会读完整串，只给一个「下载」链接。 完整地址放 title 里，悬停能看到、也能复制——但绝不参与排版。 */ .wt-diff-r .v a{color:var(--brand-600);text-decoration:none} .wt-diff-r .v a:hover{text-decoration:underline} /* 详情行本身不带底纹，靠上面那块 .wt-diff 撑出层次 */ tr.wt-detail td{background:var(--card);padding-top:0;padding-bottom:var(--s4)} /* 进度条：检查所有包是串行的，8 个包时没有进度会像卡死 */ .wt-prog{margin-top:var(--s4)} .wt-prog-b{height:6px;border-radius:3px;background:var(--paper-2);overflow:hidden} .wt-prog-f{height:100%;background:var(--brand);width:0;transition:width var(--d2) var(--e-out)} .wt-prog-t{font-size:12px;color:var(--tx-500);margin-top:5px} /* 空态 */ .wt-empty{padding:var(--s8) var(--s4);text-align:center;color:var(--tx-400);font-size:13px} .wt-empty .ic-lg{color:var(--tx-300);display:block;margin:0 auto var(--s3)} /* 表格在这页需要横向滚动：列多（备注/包名/中文名/版本/大小/更新时间/巡检/最近巡检/操作） 表格交给 .card 的圆角裁切，所以这里不画边框不画底色。 */ .wt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .wt-scroll table.tbl tbody tr:last-child td{border-bottom:0} /* ---------------------------------------------------------------- 企微群推送管理 也是常驻列表型，但它是**三块**：群台账 / 关系矩阵 / 节律。 颜色一律走 token：语义色只用在「推没推成」那三个状态上（已送达 / 被限流 / 推送失败）。 */ .push-block{margin-top:var(--s5)} /* 群台账：列宽是**硬约束**（table-layout:fixed）。 不给的话浏览器按内容分，而「最近推送结果」那一列最宽的那条（时间 + 标签 + 错误原文）会把整张表撑开、把群名挤成一列竖排。 ⚠️ 这里的 px 是**期望值**，浏览器把表格拉满容器后各列约放大约 8% （见上面 vivo 那段的实测）。「时间」这类刚好卡住的列要留出这 8%。 */ .push-tbl{table-layout:fixed;min-width:1000px} .push-tbl th:nth-child(1),.push-tbl td:nth-child(1){width:150px} .push-tbl th:nth-child(2),.push-tbl td:nth-child(2){width:100px} .push-tbl th:nth-child(3),.push-tbl td:nth-child(3){width:200px} .push-tbl th:nth-child(4),.push-tbl td:nth-child(4){width:210px} .push-tbl th:nth-child(5),.push-tbl td:nth-child(5){width:170px} .push-tbl th:nth-child(6),.push-tbl td:nth-child(6){width:170px} .push-tbl thead th{white-space:nowrap} .push-tbl tbody tr:last-child td{border-bottom:0} .push-name{font-size:13.5px;font-weight:500;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .push-note{font-size:12px;color:var(--tx-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .push-rel{font-size:12.5px;color:var(--tx-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 失败那一格能展开看原文。默认收起，所以那条长 errmsg 不会去挤列宽。 展开后它是**在格子内部换行**，不是把列撑宽 —— 因此必须 anywhere。 */ .push-err{margin-top:5px} .push-err summary{cursor:pointer;font-size:11.5px;color:var(--brand-600);list-style:none; display:inline-block;padding:2px 0} .push-err summary::-webkit-details-marker{display:none} .push-err summary::before{content:"▸ "} .push-err[open] summary::before{content:"▾ "} .push-err-b{margin-top:4px;padding:7px 9px;border-radius:var(--r-sm); background:var(--danger-bg);border:1px solid var(--danger-line); font-size:11.5px;line-height:1.6;color:var(--danger-700); overflow-wrap:anywhere;word-break:break-word} .push-err-b .mono{font-size:11px;opacity:.85} .push-err-b .t-xs{color:inherit;opacity:.85;margin-top:3px} /* 添加 / 编辑群：一行放下「群名 + 地址 + 备注 + 按钮」。地址最长，给它双倍宽。 */ .push-form{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap; background:var(--paper);border-bottom:1px solid var(--line)} .push-form .field{flex:1 1 180px;min-width:150px;margin:0} .push-form .pg-wide{flex:2 1 300px} .push-form .pg-narrow{flex:1 1 140px} .push-form .actions{flex:0 0 auto} .push-form .t-xs{flex:1 1 100%;margin-top:2px} /* 关系矩阵：行 = 群，列 = 模块。格子居中，勾了就显示「收」。 */ .mx-tbl{table-layout:fixed} .mx-tbl thead th{text-align:center;white-space:normal;line-height:1.35} .mx-tbl thead th.mx-g{text-align:left} .mx-tbl th:nth-child(1),.mx-tbl td:nth-child(1){width:240px} .mx-tbl tbody td{border-bottom:1px solid var(--line)} .mx-tbl tbody tr:last-child td{border-bottom:0} .mx-g{text-align:left} .mx-c{text-align:center} .mx-c .wt-sw{justify-content:center} /* 节律：时刻做成可删的 chip，加时刻是行内一个小输入框。 */ .rt-tbl{table-layout:fixed;min-width:860px} .rt-tbl th:nth-child(1),.rt-tbl td:nth-child(1){width:260px} .rt-tbl th:nth-child(2),.rt-tbl td:nth-child(2){width:290px} .rt-tbl th:nth-child(3),.rt-tbl td:nth-child(3){width:160px} .rt-tbl th:nth-child(4),.rt-tbl td:nth-child(4){width:150px} .rt-tbl thead th{white-space:nowrap} .rt-tbl tbody tr:last-child td{border-bottom:0} .push-times{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .push-chip{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 4px 0 8px; border-radius:999px;background:var(--brand-50);border:1px solid var(--brand-line); color:var(--brand-600);font-size:12px;font-variant-numeric:tabular-nums} .push-chip-x{appearance:none;border:0;background:transparent;cursor:pointer;padding:0 3px; color:inherit;font-size:14px;line-height:1;font-family:inherit;opacity:.7} .push-chip-x:hover{opacity:1} .push-time-in{width:62px;height:28px;padding:0 7px;font-size:12px; font-variant-numeric:tabular-nums} .push-num{width:70px;height:28px;padding:0 7px;font-size:12px; font-variant-numeric:tabular-nums} /* 触屏：chip 上的小 × 太小点不准，把可点区域撑开 */ @media (hover:none) and (pointer:coarse){ .push-chip{height:32px} .push-chip-x{padding:0 7px;font-size:16px} .push-time-in,.push-num{height:34px;font-size:13px} } /* ---------------------------------------------------- oppo 免弹窗资格检测 一份样式只管一个视图 —— 这一段的选择器**一律圈在 `#view-oppo` 里**。 理由很具体：上面 vivo 的列宽规则 `.wt-scroll table.tbl th:nth-child(n)` 是**全局**的， 不带前缀的话，这里新加的表格会被它的列宽一起改掉（wxwork-push 加进来时踩过一次）。 */ #view-oppo .oppo-block{margin-top:var(--s5)} /* 「加到我的清单」：从数据字典里挑（2026-10-10 起，之前是三个手输框）。 做成「搜索 + 可勾选列表」而不是 ` → **基线取 input 底边**，在 `vertical-align:middle` 的单行单元格里会**视觉偏上** （行高被「检测状态」那格撑起来时更明显）。改成**块级 flex**，交给单元格的 middle 居中 —— 2026-10-14 阿德反馈的「勾选框偏高」就是这条。 */ #view-oppo .op-c{text-align:center} #view-oppo .op-c .wt-sw{display:flex;justify-content:center;align-items:center} #view-oppo .oppo-nm,#view-oppo .oppo-id,#view-oppo .oppo-sub{font-size:13px;line-height:1.35; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-oppo .oppo-nm{font-weight:500} #view-oppo .oppo-id{color:var(--tx-500)} #view-oppo .oppo-sub{color:var(--tx-500)} #view-oppo .oppo-pkg{font-family:var(--mono);font-size:12px;letter-spacing:.02em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 检测状态列：**标签靠左、时间靠右、同一行**（阿德 2026-10-14）。 原来时间用 `div.t-xs` + margin-top 另起一行，占了两行；现在并成一行。 */ #view-oppo .oppo-st{display:flex;align-items:center;gap:var(--s2)} #view-oppo .oppo-st .pill{flex:none} /* ⚠️ 时间**紧跟标签**（不要 `margin-left:auto`）：那会把时间顶到列最右， 标签与时间之间被拉开一大截 —— 阿德 2026-10-14 反馈「搁太开了」。 */ #view-oppo .oppo-st-t{white-space:nowrap} /* 「检测中」的蓝标签 / 「检测失败」可展开看原因。 （`.pill-info` 已经提成全局规则了，见上面徽章那一段，这里不再重复定义。） */ #view-oppo .oppo-err{margin-top:5px} #view-oppo .oppo-err summary{cursor:pointer;font-size:11.5px;color:var(--brand-600);list-style:none} #view-oppo .oppo-err summary::-webkit-details-marker{display:none} #view-oppo .oppo-err summary::before{content:"▸ "} #view-oppo .oppo-err[open] summary::before{content:"▾ "} #view-oppo .oppo-err-b{margin-top:4px;padding:7px 9px;border-radius:var(--r-sm); background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-700); font-size:11.5px;line-height:1.6;word-break:break-word} #view-oppo .oppo-err-b .mono{font-size:11px;opacity:.85} #view-oppo .oppo-err-b .t-xs{color:inherit;opacity:.85;margin-top:3px} /* 触屏：表格里的勾选框是这一页唯一的行内操作用件，撑大一点才点得准 */ @media (hover:none) and (pointer:coarse){ #view-oppo .op-c .wt-sw input{width:22px;height:22px} } /* ---------------------------------------------------- oppo 新品开荒（助理） 一份样式只管一个视图 —— 这一段的选择器**一律圈在 `#view-newapp` 里**。 理由和 #view-oppo 那一段一样：上面 vivo 的 `.wt-scroll table.tbl th:nth-child(n)` 是全局的，不带前缀的话这里新加的表格会被它的列宽一起改掉。 */ #view-newapp .na-block{margin-top:var(--s5)} /* 「本次执行步骤」那一行（两个模块都用，类名共用 `na-`）： 三个复选框 + 一句提示。它在「执行列表」卡里、表格**之上**，是**面板第一行** —— ⚠️ 它勾的是「跑哪几个动作」，与表格里的「行勾选」（勾要处理哪些包）是两回事。 */ #view-newapp .na-steppick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5); padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);background:var(--paper)} #view-newapp .na-steppick-l{font-size:12.5px;font-weight:500;color:var(--tx-700)} #view-newapp .na-stepck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-700); cursor:pointer;user-select:none} #view-newapp .na-stepck input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;margin:0;flex:none} #view-newapp .na-stepnote{color:var(--danger);margin-left:auto} /* 「挑快应用」：与 oppo 那套同一交互、各自一套类名（样式圈在各自视图里）。 */ #view-newapp .na-search{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s2)} #view-newapp .na-search input{height:34px;font-size:13px;flex:1;min-width:180px;max-width:380px} #view-newapp .na-opts{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card); max-height:240px;overflow-y:auto} #view-newapp .na-opt{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s4);cursor:pointer; border-bottom:1px solid var(--line)} #view-newapp .na-opt:last-child{border-bottom:0} #view-newapp .na-opt:hover{background:var(--paper)} #view-newapp .na-opt.is-have{cursor:default;color:var(--tx-400)} #view-newapp .na-opt.is-have:hover{background:transparent} #view-newapp .na-opt input{flex:none;width:16px;height:16px;accent-color:var(--brand-600);cursor:pointer} #view-newapp .na-opt .nm{font-size:13.5px;line-height:1.35} #view-newapp .na-opt .na-tag{margin-left:auto;font-size:11.5px;color:var(--tx-400);white-space:nowrap} #view-newapp .na-hint{padding:var(--s4);font-size:12.5px;color:var(--tx-500);line-height:1.6} #view-newapp .na-picked{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s3) 0} #view-newapp .na-picked-l{font-size:12px;color:var(--tx-500)} #view-newapp .na-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 10px; border:1px solid var(--brand-line);background:var(--brand-50);color:var(--brand-600); border-radius:var(--r-sm);font-size:12.5px} #view-newapp .na-chip button{appearance:none;border:0;background:transparent;cursor:pointer;padding:2px; display:flex;align-items:center;color:inherit;opacity:.7} #view-newapp .na-chip button:hover{opacity:1} #view-newapp .na-chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} /* 十列。min-width = 各列宽度之和，配合 table-layout:fixed，px 才是硬约束 （不写 table-layout 的话 width 不是硬约束，长内容照样把列顶开）。 ⚠️ 总和必须 ≤ 内容区可用宽（`--wrap` − 2×24 = 1312）—— 超过就会横向滚动， 而**最后一列（操作）被滚出去＝那个按钮不存在**。 2026-10-14：第一列新增「行勾选」（40px，配合表头三态全选 + 批量删除）。 为腾出这 40px，分类 84→68、appid 154→150、执行结果 240→208、主体名称 200→180 （logo 132 / 名称 150 / 操作 60 不变）。 ⚠️ **主体账号那一列要给够**（170→182）：它是邮箱（19 字起），压到 168 时那串会被 截断（实测：`.cred-t` 的 scrollWidth > clientWidth）—— 那是同事照着去 OPPO 平台登录用的。 ⚠️ **主体密码列也不要压**（110 不动）。 十个数的和 = 40+150+68+180+182+110+132+150+208+60 = 1280 ≤ 1312。**改任何一列之前，先把这十个数加一遍。** */ #view-newapp .na-tbl{table-layout:fixed;min-width:1280px} /* 左右留白收到 10px（全局是 var(--s4)=16px）。十列挤在一行里，每列省 12px 就多出可观的可用宽 —— 这样 logo/appid 加宽、最后一列加「操作」之后，**主体账号与密码仍然能整串显示** （那两个是同事要照着去 OPPO 平台登录的，截断了最难受）。 */ #view-newapp .na-tbl th,#view-newapp .na-tbl td{padding-left:10px;padding-right:10px} #view-newapp .na-tbl th:nth-child(1),#view-newapp .na-tbl td:nth-child(1){width:40px} #view-newapp .na-tbl th:nth-child(2),#view-newapp .na-tbl td:nth-child(2){width:150px} #view-newapp .na-tbl th:nth-child(3),#view-newapp .na-tbl td:nth-child(3){width:68px} #view-newapp .na-tbl th:nth-child(4),#view-newapp .na-tbl td:nth-child(4){width:180px} #view-newapp .na-tbl th:nth-child(5),#view-newapp .na-tbl td:nth-child(5){width:182px} #view-newapp .na-tbl th:nth-child(6),#view-newapp .na-tbl td:nth-child(6){width:110px} #view-newapp .na-tbl th:nth-child(7),#view-newapp .na-tbl td:nth-child(7){width:132px} #view-newapp .na-tbl th:nth-child(8),#view-newapp .na-tbl td:nth-child(8){width:150px} #view-newapp .na-tbl th:nth-child(9),#view-newapp .na-tbl td:nth-child(9){width:208px} #view-newapp .na-tbl th:nth-child(10),#view-newapp .na-tbl td:nth-child(10){width:60px} #view-newapp .na-tbl thead th{white-space:nowrap} #view-newapp .na-tbl tbody tr:last-child td{border-bottom:0} /* 勾选列（第一列，两个表共用）：居中。`.wt-sw` 默认 inline-flex，要显式居中。 */ #view-newapp .na-c{text-align:center} #view-newapp .na-c .wt-sw{display:flex;justify-content:center;align-items:center} #view-newapp .na-nm{font-size:13px;font-weight:500;line-height:1.35; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* logo 列：有图就直接把图显示出来（上传按钮跟着消失），图上带一个小 × 用来换图；没图才是那个按钮。 */ #view-newapp .na-logo{position:relative;display:block;width:64px;height:64px; border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2);overflow:hidden} #view-newapp .na-logo img{display:block;width:100%;height:100%;object-fit:contain} #view-newapp .na-logo-x{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0; display:flex;align-items:center;justify-content:center;cursor:pointer; border:0;border-radius:50%;background:rgba(21,23,26,.62);color:#fff} #view-newapp .na-logo-x:hover{background:var(--danger)} #view-newapp .na-logo-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} /* 「上传图片」：用