master: Fixed 标签提示修复

src/views/VideoBox/components/TagBox.vue

@@ -11,8 +11,8 @@
     <div
       ref="floating"
       :class="[
-        isShow ? 'opacity-100' : 'opacity-0',
-        'overflow-hidden 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'
+        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
     >
@@ -58,9 +58,6 @@
     const t2 = tagCount[1].getBoundingClientRect()
     const tagBoxH = t1.height + t2.height
     const tagBoxW = t1.width + t2.width
-    // console.log(t1.height, t2.height)
-    console.log(tagBoxH, tagBoxW)
-
     if (tagBoxH > props.top) {
       tagCount[0].style.top = `23px`
       tagCount[1].style.transform = 'rotateX(180deg)'
@@ -82,6 +79,7 @@
       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'
@@ -92,6 +90,7 @@
       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'
     }
   }
   onMounted(() => {

src/views/VideoBox/index.vue

@@ -2,7 +2,15 @@
   <div class="video-box w-50% absolute top-70px left-50% translate-x-[-50%]">
     <!-- <pub-video /> -->
     <div class="video-box-wrapper mt-30px relative">
-      <video class="video-count" width="100%" autoplay muted playsinline loop>
+      <video
+        class="video-count object-fill"
+        width="100%"
+        height="550px"
+        autoplay
+        muted
+        playsinline
+        loop
+      >
         <source src="@/assets/videos/temp.mp4" type="video/mp4" />
 
         Download the
@@ -47,6 +55,16 @@
       name: '标签3',
       x: 905,
       y: 100
+    },
+    {
+      name: '标签4',
+      x: 905,
+      y: 500
+    },
+    {
+      name: '标签5',
+      x: 0,
+      y: 500
     }
   ]