update

packages/qjkankan-editor/.env.testprod

@@ -7,5 +7,5 @@ VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
 VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
 VUE_APP_ORIGIN=
 VUE_APP_URL_FILL=/qjkankan
-VUE_APP_DEBBUG_FLAG=0612-01
+VUE_APP_DEBBUG_FLAG=0614-01
 VUE_APP_DEBBUG_NOTIFY=0

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

@@ -797,7 +797,7 @@ export default {
     }
   }
   .hotspot-show-wrapper {
-    padding: 25px 0 10px 0;
+    padding: 16px 0 10px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;

packages/qjkankan-editor/src/views/hotspot/hotspotType/scene.vue

@@ -8,7 +8,7 @@
     </div>
     <div v-else class="scene-info">
       <div class="image-wrap">
-        <i class="iconfont icon-scene-type" :class="selected.type === '4dkk' ? 'iconedit_type_3d' : 'iconedit_type_panorama'"></i>
+        <i class="iconfont icon-editor_panoramic" :class="selected.type === '4dkk' ? 'iconedit_type_3d' : 'iconedit_type_panorama'"></i>
         <img class="thumb" :src=" selected.icon || $thumb" alt="">
         <button class="delete-btn" @click="del">
           <img class="normal" src="@/assets/images/icons/close01_normal@2x.png" alt="">
@@ -93,7 +93,7 @@ export default {
       width: 120px;
       height: 120px;
       flex: 0 0 auto;
-      .icon-scene-type {
+      .icon-editor_panoramic {
         position: absolute;
         top: 10px;
         left: 10px;

packages/qjkankan-view/.env.testprod

@@ -7,5 +7,5 @@ VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
 VUE_APP_URL_FILL=/qjkankan
 # 接口请求地址
 VUE_APP_APIS_URL=https://test.4dkankan.com/
-VUE_APP_DEBBUG_FLAG=0608-01
+VUE_APP_DEBBUG_FLAG=0614-01
 VUE_APP_DEBBUG_NOTIFY=0

packages/qjkankan-view/public/show.html

@@ -29,7 +29,11 @@
 
     <link
       rel="stylesheet"
-      href="//at.alicdn.com/t/c/font_2625385_ksvtsfnbizb.css"
+      href="<%= VUE_APP_STATIC_DIR %>/lib/iconfontV1.2.0/iconfont.css"
+    />
+    <link
+      rel="stylesheet"
+      href="//at.alicdn.com/t/c/font_2625385_s2s00jmtgzp.css"
     />
 
     <link

packages/qjkankan-view/public/showMobile.html

@@ -11,8 +11,21 @@
     />
     <meta name="description" content="" />
     <meta name="cover" content="" />
+
     <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_s2s00jmtgzp.css"
+    />
+    <!-- <link
+      rel="stylesheet"
+      href="<%= VUE_APP_STATIC_DIR %>/lib/iconfont/iconfont.css"
+    /> -->
+    <!-- <link
+      rel="stylesheet"
       href="<%= VUE_APP_STATIC_DIR %>/lib/iconfont/iconfont.css"
     />
     <link
@@ -26,7 +39,7 @@
     <link
       rel="stylesheet"
       href="<%= VUE_APP_STATIC_DIR %>/lib/iconfontV1.2.0/iconfont.css"
-    />
+    /> -->
     <link
       rel="stylesheet"
       href="<%= VUE_APP_STATIC_DIR %>/lib/swiper/swiper-bundle.min.css"
@@ -45,7 +58,7 @@
     <!-- <script src="<%= VUE_APP_STATIC_DIR %>/lib/jssor/jssor.slider-28.1.0.min.js"></script> -->
     <script src="https://4dkk.4dage.com/v4-test/www/viewer/static/lib/vconsole.js"></script>
     <script>
-         var vConsole = new window.VConsole()
-  </script>
+      var vConsole = new window.VConsole();
+    </script>
   </body>
 </html>

packages/qjkankan-view/src/components/UIGather/list.vue

@@ -1,49 +1,124 @@
 <template>
-  <div class="bar-list"
-    v-if="show && !((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)"
-    :class="{ barshow: isShowScenesList }">
-    <div class="top-con"
-      :style="`width:${(Math.max(scenesListW, secondaryW) > 1150) ? '100%' : ((Math.max(scenesListW, secondaryW) + 120) + 'px')}`">
-      <div class="swiper-container" :style="`width:${scenesListW > 1150 ? '100%' : (scenesListW + 'px')}`" id="swScenes"
-        v-if="currentScenesList.length > 0">
+  <div
+    class="bar-list"
+    v-if="
+      show &&
+      !(
+        metadata.catalogRoot &&
+        metadata.catalogRoot.length == 1 &&
+        scenes.length == 1 &&
+        secondaryList.length == 1
+      )
+    "
+    :class="{ barshow: isShowScenesList }"
+  >
+    <div
+      class="top-con"
+      :style="`width:${
+        Math.max(scenesListW, secondaryW) > 1150
+          ? '100%'
+          : Math.max(scenesListW, secondaryW) + 120 + 'px'
+      }`"
+    >
+      <div
+        class="swiper-container"
+        :style="`width:${scenesListW > 1150 ? '100%' : scenesListW + 'px'}`"
+        id="swScenes"
+        v-if="currentScenesList.length > 0"
+      >
         <ul class="swiper-wrapper">
-          <li @click="tabCurrentScene(item)" class="swiper-slide" :class="{
-            active: currentScene.sceneCode == item.sceneCode,
-            loopspan: item.sceneTitle.length > spanlength && currentScene.id == item.id,
-          }" :style="{ backgroundImage: `url(${item.icon})` }" v-for="(item, i) in currentScenesList" :key="i">
-            <i class="iconfont " :class="item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'"></i>
+          <li
+            @click="tabCurrentScene(item)"
+            class="swiper-slide"
+            :class="{
+              active: currentScene.sceneCode == item.sceneCode,
+              loopspan:
+                item.sceneTitle.length > spanlength &&
+                currentScene.id == item.id,
+            }"
+            :style="{ backgroundImage: `url(${item.icon})` }"
+            v-for="(item, i) in currentScenesList"
+            :key="i"
+          >
+            <i
+              class="iconfont"
+              :class="
+                item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'
+              "
+            ></i>
             <div>
-              <span v-if="currentScene.id == item.id">{{ item.sceneTitle }}</span>
-              <span v-else>{{ item.sceneTitle.length > spanlength ? item.sceneTitle.slice(0, spanlength) :
-                  item.sceneTitle
+              <span v-if="currentScene.id == item.id">{{
+                item.sceneTitle
+              }}</span>
+              <span v-else>{{
+                item.sceneTitle.length > spanlength
+                  ? item.sceneTitle.slice(0, spanlength)
+                  : item.sceneTitle
               }}</span>
             </div>
           </li>
         </ul>
       </div>
 
-      <div class="swiper-container" id="swSecondary" :style="`width:${secondaryW}px`" v-if="secondaryList.length > 1">
+      <div
+        class="swiper-container"
+        id="swSecondary"
+        :style="`width:${secondaryW}px`"
+        v-if="secondaryList.length > 1"
+      >
         <ul class="swiper-wrapper">
-          <li class="swiper-slide" @click="tabSecondary(item)" :class="{
-            active: currentSecondary.id == item.id,
-            loopspan: fixTitle(item.name).length > spanlength && currentSecondary.id == item.id,
-          }" v-for="(item, i) in secondaryList" :key="i">
-            <span v-if="currentSecondary.id == item.id">{{ fixTitle(item.name) }}</span>
-            <span v-else>{{ fixTitle(item.name).length > spanlength ? fixTitle(item.name).slice(0, spanlength) : fixTitle(item.name) }}</span>
+          <li
+            class="swiper-slide"
+            @click="tabSecondary(item)"
+            :class="{
+              active: currentSecondary.id == item.id,
+              loopspan:
+                fixTitle(item.name).length > spanlength &&
+                currentSecondary.id == item.id,
+            }"
+            v-for="(item, i) in secondaryList"
+            :key="i"
+          >
+            <span v-if="currentSecondary.id == item.id">{{
+              fixTitle(item.name)
+            }}</span>
+            <span v-else>{{
+              fixTitle(item.name).length > spanlength
+                ? fixTitle(item.name).slice(0, spanlength)
+                : fixTitle(item.name)
+            }}</span>
           </li>
         </ul>
       </div>
     </div>
 
-    <div class="swiper-container" id="swcatalogRoot" :style="`width:${catalogRootW > innerW ? '100%' : (catalogRootW + 'px')}`"
-      v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1">
+    <div
+      class="swiper-container"
+      id="swcatalogRoot"
+      :style="`width:${catalogRootW > innerW ? '100%' : catalogRootW + 'px'}`"
+      v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1"
+    >
       <ul class="swiper-wrapper" v-if="metadata.catalogRoot.length > 1">
-        <li class="swiper-slide" :class="{
-          active: currentCatalogRoot.id == item.id,
-          loopspan: fixTitle(item.name).length > spanlength && currentCatalogRoot.id == item.id,
-        }" @click="tabRoot(item)" v-for="(item, i) in metadata.catalogRoot" :key="i">
-          <span v-if="currentCatalogRoot.id == item.id">{{ fixTitle(item.name) }}</span>
-          <span v-else>{{ fixTitle(item.name).length > spanlength ? fixTitle(item.name).slice(0, spanlength) : fixTitle(item.name) }}</span>
+        <li
+          class="swiper-slide"
+          :class="{
+            active: currentCatalogRoot.id == item.id,
+            loopspan:
+              fixTitle(item.name).length > spanlength &&
+              currentCatalogRoot.id == item.id,
+          }"
+          @click="tabRoot(item)"
+          v-for="(item, i) in metadata.catalogRoot"
+          :key="i"
+        >
+          <span v-if="currentCatalogRoot.id == item.id">{{
+            fixTitle(item.name)
+          }}</span>
+          <span v-else>{{
+            fixTitle(item.name).length > spanlength
+              ? fixTitle(item.name).slice(0, spanlength)
+              : fixTitle(item.name)
+          }}</span>
         </li>
       </ul>
     </div>
@@ -55,8 +130,8 @@ import { ref, watch, computed, onMounted, nextTick } from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
 
-import { useI18n, getLocale } from '@/i18n'
-const { t } = useI18n({ useScope: 'global' })
+import { useI18n, getLocale } from "@/i18n";
+const { t } = useI18n({ useScope: "global" });
 
 const store = useStore();
 
@@ -66,33 +141,52 @@ const metadata = computed(() => store.getters["scene/metadata"]);
 const scenes = computed(() => store.getters["scene/list"]);
 const currentScene = computed(() => store.getters["scene/currentScene"]);
 
-const currentCatalogRoot = computed(() => store.getters["scene/currentCatalogRoot"]);
-const currentSecondary = computed(() => store.getters["scene/currentSecondary"]);
+const currentCatalogRoot = computed(
+  () => store.getters["scene/currentCatalogRoot"]
+);
+const currentSecondary = computed(
+  () => store.getters["scene/currentSecondary"]
+);
 
 const secondaryList = computed(() => store.getters["scene/secondaryList"]);
 
-const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
+const isShowScenesList = computed(
+  () => store.getters["functions/isShowScenesList"]
+);
 
-const currentScenesList = computed(() => store.getters["scene/currentScenesList"]);
+const currentScenesList = computed(
+  () => store.getters["scene/currentScenesList"]
+);
 
 const show = ref(false);
 
-
 const swidth = ref({
-  "swcatalogRoot": 104,
-  "swSecondary": 84,
-  "swScenes": 72,
-})
-
-const scenesListW = computed(() => currentScenesList.value.length * (swidth.value['swScenes'] + 10) - 10)
-const secondaryW = computed(() => secondaryList.value.length * (swidth.value['swSecondary'] + 10) - 10)
-const catalogRootW = computed(() => metadata.value.catalogRoot.length * (swidth.value['swcatalogRoot'] + 10) - 10)
-const innerW = computed(() => 1150)
-
+  swcatalogRoot: 104,
+  swSecondary: 84,
+  swScenes: 72,
+});
 
+const scenesListW = computed(
+  () => currentScenesList.value.length * (swidth.value["swScenes"] + 10) - 10
+);
+const secondaryW = computed(
+  () => secondaryList.value.length * (swidth.value["swSecondary"] + 10) - 10
+);
+const catalogRootW = computed(
+  () =>
+    metadata.value.catalogRoot.length * (swidth.value["swcatalogRoot"] + 10) -
+    10
+);
+const innerW = computed(() => 1150);
 
 const tabCurrentScene = (data) => {
-  store.commit("scene/setCurrentScene", data);
+  console.log("tabCurrentScene", data.id, currentScene.value.id);
+  if (data.id !== currentScene.value.id) {
+    store.commit("scene/setCurrentScene", data);
+  } else {
+    console.log("重复点击当前导航");
+    // window.alert("alert-test-->重复点击当前导航");
+  }
 };
 
 const tabSecondary = (data) => {
@@ -104,15 +198,15 @@ const tabRoot = (data) => {
 };
 
 const fixTitle = (name) => {
-  if (name == '默认二级分组') {
-    name = t('navigation.default_group_two')
-  } else if (name == '一级分组') {
-    name = t('navigation.group_one')
+  if (name == "默认二级分组") {
+    name = t("navigation.default_group_two");
+  } else if (name == "一级分组") {
+    name = t("navigation.group_one");
   } else {
-    name = name
+    name = name;
   }
-  return name
-}
+  return name;
+};
 
 const loadList = () => {
   nextTick(() => {
@@ -160,7 +254,7 @@ $width: 1150px;
   max-width: $width;
   overflow: hidden;
   max-height: 0;
-  transition: .3s all ease;
+  transition: 0.3s all ease;
   z-index: 9;
 
   .swiper-container {
@@ -168,29 +262,27 @@ $width: 1150px;
     position: relative;
     margin: 0 auto;
 
-    >ul {
-      >li {
+    > ul {
+      > li {
         white-space: nowrap;
 
-        >span,
-        >div>span {
+        > span,
+        > div > span {
           cursor: pointer;
           display: inline-block;
           color: rgba(255, 255, 255, 0.6);
         }
 
         &.loopspan {
-
-          >span,
-          >div>span {
+          > span,
+          > div > span {
             animation: 5s wordsLoop linear infinite normal;
           }
         }
 
         &.active {
-
-          >span,
-          >div>span {
+          > span,
+          > div > span {
             color: rgba(255, 255, 255, 1);
           }
         }
@@ -201,12 +293,18 @@ $width: 1150px;
   .top-con {
     margin: 0 auto 10px;
     padding: 10px 0;
-    background: linear-gradient(268deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 25%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0) 100%);
+    background: linear-gradient(
+      268deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.4) 25%,
+      rgba(0, 0, 0, 0.4) 75%,
+      rgba(0, 0, 0, 0) 100%
+    );
   }
 
   #swcatalogRoot {
-    >ul {
-      >li {
+    > ul {
+      > li {
         width: 104px;
         background: rgba(0, 0, 0, 0.5);
         border-radius: 4px;
@@ -215,7 +313,7 @@ $width: 1150px;
         box-sizing: border-box;
         overflow: hidden;
 
-        >span {
+        > span {
           width: 100%;
           word-break: keep-all;
         }
@@ -230,14 +328,14 @@ $width: 1150px;
   #swSecondary {
     margin: 20px auto 10px;
 
-    >ul {
-      >li {
+    > ul {
+      > li {
         width: 84px;
         box-sizing: border-box;
         overflow: hidden;
         padding-bottom: 6px;
 
-        >span {
+        > span {
           width: 100%;
           word-break: keep-all;
         }
@@ -263,8 +361,8 @@ $width: 1150px;
   }
 
   #swScenes {
-    >ul {
-      >li {
+    > ul {
+      > li {
         cursor: pointer;
         width: 72px;
         height: 72px;
@@ -295,7 +393,7 @@ $width: 1150px;
           }
         }
 
-        >div {
+        > div {
           position: absolute;
           bottom: 0;
           left: 0;
@@ -304,7 +402,7 @@ $width: 1150px;
           width: 100%;
           overflow: hidden;
 
-          >span {
+          > span {
             width: 100%;
             line-height: 20px;
             word-break: keep-all;
@@ -314,8 +412,9 @@ $width: 1150px;
         &.active {
           border: 1px solid var(--colors-primary-base);
 
-          >div {
-            >span {}
+          > div {
+            > span {
+            }
           }
         }
       }

packages/qjkankan-view/src/components/UIGather/mobile/control/link.vue

@@ -2,7 +2,7 @@
   <div class="tag-layer" @click.stop>
     <div class="tag-header">
       <span> </span>
-      <ui-icon class="close" @click.stop="close" type="player_close"></ui-icon>
+      <i @click.stop="close" class="iconfont close icon-close-middle"></i>
     </div>
     <div class="linkcon">
       <div class="linkbody">

packages/qjkankan-view/src/components/UIGather/mobile/control/text.vue

@@ -2,18 +2,26 @@
   <div class="tag-layer" @click.stop>
     <div class="tag-header">
       <span> </span>
-      <ui-icon class="close" @click.stop="close" type="player_close"></ui-icon>
+      <i @click.stop="close" class="iconfont close icon-close-middle"></i>
     </div>
     <div class="txtcon">
-      <div class="txtbody"  v-html="metadata.description">
-      </div>
+      <div class="txtbody" v-html="metadata.description"></div>
     </div>
   </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();
 
@@ -22,7 +30,6 @@ const metadata = computed(() => store.getters["scene/metadata"]);
 const close = () => {
   store.commit("functions/setShowIntroduce", false);
 };
-
 </script>
 
 <style lang="scss" scoped>
@@ -76,6 +83,5 @@ const close = () => {
       white-space: normal;
     }
   }
-
 }
-</style>
+</style>

packages/qjkankan-view/src/components/UIGather/tours.vue

@@ -1,15 +1,23 @@
 <template>
-  <div class="tours-list" v-if="show" :class="{barshow:isShowToursList}">
+  <div class="tours-list" v-if="show" :class="{ barshow: isShowToursList }">
     <div class="top-con" v-if="toursList.length > 0">
       <div class="swiper-container" id="swTours">
-        <ul class="swiper-wrapper" v-if="toursList.length>1">
-          <li class="swiper-slide" v-for="(item, i) in toursList" :key="i" :class="{
-            loopspan: item.name.length > spanlength && item.id=='id2',
-            active:item.id=='id2'
-          }">
-
-            <span v-if="item.id=='id2'">{{item.name}}</span>
-            <span v-else>{{ item.name.length > spanlength ? item.name.slice(0, spanlength) : item.name }}</span>
+        <ul class="swiper-wrapper" v-if="toursList.length > 1">
+          <li
+            class="swiper-slide"
+            v-for="(item, i) in toursList"
+            :key="i"
+            :class="{
+              loopspan: item.name.length > spanlength && item.id == 'id2',
+              active: item.id == 'id2',
+            }"
+          >
+            <span v-if="item.id == 'id2'">{{ item.name }}</span>
+            <span v-else>{{
+              item.name.length > spanlength
+                ? item.name.slice(0, spanlength)
+                : item.name
+            }}</span>
             <div class="tourbar">
               <div class="tourline"></div>
             </div>
@@ -17,15 +25,22 @@
         </ul>
 
         <ul class="swiper-wrapper" v-else>
-          <li class="swiper-slide" v-for="(item, i) in toursList[0].list" :key="i" :class="{
-            active:item.id=='id2'
-          }">
-            <div class="tourImg" :style="`background-image:url(${item.enter.cover});`"></div>
+          <li
+            class="swiper-slide"
+            v-for="(item, i) in toursList[0].list"
+            :key="i"
+            :class="{
+              active: item.id == 'id2',
+            }"
+          >
+            <div
+              class="tourImg"
+              :style="`background-image:url(${item.enter.cover});`"
+            ></div>
             <div class="tourbar">
               <div class="tourline"></div>
             </div>
           </li>
-
         </ul>
       </div>
     </div>
@@ -67,7 +82,6 @@ onMounted(() => {
     loadList();
   });
 });
-
 </script>
 
 <style lang="scss" scoped>
@@ -82,39 +96,37 @@ $width: 1150px;
   max-width: $width;
   overflow: hidden;
   max-height: 0;
-  transition: .3s all ease;
+  transition: 0.3s all ease;
   z-index: 9;
 
   .swiper-container {
     width: 100%;
     position: relative;
 
-    >ul {
-      >li {
+    > ul {
+      > li {
         width: 90px;
         height: 40px;
-        background: rgba(24, 24, 24, .5);
+        background: rgba(24, 24, 24, 0.5);
         line-height: 40px;
 
-        >span,
-        >div>span {
+        > span,
+        > div > span {
           cursor: pointer;
           display: inline-block;
           color: rgba(255, 255, 255, 0.8);
         }
 
         &.loopspan {
-
-          >span,
-          >div>span {
+          > span,
+          > div > span {
             animation: 5s wordsLoop linear infinite normal;
           }
         }
 
         &.active {
-
-          >span,
-          >div>span {
+          > span,
+          > div > span {
             color: rgba(255, 255, 255, 1);
           }
         }
@@ -125,16 +137,15 @@ $width: 1150px;
   #swTours {
     margin: 0 auto;
 
-    >ul {
-      >li {
+    > ul {
+      > li {
         box-sizing: border-box;
         overflow: hidden;
         border-radius: 2px;
 
-        >span {
+        > span {
           width: 100%;
           word-break: keep-all;
-
         }
 
         &.active {
@@ -165,7 +176,13 @@ $width: 1150px;
   .top-con {
     padding: 10px 30px;
     min-width: 400px;
-    background: linear-gradient(268deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.5) 92%, rgba(0, 0, 0, 0) 100%);
+    background: linear-gradient(
+      268deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.5) 8%,
+      rgba(0, 0, 0, 0.5) 92%,
+      rgba(0, 0, 0, 0) 100%
+    );
   }
 }
 
@@ -173,7 +190,6 @@ $width: 1150px;
   max-height: 62px;
 }
 
-
 @keyframes wordsLoop {
   0% {
     transform: translateX(100%);
@@ -185,4 +201,4 @@ $width: 1150px;
     -webkit-transform: translateX(-100%);
   }
 }
-</style>
+</style>

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

@@ -3,11 +3,7 @@
     <div class="tag-layer" @click.stop>
       <div class="tag-header">
         <span>{{ currentTag.hotspotTitle }}</span>
-        <ui-icon
-          class="close"
-          @click.stop="close"
-          type="player_close"
-        ></ui-icon>
+        <i @click.stop="close" class="iconfont close icon-close-middle"></i>
       </div>
       <metasImage @close="close" v-if="currentTag.hotspotType == 'image'" />
       <metasWeb v-if="currentTag.hotspotType == 'link'" />

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

@@ -1,6 +1,6 @@
 <template>
   <div class="articlecon">
-    <div class="txtbody xxx" v-html="currentTag.articleInfo.html"></div>
+    <div class="txtbody" v-html="currentTag.articleInfo.html"></div>
   </div>
 </template>
 
@@ -36,6 +36,7 @@ const currentTag = computed(() => store.getters["tags/currentTag"]);
     margin-bottom: 80px;
     line-height: 1.5;
     word-wrap: break-word;
+    word-break: break-all;
     :deep(p) {
       line-height: 24px;
     }
@@ -66,4 +67,4 @@ const currentTag = computed(() => store.getters["tags/currentTag"]);
     margin: 0 auto;
   }
 }
-</style>
+</style>

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

@@ -45,6 +45,7 @@ import { Pagination, Navigation, Zoom } from "swiper";
 // Import Swiper styles
 import "swiper/css";
 import "swiper/css/zoom";
+import browser from "@/utils/browser";
 
 // import "swiper/swiper.scss";
 // swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
@@ -72,11 +73,13 @@ onMounted(() => {});
 onUnmounted(() => {});
 const zoomChange = (swiper, scale, imageEl, slideEl) => {
   console.log("zoomChange", scale, imageEl, slideEl);
-  setTimeout(() => {
-    const flag = `transition-duration: 300ms; transform: translate(0px, 0px) scale(${scale});`;
-    imageEl.style = flag;
-    console.log("hey", imageEl.style.transform);
-  }, 1000);
+  if (browser.detectIOS()) {
+    setTimeout(() => {
+      const flag = `transition-duration: 300ms; transform: translate(0px, 0px) scale(${scale});`;
+      imageEl.style = flag;
+      console.log("hey", imageEl.style.transform);
+    }, 1000);
+  }
 };
 </script>
 

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

@@ -28,12 +28,12 @@
           </swiper-slide>
         </Swiper>
         <div class="audio-control" v-if="hasAudio">
-          <ui-icon
+          <i
             @click.prevent="pauseAudio"
-            type="player_pause"
+            class="iconfont icon-editor_playback"
             v-if="isPlaying"
-          ></ui-icon>
-          <ui-icon @click="playAudio" type="player_playback" v-else></ui-icon>
+          ></i>
+          <i @click="playAudio" class="iconfonticon-editor_play" v-else></i>
           <span class="timeline">{{ time }} / {{ audioAllTime }}</span>
           <audio
             id="audioTag"
@@ -67,6 +67,7 @@ import { Pagination, Navigation, Zoom } from "swiper";
 // Import Swiper styles
 import "swiper/css";
 import "swiper/css/zoom";
+import browser from "@/utils/browser";
 
 // import "swiper/swiper.scss";
 // swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
@@ -175,11 +176,13 @@ function handlePageRender(_, el) {
 }
 const zoomChange = (swiper, scale, imageEl, slideEl) => {
   console.log("zoomChange", scale, imageEl, slideEl);
-  setTimeout(() => {
-    const flag = `transition-duration: 300ms; transform: translate(0px, 0px) scale(${scale});`;
-    imageEl.style = flag;
-    console.log("hey", imageEl.style.transform);
-  }, 10);
+  if (browser.detectIOS()) {
+    setTimeout(() => {
+      const flag = `transition-duration: 300ms; transform: translate(0px, 0px) scale(${scale});`;
+      imageEl.style = flag;
+      console.log("hey", imageEl.style.transform);
+    }, 1000);
+  }
 };
 </script>
 
@@ -217,7 +220,7 @@ const zoomChange = (swiper, scale, imageEl, slideEl) => {
       object-fit: scale-down;
     }
     .swiper-slide-zoomed .swiper-zoom-container img {
-      border: 5px solid red;
+      // border: 5px solid red;
     }
 
     .audio-control {

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

@@ -1,27 +1,37 @@
 <template>
-  <div class="txtcon" v-html="currentTag.textarea">
-  </div>
+  <div class="txtcon" v-html="currentTag.textarea"></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>
-.txtcon{
+.txtcon {
   width: 100%;
   padding: 20px;
   max-height: calc(100vh - 80px);
   color: #fff;
   text-align: justify;
   overflow-y: scroll;
+  word-wrap: break-word;
+  word-break: break-all;
   :deep(p) {
     line-height: 24px;
   }
 }
-</style>
+</style>

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

@@ -1,5 +1,4 @@
 <template>
-
   <div class="articlecon">
     <div class="hotspot-pc-title">
       <i class="iconfont icon-material_text" />
@@ -44,6 +43,8 @@ const currentTag = computed(() => store.getters["tags/currentTag"]);
     font-size: 14px;
     color: #fff;
     padding: 30px;
+    word-wrap: break-word;
+    word-break: break-all;
     max-height: calc(100vh - 100px);
     overflow-y: auto;
     line-height: 1.5;

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

@@ -115,12 +115,12 @@
             </div>
           </div>
           <div class="audio-control" v-if="hasAudio">
-            <ui-icon
-              @click="pauseAudio"
-              type="player_pause"
+            <i
+              @click.prevent="pauseAudio"
+              class="iconfont icon-editor_playback"
               v-if="isPlaying"
-            ></ui-icon>
-            <ui-icon @click="playAudio" type="player_playback" v-else></ui-icon>
+            ></i>
+            <i @click="playAudio" class="iconfont icon-editor_play" v-else></i>
             <span class="timeline">{{ time }} / {{ audioAllTime }}</span>
             <audio
               id="audioTag"
@@ -415,7 +415,6 @@ function handlePageRender(_, el) {
     margin: 0 12px;
     font-size: 22px;
 
-
     &.disabled {
       opacity: 0.5;
       pointer-events: none;
@@ -493,6 +492,10 @@ function handlePageRender(_, el) {
     display: flex;
     justify-content: center;
     align-items: center;
+    > i {
+      color: #fff;
+      margin-right: 5px;
+    }
     .image-icon {
       margin-left: 0;
     }

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

@@ -66,6 +66,8 @@ const close = () => {
       border-radius: 10px;
       font-size: 18px;
       color: #fff;
+      word-wrap: break-word;
+      word-break: break-all;
       padding: 26px;
       max-height: calc(100vh - 100px);
       overflow-y: auto;

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

@@ -36,6 +36,8 @@ const currentTag = computed(() => store.getters['tags/currentTag'])
     color: #fff;
     padding: 30px;
     max-height: calc(100vh - 100px);
+    word-wrap: break-word;
+    word-break: break-all;
     overflow-y: auto;
     line-height: 1.5;
     :deep(p) {