89 lines
2.0 KiB
Vue
89 lines
2.0 KiB
Vue
<template>
|
|
<div class="scene-label" :class="labelClass">
|
|
<div class="scene-label__content">
|
|
<!-- <img :src="iconSrc" alt="scene" class="scene-label__icon" /> -->
|
|
<span class="scene-label__text">{{ text }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import sceneIcon from '../assets/images/SketchPng08621fb3b35614299e29352b8d67ad9c2c7dccf7b9c17d042492671e3bbe19f8.png'
|
|
|
|
const props = defineProps({
|
|
/**
|
|
* 标签文本
|
|
*/
|
|
text: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
/**
|
|
* 标签位置：
|
|
* - 'center-left': 对比模式中间分割线的左侧
|
|
* - 'right-left': 右侧面板的左边
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: 'right-left',
|
|
validator: (value) => ['center-left', 'right-left'].includes(value)
|
|
}
|
|
})
|
|
|
|
const labelClass = computed(() => {
|
|
return `scene-label--${props.position}`
|
|
})
|
|
|
|
const iconSrc = sceneIcon
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/mixins.scss' as *;
|
|
|
|
.scene-label {
|
|
position: absolute;
|
|
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 {
|
|
left: 50%;
|
|
transform: translateX(calc(-100% - vw(10)));
|
|
}
|
|
|
|
// 右侧面板左边（灾后现场实景）
|
|
&--right-left {
|
|
left: calc(100% - var(--sa-right-width));
|
|
transform: translateX(calc(-100% - vw(10)));
|
|
}
|
|
|
|
&__content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: vw(6);
|
|
padding: vw(8) vw(10);
|
|
// background: rgba(20, 53, 118, 1);
|
|
// border: 1px solid var(--border-color);
|
|
// border-radius: vw(8);
|
|
}
|
|
|
|
&__icon {
|
|
width: vw(32);
|
|
height: vw(32);
|
|
}
|
|
|
|
&__text {
|
|
color: var(--text-white);
|
|
font-size: fs(15);
|
|
font-family: SourceHanSansCN-Medium, sans-serif;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
</style>
|