style: 风格处理

shuishen

2025-04-02 e14358f85a7d32a753225f253ff223d17cf36c25

 src/views/Home/Footer.vue

@@ -14,24 +14,24 @@
</template>

<script setup>
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';
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'

import { useUavHome } from '@/views/Home/useUavHome/useUavHome';
import { useEventOperate } from '@/views/Home/useEventOperate/useEventOperate';
import { useUavHome } from '@/views/Home/useUavHome/useUavHome'
import { useEventOperate } from '@/views/Home/useEventOperate/useEventOperate'

// 机巢聚合
const { init, removeAll } = useUavHome();
const { init, removeAll } = useUavHome()
// 事件聚合
const { init: eventInit, removeAll: eventRemove } = useEventOperate();
const { init: eventInit, removeAll: eventRemove } = useEventOperate()

const list = ref([
  {
@@ -55,28 +55,28 @@
  { 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 imgClick = toItem => {
  const fromItem = list.value.find(item => item.active);
  if (fromItem.name === toItem.name) return;
  fromItem?.removeAll?.();
   const fromItem = list.value.find(item => item.active)
   if (fromItem.name === toItem.name) return
   fromItem?.removeAll?.()
  nextTick(()=>{
    toItem?.init?.();
      toItem?.init?.()
  })
  list.value = list.value.map(item => ({ ...item, active: item.name === toItem.name }));
};
   list.value = list.value.map(item => ({ ...item, active: item.name === toItem.name }))
}

// 销毁前钩子
onBeforeUnmount(() => {
  if (!window.$viewer) return;
  removeAll();
});
   if (!window.$viewer) return
   removeAll()
})
onMounted(() => {
  nextTick(() => {
    init();
  });
});
      init()
   })
})
</script>

<style scoped lang="scss">