feat: modify the method of calling v-viewer

public/js/loadCAD.js

@@ -38,7 +38,7 @@ window.grendCAD = (function grendCAD() {
     style.innerHTML = `
       .cad {
         position: absolute;
-        right: 80px;
+        right: 16px;
         top: 16px;
         width: 200px;
         height: 200px;

src/hotspot/main.ts

@@ -1,12 +1,8 @@
 import { createApp } from 'vue';
 // @ts-ignore
 import App from './views/hotspot/index';
-// @ts-ignore
-import VueViewer from 'v-viewer';
-import 'viewerjs/dist/viewer.css';
 import '@/app.scss';
 
 export const app = createApp(App);
 
 app.mount('#app');
-app.use(VueViewer);

src/hotspot/views/hotspot/index.scss

@@ -50,7 +50,7 @@
   }
 
   &-scrollbar {
-    max-height: 19vh;
+    max-height: 19%;
     overflow: auto;
     width: 70%;
     color: #fff;
@@ -97,7 +97,7 @@
   &-nav {
     position: absolute;
     right: 30px;
-    bottom: calc(20vh - 20px);
+    bottom: calc(20% - 20px);
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -130,16 +130,16 @@
 @media only screen and (max-width: 600px) {
   .hotspot-page {
     &-container {
-      height: calc(100vh - 90px);
+      height: calc(100% - 90px);
 
       video,
       .el-image {
-        max-height: 80vh;
+        max-height: 80%;
         width: 90%;
       }
       iframe {
         width: 100%;
-        height: calc(100vh - 90px);
+        height: calc(100% - 90px);
       }
     }
     &-nav {
@@ -154,7 +154,7 @@
     &-scrollbar {
       padding: 10px;
       width: 100%;
-      max-height: calc(100vh - 90px);
+      max-height: calc(100% - 90px);
     }
   }
 }

src/hotspot/views/hotspot/index.vue

@@ -95,6 +95,7 @@
   import 'swiper/css/pagination';
 
   import { parseUrlParams, judgeIsMobile } from '@/utils';
+  import { MESSAGE_KEY } from '@/types';
 
   import ModelIcon from '@hotspot/assets/images/model-icon.png';
   import ImageIcon from '@hotspot/assets/images/img-icon.png';
@@ -186,7 +187,7 @@
         }/data/${this.id}/hot/js/data.js?time=${Math.random()}`;
         let result = await fetch(url).then((response) => response.json());
         const resData = result[this.m];
-        console.log('----', resData);
+
         if (resData) {
           this.audio = resData.backgroundMusic;
           // 只有单独的音频上传
@@ -285,9 +286,10 @@
         this.lastVideo = video;
       },
       handlePreview(idx) {
-        this.$viewerApi({
-          images: [this.curList[idx]],
-        });
+        window.parent.postMessage(
+          { type: MESSAGE_KEY.SHOW_VIEWER, images: [this.curList[idx]] },
+          '*'
+        );
       },
     },
   };

src/index/App.vue

@@ -2,6 +2,20 @@
   <router-view v-loading="false" />
 </template>
 
+<script lang="ts" setup>
+  import { api as viewerApi } from 'v-viewer';
+  import 'viewerjs/dist/viewer.css';
+  import { MESSAGE_KEY } from './types';
+
+  window.addEventListener('message', (e) => {
+    switch (e.data.type) {
+      case MESSAGE_KEY.SHOW_VIEWER:
+        viewerApi({ images: e.data.images, options: { zIndex: 9999 } });
+        break;
+    }
+  });
+</script>
+
 <style lang="scss">
   @use './app.scss';
 </style>

src/index/app.scss

@@ -88,6 +88,14 @@ iframe {
   font-family: 'Source Han Sans CN-Medium';
   src: url('/fonts/SourceHanSansCN-Medium.otf');
 }
+@font-face {
+  font-family: 'SourceHanSerifCN-Bold';
+  src: url('/fonts/SOURCEHANSERIFCN-BOLD.OTF');
+}
+@font-face {
+  font-family: 'SourceHanSerifCN-Regular';
+  src: url('/fonts/SOURCEHANSERIFCN-REGULAR.OTF');
+}
 
 .limit-line {
   display: -webkit-box;

src/index/types/index.ts

@@ -0,0 +1,3 @@
+export enum MESSAGE_KEY {
+  SHOW_VIEWER = 0,
+}

src/index/views/home/components/hot-spot-list/index.scss

@@ -5,8 +5,10 @@
   top: 0;
   right: -400px;
   width: 356px;
+  max-width: 50%;
   height: 100%;
   transition: right 0.4s, width 0.5s;
+  background: rgba(34, 36, 37, 0.7);
   z-index: var(--z-index-popper);
 }
 
@@ -18,7 +20,6 @@
   position: relative;
   width: 100%;
   height: 15%;
-  background: #222425;
   opacity: 0.8;
   display: flex;
   flex-direction: column;
@@ -28,8 +29,6 @@
 
 #hotListContent {
   width: 100%;
-  background: rgba(34, 36, 37, 0.7);
-  /* opacity: 0.65; */
   flex-grow: 1;
   height: 100%;
   overflow-y: scroll;
@@ -39,7 +38,6 @@
 #hotListBottom {
   position: relative;
   height: 20%;
-  background: rgba(34, 36, 37, 0.7);
 }
 
 #hotListClose {
@@ -107,6 +105,7 @@
     top: -320px;
     right: 0;
     width: 100%;
+    max-width: 100%;
     height: 250px;
     transition: top 0.4s, width 0.5s;
     background: rgba(34, 36, 37, 0.9);
@@ -121,10 +120,6 @@
     background: none;
     opacity: 1;
   }
-  #hotListContent {
-    /* background: rgba(34, 36, 37,0.9); */
-    background: none;
-  }
   #hotListText {
     font-size: 20px;
     letter-spacing: 3px;

vite.config.ts

@@ -97,7 +97,7 @@ export default defineConfig(() => {
       preprocessorOptions: {
         scss: {
           api: 'modern-compiler',
-          additionalData: `@use "@/assets/el.scss" as *;`,
+          additionalData: `@use "@/assets/el${SCENE ? '.' + SCENE : ''}.scss" as *;`,
         },
       },
     },