update

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

@@ -2,7 +2,7 @@
   <div class="table-select" :class="isDarkTheme ? '' : 'bright'">
     <span class="title">{{ title }}</span>
     <div class="close-btn">
-      <i class="iconfont icon-pop-ups_shut-down" @click="$emit('cancle')"></i>
+      <i class="iconfont icon-close" @click="$emit('cancle')"></i>
     </div>
 
     <div class="material-tab">

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

@@ -1,7 +1,7 @@
 <template>
   <div class="table-select">
     <span class="title">{{$i18n.t(`gather.select_material`)}}</span>
-    <div class="close-btn"><i class="iconfont icon-pop-ups_shut-down" @click="$emit('cancle')"></i></div>
+    <div class="close-btn"><i class="iconfont icon-close" @click="$emit('cancle')"></i></div>
 
     <div class="material-tab">
       <a class="material-tab-item" @click.prevent="currentMaterialType = 'pano'">

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

@@ -2,7 +2,7 @@
   <div class="img-wrapper">
     <img :src="realImage || defaultImgSrc" alt="" />
     <div v-if="realImage" class="cancel-btn-background" @click="handleCancel">
-      <i class="iconfont icon-pop-ups_shut-down"></i>
+      <i class="iconfont icon-close"></i>
     </div>
   </div>
 </template>

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

@@ -1,159 +1,163 @@
 /**
  * krpano 1.20 全景hotspot统一schema
  *
- * 
+ *
  *  */
 
-import config from '../config'
+import config from "../config";
 
 const initState = {
-    id: "",
-    title: "",
-    type: 0, // 热点大类型 
-    ath: 0,
-    atv: 0,
-    link: "",
-    icon: "",
-    visible: true,
-    size: 0,
-    style: {
-        fontSize: 12,
-        position: "top",
-        isHover: false,
-        borderColor: "",
-        fillColor: "",
-        textColor: "",
-        isShowLine: "",
-        isTextWrap: "",
-        lineDirection: "",
-        textDirection: "",
-        textNumPerLine: "",
-        duration: 0,
-        frameNumber: 0,
-        frameWidth: 0,
-    }
-}
+  id: "",
+  title: "",
+  type: 0, // 热点大类型
+  ath: 0,
+  atv: 0,
+  link: "",
+  icon: "",
+  visible: true,
+  size: 0,
+  style: {
+    fontSize: 12,
+    position: "top",
+    isHover: false,
+    borderColor: "",
+    fillColor: "",
+    textColor: "",
+    isShowLine: "",
+    isTextWrap: "",
+    lineDirection: "",
+    textDirection: "",
+    textNumPerLine: "",
+    duration: 0,
+    frameNumber: 0,
+    frameWidth: 0,
+  },
+};
 //基本样式汇总
 const convertBaseStyle = (dest, origin) => {
-    if (dest) {
-        // normal
+  if (dest) {
+    // normal
 
-        dest.style.fontSize = origin.fontSize
-        dest.style.position = origin.titlePosition
-        // 兼容旧数据
+    dest.style.fontSize = origin.fontSize;
+    dest.style.position = origin.titlePosition;
+    // 兼容旧数据
 
-        if ('visible' in origin && typeof origin.visible == "boolean") {
-            dest.visible = origin.visible ? 0 : 1
-            origin.titleDisplayMode = origin.visible ? 'always' : 'never'
-            delete origin.visible
-            dest.style.position = "top"
-        }
-        if (origin && origin.titleDisplayMode == "always") {
-            dest.visible = 0
-        }
-        if (origin && origin.titleDisplayMode == "never") {
-            dest.visible = 1
-        }
-        if (origin && origin.titleDisplayMode == "hover") {
-            dest.visible = 2
-        }
-
-        dest.style.borderColor = '';
-        dest.style.fillColor = 'rgba(0,0,0,0.8)';
-        dest.style.textColor = 'rgba(255,255,255,1)';
+    if ("visible" in origin && typeof origin.visible == "boolean") {
+      dest.visible = origin.visible ? 0 : 1;
+      origin.titleDisplayMode = origin.visible ? "always" : "never";
+      delete origin.visible;
+      dest.style.position = "top";
+    }
+    if (origin && origin.titleDisplayMode == "always") {
+      dest.visible = 0;
     }
-    //custom
-    if (origin && origin.hotspotIconType === 'serial_frame') {
-        dest.style.duration = origin.serialFrameInfo.duration
-        dest.style.frameNumber = origin.serialFrameInfo.frameNumber
-        dest.style.frameWidth = origin.serialFrameInfo.frameWidth
+    if (origin && origin.titleDisplayMode == "never") {
+      dest.visible = 1;
     }
-    //custom
-    if (origin && origin.hotspotIconType === 'personalized_tag') {
-        dest.style.borderColor = origin.personalizedTagInfo.borderColor;
-        dest.style.fillColor = origin.personalizedTagInfo.fillColor
-        dest.style.isTextWrap = origin.personalizedTagInfo.isTextWrap
-        dest.style.lineDirection = origin.personalizedTagInfo.lineDirection
-        dest.style.textColor = origin.personalizedTagInfo.textColor
-        dest.style.textDirection = origin.personalizedTagInfo.textDirection
-        dest.style.textNumPerLine = origin.personalizedTagInfo.textNumPerLine
-        dest.style.isShowLine = origin.personalizedTagInfo.isShowLine
+    if (origin && origin.titleDisplayMode == "hover") {
+      dest.visible = 2;
     }
 
-}
+    dest.style.borderColor = "";
+    dest.style.fillColor = "rgba(0,0,0,0.8)";
+    dest.style.textColor = "rgba(255,255,255,1)";
+  }
+  //custom
+  if (origin && origin.hotspotIconType === "serial_frame") {
+    dest.style.duration = origin.serialFrameInfo.duration;
+    dest.style.frameNumber = origin.serialFrameInfo.frameNumber;
+    dest.style.frameWidth = origin.serialFrameInfo.frameWidth;
+  }
+  //custom
+  if (origin && origin.hotspotIconType === "personalized_tag") {
+    dest.style.borderColor = origin.personalizedTagInfo.borderColor;
+    dest.style.fillColor = origin.personalizedTagInfo.fillColor;
+    dest.style.isTextWrap = origin.personalizedTagInfo.isTextWrap;
+    dest.style.lineDirection = origin.personalizedTagInfo.lineDirection;
+    dest.style.textColor = origin.personalizedTagInfo.textColor;
+    dest.style.textDirection = origin.personalizedTagInfo.textDirection;
+    dest.style.textNumPerLine = origin.personalizedTagInfo.textNumPerLine;
+    dest.style.isShowLine = origin.personalizedTagInfo.isShowLine;
+  }
+};
 
 const coverSystemIconPart = (origin) => {
-    const duplicate = structuredClone(initState)
-    duplicate.id = origin.name;
-    duplicate.title = origin.hotspotTitle;
-    duplicate.ath = origin.ath;
-    duplicate.atv = origin.atv;
-    duplicate.type = 0;
-    duplicate.icon = origin.img || '';
-    duplicate.link = origin.link || '';
-    duplicate.size = origin.size;
-    convertBaseStyle(duplicate, origin)
-    return duplicate;
-}
+  const duplicate = structuredClone(initState);
+  duplicate.id = origin.name;
+  duplicate.title = origin.hotspotTitle;
+  duplicate.ath = origin.ath;
+  duplicate.atv = origin.atv;
+  duplicate.type = 0;
+  duplicate.icon = origin.img || "";
+  duplicate.link = origin.link || "";
+  duplicate.size = origin.size;
+  convertBaseStyle(duplicate, origin);
+  return duplicate;
+};
 
 const coverImageconPart = (origin) => {
-    const defaultImage = config.getStaticResource('/panoassets/images/hotspot/image_place_holder.png');
-    const duplicate = structuredClone(initState)
-    duplicate.id = origin.name;
-    duplicate.title = origin.hotspotTitle;
-    duplicate.ath = origin.ath;
-    duplicate.atv = origin.atv;
-    duplicate.type = 1;
-    duplicate.icon = origin.customIconInfo.img || defaultImage;
-    duplicate.link = origin.link || '';
-    duplicate.size = origin.size;
-    convertBaseStyle(duplicate, origin)
-    return duplicate;
-}
+  const defaultImage = config.getStaticResource(
+    "/panoassets/images/hotspot/image_place_holder.png"
+  );
+  const duplicate = structuredClone(initState);
+  duplicate.id = origin.name;
+  duplicate.title = origin.hotspotTitle;
+  duplicate.ath = origin.ath;
+  duplicate.atv = origin.atv;
+  duplicate.type = 1;
+  duplicate.icon = origin.customIconInfo.img || defaultImage;
+  duplicate.link = origin.link || "";
+  duplicate.size = origin.size;
+  convertBaseStyle(duplicate, origin);
+  return duplicate;
+};
 const coverSerialFrame = (origin) => {
-    const duplicate = structuredClone(initState);
-    const defaultImage = config.getStaticResource('/panoassets/images/hotspot/image_place_holder.png');
-    // console.log('defaultImage', defaultImage);
-    duplicate.id = origin.name;
-    duplicate.title = origin.hotspotTitle;
-    duplicate.ath = origin.ath;
-    duplicate.atv = origin.atv;
-    duplicate.type = 2;
-    duplicate.icon = origin.serialFrameInfo.img || defaultImage;
-    duplicate.link = origin.link || '';
-    duplicate.size = origin.size;
-    convertBaseStyle(duplicate, origin)
-    return duplicate;
-}
+  const duplicate = structuredClone(initState);
+  const defaultImage = config.getStaticResource(
+    "/panoassets/images/hotspot/image_place_holder.png"
+  );
+  // console.log('defaultImage', defaultImage);
+  duplicate.id = origin.name;
+  duplicate.title = origin.hotspotTitle;
+  duplicate.ath = origin.ath;
+  duplicate.atv = origin.atv;
+  duplicate.type = 2;
 
+  duplicate.icon =
+    origin.serialFrameInfo.img +
+      "?x-oss-process=image/resize,w_128,q_80" ||
+    defaultImage;
+  duplicate.link = origin.link || "";
+  duplicate.size = origin.size;
+  convertBaseStyle(duplicate, origin);
+  return duplicate;
+};
 
 const coverpersonalizedTag = (origin) => {
-    const duplicate = structuredClone(initState);
-    duplicate.id = origin.name;
-    duplicate.title = origin.hotspotTitle;
-    duplicate.ath = origin.ath;
-    duplicate.atv = origin.atv;
-    duplicate.type = 3;
-    duplicate.link = origin.link || '';
-    duplicate.size = origin.size;
-    convertBaseStyle(duplicate, origin)
-    return duplicate;
-}
-
+  const duplicate = structuredClone(initState);
+  duplicate.id = origin.name;
+  duplicate.title = origin.hotspotTitle;
+  duplicate.ath = origin.ath;
+  duplicate.atv = origin.atv;
+  duplicate.type = 3;
+  duplicate.link = origin.link || "";
+  duplicate.size = origin.size;
+  convertBaseStyle(duplicate, origin);
+  return duplicate;
+};
 
 export const convertJQHotspot = (origin) => {
-    const type = origin.hotspotIconType
-    switch (type) {
-        case 'system_icon':
-            return coverSystemIconPart(origin);
-        case 'custom_image':
-            return coverImageconPart(origin);
-        case 'serial_frame':
-            return coverSerialFrame(origin);
-        case 'personalized_tag':
-            return coverpersonalizedTag(origin);
-        default:
-            return coverSystemIconPart(origin);
-    }
-}
-
+  const type = origin.hotspotIconType;
+  switch (type) {
+    case "system_icon":
+      return coverSystemIconPart(origin);
+    case "custom_image":
+      return coverImageconPart(origin);
+    case "serial_frame":
+      return coverSerialFrame(origin);
+    case "personalized_tag":
+      return coverpersonalizedTag(origin);
+    default:
+      return coverSystemIconPart(origin);
+  }
+};

packages/qjkankan-editor/src/framework/show/component/swp.vue

@@ -1,19 +1,34 @@
 <template>
-    <div class="clip-scroller" ref="sw"  v-swiper:mySwiper="swiperOptions">
-      <ul class="pic-list swiper-wrapper"  v-if="scenes.length > 0" ref="pic">
-        <li class="swiper-slide" :title="item.sceneTitle" @click="handleVR(item)" v-for="(item, i) in scenes" :key="i">
-          <div :class="{ active: selected.sceneCode == item.sceneCode }">
-            <img :src="item.icon + `?${Math.random()}`" alt="" />
-            <i class="iconfont iconedit_type_3d" :class="{ iconedit_type_panorama: item.type !== '4dkk' }"></i>
-            <rollName :offset="20" :active="selected.sceneCode == item.sceneCode" class="pic-name" :myref="'subw' + item.id" :name="item.sceneTitle" />
-          </div>
-        </li>
-      </ul>
-    </div>
+  <div class="clip-scroller" ref="sw" v-swiper:mySwiper="swiperOptions">
+    <ul class="pic-list swiper-wrapper" v-if="scenes.length > 0" ref="pic">
+      <li
+        class="swiper-slide"
+        :title="item.sceneTitle"
+        @click="handleVR(item)"
+        v-for="(item, i) in scenes"
+        :key="i"
+      >
+        <div :class="{ active: selected.sceneCode == item.sceneCode }">
+          <img :src="item.icon + `?${Math.random()}`" alt="" />
+          <i
+            class="iconfont iconedit_type_3d"
+            :class="{ iconedit_type_panorama: item.type !== '4dkk' }"
+          ></i>
+          <rollName
+            :offset="20"
+            :active="selected.sceneCode == item.sceneCode"
+            class="pic-name"
+            :myref="'subw' + item.id"
+            :name="item.sceneTitle"
+          />
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
 export default {
-  props:[]
-}
-</script>
+  props: [],
+};
+</script>

packages/qjkankan-editor/src/views/base/coverBase.vue

@@ -85,7 +85,11 @@ pc端视频位置 videoPcLoc
       <!-- 封面类型选择下拉框 -->
       <div class="cover_pull_tit">{{ cover_pull_tit }}</div>
 
-      <Select v-model="info.coverInfo.coverSelect" class="base-select">
+      <Select
+        v-model="info.coverInfo.coverSelect"
+        class="base-select"
+        placement="bottom"
+      >
         <Option
           v-for="item in selectList"
           :key="item.type"
@@ -198,7 +202,11 @@ pc端视频位置 videoPcLoc
         <!-- 图片背景设置 -->
         <div class="coverImgBacBox">
           <div class="tit">{{ $i18n.t(`edit_settings.coverImgBacTit`) }}</div>
-          <Select v-model="info.coverInfo.coverImgBac" class="base-select">
+          <Select
+            v-model="info.coverInfo.coverImgBac"
+            class="base-select"
+            placement="bottom"
+          >
             <Option
               v-for="item in coverImgBacList"
               :key="item.type"
@@ -473,6 +481,7 @@ pc端视频位置 videoPcLoc
           {{ $i18n.t(`edit_settings.coverImageOrder`) }}
         </div>
         <Select
+          placement="bottom"
           class="base-select"
           v-model="info.coverInfo.coverImageOrder"
           v-show="info.coverInfo.coverSelect === 'videoAndImg'"
@@ -801,6 +810,7 @@ export default {
   }
   .cover_pull {
     margin-top: 10px;
+    margin-bottom: 50px;
     .cover_pull_tit {
       margin-bottom: 10px;
       font-size: 14px;
@@ -971,16 +981,15 @@ export default {
 }
 </style>
 <style lang="scss">
-.el-select .el-input .el-select__caret{
+.el-select .el-input .el-select__caret {
   line-height: 36px;
 }
 .el-select-dropdown {
-  &.el-popper[x-placement^=bottom]{
+  &.el-popper[x-placement^="bottom"] {
     margin-top: -2px;
   }
-  .popper__arrow{
+  .popper__arrow {
     display: none;
   }
-
 }
 </style>

packages/qjkankan-editor/src/views/hotspot/EditPanel.vue

@@ -8,7 +8,7 @@
     <div class="hots-panel" v-show="show">
       <div class="ui-between header">
         <span>{{ editTitle }}{{ $i18n.t("hotspot.hotspot_name") }}</span>
-        <i class="iconfont icon-close" @click="realCancel"></i>
+        <i class="iconfont icon-close" @click="cancel"></i>
       </div>
 
       <div class="content" ref="content">
@@ -50,15 +50,7 @@
           <div class="remark-highlight">
             {{ $i18n.t("hotspot.hotspot_title") }}
           </div>
-          <div class="title-input-wrapper">
-            <input
-              v-model.trim="hotspot.hotspotTitle"
-              type="text"
-              maxlength="50"
-              :placeholder="$i18n.t('hotspot.title_placeholder')"
-            />
-            <span class="count">{{ hotspot.hotspotTitle.length }}/50</span>
-          </div>
+
           <div class="hotspot-show-wrapper">
             <div class="remark">
               {{ $i18n.t("hotspot.title_show_mode") }}
@@ -69,6 +61,16 @@
             ></Switcher>
           </div>
 
+          <div class="title-input-wrapper">
+            <input
+              v-model.trim="hotspot.hotspotTitle"
+              type="text"
+              maxlength="50"
+              :placeholder="$i18n.t('hotspot.title_placeholder')"
+            />
+            <span class="count">{{ hotspot.hotspotTitle.length }}/50</span>
+          </div>
+
           <!-- <TabbarSwitcher
             class="display-mode-selector"
             :tabList="[
@@ -179,7 +181,7 @@
         <button
           class="ui-button deepcancel"
           :class="{ disable: false }"
-          @click="cancel"
+          @click="realCancel"
         >
           {{ $i18n.t("hotspot.cancel") }}
         </button>

packages/qjkankan-editor/src/views/material/popup/panoImagePreviewer.vue

@@ -17,7 +17,7 @@
         @click="onClickClose"
       >
         <i
-          class="iconfont icon-pop-ups_shut-down close-btn--full-screen__icon"
+          class="iconfont icon-close close-btn--full-screen__icon"
         />
       </div>
       <iframe

packages/qjkankan-editor/src/views/material/popup/rename.vue

@@ -2,19 +2,33 @@
   <popup>
     <div class="ui-message ui-message-confirm" style="width: 400px">
       <div class="ui-message-header">
-        <span>{{$i18n.t(`material.components.rename_material`)}}</span>
+        <span>{{ $i18n.t(`material.components.rename_material`) }}</span>
         <span @click="$emit('close')">
           <i class="iconfont icon-close"></i>
         </span>
       </div>
-      <input class="ui-input" type="text" maxlength="50" :placeholder="$i18n.t(`edit_settings.please_input`)" @input="emojistr" v-model="key" />
+      <input
+        class="ui-input"
+        type="text"
+        maxlength="50"
+        :placeholder="$i18n.t(`edit_settings.please_input`)"
+        @input="emojistr"
+        v-model="key"
+      />
       <div class="ui-message-footer">
         <div class="btn">
-          <button @click="$emit('close')" class="ui-button ui-button-rect cancel">
-            {{$i18n.t(`gather.cancel`)}}
+          <button
+            @click="$emit('close')"
+            class="ui-button ui-button-rect cancel"
+          >
+            {{ $i18n.t(`gather.cancel`) }}
           </button>
-          <button @click="emitname" class="ui-button ui-button-rect submit" :class="{disable:!key}">
-            {{$i18n.t(`gather.comfirm`)}}
+          <button
+            @click="emitname"
+            class="ui-button ui-button-rect submit"
+            :class="{ disable: !key }"
+          >
+            {{ $i18n.t(`gather.comfirm`) }}
           </button>
         </div>
       </div>
@@ -26,38 +40,41 @@
 import Popup from "@/components/shared/popup";
 
 export default {
-  props: ['item'],
+  props: ["item"],
   components: {
-    Popup
+    Popup,
   },
   watch: {
     show() {
-      this.key = this.item.name
-    }
+      this.key = this.item.name;
+    },
   },
   data() {
     return {
-      key: this.item.name
-    }
+      key: this.item.name,
+    };
   },
   methods: {
     emojistr() {
-      this.key = this.key.replace(/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g, function (char) {
-        if (char.length === 2) {
-          return ""
-        } else {
-          return char;
+      this.key = this.key.replace(
+        /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g,
+        function (char) {
+          if (char.length === 2) {
+            return "";
+          } else {
+            return char;
+          }
         }
-      });
+      );
     },
     emitname() {
       if (!this.key.trim()) {
         return this.$alert({ content: "请输入名字" });
       }
-      this.$emit('rename', String(this.key).trim())
-    }
-  }
-}
+      this.$emit("rename", String(this.key).trim());
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -77,7 +94,7 @@ export default {
     color: #323233;
     font-size: 14px;
     border-radius: 4px;
-    border: 1px solid #EBEDF0;
+    border: 1px solid #ebedf0;
 
     &:focus {
       border: 1px solid @color;
@@ -92,14 +109,13 @@ export default {
       justify-content: flex-end;
 
       .ui-button {
-        max-width: 104px
+        max-width: 104px;
       }
     }
-
   }
 }
 </style>
 
 <style lang="less" scoped>
-@import '../style.less';
-</style>
+@import "../style.less";
+</style>

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

@@ -1,44 +1,58 @@
 <template>
   <div class="pdfcon">
-    <iframe :src="`https://ossxiaoan.4dage.com/pdfjs/web/viewer.html?file=${currentTag.pdfInfo.url}`" frameborder="0" allowfullscreen></iframe>
+    <iframe
+      :src="`https://ossxiaoan.4dage.com/pdfjs/web/viewer.html?file=${currentTag.pdfInfo.url}`"
+      frameborder="0"
+      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;
+  align-items: flex-start;
   justify-content: center;
   height: 100%;
   width: 100%;
-  >iframe{
+  > iframe {
     width: 90%;
+    margin-top: 20px;
     height: 86%;
   }
-  .title{
+  .title {
     position: absolute;
     left: 20px;
     top: 20px;
     height: 36px;
     line-height: 36px;
     padding: 0 30px;
-    background: rgba(0,0,0,0.6);
+    background: rgba(0, 0, 0, 0.6);
     border-radius: 20px;
     color: #fff;
     font-size: 14px;
     z-index: 999;
-    >i{
+    > i {
       margin-right: 4px;
     }
   }
 }
-</style>
+</style>

packages/qjkankan-view/src/sdk/QJKanKan/modules/hotspot.js

@@ -1,157 +1,154 @@
 /**
  * krpano 1.20 全景hotspot统一schema
  *
- * 
+ *
  *  */
 // import config from '../config'
 
-console.log('支持-structuredClone', 'structuredClone' in globalThis)
+console.log("支持-structuredClone", "structuredClone" in globalThis);
 
 const initState = {
-    id: "",
-    title: "",
-    type: 0, // 热点大类型 
-    ath: 0,
-    atv: 0,
-    link: "",
-    icon: "",
-    visible: true,
-    size: 0,
-    style: {
-        fontSize: 12,
-        position: "top",
-        isHover: false,
-        borderColor: "",
-        fillColor: "",
-        textColor: "",
-        isShowLine: "",
-        isTextWrap: "",
-        lineDirection: "",
-        textDirection: "",
-        textNumPerLine: "",
-        duration: 0,
-        frameNumber: 0,
-        frameWidth: 0,
-    }
-}
+  id: "",
+  title: "",
+  type: 0, // 热点大类型
+  ath: 0,
+  atv: 0,
+  link: "",
+  icon: "",
+  visible: true,
+  size: 0,
+  style: {
+    fontSize: 12,
+    position: "top",
+    isHover: false,
+    borderColor: "",
+    fillColor: "",
+    textColor: "",
+    isShowLine: "",
+    isTextWrap: "",
+    lineDirection: "",
+    textDirection: "",
+    textNumPerLine: "",
+    duration: 0,
+    frameNumber: 0,
+    frameWidth: 0,
+  },
+};
 //基本样式汇总
 const convertBaseStyle = (dest, origin) => {
-    if (dest) {
-        // normal
-        dest.style.fontSize = origin.fontSize
-        dest.style.position = origin.titlePosition
-
-        if (origin && origin.titleDisplayMode == "always") {
-            dest.visible = 0
-        }
-        if (origin && origin.titleDisplayMode == "never") {
-            dest.visible = 1
-        }
-        if (origin && origin.titleDisplayMode == "hover") {
-            dest.visible = 2
-        }
-        if ('visible' in origin && typeof origin.visible == "boolean") {
-            dest.visible = origin.visible ? 0 : 1
-            dest.style.position = "top"
-        }
-        dest.style.borderColor = '';
-        dest.style.fillColor = 'rgba(0,0,0,0.8)';
-        dest.style.textColor = 'rgba(255,255,255,1)';
+  if (dest) {
+    // normal
+    dest.style.fontSize = origin.fontSize;
+    dest.style.position = origin.titlePosition;
 
+    if (origin && origin.titleDisplayMode == "always") {
+      dest.visible = 0;
     }
-    //custom
-    if (origin && origin.hotspotIconType === 'serial_frame') {
-        dest.style.duration = origin.serialFrameInfo.duration
-        dest.style.frameNumber = origin.serialFrameInfo.frameNumber
-        dest.style.frameWidth = origin.serialFrameInfo.frameWidth
+    if (origin && origin.titleDisplayMode == "never") {
+      dest.visible = 1;
     }
-    //custom
-    if (origin && origin.hotspotIconType === 'personalized_tag') {
-        dest.style.borderColor = origin.personalizedTagInfo.borderColor;
-        dest.style.fillColor = origin.personalizedTagInfo.fillColor
-        dest.style.isTextWrap = origin.personalizedTagInfo.isTextWrap
-        dest.style.lineDirection = origin.personalizedTagInfo.lineDirection
-        dest.style.textColor = origin.personalizedTagInfo.textColor
-        dest.style.textDirection = origin.personalizedTagInfo.textDirection
-        dest.style.textNumPerLine = origin.personalizedTagInfo.textNumPerLine
-        dest.style.isShowLine = origin.personalizedTagInfo.isShowLine
+    if (origin && origin.titleDisplayMode == "hover") {
+      dest.visible = 2;
     }
-
-}
+    if ("visible" in origin && typeof origin.visible == "boolean") {
+      dest.visible = origin.visible ? 0 : 1;
+      dest.style.position = "top";
+    }
+    dest.style.borderColor = "";
+    dest.style.fillColor = "rgba(0,0,0,0.8)";
+    dest.style.textColor = "rgba(255,255,255,1)";
+  }
+  //custom
+  if (origin && origin.hotspotIconType === "serial_frame") {
+    dest.style.duration = origin.serialFrameInfo.duration;
+    dest.style.frameNumber = origin.serialFrameInfo.frameNumber;
+    dest.style.frameWidth = origin.serialFrameInfo.frameWidth;
+  }
+  //custom
+  if (origin && origin.hotspotIconType === "personalized_tag") {
+    dest.style.borderColor = origin.personalizedTagInfo.borderColor;
+    dest.style.fillColor = origin.personalizedTagInfo.fillColor;
+    dest.style.isTextWrap = origin.personalizedTagInfo.isTextWrap;
+    dest.style.lineDirection = origin.personalizedTagInfo.lineDirection;
+    dest.style.textColor = origin.personalizedTagInfo.textColor;
+    dest.style.textDirection = origin.personalizedTagInfo.textDirection;
+    dest.style.textNumPerLine = origin.personalizedTagInfo.textNumPerLine;
+    dest.style.isShowLine = origin.personalizedTagInfo.isShowLine;
+  }
+};
 
 const coverSystemIconPart = (origin) => {
-    const duplicate = structuredClone(initState)
-    duplicate.id = origin.name;
-    duplicate.title = origin.hotspotTitle;
-    duplicate.ath = origin.ath;
-    duplicate.atv = origin.atv;
-    duplicate.type = 0;
-    duplicate.icon = origin.img || '';
-    duplicate.link = origin.link || '';
-    duplicate.size = origin.size;
-    convertBaseStyle(duplicate, origin)
-    return duplicate;
-}
+  const duplicate = structuredClone(initState);
+  duplicate.id = origin.name;
+  duplicate.title = origin.hotspotTitle;
+  duplicate.ath = origin.ath;
+  duplicate.atv = origin.atv;
+  duplicate.type = 0;
+  duplicate.icon = origin.img || "";
+  duplicate.link = origin.link || "";
+  duplicate.size = origin.size;
+  convertBaseStyle(duplicate, origin);
+  return duplicate;
+};
 
 const coverImageconPart = (origin) => {
-    // const defaultImage = config.getStaticResource('/panoassets/images/hotspot/image_place_holder.png');
-    const duplicate = structuredClone(initState)
-    duplicate.id = origin.name;
-    duplicate.title = origin.hotspotTitle;
-    duplicate.ath = origin.ath;
-    duplicate.atv = origin.atv;
-    duplicate.type = 1;
-    duplicate.icon = origin.customIconInfo.img || '';
-    duplicate.link = origin.link || '';
-    duplicate.size = origin.size;
-    convertBaseStyle(duplicate, origin)
-    return duplicate;
-}
+  // const defaultImage = config.getStaticResource('/panoassets/images/hotspot/image_place_holder.png');
+  const duplicate = structuredClone(initState);
+  duplicate.id = origin.name;
+  duplicate.title = origin.hotspotTitle;
+  duplicate.ath = origin.ath;
+  duplicate.atv = origin.atv;
+  duplicate.type = 1;
+  duplicate.icon = origin.customIconInfo.img || "";
+  duplicate.link = origin.link || "";
+  duplicate.size = origin.size;
+  convertBaseStyle(duplicate, origin);
+  return duplicate;
+};
 const coverSerialFrame = (origin) => {
-    const duplicate = structuredClone(initState);
-    // const defaultImage = config.getStaticResource('/panoassets/images/hotspot/image_place_holder.png');
-    // console.log('defaultImage', defaultImage);
-    duplicate.id = origin.name;
-    duplicate.title = origin.hotspotTitle;
-    duplicate.ath = origin.ath;
-    duplicate.atv = origin.atv;
-    duplicate.type = 2;
-    duplicate.icon = origin.serialFrameInfo.img || '';
-    duplicate.link = origin.link || '';
-    duplicate.size = origin.size;
+  const duplicate = structuredClone(initState);
+  // const defaultImage = config.getStaticResource('/panoassets/images/hotspot/image_place_holder.png');
+  // console.log('defaultImage', defaultImage);
+  duplicate.id = origin.name;
+  duplicate.title = origin.hotspotTitle;
+  duplicate.ath = origin.ath;
+  duplicate.atv = origin.atv;
+  duplicate.type = 2;
+  duplicate.icon =
+    origin.serialFrameInfo.img + "?x-oss-process=image/resize,w_128,q_80" || "";
 
-    convertBaseStyle(duplicate, origin)
-    return duplicate;
-}
+  duplicate.link = origin.link || "";
+  duplicate.size = origin.size;
 
+  convertBaseStyle(duplicate, origin);
+  return duplicate;
+};
 
 const coverpersonalizedTag = (origin) => {
-    const duplicate = structuredClone(initState);
-    duplicate.id = origin.name;
-    duplicate.title = origin.hotspotTitle;
-    duplicate.ath = origin.ath;
-    duplicate.atv = origin.atv;
-    duplicate.type = 3;
-    duplicate.link = origin.link || '';
-    duplicate.size = origin.size;
-    convertBaseStyle(duplicate, origin)
-    return duplicate;
-}
-
+  const duplicate = structuredClone(initState);
+  duplicate.id = origin.name;
+  duplicate.title = origin.hotspotTitle;
+  duplicate.ath = origin.ath;
+  duplicate.atv = origin.atv;
+  duplicate.type = 3;
+  duplicate.link = origin.link || "";
+  duplicate.size = origin.size;
+  convertBaseStyle(duplicate, origin);
+  return duplicate;
+};
 
 export const convertJQHotspot = (origin) => {
-    const type = origin.hotspotIconType
-    switch (type) {
-        case 'system_icon':
-            return coverSystemIconPart(origin);
-        case 'custom_image':
-            return coverImageconPart(origin);
-        case 'serial_frame':
-            return coverSerialFrame(origin);
-        case 'personalized_tag':
-            return coverpersonalizedTag(origin);
-        default:
-            return coverSystemIconPart(origin);
-    }
-}
-
+  const type = origin.hotspotIconType;
+  switch (type) {
+    case "system_icon":
+      return coverSystemIconPart(origin);
+    case "custom_image":
+      return coverImageconPart(origin);
+    case "serial_frame":
+      return coverSerialFrame(origin);
+    case "personalized_tag":
+      return coverpersonalizedTag(origin);
+    default:
+      return coverSystemIconPart(origin);
+  }
+};