<template>
|
<div class="footer">
|
<img v-for="item in list" :class="item.className" :src="item.active ? item.activeImg : item.img" alt="" @click="imgClick(item)">
|
</div>
|
<div class="intelligent-introduction-flying">
|
<img class="orthophoto" src="@/assets/images/intelligent-introduction-flying.png" alt="">
|
</div>
|
</template>
|
|
<script setup>
|
import { useAggregation } from '@/views/Home/useAggregation';
|
|
import img1 from '@/assets/images/home/footer/machine-nest.png'
|
import activeImg1 from '@/assets/images/home/footer/machine-nest1.png'
|
import img2 from '@/assets/images/home/footer/event.png'
|
import activeImg2 from '@/assets/images/home/footer/event1.png'
|
import img3 from '@/assets/images/home/footer/panorama.png'
|
import activeImg3 from '@/assets/images/home/footer/panorama1.png'
|
import img4 from '@/assets/images/home/footer/3D.png'
|
import activeImg4 from '@/assets/images/home/footer/3D1.png'
|
import img5 from '@/assets/images/home/footer/orthophoto.png'
|
import activeImg5 from '@/assets/images/home/footer/orthophoto1.png'
|
|
const list = ref([
|
{name:'event1',img:img1,activeImg:activeImg1,active:true,className:'machine-nest'},
|
{name:'event2',img:img2,activeImg:activeImg2,active:false,className:'event'},
|
{name:'event3',img:img3,activeImg:activeImg3,active:false,className:'panorama'},
|
{name:'event4',img:img4,activeImg:activeImg4,active:false,className:'threeD'},
|
{name:'event5',img:img5,activeImg:activeImg5,active:false,className:'orthophoto'},
|
])
|
|
// 机巢聚合
|
const {init,removeAll} = useAggregation()
|
|
const imgClick = (row) => {
|
const find = list.value.find(item => item.active)
|
if (find.name === row.name) return
|
const isFromEvent1 = find.name === 'event1';
|
const isToEvent1 = row.name === 'event1';
|
if (isFromEvent1 && !isToEvent1) removeAll();
|
else if (!isFromEvent1 && isToEvent1) init();
|
list.value = list.value.map(item => ({...item,active: item.name === row.name}));
|
}
|
|
// 销毁前钩子
|
onBeforeUnmount(() => {
|
if (!window.$viewer) return
|
removeAll();
|
});
|
onMounted(() => {
|
nextTick(() => {
|
init()
|
});
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.footer {
|
position: absolute;
|
bottom: 84px;
|
left: 624px;
|
img {
|
width: 103px;
|
height: 119px;
|
cursor: pointer;
|
}
|
.event {
|
position: relative;
|
left: 40px;
|
bottom: 15px;
|
}
|
.panorama {
|
position: relative;
|
left: 80px;
|
bottom: 34px;
|
}
|
.threeD {
|
position: relative;
|
left: 120px;
|
bottom: 15px;
|
}
|
.orthophoto {
|
position: relative;
|
left: 160px;
|
}
|
}
|
.intelligent-introduction-flying {
|
position: absolute;
|
left: 888px;
|
bottom: 23px;
|
img {
|
width: 146px;
|
height: 54px;
|
}
|
}
|
</style>
|
