1223 lines
32 KiB
CSS
1223 lines
32 KiB
CSS
|
||
:root{
|
||
--bg:#f4f6f8;--panel:#fff;--ink:#17202a;--muted:#667085;--line:#d8dee6;
|
||
--blue:#2457d6;--green:#16794a;--amber:#9a6700;--red:#b42318;--purple:#7a4cc2;
|
||
}
|
||
*{box-sizing:border-box}
|
||
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Noto Sans CJK JP","Microsoft YaHei",sans-serif}
|
||
button,input,select,textarea{font:inherit}
|
||
button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 11px;cursor:pointer}
|
||
button:hover{background:#f8fafc}
|
||
button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
|
||
button.danger-ghost{color:var(--red)}
|
||
.topbar{display:flex;gap:24px;justify-content:space-between;align-items:flex-end;padding:18px 22px;background:#17202a;color:white}
|
||
.topbar h1{margin:0 0 5px;font-size:22px}
|
||
.topbar p{margin:0;opacity:.8;font-size:13px}
|
||
.progress-wrap{min-width:310px;text-align:right;font-size:12px}
|
||
.progress{height:8px;background:#344054;border-radius:99px;margin-top:7px;overflow:hidden}
|
||
.progress>div{height:100%;width:0;background:#7fd1ae}
|
||
.toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:10px 18px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
|
||
.filter-group,.toolbar-right{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
|
||
.filter-group label{font-size:12px;color:var(--muted);margin-right:2px}
|
||
.filter.active{background:#e8eefc;border-color:#a9bbea;color:#244aa5}
|
||
.layout{display:grid;grid-template-columns:265px minmax(0,1fr);min-height:calc(100vh - 128px)}
|
||
.queue-panel{background:#fff;border-right:1px solid var(--line);min-height:100%;overflow:hidden}
|
||
.queue-head{display:flex;justify-content:space-between;padding:12px 13px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700}
|
||
.queue{max-height:calc(100vh - 180px);overflow:auto;padding:7px}
|
||
.queue-item{display:grid;grid-template-columns:56px 1fr;gap:9px;align-items:center;width:100%;text-align:left;border:1px solid transparent;padding:6px;border-radius:8px;margin-bottom:5px}
|
||
.queue-item:hover{border-color:var(--line)}
|
||
.queue-item.active{border-color:#8fa8e8;background:#eef3ff}
|
||
.queue-thumb{width:56px;height:56px;background:#fff;border:1px solid #e4e7ec;border-radius:6px;display:flex;align-items:center;justify-content:center}
|
||
.queue-thumb img{max-width:50px;max-height:50px}
|
||
.queue-info strong{display:block;font-size:11px;letter-spacing:.3px}
|
||
.queue-info small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
|
||
.queue-status{margin-top:3px;font-size:10px;font-weight:700}
|
||
.review-panel{padding:16px;min-width:0}
|
||
.empty{padding:40px;text-align:center;color:var(--muted)}
|
||
.hidden{display:none!important}
|
||
.comparison{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(480px,1.2fr);gap:14px}
|
||
.cm-card,.std-card,.decision-panel,.audit{background:#fff;border:1px solid var(--line);border-radius:10px}
|
||
.card-title{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line)}
|
||
.card-title h2{margin:2px 0 0;font-size:17px}
|
||
.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:10px}
|
||
.cm-main{padding:16px}
|
||
.image-stage{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e4e7ec;border-radius:8px;background-image:linear-gradient(45deg,#f4f4f4 25%,transparent 25%),linear-gradient(-45deg,#f4f4f4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f4f4f4 75%),linear-gradient(-45deg,transparent 75%,#f4f4f4 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
|
||
.image-stage.large{height:260px}
|
||
.image-stage.large img{max-width:220px;max-height:220px;image-rendering:auto}
|
||
.meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
|
||
.meta-grid>div{border:1px solid #eaecf0;border-radius:7px;padding:8px}
|
||
.meta-grid span{display:block;color:var(--muted);font-size:10px}
|
||
.meta-grid b{display:block;margin-top:3px;font-size:12px}
|
||
.suggestion{margin-top:12px;border:1px dashed #b7c6e6;background:#f5f8ff;border-radius:7px;padding:10px;font-size:12px}
|
||
.badge{border-radius:99px;padding:4px 9px;font-size:11px;font-weight:700}
|
||
.badge.neutral{background:#eef2f6;color:#475467}
|
||
.badge.match{background:#e8f7ef;color:var(--green)}
|
||
.badge.partial{background:#fff4d6;color:var(--amber)}
|
||
.badge.ambiguous{background:#f1eafd;color:var(--purple)}
|
||
.badge.unknown{background:#fdecec;color:var(--red)}
|
||
.candidate-grid{padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:9px;max-height:420px;overflow:auto}
|
||
.candidate{border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff;cursor:pointer}
|
||
.candidate.selected{border:2px solid var(--blue);background:#f5f8ff}
|
||
.candidate-img{height:95px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eee;margin-bottom:7px}
|
||
.candidate-img img{max-width:85px;max-height:85px}
|
||
.candidate strong{display:block;font-size:11px;word-break:break-all}
|
||
.candidate small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
|
||
.decision-panel{margin-top:14px;padding-bottom:14px}
|
||
.decision-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line)}
|
||
.decision-head h3{margin:0}
|
||
.shortcut-hint{font-size:11px;color:var(--muted)}
|
||
.status-buttons{display:flex;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line)}
|
||
.status-btn.active{color:#fff}
|
||
.status-btn.match.active{background:var(--green);border-color:var(--green)}
|
||
.status-btn.partial.active{background:var(--amber);border-color:var(--amber)}
|
||
.status-btn.ambiguous.active{background:var(--purple);border-color:var(--purple)}
|
||
.status-btn.unknown.active{background:var(--red);border-color:var(--red)}
|
||
.decision-form{padding:0 15px}
|
||
.field{margin-top:13px}
|
||
.field>label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
|
||
.help,.muted{color:var(--muted);font-size:11px}
|
||
.layer-selection{display:flex;flex-wrap:wrap;gap:6px;max-height:140px;overflow:auto}
|
||
.layer-chip{padding:5px 8px;border-radius:99px;font-size:11px}
|
||
.layer-chip.selected{background:#e8eefc;color:#244aa5;border-color:#8fa8e8}
|
||
.selected-std{min-height:32px;border:1px solid #eaecf0;border-radius:7px;padding:8px}
|
||
textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:8px;resize:vertical}
|
||
.decision-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
|
||
.message{font-size:12px;margin-top:8px;min-height:18px}
|
||
.message.ok{color:var(--green)}
|
||
.message.err{color:var(--red)}
|
||
.audit{margin-top:14px;padding:11px 14px}
|
||
.audit summary{cursor:pointer;font-size:12px;font-weight:700}
|
||
.audit pre{white-space:pre-wrap;word-break:break-word;background:#f8fafc;border:1px solid #eaecf0;padding:9px;border-radius:7px;max-height:350px;overflow:auto;font-size:11px}
|
||
dialog{width:min(1180px,94vw);height:min(820px,90vh);border:1px solid var(--line);border-radius:12px;padding:0}
|
||
dialog::backdrop{background:rgba(0,0,0,.45)}
|
||
.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
|
||
.dialog-head h2{margin:2px 0 0}
|
||
.library-tools{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
|
||
.library-tools select,.library-tools input{border:1px solid var(--line);border-radius:7px;padding:8px}
|
||
.library-tools input{flex:1}
|
||
.library-grid{padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;overflow:auto;max-height:calc(90vh - 140px)}
|
||
.library-item{border:1px solid var(--line);border-radius:8px;padding:8px;cursor:pointer}
|
||
.library-item:hover{border-color:#8fa8e8}
|
||
.library-item img{display:block;max-width:90px;max-height:90px;margin:0 auto 8px}
|
||
.library-item strong{display:block;font-size:10px;word-break:break-all}
|
||
.library-item small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
|
||
@media(max-width:1000px){
|
||
.layout{grid-template-columns:1fr}.queue-panel{border-right:0;border-bottom:1px solid var(--line)}.queue{display:flex;max-height:120px;overflow-x:auto}.queue-item{min-width:190px}.comparison{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.progress-wrap{width:100%;min-width:0;text-align:left}
|
||
}
|
||
|
||
.official-desc{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}.candidate-name{font-size:12px;font-weight:700;margin-bottom:3px}.candidate-code{font-size:9px;color:var(--muted);word-break:break-all}.layer-code{font-size:9px;color:var(--muted)}
|
||
|
||
|
||
/* v2 reviewer layout: 当前对象 + 竖排候选 + 右侧人工确认，禁止主页面纵向滚动 */
|
||
html,body{height:100%}
|
||
body{height:100vh;overflow:hidden;display:flex;flex-direction:column}
|
||
.topbar{flex:0 0 auto;padding:9px 18px;align-items:center}
|
||
.topbar h1{font-size:18px;margin:0 0 2px}
|
||
.topbar p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:880px}
|
||
.progress-wrap{min-width:300px}
|
||
.toolbar{flex:0 0 auto;position:relative;top:auto;padding:8px 14px}
|
||
.layout{flex:1 1 auto;min-height:0;height:auto;overflow:hidden;grid-template-columns:260px minmax(0,1fr)}
|
||
.queue-panel{height:100%;min-height:0;display:flex;flex-direction:column}
|
||
.queue-head{flex:0 0 auto;padding:9px 12px}
|
||
.queue{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
|
||
.review-panel{height:100%;min-height:0;overflow:hidden;padding:12px}
|
||
|
||
#reviewContent:not(.hidden){
|
||
height:100%;
|
||
min-height:0;
|
||
display:grid;
|
||
grid-template-columns:minmax(0,1fr) minmax(390px,440px);
|
||
grid-template-rows:minmax(0,1fr) auto;
|
||
grid-template-areas:
|
||
"comparison decision"
|
||
"audit decision";
|
||
gap:12px;
|
||
}
|
||
|
||
.comparison{
|
||
grid-area:comparison;
|
||
min-width:0;
|
||
min-height:0;
|
||
height:100%;
|
||
display:grid;
|
||
grid-template-columns:minmax(340px,1.05fr) minmax(300px,.78fr);
|
||
gap:12px;
|
||
}
|
||
|
||
.cm-card,.std-card{
|
||
min-width:0;
|
||
min-height:0;
|
||
height:100%;
|
||
display:flex;
|
||
flex-direction:column;
|
||
overflow:hidden;
|
||
}
|
||
.card-title{flex:0 0 auto;padding:10px 12px}
|
||
.card-title h2{font-size:16px}
|
||
.cm-main{
|
||
flex:1 1 auto;
|
||
min-height:0;
|
||
overflow:hidden;
|
||
padding:11px;
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
.image-stage.large{
|
||
flex:1 1 auto;
|
||
min-height:190px;
|
||
height:auto;
|
||
}
|
||
.image-stage.large img{max-width:80%;max-height:80%}
|
||
.meta-grid{flex:0 0 auto;margin-top:8px;gap:6px}
|
||
.meta-grid>div{padding:6px}
|
||
.suggestion{flex:0 0 auto;margin-top:8px;padding:8px;max-height:108px;overflow:auto}
|
||
|
||
/* NavSea 候选改成竖排列表，在自己的面板里滚动 */
|
||
.std-card .candidate-grid{
|
||
flex:1 1 auto;
|
||
min-height:0;
|
||
max-height:none;
|
||
overflow:auto;
|
||
display:grid;
|
||
grid-template-columns:1fr;
|
||
align-content:start;
|
||
gap:7px;
|
||
padding:9px;
|
||
}
|
||
.std-card .candidate{
|
||
display:grid;
|
||
grid-template-columns:88px minmax(0,1fr);
|
||
grid-template-rows:auto auto auto auto;
|
||
column-gap:10px;
|
||
row-gap:2px;
|
||
align-items:center;
|
||
padding:7px;
|
||
}
|
||
.std-card .candidate-img{
|
||
grid-column:1;
|
||
grid-row:1 / span 4;
|
||
width:88px;
|
||
height:78px;
|
||
margin:0;
|
||
padding-right:8px;
|
||
border-bottom:0;
|
||
border-right:1px solid #eee;
|
||
}
|
||
.std-card .candidate-img img{max-width:72px;max-height:68px}
|
||
.std-card .candidate-name,
|
||
.std-card .candidate-code,
|
||
.std-card .candidate small{grid-column:2}
|
||
.std-card .candidate-name{font-size:12px}
|
||
.std-card .candidate-code{font-size:9px}
|
||
|
||
/* 人工判断固定在右侧。Layer 列表内部滚动，保存按钮始终可见 */
|
||
.decision-panel{
|
||
grid-area:decision;
|
||
margin-top:0;
|
||
padding-bottom:0;
|
||
min-width:0;
|
||
min-height:0;
|
||
height:100%;
|
||
overflow:hidden;
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
.decision-head{flex:0 0 auto;padding:10px 12px}
|
||
.decision-head h3{font-size:16px}
|
||
.shortcut-hint{font-size:10px;text-align:right}
|
||
.status-buttons{
|
||
flex:0 0 auto;
|
||
padding:9px 12px;
|
||
display:grid;
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:7px;
|
||
}
|
||
.status-buttons .status-btn{width:100%}
|
||
.decision-form{
|
||
flex:1 1 auto;
|
||
min-height:0;
|
||
overflow:hidden;
|
||
padding:0 12px 10px;
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
.decision-form .field{flex:0 0 auto;margin-top:9px}
|
||
.decision-form .field:first-child{
|
||
flex:1 1 auto;
|
||
min-height:0;
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
.decision-form .field:first-child .help{flex:0 0 auto;margin-top:5px}
|
||
.layer-selection{
|
||
flex:1 1 auto;
|
||
min-height:0;
|
||
max-height:none;
|
||
overflow:auto;
|
||
align-content:flex-start;
|
||
padding-right:3px;
|
||
}
|
||
.layer-chip{padding:4px 7px;font-size:10px}
|
||
.selected-std{padding:6px;min-height:30px}
|
||
#note{height:52px;min-height:52px;resize:none}
|
||
.decision-actions{
|
||
flex:0 0 auto;
|
||
margin-top:auto;
|
||
padding-top:9px;
|
||
display:grid;
|
||
grid-template-columns:1.15fr .8fr 1fr;
|
||
gap:7px;
|
||
}
|
||
.decision-actions button{padding:8px 7px;font-size:11px}
|
||
.message{flex:0 0 auto;margin-top:5px;min-height:15px}
|
||
|
||
/* 审计区保留在左侧底部，正常不占用确认区 */
|
||
.audit{
|
||
grid-area:audit;
|
||
margin-top:0;
|
||
padding:7px 10px;
|
||
max-height:110px;
|
||
overflow:auto;
|
||
}
|
||
.audit pre{max-height:72px}
|
||
|
||
/* 中等宽度仍保持右侧人工区，压缩候选宽度 */
|
||
@media(max-width:1450px){
|
||
#reviewContent:not(.hidden){grid-template-columns:minmax(0,1fr) 370px}
|
||
.comparison{grid-template-columns:minmax(300px,1fr) minmax(250px,.72fr)}
|
||
.layout{grid-template-columns:230px minmax(0,1fr)}
|
||
}
|
||
|
||
/* 窄屏才退回上下布局 */
|
||
@media(max-width:1000px){
|
||
body{overflow:auto;height:auto;display:block}
|
||
.layout{height:auto;min-height:0;overflow:visible;grid-template-columns:1fr}
|
||
.review-panel{height:auto;overflow:visible}
|
||
#reviewContent:not(.hidden){
|
||
height:auto;
|
||
display:grid;
|
||
grid-template-columns:1fr;
|
||
grid-template-rows:auto;
|
||
grid-template-areas:"comparison" "decision" "audit";
|
||
}
|
||
.comparison{height:auto;grid-template-columns:1fr}
|
||
.cm-card,.std-card,.decision-panel{height:auto}
|
||
.std-card .candidate-grid{max-height:420px}
|
||
}
|
||
|
||
|
||
/* v3 老花友好：左栏收窄、图标放大、关键文字放大 */
|
||
@media(min-width:1001px){
|
||
/* 左边 CM95 内容少，缩窄；把更多宽度让给候选 */
|
||
.comparison{
|
||
grid-template-columns:minmax(285px,.68fr) minmax(410px,1.18fr);
|
||
}
|
||
|
||
/* CM95 当前对象名称与说明放大 */
|
||
.cm-card .card-title h2{
|
||
font-size:20px;
|
||
line-height:1.22;
|
||
font-weight:700;
|
||
}
|
||
.cm-card #anonId{
|
||
font-size:12px;
|
||
margin-top:3px;
|
||
}
|
||
.cm-card .official-desc{
|
||
font-size:13px;
|
||
line-height:1.45;
|
||
margin-top:5px;
|
||
}
|
||
|
||
/* 当前 CM95 主图放大。使用 transform 保持原始比例，不改变布局尺寸 */
|
||
.cm-card .image-stage.large img{
|
||
max-width:56%;
|
||
max-height:56%;
|
||
transform:scale(1.9);
|
||
transform-origin:center;
|
||
}
|
||
|
||
/* 组件/几何/次数也稍放大 */
|
||
.cm-card .meta-grid span{
|
||
font-size:12px;
|
||
}
|
||
.cm-card .meta-grid b{
|
||
font-size:14px;
|
||
}
|
||
|
||
/* 已有视觉建议文字放大 */
|
||
.cm-card .suggestion{
|
||
font-size:14px;
|
||
line-height:1.4;
|
||
}
|
||
.cm-card .suggestion .candidate-name{
|
||
font-size:16px;
|
||
}
|
||
|
||
/* 中间候选卡片图标加大 */
|
||
.std-card .candidate{
|
||
grid-template-columns:112px minmax(0,1fr);
|
||
min-height:104px;
|
||
padding:8px 10px;
|
||
}
|
||
.std-card .candidate-img{
|
||
width:112px;
|
||
height:92px;
|
||
padding-right:10px;
|
||
}
|
||
.std-card .candidate-img img{
|
||
max-width:94px;
|
||
max-height:82px;
|
||
transform:scale(1.28);
|
||
transform-origin:center;
|
||
}
|
||
|
||
/* 候选中文名（用户红框）明显放大 */
|
||
.std-card .candidate-name{
|
||
font-size:16px;
|
||
line-height:1.25;
|
||
font-weight:700;
|
||
}
|
||
.std-card .candidate-code{
|
||
font-size:11px;
|
||
line-height:1.25;
|
||
}
|
||
.std-card .candidate small{
|
||
font-size:12px;
|
||
line-height:1.3;
|
||
}
|
||
|
||
/* 右侧人工判断整体提高可读性 */
|
||
.decision-head h3{
|
||
font-size:19px;
|
||
}
|
||
.status-buttons .status-btn{
|
||
font-size:15px;
|
||
padding:9px 6px;
|
||
}
|
||
|
||
/* “标准 Layer”标题放大 */
|
||
.decision-form .field>label{
|
||
font-size:16px;
|
||
line-height:1.3;
|
||
}
|
||
.decision-form .field:first-child>label{
|
||
font-size:18px;
|
||
font-weight:700;
|
||
margin-bottom:8px;
|
||
}
|
||
|
||
/* Layer 按钮本身也放大 */
|
||
.layer-chip{
|
||
font-size:13px;
|
||
line-height:1.3;
|
||
padding:6px 9px;
|
||
}
|
||
.layer-chip .layer-code,
|
||
.layer-code{
|
||
font-size:10px;
|
||
}
|
||
|
||
.decision-form .help{
|
||
font-size:12px;
|
||
line-height:1.35;
|
||
}
|
||
|
||
/* 已选 Standard Visual Object 也放大 */
|
||
.selected-std{
|
||
font-size:14px;
|
||
line-height:1.35;
|
||
padding:8px;
|
||
}
|
||
.selected-std b{
|
||
font-size:16px;
|
||
}
|
||
|
||
#note{
|
||
font-size:14px;
|
||
}
|
||
|
||
.decision-actions button{
|
||
font-size:13px;
|
||
padding:9px 7px;
|
||
}
|
||
}
|
||
|
||
/* 1900px 左右桌面进一步优化宽度分配 */
|
||
@media(min-width:1600px){
|
||
#reviewContent:not(.hidden){
|
||
grid-template-columns:minmax(0,1fr) minmax(405px,430px);
|
||
}
|
||
.comparison{
|
||
grid-template-columns:minmax(300px,.64fr) minmax(460px,1.22fr);
|
||
}
|
||
}
|
||
|
||
|
||
/* v3.1 老花友好加强：实际图标和 Layer 中文进一步放大 */
|
||
@media(min-width:1001px){
|
||
/* 当前 CM95 图标直接给明确显示盒，避免小 Sprite 仍按原始尺寸显示 */
|
||
.cm-card .image-stage.large img{
|
||
width:clamp(110px,36%,175px);
|
||
height:clamp(110px,36%,175px);
|
||
max-width:none;
|
||
max-height:none;
|
||
object-fit:contain;
|
||
transform:none;
|
||
}
|
||
|
||
/* NavSea 候选图标固定放大，不依赖原始 PNG 尺寸 */
|
||
.std-card .candidate-img img{
|
||
width:78px;
|
||
height:78px;
|
||
max-width:none;
|
||
max-height:none;
|
||
object-fit:contain;
|
||
transform:none;
|
||
}
|
||
|
||
/* 候选中文名再大一档 */
|
||
.std-card .candidate-name{
|
||
font-size:18px;
|
||
line-height:1.28;
|
||
}
|
||
|
||
/* 标准 Layer 标题和中文按钮再放大 */
|
||
.decision-form .field:first-child>label{
|
||
font-size:20px;
|
||
}
|
||
.layer-chip{
|
||
font-size:15px;
|
||
line-height:1.35;
|
||
padding:7px 10px;
|
||
font-weight:600;
|
||
}
|
||
.layer-chip .layer-code,
|
||
.layer-code{
|
||
font-size:10px;
|
||
font-weight:400;
|
||
}
|
||
|
||
/* 左侧 CM95 中文名再加强 */
|
||
.cm-card .card-title h2{
|
||
font-size:22px;
|
||
}
|
||
.cm-card .official-desc{
|
||
font-size:14px;
|
||
}
|
||
}
|
||
|
||
|
||
/* v3.2：视觉候选收窄，右侧 Layer 尽量一次全部显示 */
|
||
@media(min-width:1001px){
|
||
/* 右侧人工判断加宽，优先保证全部 Layer 可见 */
|
||
#reviewContent:not(.hidden){
|
||
grid-template-columns:minmax(0,1fr) minmax(500px,560px);
|
||
}
|
||
|
||
/* 比较区中，视觉候选进一步收窄 */
|
||
.comparison{
|
||
grid-template-columns:minmax(300px,1fr) minmax(315px,360px);
|
||
}
|
||
|
||
/* 候选卡片仍竖排，但整体更紧凑 */
|
||
.std-card .candidate{
|
||
grid-template-columns:96px minmax(0,1fr);
|
||
min-height:96px;
|
||
padding:7px 8px;
|
||
}
|
||
.std-card .candidate-img{
|
||
width:96px;
|
||
height:84px;
|
||
padding-right:8px;
|
||
}
|
||
.std-card .candidate-img img{
|
||
width:72px;
|
||
height:72px;
|
||
}
|
||
.std-card .candidate-name{
|
||
font-size:16px;
|
||
}
|
||
|
||
/* 右侧状态区稍压缩，把高度让给 Layer */
|
||
.decision-head{
|
||
padding:8px 11px;
|
||
}
|
||
.status-buttons{
|
||
padding:7px 10px;
|
||
gap:6px;
|
||
}
|
||
.status-buttons .status-btn{
|
||
padding:7px 5px;
|
||
font-size:14px;
|
||
}
|
||
|
||
/* Layer 区不再优先滚动：允许完整铺开 */
|
||
.decision-form{
|
||
overflow:visible;
|
||
padding:0 10px 9px;
|
||
}
|
||
.decision-form .field:first-child{
|
||
flex:0 0 auto;
|
||
min-height:0;
|
||
display:block;
|
||
}
|
||
.layer-selection{
|
||
flex:0 0 auto;
|
||
max-height:none;
|
||
min-height:0;
|
||
overflow:visible;
|
||
gap:5px;
|
||
padding-right:0;
|
||
}
|
||
.layer-chip{
|
||
font-size:14px;
|
||
line-height:1.25;
|
||
padding:5px 8px;
|
||
}
|
||
.layer-chip .layer-code,
|
||
.layer-code{
|
||
font-size:9px;
|
||
}
|
||
.decision-form .field:first-child .help{
|
||
margin-top:4px;
|
||
font-size:11px;
|
||
}
|
||
|
||
/* 下半部压紧，不抢 Layer 高度 */
|
||
.decision-form .field{
|
||
margin-top:7px;
|
||
}
|
||
.selected-std{
|
||
padding:6px 7px;
|
||
min-height:28px;
|
||
}
|
||
#note{
|
||
height:44px;
|
||
min-height:44px;
|
||
}
|
||
.decision-actions{
|
||
padding-top:7px;
|
||
gap:6px;
|
||
}
|
||
.decision-actions button{
|
||
padding:7px 5px;
|
||
font-size:12px;
|
||
}
|
||
.message{
|
||
min-height:12px;
|
||
margin-top:3px;
|
||
}
|
||
}
|
||
|
||
/* 1600px 以上桌面进一步固定：候选窄、右侧宽 */
|
||
@media(min-width:1600px){
|
||
#reviewContent:not(.hidden){
|
||
grid-template-columns:minmax(0,1fr) 540px;
|
||
}
|
||
.comparison{
|
||
grid-template-columns:minmax(330px,1fr) 350px;
|
||
}
|
||
}
|
||
|
||
|
||
/* v3.3：Standard Visual Object 库老花友好 */
|
||
@media(min-width:1001px){
|
||
dialog{
|
||
width:min(1320px,96vw);
|
||
height:min(900px,94vh);
|
||
}
|
||
|
||
.dialog-head{
|
||
padding:12px 16px;
|
||
}
|
||
.dialog-head h2{
|
||
font-size:22px;
|
||
}
|
||
.dialog-head .eyebrow{
|
||
font-size:11px;
|
||
}
|
||
|
||
.library-tools{
|
||
padding:10px 14px;
|
||
}
|
||
.library-tools select,
|
||
.library-tools input{
|
||
font-size:15px;
|
||
padding:9px 10px;
|
||
}
|
||
|
||
/* 标准库一张卡更大，减少拥挤 */
|
||
.library-grid{
|
||
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
|
||
gap:12px;
|
||
padding:14px;
|
||
max-height:calc(94vh - 135px);
|
||
}
|
||
|
||
.library-item{
|
||
padding:11px;
|
||
min-height:180px;
|
||
display:flex;
|
||
flex-direction:column;
|
||
justify-content:flex-start;
|
||
}
|
||
|
||
/* 标准库图标明显放大 */
|
||
.library-item img{
|
||
width:108px;
|
||
height:108px;
|
||
max-width:none;
|
||
max-height:none;
|
||
object-fit:contain;
|
||
margin:2px auto 10px;
|
||
}
|
||
|
||
/* 中文对象名作为主文字 */
|
||
.library-item .candidate-name{
|
||
font-size:17px;
|
||
line-height:1.28;
|
||
font-weight:700;
|
||
margin-bottom:5px;
|
||
}
|
||
|
||
/* 资源 key 保留小字 */
|
||
.library-item .candidate-code{
|
||
font-size:11px;
|
||
line-height:1.3;
|
||
margin-bottom:5px;
|
||
}
|
||
|
||
/* 标准 Layer 中文/ID 放大一些 */
|
||
.library-item small{
|
||
font-size:13px;
|
||
line-height:1.35;
|
||
margin-top:4px;
|
||
}
|
||
}
|
||
|
||
|
||
/* v3.4：允许无对应 Standard Visual Object 时仅确认标准 Layer */
|
||
.layer-only-btn{
|
||
margin-top:6px;
|
||
width:100%;
|
||
border-style:dashed;
|
||
font-size:13px;
|
||
padding:7px 8px;
|
||
color:#344054;
|
||
background:#f8fafc;
|
||
}
|
||
.layer-only-btn:hover{
|
||
background:#eef3ff;
|
||
border-color:#8fa8e8;
|
||
color:#244aa5;
|
||
}
|
||
|
||
|
||
/* v3.5：修复 Layer-only 增加后底部人工确认按钮被挤出 */
|
||
@media(min-width:1001px){
|
||
/* 进一步把空间让给人工确认区 */
|
||
#reviewContent:not(.hidden){
|
||
grid-template-columns:minmax(0,1fr) minmax(590px,650px);
|
||
}
|
||
|
||
/* 中间视觉候选再窄一点；左侧 CM95 仍保留足够预览空间 */
|
||
.comparison{
|
||
grid-template-columns:minmax(330px,1fr) minmax(285px,315px);
|
||
}
|
||
|
||
/* 右侧重新回到严格的固定高度 flex，禁止内容把按钮顶出面板 */
|
||
.decision-panel{
|
||
overflow:hidden;
|
||
}
|
||
.decision-form{
|
||
min-height:0;
|
||
overflow:hidden;
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
|
||
/* Layer 尽量完整铺开，因为右侧变宽后行数明显减少 */
|
||
.decision-form .field:first-child{
|
||
flex:0 0 auto;
|
||
}
|
||
.layer-selection{
|
||
flex:0 0 auto;
|
||
overflow:visible;
|
||
max-height:none;
|
||
}
|
||
|
||
/* 下方信息继续压紧 */
|
||
.selected-std{
|
||
min-height:26px;
|
||
padding:5px 7px;
|
||
}
|
||
.layer-only-btn{
|
||
margin-top:4px;
|
||
padding:5px 7px;
|
||
font-size:12px;
|
||
}
|
||
.decision-form .field .help{
|
||
margin-top:3px;
|
||
font-size:10px;
|
||
line-height:1.25;
|
||
}
|
||
#note{
|
||
height:36px;
|
||
min-height:36px;
|
||
}
|
||
|
||
/* 人工确认按钮作为固定 flex 尾部，始终保留 */
|
||
.decision-actions{
|
||
flex:0 0 auto;
|
||
margin-top:auto;
|
||
padding-top:6px;
|
||
padding-bottom:0;
|
||
}
|
||
.decision-actions button{
|
||
min-height:36px;
|
||
}
|
||
.message{
|
||
flex:0 0 auto;
|
||
}
|
||
}
|
||
|
||
@media(min-width:1600px){
|
||
#reviewContent:not(.hidden){
|
||
grid-template-columns:minmax(0,1fr) 640px;
|
||
}
|
||
.comparison{
|
||
grid-template-columns:minmax(360px,1fr) 300px;
|
||
}
|
||
}
|
||
|
||
|
||
/* v3.6：COMPONENT 状态与组件类型 */
|
||
.badge.component{background:#e8f1fb;color:#175cd3}
|
||
.status-btn.component.active{background:#175cd3;border-color:#175cd3;color:#fff}
|
||
|
||
@media(min-width:1001px){
|
||
/* 5 个状态按钮：第一行 3 个，第二行 2 个 */
|
||
.status-buttons{
|
||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||
}
|
||
|
||
.component-kind-selection{
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
gap:6px;
|
||
}
|
||
.component-kind-chip{
|
||
font-size:14px;
|
||
line-height:1.25;
|
||
padding:6px 9px;
|
||
border-radius:99px;
|
||
}
|
||
.component-kind-chip.selected{
|
||
background:#e8f1fb;
|
||
border-color:#84adff;
|
||
color:#175cd3;
|
||
font-weight:700;
|
||
}
|
||
|
||
#componentKindField{
|
||
flex:0 0 auto;
|
||
margin-top:8px;
|
||
}
|
||
#componentKindField>label{
|
||
font-size:18px;
|
||
}
|
||
}
|
||
|
||
|
||
/* v3.7：保存操作区永远可见；Layer 多列压缩高度 */
|
||
@media(min-width:1001px){
|
||
/* 右侧再加宽，中间候选再收窄 */
|
||
#reviewContent:not(.hidden){
|
||
grid-template-columns:minmax(0,1fr) minmax(680px,740px);
|
||
}
|
||
.comparison{
|
||
grid-template-columns:minmax(330px,1fr) minmax(250px,280px);
|
||
}
|
||
|
||
/* 人工判断面板固定为三段：顶部 / 主体 / 底部操作 */
|
||
.decision-panel{
|
||
position:relative;
|
||
min-height:0;
|
||
overflow:hidden;
|
||
}
|
||
.decision-form{
|
||
flex:1 1 auto;
|
||
min-height:0;
|
||
overflow:hidden;
|
||
display:grid;
|
||
grid-template-rows:minmax(0,1fr) auto auto auto auto;
|
||
align-content:stretch;
|
||
padding:0 10px 8px;
|
||
}
|
||
|
||
/* 标准 Layer 使用多列网格，尽量全部同屏 */
|
||
#standardLayerField{
|
||
min-height:0;
|
||
overflow:hidden;
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
.layer-selection{
|
||
display:grid;
|
||
grid-template-columns:repeat(4,minmax(0,1fr));
|
||
gap:5px;
|
||
align-content:start;
|
||
overflow:auto;
|
||
max-height:none;
|
||
min-height:0;
|
||
padding-right:2px;
|
||
}
|
||
.layer-chip{
|
||
width:100%;
|
||
min-width:0;
|
||
text-align:left;
|
||
font-size:14px;
|
||
line-height:1.18;
|
||
padding:6px 7px;
|
||
white-space:normal;
|
||
}
|
||
.layer-chip .layer-code{
|
||
display:block;
|
||
margin-top:2px;
|
||
font-size:9px;
|
||
line-height:1.1;
|
||
color:#667085;
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
white-space:nowrap;
|
||
}
|
||
|
||
/* 组件模式下不占用标准 Layer 区 */
|
||
#componentKindField:not(.hidden){
|
||
grid-row:1;
|
||
}
|
||
|
||
/* 下方信息进一步压缩 */
|
||
#standardObjectField{
|
||
margin-top:6px;
|
||
}
|
||
#standardObjectField>label,
|
||
.decision-form .field>label{
|
||
margin-bottom:4px;
|
||
}
|
||
.selected-std{
|
||
min-height:28px;
|
||
padding:5px 7px;
|
||
}
|
||
.layer-only-btn{
|
||
margin-top:4px;
|
||
padding:5px 7px;
|
||
}
|
||
#note{
|
||
height:34px;
|
||
min-height:34px;
|
||
}
|
||
|
||
/* 操作按钮绝不参与可滚动内容，固定在底部 */
|
||
.decision-actions{
|
||
position:sticky;
|
||
bottom:0;
|
||
z-index:20;
|
||
background:#fff;
|
||
margin-top:6px;
|
||
padding:8px 0 2px;
|
||
border-top:1px solid #eaecf0;
|
||
display:grid;
|
||
grid-template-columns:1.2fr .8fr 1fr;
|
||
gap:7px;
|
||
}
|
||
.decision-actions button{
|
||
min-height:38px;
|
||
font-size:13px;
|
||
font-weight:600;
|
||
}
|
||
.message{
|
||
margin-top:3px;
|
||
min-height:14px;
|
||
}
|
||
}
|
||
|
||
@media(min-width:1600px){
|
||
#reviewContent:not(.hidden){
|
||
grid-template-columns:minmax(0,1fr) 720px;
|
||
}
|
||
.comparison{
|
||
grid-template-columns:minmax(360px,1fr) 265px;
|
||
}
|
||
}
|
||
|
||
|
||
/* v3.8：当前对象区收窄，视觉候选扩大；最可能候选标红 */
|
||
@media(min-width:1001px){
|
||
/* 比较区把更多宽度让给视觉候选 */
|
||
.comparison{
|
||
grid-template-columns:minmax(285px,.78fr) minmax(340px,1.22fr);
|
||
}
|
||
|
||
/* 候选卡片利用更宽空间，图标和说明更舒展 */
|
||
.std-card .candidate{
|
||
grid-template-columns:118px minmax(0,1fr);
|
||
min-height:108px;
|
||
padding:9px 10px;
|
||
}
|
||
.std-card .candidate-img{
|
||
width:118px;
|
||
height:94px;
|
||
padding-right:10px;
|
||
}
|
||
.std-card .candidate-img img{
|
||
width:84px;
|
||
height:84px;
|
||
}
|
||
|
||
.std-card .candidate-name{
|
||
font-size:17px;
|
||
line-height:1.28;
|
||
}
|
||
|
||
/* UI-only 最可能提示：只标文字，不自动选择 */
|
||
.std-card .candidate.recommended{
|
||
background:#fffafa;
|
||
border-color:#f1b5b5;
|
||
}
|
||
.std-card .candidate .recommended-name{
|
||
color:#d92d20;
|
||
font-weight:800;
|
||
}
|
||
.recommended-tag{
|
||
display:inline-block;
|
||
margin-left:8px;
|
||
padding:2px 6px;
|
||
border-radius:99px;
|
||
background:#fee4e2;
|
||
color:#b42318;
|
||
font-size:11px;
|
||
font-weight:700;
|
||
vertical-align:middle;
|
||
}
|
||
}
|
||
|
||
@media(min-width:1600px){
|
||
/* 1800~1900 桌面：左侧更窄，中间候选明显更宽 */
|
||
.comparison{
|
||
grid-template-columns:minmax(300px,.72fr) minmax(340px,1.28fr);
|
||
}
|
||
}
|
||
|
||
|
||
/* v4：Reviewer 转为 NavSea Layer 分类确认台 */
|
||
.semantic-box{
|
||
flex:0 0 auto;
|
||
margin-top:8px;
|
||
padding:9px 10px;
|
||
border:1px solid #b8c7e8;
|
||
border-radius:8px;
|
||
background:#f5f8ff;
|
||
}
|
||
.semantic-label{
|
||
font-size:11px;
|
||
color:#667085;
|
||
margin-bottom:2px;
|
||
}
|
||
.semantic-category{
|
||
font-size:18px;
|
||
line-height:1.25;
|
||
font-weight:800;
|
||
color:#17202a;
|
||
}
|
||
.semantic-reason{
|
||
margin-top:5px;
|
||
font-size:13px;
|
||
line-height:1.45;
|
||
color:#344054;
|
||
}
|
||
.semantic-component-hint{
|
||
margin-top:6px;
|
||
padding:5px 7px;
|
||
border-radius:6px;
|
||
background:#e8f1fb;
|
||
color:#175cd3;
|
||
font-weight:700;
|
||
font-size:13px;
|
||
}
|
||
.semantic-conflict{
|
||
margin-top:6px;
|
||
padding:6px 8px;
|
||
border-radius:6px;
|
||
background:#fff1f0;
|
||
color:#b42318;
|
||
font-weight:700;
|
||
font-size:12px;
|
||
}
|
||
|
||
.layer-suggestion-list{
|
||
flex:1 1 auto;
|
||
min-height:0;
|
||
overflow:auto;
|
||
padding:9px;
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:7px;
|
||
}
|
||
.layer-suggestion-card{
|
||
width:100%;
|
||
text-align:left;
|
||
padding:9px 10px;
|
||
border:1px solid #d8dee6;
|
||
border-radius:8px;
|
||
background:#fff;
|
||
}
|
||
.layer-suggestion-card:hover{
|
||
border-color:#8fa8e8;
|
||
background:#f8faff;
|
||
}
|
||
.layer-suggestion-card.top{
|
||
border:2px solid #e26b62;
|
||
background:#fffafa;
|
||
}
|
||
.layer-rank-head{
|
||
display:flex;
|
||
gap:8px;
|
||
align-items:center;
|
||
}
|
||
.layer-rank-index{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
width:24px;
|
||
height:24px;
|
||
border-radius:99px;
|
||
background:#eef2f6;
|
||
font-size:12px;
|
||
font-weight:700;
|
||
}
|
||
.layer-rank-name{
|
||
font-size:17px;
|
||
font-weight:800;
|
||
line-height:1.25;
|
||
flex:1;
|
||
}
|
||
.layer-suggestion-card.top .layer-rank-name{
|
||
color:#d92d20;
|
||
}
|
||
.layer-rank-top{
|
||
padding:2px 6px;
|
||
border-radius:99px;
|
||
background:#fee4e2;
|
||
color:#b42318;
|
||
font-size:11px;
|
||
font-weight:700;
|
||
}
|
||
.layer-rank-code{
|
||
margin:4px 0 0 32px;
|
||
font-size:10px;
|
||
color:#667085;
|
||
word-break:break-all;
|
||
}
|
||
.layer-rank-score{
|
||
margin:5px 0 0 32px;
|
||
font-size:12px;
|
||
font-weight:700;
|
||
color:#344054;
|
||
}
|
||
.layer-rank-reason{
|
||
margin:4px 0 0 32px;
|
||
font-size:12px;
|
||
line-height:1.35;
|
||
color:#475467;
|
||
}
|
||
.no-layer-suggestion{
|
||
padding:14px;
|
||
border:1px dashed #d0d5dd;
|
||
border-radius:8px;
|
||
background:#f8fafc;
|
||
color:#667085;
|
||
font-size:13px;
|
||
line-height:1.45;
|
||
}
|
||
.component-recommendation{
|
||
padding:10px;
|
||
border:2px solid #84adff;
|
||
border-radius:8px;
|
||
background:#f3f7ff;
|
||
}
|
||
.component-recommendation .layer-rank-title{
|
||
font-size:12px;
|
||
color:#475467;
|
||
}
|
||
.component-recommendation .layer-rank-name{
|
||
margin-top:4px;
|
||
color:#175cd3;
|
||
}
|
||
.apply-suggestion-btn{
|
||
margin:8px 0 0 32px;
|
||
background:#175cd3;
|
||
color:#fff;
|
||
border-color:#175cd3;
|
||
}
|
||
|
||
.visual-reference-details{
|
||
flex:0 0 auto;
|
||
border-top:1px solid #eaecf0;
|
||
background:#fbfcfe;
|
||
max-height:42%;
|
||
overflow:hidden;
|
||
}
|
||
.visual-reference-details summary{
|
||
cursor:pointer;
|
||
padding:9px 11px;
|
||
font-size:13px;
|
||
font-weight:700;
|
||
color:#475467;
|
||
}
|
||
.visual-reference-details[open]{
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
.visual-reference-details[open] .candidate-grid{
|
||
flex:1 1 auto;
|
||
min-height:0;
|
||
overflow:auto;
|
||
}
|
||
|
||
/* Layer 分类为主后，图标参考缩为次要证据 */
|
||
.visual-reference-details .candidate-grid{
|
||
max-height:300px;
|
||
}
|
||
.visual-reference-details .candidate{
|
||
min-height:82px;
|
||
grid-template-columns:88px minmax(0,1fr);
|
||
}
|
||
.visual-reference-details .candidate-img{
|
||
width:88px;
|
||
height:72px;
|
||
}
|
||
.visual-reference-details .candidate-img img{
|
||
width:64px;
|
||
height:64px;
|
||
}
|
||
.visual-reference-details .candidate-name{
|
||
font-size:14px;
|
||
}
|
||
|
||
/* 宽屏：当前对象适度收窄，Layer 建议获得主要中间空间 */
|
||
@media(min-width:1001px){
|
||
.comparison{
|
||
grid-template-columns:minmax(280px,.78fr) minmax(360px,1.22fr);
|
||
}
|
||
.cm-card .image-stage.large{
|
||
min-height:180px;
|
||
}
|
||
}
|
||
@media(min-width:1600px){
|
||
.comparison{
|
||
grid-template-columns:minmax(290px,.72fr) minmax(390px,1.28fr);
|
||
}
|
||
}
|