5 changed files with 1846 additions and 475 deletions
@ -0,0 +1,122 @@ |
|||
<template> |
|||
<div class="map-screen-dom-labels-layer"> |
|||
<div |
|||
v-for="item in items" |
|||
v-show="item.visible" |
|||
:key="item.id" |
|||
class="map-screen-dom-label" |
|||
:class="item.themeClass" |
|||
:style="item.wrapperStyle" |
|||
> |
|||
<template v-if="item.kind === 'platform'"> |
|||
<div |
|||
class="map-screen-dom-label__platform-name" |
|||
:style="{ fontSize: item.titleSizePx + 'px' }" |
|||
> |
|||
{{ item.name }} |
|||
</div> |
|||
<div |
|||
class="map-screen-dom-label__platform-stats" |
|||
:style="{ fontSize: item.statSizePx + 'px' }" |
|||
> |
|||
h: {{ item.altitude }}m v: {{ item.speed }}km/h s: {{ item.heading }}° |
|||
</div> |
|||
</template> |
|||
<template v-else-if="item.kind === 'waypoint' || item.kind === 'mapText'"> |
|||
<span class="map-screen-dom-label__transparent-text" :style="item.transparentTextStyle">{{ item.text }}</span> |
|||
</template> |
|||
<template v-else> |
|||
<span |
|||
class="map-screen-dom-label__plain" |
|||
:style="{ whiteSpace: item.multiline ? 'pre-line' : 'nowrap' }" |
|||
>{{ item.text }}</span> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'MapScreenDomLabels', |
|||
props: { |
|||
items: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.map-screen-dom-labels-layer { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
pointer-events: none; |
|||
z-index: 9998; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.map-screen-dom-label { |
|||
position: absolute; |
|||
pointer-events: none; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
/* 与 HoverTooltip 一致的深色提示条 */ |
|||
.map-screen-dom-label--tooltip { |
|||
background: rgba(0, 0, 0, 0.8); |
|||
color: #fff; |
|||
padding: 8px 12px; |
|||
border-radius: 4px; |
|||
font-size: 14px; |
|||
line-height: 1.35; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); |
|||
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; |
|||
} |
|||
|
|||
/* 飞机平台标牌：白底黑字、机名蓝色，尺寸紧凑 */ |
|||
.map-screen-dom-label--platform-card { |
|||
background: rgba(255, 255, 255, 0.96); |
|||
color: #1a1a1a; |
|||
padding: 4px 8px; |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(0, 0, 0, 0.08); |
|||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); |
|||
line-height: 1.25; |
|||
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; |
|||
} |
|||
|
|||
.map-screen-dom-label--platform { |
|||
min-width: 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.map-screen-dom-label__platform-name { |
|||
font-weight: 600; |
|||
line-height: 1.2; |
|||
margin-bottom: 2px; |
|||
color: #0078ff; |
|||
} |
|||
|
|||
.map-screen-dom-label__platform-stats { |
|||
font-weight: 400; |
|||
color: #1a1a1a; |
|||
} |
|||
|
|||
/* 航点 / 插入文字 / 空域威力区命名：透明底，描边式字 */ |
|||
.map-screen-dom-label--maptext { |
|||
background: transparent; |
|||
padding: 0 2px; |
|||
border-radius: 0; |
|||
box-shadow: none; |
|||
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.map-screen-dom-label__transparent-text { |
|||
display: inline-block; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue