86 lines
1.8 KiB
Vue
86 lines
1.8 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;
|
|||
|
|
|
|||
|
|
// 中间分割线左侧（灾前现场实景）
|
|||
|
|
&--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(5) 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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|