refactor(ui): 更新场景标签组件样式和布局
- 在模板中注释掉图标图片 - 为场景标签容器添加背景图片 - 调整内容内边距、背景、边框和文字外边距 - 增强态势感知场景的视觉呈现效果
This commit is contained in:
parent
9e7c8f7e4e
commit
dd9c35d4fc
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user