update

packages/qjkankan-editor/src/api/index.js

@@ -802,3 +802,14 @@ export async function checkUserSize() {
 export function uploadAttachment(data, ok, no) {
   return http.uploadFile(`${URL_FILL}/manage/work/uploadHot`, data, ok, no)
 }
+
+/**
+ * 更新通知
+ * @param {*} data 
+ * @param {*} ok 
+ * @param {*} no 
+ */
+
+export function getNoticeApi(data, ok, no) {
+  return http.getJson(`${URL_FILL}/manage/work/getServiceUpTip`, data, ok, no)
+}

packages/qjkankan-editor/src/components/materialSelector.vue

@@ -303,14 +303,11 @@
           alt=""
         />
       </template>
-
+      <!-- 视频已带suffix -->
       <template v-slot:materialIcon="slotProps">
         <img
           v-if="slotProps.materialInfo[slotProps.tableItemStructure.key]"
-          :src="
-            slotProps.materialInfo[slotProps.tableItemStructure.key] +
-            $imgsuffix
-          "
+          :src="slotProps.materialInfo[slotProps.tableItemStructure.key]"
           alt=""
         />
         <img v-else src="@/assets/img/list_placeholder.png" alt="" />

packages/qjkankan-editor/src/core/utils.js

@@ -1,30 +1,28 @@
-import Vue from 'vue'
-import { convertJQHotspot } from './hotspot'
+import Vue from "vue";
+import { convertJQHotspot } from "./hotspot";
 
-let vue = new Vue()
+let vue = new Vue();
 
 export default class Utils {
-  constructor() {
-
-  }
+  constructor() {}
   /**
    * 设置初始视角
    */
   setInitView(krpano, canvas) {
     let url = this.setInitAngleImg(canvas);
-    var sceneName = krpano.get('xml.scene');
+    var sceneName = krpano.get("xml.scene");
     var hlookat = krpano.get("view.hlookat");
     var vlookat = krpano.get("view.vlookat");
     return {
       sceneName,
       hlookat,
       vlookat,
-      url
-    }
+      url,
+    };
   }
 
   scaleCanvas(canvas, width, height) {
-    let w = canvas.width
+    let w = canvas.width;
     let h = canvas.height;
 
     if (width == undefined) {
@@ -33,8 +31,8 @@ export default class Utils {
     if (height == undefined) {
       height = h;
     }
-    var retCanvas = document.createElement('canvas');
-    var retCtx = retCanvas.getContext('2d');
+    var retCanvas = document.createElement("canvas");
+    var retCtx = retCanvas.getContext("2d");
     retCanvas.width = width;
     retCanvas.height = height;
     retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
@@ -48,7 +46,7 @@ export default class Utils {
 
   setInitAngleImg(mycanvas) {
     var url = this.getDataURL(mycanvas, "image/jpeg", 600, 400);
-    return url
+    return url;
   }
   radarRotate() {
     // console.log(sceneName,hlookat);
@@ -65,10 +63,10 @@ export default class Utils {
     try {
       const hotspot = convertJQHotspot(param);
       const hotspotStyle = Object.values(hotspot.style);
-      const hotspotString = hotspotStyle.join('|');
+      const hotspotString = hotspotStyle.join("|");
 
       const hotspotSize = (Number(hotspot.size) || 1) * 40;
-      let icon = hotspot.icon.replace(/,/g, '|');
+      let icon = hotspot.icon.replace(/,/g, "|");
       let title = this.htmlEncode(hotspot.title);
       const callString = `editJQHotspot(
         ${hotspot.id},
@@ -85,11 +83,10 @@ export default class Utils {
       // krpano.stopcall(callString);
       krpano.call(callString);
     } catch (error) {
-      console.error('error', error);
+      console.error("error", error);
     }
   }
 
-
   /**
    * 添加热点
    */
@@ -99,16 +96,18 @@ export default class Utils {
      * type: 0,系统图标 , 1.自定义图际. 2.序列帧  3.个性标签
      */
     try {
-      krpano.set("curscreen_x", krpano.get('stagewidth') / 2);
-      krpano.set("curscreen_y", krpano.get('stageheight') / 2);
-      krpano.call("screentosphere(curscreen_x, curscreen_y, curscreen_ath, curscreen_atv);");
+      krpano.set("curscreen_x", krpano.get("stagewidth") / 2);
+      krpano.set("curscreen_y", krpano.get("stageheight") / 2);
+      krpano.call(
+        "screentosphere(curscreen_x, curscreen_y, curscreen_ath, curscreen_atv);"
+      );
       const hotspot = convertJQHotspot(param);
       const hotspotStyle = Object.values(hotspot.style);
-      const hotspotString = hotspotStyle.join('|');
+      const hotspotString = hotspotStyle.join("|");
       const hotspotSize = (Number(hotspot.size) || 1) * 40;
-      const ath = hotspot.ath != '' ? hotspot.ath : krpano.get("curscreen_ath");
-      const atv = hotspot.atv != '' ? hotspot.atv : krpano.get("curscreen_atv");
-      let icon = hotspot.icon.replace(/,/g, '|');
+      const ath = hotspot.ath != "" ? hotspot.ath : krpano.get("curscreen_ath");
+      const atv = hotspot.atv != "" ? hotspot.atv : krpano.get("curscreen_atv");
+      let icon = hotspot.icon.replace(/,/g, "|");
       let title = this.htmlEncode(hotspot.title);
       const callString = `addJQHotspot(
         ${hotspot.id},
@@ -124,7 +123,7 @@ export default class Utils {
         )`;
       krpano.call(callString);
     } catch (error) {
-      console.error('error', error);
+      console.error("error", error);
     }
   }
 
@@ -133,23 +132,22 @@ export default class Utils {
    */
 
   getCurrentMousePosition(krpano, hotspotName) {
-    let panoW = krpano.get('stagewidth')
-    let panoH = krpano.get('stageheight')
+    let panoW = krpano.get("stagewidth");
+    let panoH = krpano.get("stageheight");
 
-    let stagex = krpano.get('mouse.stagex')
-    let stagey = krpano.get('mouse.stagey')
+    let stagex = krpano.get("mouse.stagex");
+    let stagey = krpano.get("mouse.stagey");
 
     if (stagex < 0 || stagex > panoW || stagey < 0 || stagey > panoH) {
-      return
+      return;
     }
-    krpano.call('screentosphere(mouse.stagex, mouse.stagey, toh, tov)')
+    krpano.call("screentosphere(mouse.stagex, mouse.stagey, toh, tov)");
     // const toh = krpano.get('toh');
     // const tov = krpano.get('tov');
     // console.log('toh', toh);
     // console.log('tov', tov);
-    krpano.set(`hotspot[${hotspotName}].ath`, krpano.get('toh'));
-    krpano.set(`hotspot[${hotspotName}].atv`, krpano.get('tov'));
-
+    krpano.set(`hotspot[${hotspotName}].ath`, krpano.get("toh"));
+    krpano.set(`hotspot[${hotspotName}].atv`, krpano.get("tov"));
   }
 
   htmlEncode(str) {
@@ -160,69 +158,67 @@ export default class Utils {
     s = s.replace(/\(/g, "（");
     s = s.replace(/\)/g, "）");
     s = s.replace(/,/g, "，");
+    s = s.replace(/</g, "◻");
+    s = s.replace(/>/g, "◻");
+    s = s.replace(/\*/g, "◻");
+    s = s.replace(/\*/g, "◻");
+
     return s;
   }
 
   /**
-   * 
-   * @param {*} 定位热点 
+   *
+   * @param {*} 定位热点
    */
 
   looktohotspot(krpano, hotspotName) {
-    var curFov = krpano.get('view.fov');
-    krpano.call('looktohotspot(' + hotspotName + ',' + curFov + ')');
+    var curFov = krpano.get("view.fov");
+    krpano.call("looktohotspot(" + hotspotName + "," + curFov + ")");
   }
 
-
   /**
-   * 
-   * @param {*} 定位热点 
+   *
+   * @param {*} 定位热点
    */
 
   getHotspotHV(krpano, hotspotName) {
     var ath = krpano.get(`hotspot[${hotspotName}].ath`);
     var atv = krpano.get(`hotspot[${hotspotName}].atv`);
-    return { ath, atv }
+    return { ath, atv };
   }
 
-
   /**
    * 打开热点链接
    */
 
   linkopen(sceneCode, id) {
-    if (window.location.pathname.indexOf('show') > -1) {
-      vue.$bus.emit('clickHotspot', id)
-    }
-    else if (window.location.pathname.indexOf('edit') > -1) {
-      vue.$bus.emit('openHotspot', id)
+    if (window.location.pathname.indexOf("show") > -1) {
+      vue.$bus.emit("clickHotspot", id);
+    } else if (window.location.pathname.indexOf("edit") > -1) {
+      vue.$bus.emit("openHotspot", id);
+    } else {
+      window.parent.postMessage(
+        { event: "hotspot", targetCode: sceneCode },
+        "*"
+      );
     }
-    else {
-      window.parent.postMessage({ event: 'hotspot', targetCode: sceneCode }, '*')
-    }
-
   }
 
-
-
-
-
   /**
    * 初始化
    */
 
   initHotspot(krpano, someData, type) {
-
     if (!someData) {
-      return
+      return;
     }
-    let mysd = someData
-    if (typeof someData == 'string') {
-      mysd = JSON.parse(someData)
+    let mysd = someData;
+    if (typeof someData == "string") {
+      mysd = JSON.parse(someData);
     }
 
-    mysd.hotspots.forEach(item => {
-      this.addhotspot(krpano, item, type)
+    mysd.hotspots.forEach((item) => {
+      this.addhotspot(krpano, item, type);
     });
   }
 
@@ -234,17 +230,15 @@ export default class Utils {
     try {
       krpano.call(`set_hotspot_visible(${toggle})`);
     } catch (e) {
-      e
+      e;
     }
   }
 
   /**
    * 显示隐藏热点
    */
-
 }
 
-
 // toggleHotspot(krpano,someData,toggle){
 //   if (!someData) {
 //     return
@@ -253,4 +247,4 @@ export default class Utils {
 //   mysd.hotspots.forEach(item => {
 //     krpano.set(`hotspot[${item.name}].visible`,toggle);
 //   });
-// }
+// }

packages/qjkankan-view/public/show.html

@@ -10,7 +10,7 @@
     />
     <meta name="description" content="" />
     <meta name="cover" content="" />
-    <link
+    <!-- <link
       rel="stylesheet"
       href="<%= VUE_APP_STATIC_DIR %>/lib/iconfont/iconfont.css"
     />
@@ -25,7 +25,13 @@
     <link
       rel="stylesheet"
       href="<%= VUE_APP_STATIC_DIR %>/lib/iconfontV1.2.0/iconfont.css"
+    /> -->
+
+    <link
+      rel="stylesheet"
+      href="//at.alicdn.com/t/c/font_2625385_1un5khf0xqy.css"
     />
+
     <link
       rel="stylesheet"
       href="<%= VUE_APP_STATIC_DIR %>/lib/swiper/swiper-bundle.min.css"

packages/qjkankan-view/src/components/assembly/Tags/index.vue

@@ -35,7 +35,6 @@ import metasPhone from "./metas/metas-phone.vue";
 import { defineEmits, computed } from "vue";
 import { useStore } from "vuex";
 
-
 // import { useMusicPlayer,useSoundPlayer } from '@/utils/sound'
 // //背景音乐
 // const musicPlayer = useMusicPlayer()
@@ -83,3 +82,25 @@ const close = () => {
   }
 }
 </style>
+
+<style lang="scss">
+.hotspot-pc-title {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 16px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 20px;
+  color: #fff;
+  font-size: 14px;
+  z-index: 999;
+  > i {
+    font-size: 16px;
+    margin-right: 6px;
+  }
+}
+</style>

packages/qjkankan-view/src/components/assembly/Tags/metas/fixaudio.vue

@@ -1,31 +1,58 @@
 <template>
   <div class="audioinner">
-    <audio id="audioTag" class="noshow" autoplay :src="hotspot.audio.ossPath"></audio>
-    <div class="audio-pan" :class="{rotatepan:isPlaying}">
+    <audio
+      id="audioTag"
+      class="noshow"
+      autoplay
+      :src="hotspot.audio.ossPath"
+    ></audio>
+    <div class="audio-pan" :class="{ rotatepan: isPlaying }">
       <img :src="require('@/assets/images/icon/player_pic01.png')" alt="" />
     </div>
 
     <div class="audio-content">
-
       <div class="ad-info">
-        <p>{{hotspot.hotspotTitle}}</p>
+        <p>{{ hotspot.hotspotTitle }}</p>
         <div class="time">
-          <span>{{ time }}</span><span> / {{ allTime }}</span>
+          <span>{{ time }}</span
+          ><span> / {{ allTime }}</span>
         </div>
       </div>
 
       <div class="ad-control">
         <div class="ad-volume">
-          <ui-icon @click.stop="handleMute"  :type="isMute?'player_volume03':(volumePosi>50?'player_volume01':'player_volume02')"></ui-icon>
+          <ui-icon
+            @click.stop="handleMute"
+            :type="
+              isMute
+                ? 'player_volume03'
+                : volumePosi > 50
+                ? 'player_volume01'
+                : 'player_volume02'
+            "
+          ></ui-icon>
           <div class="bar">
             <div class="activeLine" @click="handleVolume"></div>
             <div :style="{ width: volumePosi + '%' }" class="dot"></div>
           </div>
         </div>
-        <ui-icon @click="bofang" :type="isPlay?'player_pause':'player_playback'"></ui-icon>
-        <ui-icon @click="$emit('close')" type="player_close"></ui-icon>
+        <!-- <ui-icon
+          @click="bofang"
+          :type="isPlay ? 'player_pause' : 'player_playback'"
+        ></ui-icon> -->
+
+        <i
+          @click="bofang"
+          class="iconfont"
+          :class="{
+            'icon-editor_preview': !isPlay,
+            'icon-editor_playback': isPlay,
+          }"
+        >
+        </i>
+        <!-- <ui-icon @click="$emit('close')" type="player_close"></ui-icon> -->
+        <i @click="$emit('close')" class="iconfont icon-close"> </i>
       </div>
-
     </div>
 
     <div class="audiobtm">
@@ -51,8 +78,8 @@ export default {
       volumePosi: 100,
       allTime: 0,
       timer: null,
-      isMute:false,
-      isPlaying:false
+      isMute: false,
+      isPlaying: false,
     };
   },
   methods: {
@@ -82,7 +109,8 @@ export default {
       return minute + isM0 + sec;
     },
     updateProgress() {
-      this.currentPosi = (this.i_audio.currentTime / this.i_audio.duration) * 100;
+      this.currentPosi =
+        (this.i_audio.currentTime / this.i_audio.duration) * 100;
       this.time = this.transTime(this.i_audio.currentTime);
     },
 
@@ -99,21 +127,21 @@ export default {
       this.updateProgress();
     },
 
-    handleVolume(e){
+    handleVolume(e) {
       var rate = e.offsetX / e.target.clientWidth;
-      this.i_audio.volume = rate
-      this.volumePosi = rate * 100
-      this.isMute =false
+      this.i_audio.volume = rate;
+      this.volumePosi = rate * 100;
+      this.isMute = false;
     },
 
-    handleMute(){
-      this.isMute = !this.isMute
-    }
+    handleMute() {
+      this.isMute = !this.isMute;
+    },
   },
-  watch:{
-    isMute(newVal){
-      this.i_audio.muted = newVal
-    }
+  watch: {
+    isMute(newVal) {
+      this.i_audio.muted = newVal;
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -140,13 +168,13 @@ export default {
       $("#audioTag").on("playing", () => {
         if (!this.isPlaying) {
           console.log(this.isPlaying);
-          this.isPlaying = true
+          this.isPlaying = true;
         }
       });
 
       $("#audioTag").on("pause", () => {
         if (this.isPlaying) {
-          this.isPlaying = false
+          this.isPlaying = false;
         }
       });
 
@@ -159,8 +187,7 @@ export default {
       });
     });
   },
-  beforeDestroy() {
-  },
+  beforeDestroy() {},
 };
 </script>
 
@@ -169,7 +196,7 @@ export default {
   width: 600px;
   height: 80px;
   color: #fff;
-  background-image: url('~@/assets/images/icon/player_pic02@2x.png');
+  background-image: url("~@/assets/images/icon/player_pic02@2x.png");
   background-size: cover;
   position: relative;
 
@@ -180,16 +207,15 @@ export default {
     bottom: 14px;
     font-size: 0;
 
-    >img {
+    > img {
       width: 100%;
     }
   }
-  .rotatepan{
-    >img {
+  .rotatepan {
+    > img {
       animation: rotatete infinite linear 10s;
       transform-origin: center;
     }
-
   }
 
   .audio-content {
@@ -205,7 +231,7 @@ export default {
     .ad-info {
       width: 240px;
 
-      >p {
+      > p {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -216,7 +242,7 @@ export default {
         width: 100px;
         margin-top: 6px;
 
-        >span {
+        > span {
           font-size: 12px;
           color: rgba(255, 255, 255, 0.5);
         }
@@ -233,7 +259,7 @@ export default {
       .ad-volume {
         display: flex;
         align-items: center;
-        >img {
+        > img {
           width: 30px;
         }
         .bar {
@@ -242,9 +268,8 @@ export default {
         }
       }
 
-      i{
+      i {
         cursor: pointer;
-
       }
     }
   }
@@ -261,15 +286,11 @@ export default {
     border-bottom-right-radius: 8px;
     overflow: hidden;
 
-
-
-    >img {
+    > img {
       margin: 0 0px;
       cursor: pointer;
       width: 20px;
     }
-
-
   }
 
   .bar {
@@ -314,11 +335,11 @@ export default {
   pointer-events: none !important;
 }
 
-@keyframes rotatete{
+@keyframes rotatete {
   0% {
     transform: rotate(0);
   }
-  100%{
+  100% {
     transform: rotate(360deg);
   }
 }

packages/qjkankan-view/src/components/assembly/Tags/metas/metas-article.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div class="articlecon">
-    <div class="title">
+    <div class="hotspot-pc-title">
       <i class="iconfont icon-material_text" />
       {{ currentTag.hotspotTitle }}
     </div>

packages/qjkankan-view/src/components/assembly/Tags/metas/metas-image.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="imagecon">
-    <div class="title">
-      <i class="iconfont icon-material_image title-icon" />
+    <div class="hotspot-pc-title">
+      <i class="iconfont icon-material_image" />
       {{ currentTag.hotspotTitle }}
     </div>
 
@@ -39,7 +39,7 @@
     <div class="toolbar">
       <i
         v-if="currentTag.image.length > 1"
-        class="iconfont icon-material_preview_previous hover-tips"
+        class="iconfont image-icon icon-material_preview_previous hover-tips"
         :class="{ disabled: currentIndex === 0 }"
         @click="onClickPrevious()"
       >
@@ -49,7 +49,7 @@
       </i>
       <i
         v-if="currentTag.image.length > 1"
-        class="iconfont icon-material_preview_next1 hover-tips append-splitter"
+        class="iconfont image-icon icon-material_preview_next1 hover-tips append-splitter"
         :class="{ disabled: currentIndex === currentTag.image.length - 1 }"
         @click="onClickNext()"
       >
@@ -59,7 +59,7 @@
       </i>
       <i
         :class="{ disabled: scaleRate >= maxScaleRate }"
-        class="iconfont icon-material_preview_enlarge hover-tips"
+        class="iconfont image-icon icon-material_preview_enlarge hover-tips"
         @click="onClickZoomIn()"
       >
         <div>
@@ -69,7 +69,7 @@
       <span>{{ Math.floor(scaleRate.toFixed(2) * 100) }}%</span>
       <i
         :class="{ disabled: scaleRate <= 0.5 }"
-        class="iconfont icon-material_preview_narrow hover-tips"
+        class="iconfont image-icon icon-material_preview_narrow hover-tips"
         @click="onClickZoomOut()"
       >
         <div>
@@ -79,7 +79,7 @@
 
       <i
         v-if="canFullScreen && objectFit === 'scale-down'"
-        class="iconfont icon-material_preview_full_screen hover-tips"
+        class="iconfont image-icon icon-material_preview_full_screen hover-tips"
         @click="onClickFullScreen()"
       >
         <div>
@@ -88,7 +88,7 @@
       </i>
       <i
         v-if="canFullScreen && objectFit === 'contain'"
-        class="iconfont icon-material_preview_drop_out hover-tips"
+        class="iconfont image-icon icon-material_preview_drop_out hover-tips"
         @click="onClickCancelFullScreen()"
       >
         <div>
@@ -266,7 +266,7 @@ const onSwiperChange = (swiper) => {
     border-radius: 8px;
     z-index: 2;
 
-    .iconfont {
+    .image-icon {
       cursor: pointer;
       color: white;
       margin: 0 18px;

packages/qjkankan-view/src/components/assembly/Tags/metas/metas-imagetext.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="imagetxtcon">
-    <div class="title">
-      <i class="iconfont icon-material_image title-icon" />
+    <div class="hotspot-pc-title">
+      <i class="iconfont icon-icon_graphic" />
       {{ currentTag.hotspotTitle }}
     </div>
 
@@ -49,7 +49,7 @@
             >
               <i
                 v-if="currentTag.imageTextInfo.imageList.length > 1"
-                class="iconfont icon-material_preview_previous hover-tips"
+                class="iconfont image-icon icon-material_preview_previous hover-tips"
                 :class="{ disabled: currentIndex === 0 }"
                 @click="onClickPrevious()"
               >
@@ -59,7 +59,7 @@
               </i>
               <i
                 v-if="currentTag.imageTextInfo.imageList.length > 1"
-                class="iconfont icon-material_preview_next1 hover-tips append-splitter"
+                class="iconfont image-icon icon-material_preview_next1 hover-tips append-splitter"
                 :class="{
                   disabled:
                     currentIndex ===
@@ -75,7 +75,7 @@
             <div class="right">
               <i
                 :class="{ disabled: scaleRate >= 5 }"
-                class="iconfont icon-material_preview_enlarge hover-tips"
+                class="iconfont image-icon icon-material_preview_enlarge hover-tips"
                 @click="onClickZoomIn()"
               >
                 <div>
@@ -85,7 +85,7 @@
 
               <i
                 :class="{ disabled: scaleRate <= 0.5 }"
-                class="iconfont icon-material_preview_narrow hover-tips"
+                class="iconfont image-icon icon-material_preview_narrow hover-tips"
                 @click="onClickZoomOut()"
               >
                 <div>
@@ -95,7 +95,7 @@
 
               <i
                 v-if="canFullScreen && objectFit === 'scale-down'"
-                class="iconfont icon-material_preview_full_screen hover-tips"
+                class="iconfont image-icon icon-material_preview_full_screen hover-tips"
                 @click="onClickFullScreen()"
               >
                 <div>
@@ -105,7 +105,7 @@
 
               <i
                 v-if="canFullScreen && objectFit === 'contain'"
-                class="iconfont icon-material_preview_drop_out hover-tips"
+                class="iconfont image-icon icon-material_preview_drop_out hover-tips"
                 @click="onClickCancelFullScreen()"
               >
                 <div>
@@ -409,13 +409,12 @@ function handlePageRender(_, el) {
     flex-direction: row;
     z-index: 10000;
   }
-  .iconfont {
+  .image-icon {
     cursor: pointer;
     color: white;
     margin: 0 12px;
     font-size: 22px;
-    // width: 24px;
-    // height: 24px;
+
 
     &.disabled {
       opacity: 0.5;
@@ -494,7 +493,7 @@ function handlePageRender(_, el) {
     display: flex;
     justify-content: center;
     align-items: center;
-    .iconfont {
+    .image-icon {
       margin-left: 0;
     }
     .timeline {

packages/qjkankan-view/src/components/assembly/Tags/metas/metas-pdf.vue

@@ -1,46 +1,48 @@
 <template>
   <div class="pdfcon">
-    <iframe :src="`https://ossxiaoan.4dage.com/pdfjs/web/viewer.html?file=${currentTag.pdfInfo.url}`" frameborder="0" height="100%" width="100%" allowfullscreen></iframe>
+    <div class="hotspot-pc-title">
+      <i class="iconfont icon-icon_pdf" />
+      {{ currentTag.hotspotTitle }}
+    </div>
+    <iframe
+      :src="`https://ossxiaoan.4dage.com/pdfjs/web/viewer.html?file=${currentTag.pdfInfo.url}`"
+      frameborder="0"
+      height="100%"
+      width="100%"
+      allowfullscreen
+    ></iframe>
   </div>
 </template>
 
 <script setup>
-import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
+import {
+  reactive,
+  defineEmits,
+  onBeforeMount,
+  onMounted,
+  ref,
+  watchEffect,
+  computed,
+  watch,
+  nextTick,
+} from "vue";
 import { useStore } from "vuex";
 const store = useStore();
 
-const currentTag = computed(() => store.getters['tags/currentTag'])
-  
+const currentTag = computed(() => store.getters["tags/currentTag"]);
 </script>
 
 <style lang="scss" scoped>
-.pdfcon{
+.pdfcon {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   width: 100%;
-  >iframe{
+  > iframe {
+    margin-top: 20px;
     width: 90%;
     height: 86%;
   }
-  .title{
-    position: absolute;
-    left: 20px;
-    top: 20px;
-    height: 36px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 16px;
-    background: rgba(0,0,0,0.6);
-    border-radius: 20px;
-    color: #fff;
-    font-size: 14px;
-    z-index: 999;
-    >i{
-      margin-right: 4px;
-    }
-  }
 }
-</style>
+</style>

packages/qjkankan-view/src/components/assembly/Tags/metas/metas-text.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="txtcon">
-    <div class="title">
+    <div class="hotspot-pc-title">
       <i class="iconfont icon-material_text"/>
       {{currentTag.hotspotTitle}} 
     </div>

packages/qjkankan-view/src/components/assembly/Tags/metas/metas-video.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="videocon">
-    <div class="title">
-      <i class="iconfont icon-material_video title-icon"/>
+    <div class="hotspot-pc-title">
+      <i class="iconfont icon-material_video"/>
       {{currentTag.hotspotTitle}}
     </div>
     <video controls autoplay :src="currentTag.video.ossPath"></video>