fix🐛: 添加高级联动、修复标签

src/layout/LayoutMain.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="layout-main flex-1 h-0 relative color-#f0f0f0">
+    <!-- <div class="layout-main-left absolute left-15px top-70px"> -->
     <div class="layout-main-left absolute left-15px top-70px">
       <slot name="left"></slot>
     </div>
     <div class="layout-main-right absolute right-15px top-70px">
       <slot name="right"></slot>
     </div>
-    <div class="layout-main-bottom w-50% absolute left-50% translate-x-[-50%] top-70px">
-      <slot name="top"></slot>
-    </div>
     <div class="layout-main-bottom w-50% absolute left-50% translate-x-[-50%] bottom--1066px">
       <slot name="bottom"></slot>
     </div>
+    <div class="layout-main-bottom w-50% absolute left-50% translate-x-[-50%] top-70px">
+      <slot name="top"></slot>
+    </div>
   </div>
 </template>
 

src/layout/Three3D/index.vue

@@ -1,10 +1,21 @@
 <template>
-  <canvas id="canvasDom"></canvas>
+  <div class="w-full h-full">
+    <canvas id="canvasDom"></canvas>
+    <NProgress
+      class="absolute top-1/2 left-1/2 transform-translate--50%"
+      v-if="percentageFlag"
+      type="circle"
+      processing
+      :percentage="percentage"
+      :fill-border-radius="0"
+    />
+  </div>
 </template>
 
 <script setup>
   import * as THREE from 'three'
 
+  import { NProgress } from 'naive-ui'
   import { gsap } from 'gsap'
   // 导入控制器  https://threejs.org/docs/index.html#examples/zh/controls/OrbitControls
   import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
@@ -18,6 +29,9 @@
   const { API_MR_CAMERA_GET, API_MR_VIDEO_LIST_GET } = useRequest()
   const useHomeStore = useOutsideHomeStore()
 
+  const percentage = ref(0)
+  const percentageFlag = ref(true)
+
   const timelineCamera = gsap.timeline()
   const timelineControls = gsap.timeline()
   // 实现视角平滑移动方法
@@ -117,13 +131,14 @@
     controls.dampingFactor = 0.05
 
     // 加载模型
+    percentageFlag.value = true
     // 注意：加载的3d模型 没有灯光是纯黑色 有光才会反射出颜色
     loader = new GLTFLoader()
     loader.load(
       '3d/tiny_city_1k.glb',
       function (gltf) {
         scene.add(gltf.scene)
-        console.log(gltf)
+        percentageFlag.value = false
         gltf.scene.scale.x = 0
         gltf.scene.scale.y = 0
         gltf.scene.scale.z = 0
@@ -153,6 +168,7 @@
         })
       },
       function (xhr) {
+        percentage.value = Math.floor((xhr.loaded / xhr.total) * 100)
         console.log('加载完成的百分比' + (xhr.loaded / xhr.total) * 100 + '%')
       },
       function (error) {

src/views/VideoBox/components/TagBox.vue

@@ -1,26 +1,36 @@
 <template>
-  <div class="tag-box absolute color-white" :style="{ top: `${top}px`, left: `${left}px` }">
+  <div
+    :class="['tag-box' + index, 'absolute color-white']"
+    :style="{ top: `${top}px`, left: `${left}px` }"
+  >
     <div
-      :class="[
-        'tag-count' + index,
-        'tag-box-wrapper p-1 w-144px absolute left-18px top--50px text-12px cursor-pointer'
-      ]"
+      class="'tag-count tag-box-wrapper p-1 w-144px absolute left-18px top--50px text-12px cursor-pointer"
       @click="toggle"
-      ><div :class="['tag-label' + index, 'text-center']">{{ label }}</div></div
-    >
-    <div
-      ref="floating"
-      :class="[
-        isShow ? 'transform-scale-100' : 'transform-scale-0',
-        'overflow-hidden origin-top-left transition pointer-events-none duration-300 z-999 h-200px w-300px bg-[rgba(11,21,44,1)] absolute left-165px top--50px b-solid b-1 b-#2BABF2'
-      ]"
-      >Tooltip</div
+      ><div class="tag-label text-center">{{ label }}</div></div
     >
     <img
-      :class="['tag-count' + index, 'absolute bottom-0 left-0 w-162px pointer-events-none']"
+      class="tag-count absolute bottom-0 left-0 w-162px pointer-events-none"
       src="@/assets/images/tag2.png"
       alt=""
     />
+    <Teleport defer to=".video-box-wrapper">
+      <div class="z-9 absolute" ref="floating" :style="{ top: top + 'px', left: left + 'px' }">
+        <transition name="scaleHide">
+          <div
+            v-if="isShow"
+            class="overflow-hidden origin-top-left h-200px w-300px bg-[rgba(11,21,44,1)] absolute left-10px top--0px b-solid b-1 b-#2BABF2"
+          >
+            <div class="flex justify-between p-1">
+              <span>{{ label }}</span>
+              <span
+                class="i-material-symbols-close text-coolgray cursor-pointer"
+                @click.stop="isShow = false"
+              ></span>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -52,51 +62,28 @@
   }
 
   const init = () => {
-    const tagCount = document.querySelectorAll('.tag-count' + props.index)
+    const tagBox = document.querySelector('.tag-box' + props.index)
+    const tagLabel = tagBox.querySelector('.tag-label')
     const videoCount = document.querySelector('.pub-video')
-    const t1 = tagCount[0].getBoundingClientRect()
-    const t2 = tagCount[1].getBoundingClientRect()
-    const tagBoxH = t1.height + t2.height
-    const tagBoxW = t1.width + t2.width
-    if (tagBoxH > props.top) {
-      tagCount[0].style.top = `23px`
-      tagCount[1].style.transform = 'rotateX(180deg)'
-      tagCount[1].style.bottom = 'auto'
-      floating.value.style.top = '18px'
-    } else {
-      tagCount[0].style.top = `-50px`
-      tagCount[1].style.transform = 'rotateX(0)'
-      tagCount[1].style.bottom = '0'
-      floating.value.style.top = '-50px'
-    }
-    if (tagBoxW + props.left > videoCount.offsetWidth) {
-      tagCount[0].style.right = '18px'
-      tagCount[1].style.right = '0'
-      tagCount[0].style.left = 'auto'
-      tagCount[1].style.left = 'auto'
-      tagCount[0].style.transform = 'rotateY(180deg)'
-      tagCount[1].style.transform = 'rotateY(180deg)'
-      document.querySelector('.tag-label' + props.index).style.transform = 'rotateY(180deg)'
-      floating.value.style.left = 'auto'
-      floating.value.style.right = '165px'
-      floating.value.style.transformOrigin = 'top right'
-    } else {
-      tagCount[0].style.right = 'auto'
-      tagCount[1].style.right = 'auto'
-      tagCount[0].style.left = '18px'
-      tagCount[1].style.left = '0'
-      tagCount[0].style.transform = 'rotateY(0)'
-      tagCount[1].style.transform = 'rotate(180deg,0)'
-      document.querySelector('.tag-label' + props.index).style.transform = 'rotateY(0)'
-      floating.value.style.left = '165px'
-      floating.value.style.right = 'auto'
-      floating.value.style.transformOrigin = 'top left'
+    const { width, height } = videoCount.getBoundingClientRect()
+    const [w, h] = [width / 2, height / 2]
+
+    if (props.left > w) {
+      tagBox.style.transform = 'rotateY(180deg)'
+      tagLabel.style.transform = 'rotateY(180deg)'
+      if (props.top < h) {
+        tagBox.style.transform = 'rotate(180deg)'
+        tagLabel.style.transform = 'rotate(180deg)'
+      }
+    } else if (props.top < h) {
+      tagBox.style.transform = 'rotateX(180deg)'
+      tagLabel.style.transform = 'rotateX(180deg)'
     }
   }
   onMounted(() => {
-    setTimeout(() => {
+    nextTick(() => {
       init()
-    }, 100)
+    })
   })
 </script>
 
@@ -105,4 +92,19 @@
     background: url('@/assets/images/tag1.png') no-repeat;
     background-size: 100% 100%;
   }
+
+  .scaleHide-enter-active {
+    animation: bounce-in 0.5s;
+  }
+  .scaleHide-leave-active {
+    animation: bounce-in 0.5s reverse;
+  }
+  @keyframes bounce-in {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
 </style>

src/views/home/home.vue

@@ -62,7 +62,9 @@
   const mapBoxCom = shallowRef(Three3D)
   const data = ref({})
 
+  let flag = 0
   $mitt.on('onThemeIndex', (i) => {
+    if (flag === i) return
     if (i) {
       leftBoxCom.value = defineAsyncComponent(() => import('./leftboxtwo/index.vue'))
       rightBoxCom.value = defineAsyncComponent(() => import('./rightboxtwo/index.vue'))
@@ -72,6 +74,7 @@
       rightBoxCom.value = RightBox
       mapBoxCom.value = Three3D
     }
+    flag = i
   })
 
   const getData = (v) => {

src/views/home/middleBottomBox/components/advancedLinkage.vue

@@ -81,4 +81,8 @@
     init()
     console.log(props.data)
   })
+
+  onUnmounted(() => {
+    playerObj?.destroyed()
+  })
 </script>

src/views/home/middleBottomBox/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="bottom-box">
-    <div class="button-part flex flex-col items-center justify-center gap-2">
-      <div :class="['transition-all', show ? 'transform-rotate-z-0' : 'transform-rotate-z-180']">
+    <div class="button-part flex flex-col items-center justify-center gap-2 relative">
+      <div
+        :class="[
+          'transition-all absolute top--10',
+          show ? 'transform-rotate-z-0' : 'transform-rotate-z-180'
+        ]"
+      >
         <img
           :class="[
             'cursor-pointer relative animate__animated animate__bounce animate__slow animate__slideInUp'
@@ -10,16 +15,8 @@
           @click="handleClick"
         />
       </div>
-      <transition
-        enter-active-class="animate__animated animate__fadeInUpBig"
-        leave-active-class="animate__animated animate__fadeOutDownBig"
-      >
-        <div
-          v-if="show"
-          :class="[
-            'part-plan w-full overflow-hidden transition-all transition-duration-800 flex gap-2 justify-between'
-          ]"
-        >
+      <transition name="scaleHide">
+        <div v-if="show" :class="['part-plan w-full flex gap-2 justify-between']">
           <div
             class="w-50% h-full flex flex-col aspect-ratio-video bg-#00000080 overflow-hidden"
             v-for="(part, i) in partList"
@@ -66,3 +63,20 @@
     { immediate: true }
   )
 </script>
+
+<style lang="scss">
+  .scaleHide-enter-active {
+    animation: bounce-in 0.5s;
+  }
+  .scaleHide-leave-active {
+    animation: bounce-in 0.5s reverse;
+  }
+  @keyframes bounce-in {
+    0% {
+      height: 0;
+    }
+    100% {
+      height: 267px;
+    }
+  }
+</style>

src/views/home/rightboxtwo/topBox.vue

@@ -1,14 +1,7 @@
 <template>
   <div class="right-top-box">
     <div class="flex gap-2 justify-between relative">
-      <ScrollPanel
-        style="width: 40%; height: 230px"
-        :dt="{
-          bar: {
-            background: 'rgba( 44, 95,156, 0.2)'
-          }
-        }"
-      >
+      <NScrollbar style="width: 40%; max-height: 230px">
         <ul class="flex flex-col gap-15px justify-start">
           <li
             :class="[
@@ -22,7 +15,7 @@
             <span class="text-12px">{{ item.name }}</span>
           </li>
         </ul>
-      </ScrollPanel>
+      </NScrollbar>
       <div class="flex-1">
         <ECharts
           id="bjzx-echarts2"
@@ -38,6 +31,7 @@
 
 <script setup>
   import { chartOptions } from '@/components/ECharts/optionsConfig'
+  import { NScrollbar } from 'naive-ui'
   const loading = ref(true)
   const fullOptions = ref({ options: {} })