From f02122892ee506d6955eba4aac8ddee53a5194fc Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sun, 30 Mar 2025 11:21:02 +0800
Subject: [PATCH] feat: 整体交互调整
---
src/layout/Footer.vue | 58 +++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 47 insertions(+), 11 deletions(-)
diff --git a/src/layout/Footer.vue b/src/layout/Footer.vue
index f7c8504..53b90f6 100644
--- a/src/layout/Footer.vue
+++ b/src/layout/Footer.vue
@@ -1,18 +1,53 @@
<template>
- <div class="footer">
- <img class="machine-nest" src="@/assets/images/machine-nest.png" alt="">
- <img class="event" src="@/assets/images/event.png" alt="">
- <img class="panorama" src="@/assets/images/panorama.png" alt="">
- <img class="threeD" src="@/assets/images/3D.png" alt="">
- <img class="orthophoto" src="@/assets/images/orthophoto.png" alt="">
- </div>
- <div class="intelligent-introduction-flying">
- <img class="orthophoto" src="@/assets/images/intelligent-introduction-flying.png" alt="">
- </div>
+ <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
+ list.value = list.value.map(item => ({...item,active: item.name === row.name}));
+ row.name === 'event1' ? init() :removeAll()
+}
+
+// 销毁前钩子
+onBeforeUnmount(() => {
+ if (!window.$viewer) return
+ removeAll();
+});
+onMounted(() => {
+ nextTick(() => {
+ init()
+ });
+});
</script>
<style scoped lang="scss">
@@ -23,6 +58,7 @@
img {
width: 103px;
height: 119px;
+ cursor: pointer;
}
.event {
position: relative;
@@ -53,4 +89,4 @@
height: 54px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3