浏览代码

feat: 修改热点分屏时的样式

rindy 4 月之前
父节点
当前提交
8058b54768
共有 3 个文件被更改,包括 21 次插入16 次删除
  1. 1 0
      src/components/files/TagManager.vue
  2. 16 14
      src/components/files/TagView.vue
  3. 4 2
      src/pages/Viewer.vue

+ 1 - 0
src/components/files/TagManager.vue

@@ -65,5 +65,6 @@ const initLaserTag = () => {
     width: 100%;
     height: 100%;
     z-index: 1000;
+    overflow: hidden;
 }
 </style>

+ 16 - 14
src/components/files/TagView.vue

@@ -1,19 +1,21 @@
 <template>
-    <div class="tag-view" v-show="canShow">
-        <!-- <div class="tag-view-content" :style="{ height: height + 'px' }"> -->
-        <div class="tag-view-content" :class="!isLogin || !isAuth ? 'no-comment' : ''">
-            <header>
-                <span>{{ notify.title }}</span>
-                <!-- <i class="iconfont icon-close" @click="emits('action', null)"></i> -->
-                <i class="iconfont icon-close" @click="onClose"></i>
-            </header>
-            <article>
-                <TagMsg @setShow="setShow"></TagMsg>
-                <Comment v-if="isLogin && isAuth" :slideHeigt="slideHeigt"></Comment>
-            </article>
-            <!-- <footer></footer> -->
+    <Teleport to="body" v-if="canShow">
+        <div class="tag-view">
+            <!-- <div class="tag-view-content" :style="{ height: height + 'px' }"> -->
+            <div class="tag-view-content" :class="!isLogin || !isAuth ? 'no-comment' : ''">
+                <header>
+                    <span>{{ notify.title }}</span>
+                    <!-- <i class="iconfont icon-close" @click="emits('action', null)"></i> -->
+                    <i class="iconfont icon-close" @click="onClose"></i>
+                </header>
+                <article>
+                    <TagMsg @setShow="setShow"></TagMsg>
+                    <Comment v-if="isLogin && isAuth" :slideHeigt="slideHeigt"></Comment>
+                </article>
+                <!-- <footer></footer> -->
+            </div>
         </div>
-    </div>
+    </Teleport>
 </template>
 <script setup>
 import { ref, onMounted, onBeforeUnmount, computed, inject, watch, defineExpose } from 'vue'

+ 4 - 2
src/pages/Viewer.vue

@@ -180,9 +180,11 @@ watch(
     (val, old) => {
         let tagsVieww = document.querySelector(`div[xui_tags_view]`)
         if (val) {
-            tagsVieww.style.visibility = 'hidden'
+            // tagsVieww.style.visibility = 'hidden'
+            tagsVieww.style.width = '50%'
         } else {
-            tagsVieww.style.visibility = 'visible'
+            // tagsVieww.style.visibility = 'visible'
+            tagsVieww.style.width = '100%'
         }
     }
 )