- MapCanvas: 层聚焦与回全景联动；右栏停用改自绘可拖详情浮层；目标树默认收起+localStorage 持久化；底部跨层关系摘要条；聚焦态只绘聚焦层同层连线 - StrategyLayer: 层标题可点击聚焦并标「聚焦中」；非聚焦层压缩为 ≤48px 单行摘要（层名—达成率/目标数/mini 色条） - MapSummaryBar: 汇总条压缩 ≤44px、5 项同排；窄屏无横向溢出 - MapEditBar: 新增「全景 / L1–L4」聚焦切换 chip（内联 SVG，无 emoji） - 只读渲染层改动：不写 canvas_data / map_connections，无新增写链路调用
This commit is contained in:
wecom-fullstack
@@ -1,89 +1,150 @@
|
||||
<template>
|
||||
<section class="map-summary" aria-label="战略地图摘要">
|
||||
<!-- ① 营业收入：分业务线全额售价（总额法）· 禁净额 / 禁合并 -->
|
||||
<div class="sum-card sum-card--wide">
|
||||
<div class="sum-head">
|
||||
<span class="sum-label">营业收入</span>
|
||||
<span v-if="revenue && revenue.caliber_label" class="sum-badge calm">{{ revenue.caliber_label }}</span>
|
||||
<!-- C 方案（2026-10-23）：汇总条压成单行（≤44px），5 项指标同排；明细收进「明细」展开位 -->
|
||||
<div class="ms-row">
|
||||
<!-- ① 营业收入：分业务线全额售价（总额法）· 禁净额 / 禁合并 -->
|
||||
<div class="ms-metric ms-metric--rev">
|
||||
<span class="ms-label">营业收入</span>
|
||||
<span class="ms-value mono" :class="{ muted: revenueTotal == null }">
|
||||
<template v-if="revenueTotal != null">{{ fmtNum(revenueTotal) }}<i class="ms-unit">万元</i></template>
|
||||
<template v-else>—<i class="ms-unit">无数据</i></template>
|
||||
</span>
|
||||
<span v-if="revenue && revenue.caliber_label" class="ms-badge calm">{{ revenue.caliber_label }}</span>
|
||||
</div>
|
||||
<div v-if="revenueLines.length" class="rev-lines">
|
||||
<div v-for="ln in revenueLines" :key="ln.key" class="rev-line">
|
||||
<span class="rev-line-label">{{ ln.label }}</span>
|
||||
<span class="rev-line-value mono" :class="{ muted: ln.amount == null }">
|
||||
<template v-if="ln.amount != null">{{ fmtNum(ln.amount) }}<i class="sum-unit">万元</i></template>
|
||||
<template v-else>—<i class="sum-unit">无数据</i></template>
|
||||
</span>
|
||||
|
||||
<span class="ms-sep" aria-hidden="true"></span>
|
||||
|
||||
<!-- ② 毛利率 -->
|
||||
<div class="ms-metric">
|
||||
<span class="ms-label">毛利率</span>
|
||||
<span class="ms-value mono" :class="{ muted: gmValue == null }">
|
||||
<template v-if="gmValue != null">{{ gmValue.toFixed(2) }}<i class="ms-unit">%</i></template>
|
||||
<template v-else>—<i class="ms-unit">无数据</i></template>
|
||||
</span>
|
||||
<span v-if="grossMargin && grossMargin.data_tag" class="ms-badge warn">{{ grossMargin.data_tag }}</span>
|
||||
</div>
|
||||
|
||||
<span class="ms-sep" aria-hidden="true"></span>
|
||||
|
||||
<!-- ③ 战略目标达成率 -->
|
||||
<div class="ms-metric">
|
||||
<span class="ms-label">战略目标达成率</span>
|
||||
<span class="ms-value mono" :class="achievement == null ? 'muted' : 'lv-' + achievementLevel">
|
||||
<template v-if="achievement != null">{{ Math.round(achievement) }}<i class="ms-unit">%</i></template>
|
||||
<template v-else>—<i class="ms-unit">无数据</i></template>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="ms-sep" aria-hidden="true"></span>
|
||||
|
||||
<!-- ④ 风险目标数 -->
|
||||
<div class="ms-metric">
|
||||
<span class="ms-label">风险目标</span>
|
||||
<span class="ms-value mono" :class="riskCount == null ? 'muted' : (riskCount > 0 ? 'lv-red' : 'lv-green')">
|
||||
<template v-if="riskCount != null">{{ riskCount }}</template>
|
||||
<template v-else>—<i class="ms-unit">无数据</i></template>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="ms-sep" aria-hidden="true"></span>
|
||||
|
||||
<!-- ⑤ 目标·连线（当前画布规模） -->
|
||||
<div class="ms-metric ms-metric--scale">
|
||||
<span class="ms-label">目标·连线</span>
|
||||
<span class="ms-value mono">
|
||||
<template v-if="objectivesTotal != null">{{ objectivesTotal }}</template>
|
||||
<template v-else>—</template>
|
||||
<i class="ms-unit">个目标</i>
|
||||
<span class="ms-div">/</span>
|
||||
<template v-if="connectionsTotal != null">{{ connectionsTotal }}</template>
|
||||
<template v-else>—</template>
|
||||
<i class="ms-unit">条连线</i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="ms-detail-btn"
|
||||
:aria-expanded="detailOpen ? 'true' : 'false'"
|
||||
@click="detailOpen = !detailOpen"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path :d="detailOpen ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6'" />
|
||||
</svg>
|
||||
{{ detailOpen ? '收起' : '明细' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 明细（默认收起；展开后保留分线金额 / 口径 / 管理指标全部信息，不丢信息） -->
|
||||
<div v-if="detailOpen" class="ms-detail">
|
||||
<div class="ms-card">
|
||||
<div class="ms-detail-head">
|
||||
<span class="ms-label">营业收入 · 分业务线</span>
|
||||
<span v-if="revenue && revenue.caliber_label" class="ms-badge calm">{{ revenue.caliber_label }}</span>
|
||||
</div>
|
||||
<div class="rev-line rev-line--total">
|
||||
<span class="rev-line-label">{{ revenueTotalLabel }}</span>
|
||||
<span class="rev-line-value mono">
|
||||
<template v-if="revenueTotal != null">{{ fmtNum(revenueTotal) }}<i class="sum-unit">万元</i></template>
|
||||
<template v-else>—<i class="sum-unit">无数据</i></template>
|
||||
</span>
|
||||
<div v-if="revenueLines.length" class="rev-lines">
|
||||
<div v-for="ln in revenueLines" :key="ln.key" class="rev-line">
|
||||
<span class="rev-line-label">{{ ln.label }}</span>
|
||||
<span class="rev-line-value mono" :class="{ muted: ln.amount == null }">
|
||||
<template v-if="ln.amount != null">{{ fmtNum(ln.amount) }}<i class="ms-unit">万元</i></template>
|
||||
<template v-else>—<i class="ms-unit">无数据</i></template>
|
||||
</span>
|
||||
</div>
|
||||
<div class="rev-line rev-line--total">
|
||||
<span class="rev-line-label">{{ revenueTotalLabel }}</span>
|
||||
<span class="rev-line-value mono">
|
||||
<template v-if="revenueTotal != null">{{ fmtNum(revenueTotal) }}<i class="ms-unit">万元</i></template>
|
||||
<template v-else>—<i class="ms-unit">无数据</i></template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="ms-value muted">—<i class="ms-unit">无数据</i></div>
|
||||
<div class="ms-sub">{{ revenuePeriod }}</div>
|
||||
</div>
|
||||
|
||||
<div class="ms-card">
|
||||
<div class="ms-detail-head"><span class="ms-label">毛利率口径</span></div>
|
||||
<div class="ms-value mono" :class="{ muted: gmValue == null }">
|
||||
<template v-if="gmValue != null">{{ gmValue.toFixed(2) }}<i class="ms-unit">%</i></template>
|
||||
<template v-else>—<i class="ms-unit">无数据</i></template>
|
||||
</div>
|
||||
<div class="ms-sub">{{ gmSub }}</div>
|
||||
</div>
|
||||
|
||||
<div class="ms-card">
|
||||
<div class="ms-detail-head"><span class="ms-label">达成率 / 风险分布</span></div>
|
||||
<div class="ms-sub">
|
||||
<template v-if="achievement != null">{{ achievementCount }} 个目标有实测值 · 其余无数据</template>
|
||||
<template v-else>所有目标均无可用 KPI 实测值</template>
|
||||
</div>
|
||||
<div class="ms-sub">
|
||||
<template v-if="summary">达标 {{ summary.green }} · 关注 {{ summary.yellow }} · 风险 {{ summary.red }} · 共 {{ summary.total }} 个目标</template>
|
||||
<template v-else>战略回顾数据未加载</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="sum-value muted">—<i class="sum-unit">无数据</i></div>
|
||||
<div class="sum-sub">{{ revenuePeriod }}</div>
|
||||
</div>
|
||||
|
||||
<!-- ② 毛利率：新式口径（折扣后净进价），历史缺票期带标识 -->
|
||||
<div class="sum-card">
|
||||
<div class="sum-head">
|
||||
<span class="sum-label">毛利率</span>
|
||||
<span v-if="grossMargin && grossMargin.data_tag" class="sum-badge warn">{{ grossMargin.data_tag }}</span>
|
||||
<div class="ms-card">
|
||||
<div class="ms-detail-head"><span class="ms-label">口径变更 / 管理指标</span></div>
|
||||
<div class="ms-foot">
|
||||
<span v-if="switchInfo && switchInfo.has_switch" class="ms-badge warn" :title="switchInfo.note || ''">
|
||||
{{ switchInfo.label }}<template v-if="switchInfo.effective_date"> · 自 {{ switchInfo.effective_date }}</template>
|
||||
<em v-if="switchInfo.comparability"> · {{ switchInfo.comparability }}</em>
|
||||
</span>
|
||||
<span v-for="m in management" :key="m.key" class="mgmt" :title="m.caliber_note || ''">
|
||||
<span class="mgmt-label">{{ m.label }}</span>
|
||||
<span class="mgmt-value mono">{{ m.value == null ? '—' : m.value.toFixed(2) + '%' }}</span>
|
||||
<span class="mgmt-tag">{{ m.tag }}</span>
|
||||
<span v-if="m.abnormal" class="mgmt-abnormal">异常·须核查</span>
|
||||
</span>
|
||||
<span v-if="!(switchInfo && switchInfo.has_switch) && management.length === 0" class="ms-sub">无口径变更与管理指标</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sum-value mono" :class="{ muted: gmValue == null }">
|
||||
<template v-if="gmValue != null">{{ gmValue.toFixed(2) }}<i class="sum-unit">%</i></template>
|
||||
<template v-else>—<i class="sum-unit">无数据</i></template>
|
||||
</div>
|
||||
<div class="sum-sub">{{ gmSub }}</div>
|
||||
</div>
|
||||
|
||||
<!-- ③ 战略目标达成率 -->
|
||||
<div class="sum-card">
|
||||
<div class="sum-head"><span class="sum-label">战略目标达成率</span></div>
|
||||
<div class="sum-value mono" :class="achievement == null ? 'muted' : 'lv-' + achievementLevel">
|
||||
<template v-if="achievement != null">{{ Math.round(achievement) }}<i class="sum-unit">%</i></template>
|
||||
<template v-else>—<i class="sum-unit">无数据</i></template>
|
||||
</div>
|
||||
<div class="sum-sub">
|
||||
<template v-if="achievement != null">{{ achievementCount }} 个目标有实测值 · 其余无数据</template>
|
||||
<template v-else>所有目标均无可用 KPI 实测值</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ④ 风险目标数 -->
|
||||
<div class="sum-card">
|
||||
<div class="sum-head"><span class="sum-label">风险目标</span></div>
|
||||
<div class="sum-value mono" :class="riskCount == null ? 'muted' : (riskCount > 0 ? 'lv-red' : 'lv-green')">
|
||||
<template v-if="riskCount != null">{{ riskCount }}</template>
|
||||
<template v-else>—<i class="sum-unit">无数据</i></template>
|
||||
</div>
|
||||
<div class="sum-sub">
|
||||
<template v-if="summary">达标 {{ summary.green }} · 关注 {{ summary.yellow }} · 共 {{ summary.total }} 个目标</template>
|
||||
<template v-else>战略回顾数据未加载</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ⑤ 口径变更标识位 + 管理指标（非会计科目，单列、不占主位） -->
|
||||
<div class="sum-foot">
|
||||
<span v-if="switchInfo && switchInfo.has_switch" class="sum-badge warn" :title="switchInfo.note || ''">
|
||||
{{ switchInfo.label }}<template v-if="switchInfo.effective_date"> · 自 {{ switchInfo.effective_date }}</template>
|
||||
<em v-if="switchInfo.comparability"> · {{ switchInfo.comparability }}</em>
|
||||
</span>
|
||||
<span v-for="m in management" :key="m.key" class="mgmt" :title="m.caliber_note || ''">
|
||||
<span class="mgmt-label">{{ m.label }}</span>
|
||||
<span class="mgmt-value mono">{{ m.value == null ? '—' : m.value.toFixed(2) + '%' }}</span>
|
||||
<span class="mgmt-tag">{{ m.tag }}</span>
|
||||
<span v-if="m.abnormal" class="mgmt-abnormal">异常·须核查</span>
|
||||
<span class="mgmt-caliber">{{ fmtNum(m.numerator) }} ÷ {{ fmtNum(m.denominator) }}<template v-if="m.period"> · {{ m.period }}</template></span>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
type RevLine = { key: string; label: string; amount: number | null; unit?: string; missing_reason?: string | null }
|
||||
|
||||
@@ -122,8 +183,14 @@ const props = defineProps<{
|
||||
summary: { total: number; green: number; yellow: number; red: number; health_score?: number } | null
|
||||
switchInfo?: { has_switch?: boolean; label?: string; effective_date?: string | null; comparability?: string; note?: string } | null
|
||||
loading?: boolean
|
||||
/** ⑤ 目标·连线：当前地图目标数（null ⇒ 显式「—」） */
|
||||
objectivesTotal?: number | null
|
||||
/** ⑤ 目标·连线：当前地图连线数（null ⇒ 显式「—」） */
|
||||
connectionsTotal?: number | null
|
||||
}>()
|
||||
|
||||
const detailOpen = ref(false)
|
||||
|
||||
const revenueLines = computed<RevLine[]>(() => (props.revenue?.lines || []).filter(l => !!l && !!l.key))
|
||||
/** 合计 = 各线相加的复算校验位，不与分线并列成第二套口径 */
|
||||
const revenueTotal = computed<number | null>(() => {
|
||||
@@ -163,92 +230,125 @@ function fmtNum(v: number | null | undefined): string {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* C 方案：单行汇总条（行高 40px + 上下 1px 边框 ≤44px） */
|
||||
.map-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sum-card {
|
||||
margin-bottom: 8px;
|
||||
background: var(--bh-bg-card, #fff);
|
||||
border: 1px solid var(--bh-border, #E5E7EB);
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.ms-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 40px;
|
||||
min-width: 0;
|
||||
}
|
||||
.sum-card--wide { grid-column: span 2; }
|
||||
.sum-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||
.sum-label {
|
||||
.ms-metric {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ms-metric--rev { flex: 0 1 auto; overflow: hidden; }
|
||||
.ms-label {
|
||||
font-size: 12px;
|
||||
color: var(--bh-text-secondary, #64748B);
|
||||
letter-spacing: .02em;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sum-badge {
|
||||
.ms-value {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
color: var(--bh-text-primary, #0F172A);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ms-value.muted { font-size: 13px; color: var(--bh-text-muted, #94A3B8); font-weight: 500; }
|
||||
.ms-unit {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
color: var(--bh-text-secondary, #64748B);
|
||||
margin-left: 2px;
|
||||
}
|
||||
.ms-div { color: var(--bh-text-muted, #94A3B8); margin: 0 2px; }
|
||||
.ms-sep { width: 1px; height: 18px; background: var(--bh-border, #E5E7EB); flex-shrink: 0; }
|
||||
.ms-badge {
|
||||
font-size: 10px;
|
||||
line-height: 1.5;
|
||||
padding: 1px 6px;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sum-badge.calm { color: #635BFF; background: rgba(99, 91, 255, .08); }
|
||||
.sum-badge.warn { color: #B45309; background: #FEF3C7; }
|
||||
.sum-badge.warn em { font-style: normal; }
|
||||
.sum-value {
|
||||
margin-top: 4px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--bh-text-primary, #0F172A);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 3px;
|
||||
}
|
||||
.sum-value.muted { font-size: 15px; color: var(--bh-text-muted, #94A3B8); font-weight: 500; }
|
||||
.sum-unit { font-size: 11px; font-weight: 500; font-style: normal; color: var(--bh-text-secondary, #64748B); margin-left: 2px; }
|
||||
.sum-sub {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--bh-text-muted, #94A3B8);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.rev-lines { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
|
||||
.rev-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
|
||||
.rev-line-label { font-size: 12px; color: var(--bh-text-secondary, #64748B); }
|
||||
.rev-line-value { font-size: 18px; font-weight: 700; color: var(--bh-text-primary, #0F172A); }
|
||||
.rev-line-value.muted { font-size: 14px; font-weight: 500; color: var(--bh-text-muted, #94A3B8); }
|
||||
.rev-line--total { border-top: 1px dashed var(--bh-border, #E5E7EB); padding-top: 3px; margin-top: 2px; }
|
||||
.rev-line--total .rev-line-label,
|
||||
.rev-line--total .rev-line-value { font-size: 12px; font-weight: 500; color: var(--bh-text-secondary, #64748B); }
|
||||
.sum-foot {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.ms-badge.calm { color: #0369A1; background: #F0F9FF; border-color: #BAE6FD; }
|
||||
.ms-badge.warn { color: #B45309; background: #FFFBEB; border-color: #FDE68A; }
|
||||
.ms-badge.warn em { font-style: normal; }
|
||||
.ms-detail-btn {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px 16px;
|
||||
padding: 6px 12px;
|
||||
border: 1px dashed var(--bh-border, #E5E7EB);
|
||||
border-radius: 6px;
|
||||
gap: 3px;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
font-size: 11px;
|
||||
color: var(--bh-text-muted, #94A3B8);
|
||||
color: var(--bh-text-secondary, #64748B);
|
||||
background: transparent;
|
||||
border: 1px solid var(--bh-border, #E5E7EB);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mgmt { display: inline-flex; align-items: baseline; gap: 6px; }
|
||||
.ms-detail-btn:hover { color: #0F172A; border-color: #CBD5E1; }
|
||||
.ms-detail-btn svg { width: 12px; height: 12px; }
|
||||
|
||||
/* 明细展开区 */
|
||||
.ms-detail {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 10px;
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
.ms-card {
|
||||
border: 1px solid var(--bh-border, #E5E7EB);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
min-width: 0;
|
||||
background: var(--bh-bg-subtle, #FCFCFD);
|
||||
}
|
||||
.ms-detail-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.rev-lines { display: flex; flex-direction: column; gap: 2px; }
|
||||
.rev-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
|
||||
.rev-line-label { font-size: 11px; color: var(--bh-text-secondary, #64748B); }
|
||||
.rev-line-value { font-size: 12px; color: var(--bh-text-primary, #0F172A); }
|
||||
.rev-line-value.muted { color: var(--bh-text-muted, #94A3B8); }
|
||||
.rev-line--total { border-top: 1px dashed var(--bh-border, #E5E7EB); margin-top: 2px; padding-top: 2px; }
|
||||
.ms-sub { margin-top: 4px; font-size: 11px; color: var(--bh-text-muted, #94A3B8); line-height: 1.5; }
|
||||
.ms-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
|
||||
.mgmt { display: inline-flex; align-items: baseline; gap: 4px; font-size: 11px; }
|
||||
.mgmt-label { color: var(--bh-text-secondary, #64748B); }
|
||||
.mgmt-value { font-size: 13px; font-weight: 700; color: var(--bh-text-primary, #0F172A); }
|
||||
.mgmt-tag { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: #F1F5F9; color: #475569; }
|
||||
.mgmt-abnormal { color: #B91C1C; }
|
||||
.mgmt-caliber { color: var(--bh-text-muted, #94A3B8); }
|
||||
.mgmt-value { color: var(--bh-text-primary, #0F172A); font-weight: 600; }
|
||||
.mgmt-tag { font-size: 10px; padding: 0 4px; border-radius: 4px; background: #F1F5F9; color: #475569; }
|
||||
.mgmt-abnormal { font-size: 10px; color: #B91C1C; }
|
||||
.mono { font-family: 'IBM Plex Mono', Consolas, 'SFMono-Regular', monospace; font-variant-numeric: tabular-nums; }
|
||||
.lv-green { color: #00C896; }
|
||||
.lv-yellow { color: #F59E0B; }
|
||||
.lv-red { color: #EF4444; }
|
||||
@media (max-width: 1200px) {
|
||||
.map-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.sum-card--wide { grid-column: span 2; }
|
||||
|
||||
/* 窄屏：单行改为可横向滚动，保留全部 5 项、不换行不截断 */
|
||||
@media (max-width: 1280px) {
|
||||
.ms-row { overflow-x: auto; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user