refactor(ui): 更新场景标签组件样式和布局

- 在模板中注释掉图标图片
- 为场景标签容器添加背景图片
- 调整内容内边距、背景、边框和文字外边距
- 增强态势感知场景的视觉呈现效果
This commit is contained in:
Zzc 2025-11-20 12:51:50 +08:00
parent 9e7c8f7e4e
commit dd9c35d4fc

View File

@ -1,7 +1,7 @@
<template>
<div class="scene-label" :class="labelClass">
<div class="scene-label__content">
<img :src="iconSrc" alt="scene" class="scene-label__icon" />
<!-- <img :src="iconSrc" alt="scene" class="scene-label__icon" /> -->
<span class="scene-label__text">{{ text }}</span>
</div>
</div>
@ -46,6 +46,8 @@ const iconSrc = sceneIcon
top: calc(var(--sa-header-height));
z-index: 10;
pointer-events: none;
background: url('../assets/images/灾害现场实景.png') no-repeat center center;
background-size: 100% 100%;
// 线
&--center-left {
@ -63,10 +65,10 @@ const iconSrc = sceneIcon
display: flex;
align-items: center;
gap: vw(6);
padding: vw(5) vw(10);
background: rgba(20, 53, 118, 1);
border: 1px solid var(--border-color);
border-radius: vw(8);
padding: vw(8) vw(10);
// background: rgba(20, 53, 118, 1);
// border: 1px solid var(--border-color);
// border-radius: vw(8);
}
&__icon {
@ -80,6 +82,7 @@ const iconSrc = sceneIcon
font-family: SourceHanSansCN-Medium, sans-serif;
font-weight: 500;
white-space: nowrap;
margin-left: 16px;
}
}
</style>