update

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

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="scene-group"
-  >
+  <div class="scene-group">
     <div
       class="top-bar"
       :class="{
@@ -13,26 +11,41 @@
         paddingLeft: topBarPaddingLeft,
       }"
     >
-      <i class="iconfont icon-edit_input_arrow icon-expand" :class="isExpanded ? '' : 'collapsed'"></i>
-      <img v-show="!isExpanded" class="folder collapsed" src="@/assets/images/icons/folder-blue-small-close.png" alt="" draggable="false">
-      <img v-show="isExpanded" class="folder opened" src="@/assets/images/icons/folder-blue-small-open.png" alt="" draggable="false">
-      <span class="group-name">{{folderInfo.id === 1 ? $i18n.t('gather.root_dir') : folderInfo.name}}</span>
+     
+      <i
+        class="iconfont icon-edit_input_arrow icon-expand"
+        :class="isExpanded ? '' : 'collapsed'"
+      ></i>
+      <img
+        v-show="!isExpanded"
+        class="folder collapsed"
+        src="@/assets/images/icons/folder-blue-small-close.png"
+        alt=""
+        draggable="false"
+      />
+      <img
+        v-show="isExpanded"
+        class="folder opened"
+        src="@/assets/images/icons/folder-blue-small-open.png"
+        alt=""
+        draggable="false"
+      />
+      <span class="group-name">{{
+        folderInfo.id === 1 ? $i18n.t("gather.root_dir") : folderInfo.name
+      }}</span>
     </div>
 
     <div class="group-content" v-if="isExpanded">
-        <div
-          v-for="(item, index) of folderInfo.children"
-          :key=item.id
-        >
-          <component
-            :is="'NestedFolder'"
-            :folderInfo="item"
-            :level="level + 1"
-            :targetId="targetId"
-            :disabledFolderList=disabledFolderList
-            @targeted="onSonTargeted"
-          />
-        </div>
+      <div v-for="(item, index) of folderInfo.children" :key="item.id">
+        <component
+          :is="'NestedFolder'"
+          :folderInfo="item"
+          :level="level + 1"
+          :targetId="targetId"
+          :disabledFolderList="disabledFolderList"
+          @targeted="onSonTargeted"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -41,9 +54,8 @@
 import { mapGetters } from "vuex";
 
 export default {
-  name: 'NestedFolder',
-  components: {
-  },
+  name: "NestedFolder",
+  components: {},
   props: {
     folderInfo: {
       type: Object,
@@ -56,47 +68,45 @@ export default {
     disabledFolderList: {
       type: Array,
       default: () => {
-        return []
+        return [];
       },
     },
     targetId: {
       required: true,
-    }
+    },
   },
   data() {
     return {
       isExpanded: this.level === 1 ? true : false,
-    }
+    };
   },
   computed: {
     topBarPaddingLeft() {
-      return 12 + (this.level - 1) * 12 + 'px' 
+      return 12 + (this.level - 1) * 12 + "px";
     },
     sceneItemPaddingLeft() {
-      return 18 + this.level * 12 + 'px' 
+      return 18 + this.level * 12 + "px";
     },
     isDisabled() {
       return this.disabledFolderList.some((item) => {
-        return item.id === this.folderInfo.id
-      })
+        return item.id === this.folderInfo.id;
+      });
     },
   },
   methods: {
     onClickTopBar() {
       if (!this.isDisabled) {
-        this.isExpanded = !this.isExpanded
-        this.$emit('targeted', this.folderInfo.id)
+        this.isExpanded = !this.isExpanded;
+        this.$emit("targeted", this.folderInfo.id);
       }
     },
     onSonTargeted(id) {
-      this.$emit('targeted', id)
-    }
-  },
-  mounted() {
+      this.$emit("targeted", id);
+    },
   },
-  destroyed() {
-  }
-}
+  mounted() {},
+  destroyed() {},
+};
 </script>
 
 <style lang="less" scoped>
@@ -134,7 +144,7 @@ export default {
       width: 16px;
       &.collapsed {
         height: 16px;
-        }
+      }
       &.opened {
         height: 14px;
       }
@@ -152,4 +162,4 @@ export default {
     }
   }
 }
-</style>
+</style>

packages/qjkankan-editor/src/components/materialSelectorFolderMixin.js

@@ -58,6 +58,7 @@ export default {
           const targetPathIdList = clickedItem.ancestors.split(',').map((item) => {
             return Number(item)
           })
+          debugger
           this.folderPath = nodeIdList2nodeInfoListByNodeTree(targetPathIdList, this.folderTree)
         } else {
           // 在folderTree里找到id等于clickedItem.dirId的那个文件夹，从而确定folderPath

packages/qjkankan-editor/src/components/table/index.vue

@@ -195,9 +195,9 @@ export default {
       let height = tableContainer.offsetHeight;
       const offset = 199 + 50;
       const lastHeight = height - offset;
-      console.log("lastHeight", lastHeight );
+      // console.log("lastHeight", lastHeight);
       if (lastHeight > 0) {
-        console.log("table-content", lastHeight);
+        // console.log("table-content", lastHeight);
         // console.log(this.$refs["t-con"].style);
         this.$refs["t-con"].style.height = lastHeight + "px";
       }
@@ -272,7 +272,14 @@ export default {
     height: 200px; // 必须指定高度，element-ui的无限滚动指令才能生效
     // height: 100%;
     // flex: 1;
+    position: relative;
+    z-index: 100;
     overflow: auto;
+    > i {
+      position: relative;
+      z-index: 100;
+      overflow: auto;
+    }
     .t-item {
       display: flex;
       align-items: center;

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

@@ -9,7 +9,7 @@
  * 2.res被执行时的实参会映射到fn的形参；
  * 3.第一次调用res时，会立即执行fn。
  */
- export function throttle(fn, interval) {
+export function throttle(fn, interval) {
   let lastRunTime = 0
 
   return function (...args) {
@@ -35,7 +35,7 @@
  * 如果isRememberLastCall为false，意味着fn不会被延迟执行，所以fnDebounced执行时，要么在内部调用fn，同步返回fn返回值；要么内部决定本次不调用fn，同步返回null。
  * 如果isRememberLastCall为true，意味着fn可能被延迟执行，所以fnDebounced会返回一个Promise,在fn被调用时用其返回值resolve该Promise，或者在fn的延时调用计划被取消时用'canceled'resolve该Promise。(不宜reject，否则又没有人去catch，会导致浏览器报错。)
  */
- export function debounce(fn, delay = 250, isImmediateCall = false, isRememberLastCall = true) {
+export function debounce(fn, delay = 250, isImmediateCall = false, isRememberLastCall = true) {
   console.assert(isImmediateCall || isRememberLastCall, 'isImmediateCall 和 isRememberLastCall 至少应有一个是true，否则没有意义！')
   let timer = null
   let retPromiseLastTimeResolver = null
@@ -76,7 +76,7 @@
     return function (...args) {
       const currentTime = Date.now()
       if (currentTime - lastCallTime >= delay) { // 一组操作中的第一次
-        const res = fn.apply(this, args) 
+        const res = fn.apply(this, args)
         lastCallTime = currentTime
         return Promise.resolve(res)
       } else { // 一组中的后续调用
@@ -141,7 +141,7 @@ export function deepClone(target, hash = new WeakMap()) {
       result = [] // 将result赋值为一个数组，并且执行遍历
       hash.set(target, result)
       for (let i in target) {
-        if (!(typeof(target[i]) === 'function' && !target.name)) {
+        if (!(typeof (target[i]) === 'function' && !target.name)) {
           // 递归克隆数组中的每一项
           result.push(deepClone(target[i], hash))
         }
@@ -157,7 +157,7 @@ export function deepClone(target, hash = new WeakMap()) {
       result = {}
       hash.set(target, result)
       for (let i in target) {
-        if (!(typeof(target[i]) === 'function' && !target.name)) {
+        if (!(typeof (target[i]) === 'function' && !target.name)) {
           result[i] = deepClone(target[i], hash)
         }
       }
@@ -172,14 +172,14 @@ export function deepClone(target, hash = new WeakMap()) {
 }
 
 export function isObjectBroad(p) {
-  return typeof(p) === 'object' || typeof(p) === 'function'
+  return typeof (p) === 'object' || typeof (p) === 'function'
 }
 
 // 判断两个对象内容是否相同。未考虑循环引用、共同引用的情况。
 export function isSameObject(object1, object2) {
   const keys1 = Object.keys(object1)
   const keys2 = Object.keys(object2)
-  
+
   if (keys1.length !== keys2.length) {
     return false
   }
@@ -229,7 +229,6 @@ export function preOrderTraversalSearch(root, checkNode, targetNodePath) {
   targetNodePath.pop()
   return false
 }
-
 export function nodeIdList2nodeInfoListByNodeTree(nodeIdList, nodeTree) {
   console.assert(nodeIdList && nodeTree && nodeTree.id && nodeTree.name, 'nodeIdList2nodeInfoListByNodeTree: invalid param!')
   if (nodeIdList.length === 0) {
@@ -247,10 +246,10 @@ export function nodeIdList2nodeInfoListByNodeTree(nodeIdList, nodeTree) {
     const nextLevelRoot = nodeTree.children.find((item) => {
       return item.id === nodeIdList[1]
     })
-    console.assert(nextLevelRoot, 'nodeIdList2nodeInfoListByNodeTree: invalid param 2!')
+    // console.assert(nextLevelRoot, 'nodeIdList2nodeInfoListByNodeTree: invalid param 2!')
     ret = ret.concat(nodeIdList2nodeInfoListByNodeTree(nodeIdList.slice(1, nodeIdList.length), nextLevelRoot))
   }
-
+  console.log('nodeIdList2nodeInfoListByNodeTree',ret);
   return ret
 }
 

packages/qjkankan-editor/src/views/material/folderMixinFactory.js

@@ -9,9 +9,9 @@ import {
   moveToFolder,
   delFolder,
 } from "@/api";
-import {i18n} from "@/lang"
+import { i18n } from "@/lang"
 
-export default function(materialType) {
+export default function (materialType) {
   return {
     components: {
       CreateFolder,
@@ -148,6 +148,7 @@ export default function(materialType) {
           type: materialType,
         }).then((res) => {
           this.folderTree = res.data
+          console.log('onClickMoveFolder->>', res.data)
           if (this.folderTree.length === 0) {
             this.$confirm({
               title: this.$i18n.t('gather.move_folder_to'),
@@ -159,15 +160,36 @@ export default function(materialType) {
         })
       },
       onSubmitMoveFolder(targetFolderId) {
-        const ancestors = this.folderPath.map((item) => {
-          return item.id
-        }).join(',')
-        moveToFolder(this.selectedList, targetFolderId, ancestors).then(() => {
+        // const ancestors = this.folderPath.map((item) => {
+        //   return item.id
+        // }).join(',')
+        const target = this.findFolderTreeById(this.folderTree, targetFolderId);
+        let targetAncestors = target? target.ancestors + ',' + target.id : '1'
+        console.log('targetAncestors', targetAncestors); 
+        moveToFolder(this.selectedList, targetFolderId, targetAncestors).then(() => {
           this.$msg.success(this.$i18n.t('gather.success'))
-          this.isShowMoveFolder = false
-          this.refreshListDebounced()
+          this.$nextTick(() => {
+            this.isShowMoveFolder = false;
+            this.selectedList = []
+            this.refreshListDebounced()
+          });
         })
       },
+
+      findFolderTreeById(folderTree, id) {
+        if (folderTree.id == id) {
+          return folderTree;
+        } else if (folderTree.children != null) {
+          var i;
+          var result = null;
+          for (i = 0; result == null && i < folderTree.children.length; i++) {
+            result = this.findFolderTreeById(folderTree.children[i], id);
+          }
+          return result;
+        }
+        return null;
+      },
+
       delFolder(id, onSuccess) {
         if (this.uploadListForUI.length > 0) {
           this.$confirm({
@@ -240,4 +262,4 @@ export default function(materialType) {
       }
     }
   }
-}
+}

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

@@ -17,7 +17,7 @@
           type="text"
           maxlength="15"
           :placeholder="$i18n.t(`gather.new_folder_placeholder`)"
-          @input="emojistr" v-model="key"
+          @input="emojistr" v-model.trim="key"
         />
         <div v-if="!validateRes.isValid" class="invalid-tip">
           {{validateRes.tip}}

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

@@ -2,12 +2,12 @@
   <popup>
     <div class="ui-message ui-message-confirm">
       <div class="ui-message-header">
-        <span>{{$i18n.t(`gather.move_folder_to`)}}</span>
+        <span>{{ $i18n.t(`gather.move_folder_to`) }}</span>
         <span @click="$emit('close')">
           <i class="iconfont icon_close"></i>
         </span>
       </div>
-      
+
       <div class="folder-tree">
         <NestedFolder
           :folderInfo="folderTree"
@@ -17,18 +17,24 @@
           @targeted="onFolderTargetd"
         ></NestedFolder>
       </div>
-      
+
       <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="onClickConfirm"
             class="ui-button ui-button-rect submit"
-            :class="{disable: !targetFolderId || targetFolderId === selectedList[0].dirId}"
+            :class="{
+              disable:
+                !targetFolderId || targetFolderId === selectedList[0].dirId,
+            }"
           >
-            {{$i18n.t(`gather.comfirm`)}}
+            {{ $i18n.t(`gather.comfirm`) }}
           </button>
         </div>
       </div>
@@ -39,11 +45,10 @@
 <script>
 import Popup from "@/components/shared/popup";
 import NestedFolder from "@/components/NestedFolder.vue";
-
 export default {
   components: {
     Popup,
-    NestedFolder
+    NestedFolder,
   },
   props: {
     folderTree: {
@@ -53,33 +58,30 @@ export default {
     selectedList: {
       type: Array,
       default: () => {
-        return []
+        return [];
       },
     },
   },
   data() {
     return {
-      targetFolderId: '',
-    }
-  },
-  watch: {
-  },
-  mounted() {
+      targetFolderId: "",
+    };
   },
+  watch: {},
+  mounted() {},
   methods: {
     onClickConfirm() {
-      this.$emit('submit', this.targetFolderId)
+      this.$emit("submit", this.targetFolderId);
     },
     onFolderTargetd(id) {
-      this.targetFolderId = id
-    }
-  }
-}
+      console.log("onFolderTargetd", id);
+      this.targetFolderId = id;
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
-
 .ui-message-confirm {
   width: 600px;
   height: 642px;
@@ -96,7 +98,7 @@ export default {
     padding-bottom: 16px;
     width: 548px;
     height: 450px;
-    border: 1px solid #EBEDF0;
+    border: 1px solid #ebedf0;
     overflow: auto;
     text-align: left;
   }
@@ -109,14 +111,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/public/showviewer/lib/krpano/skin/vtourskin.xml

@@ -285,6 +285,9 @@
 
 		if(skin_settings.littleplanetintro AND (device.webgl OR device.flash),
 			if(get(skin_settings.lptswitch) == 1,skin_setup_littleplanetintro(skin_settings.littleplanetintro););
+			if(get(skin_settings.lptswitch) == 0,
+			   delayedcall(0.5,animationComplete);
+			);
 		  );
 
 		skin_addthumbs();

packages/qjkankan-view/public/showviewer/lib/krpano/tooltip.xml

@@ -7,7 +7,7 @@
         txtadd(iconUrl,'',%4);
         txtreplace(iconUrl,'|',',');
 
-        trace('opentype::',%11);
+        <!-- trace('opentype::',%11); -->
         if(%2 LE 1,
              <!-- trace('id==',get(hsp_name),"::",get(iconUrl)); -->
              set(hotspot[get(hsp_name)].type,'image');
@@ -50,7 +50,7 @@
                
                 if(%2 == 0,
                 txtreplace(iconUrl,'.svg','.png');
-                trace('system::',get(iconUrl));
+                <!-- trace('system::',get(iconUrl)); -->
                 set(hotspot[get(hsp_name)].url,get(iconUrl));
                 set(hotspot[get(hsp_name)].frameNumber,60);
                 set(hotspot[get(hsp_name)].duration,1);
@@ -62,7 +62,7 @@
                 set(hotspot[get(hsp_name)].animatiedOn,0);
                 );
                 if(%2 == 2,
-                trace('ser_frame::',get(framewidth));
+                <!-- trace('ser_frame::',get(framewidth)); -->
                 set(hotspot[get(hsp_name)].url,get(iconUrl));
                 set(hotspot[get(hsp_name)].framewidth,get(framewidth));
                 set(hotspot[get(hsp_name)].frameNumber,get(frameNumber));
@@ -94,7 +94,7 @@
                 txtadd(tooltipdot, 'tooldot_', get(hsp_name)); 
                 <!-- set_label_dir(get(hsp_name),get(lineDirection),0); -->
                 set(hotspot[get(hsp_name)].width,0);
-                trace('隐藏标线::',get(tooltipdot));
+                <!-- trace('隐藏标线::',get(tooltipdot)); -->
                 set(layer[get(tooltipname)].x,0);
                 set(layer[get(tooltipname)].y,0);
                 set(layer[get(tooltipname)].rotate,0);
@@ -186,7 +186,7 @@
                                 <!-- label方位 -->
         if(get(hotspottype) LE 2,
          copy(hoverstatus,hotspot[get(name)].hoverstatus); 
-         trace('hovering-label::',get(hoverstatus));
+         <!-- trace('hovering-label::',get(hoverstatus)); -->
         <!-- delayedcall(0.1,
             txtadd(tooltipname, 'tooltip_', get(name)); 
             set_label_pos(get(tooltipname),get(pos));
@@ -202,7 +202,7 @@
          );
           <!-- 2 hover  -->
         if(hoverstatus == 2,
-            trace('测试');
+            <!-- trace('测试'); -->
            set(layer[get(tooltipname)].visible,false);
             delayedcall(0.1,
              txtadd(tooltipname, 'tooltip_', get(name)); 
@@ -324,8 +324,20 @@
             if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,-40););
         );
         if( get(lineDirection) == 'left-top',
+        <!-- newx = distance * Math.cos(direction) + x
+        newy = distance * Math.sin(direction) + y -->
+            showlog();
             if(get(dir)==0,set(hotspot[get(dirItem)].rotate,-35));
-            if(get(dir)==1,add(allHeight,labelHeight,80);div(allHeight,2);mul(allHeight,-1);set(layer[get(dirItem)].rotate,0);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,get(allHeight));set(layer[get(dirItem)].rotate,35););
+            if(get(dir)==1,
+            add(allHeight,labelHeight,80);
+            div(allHeight,2);mul(allHeight,-1);
+            set(rr,calc((Math.PI / 180) * -35));
+            <!-- set(newY,calc(allHeight * Math.asin(rr))); -->
+            trace('newY',allHeight);
+            set(layer[get(dirItem)].rotate,0);
+            set(layer[get(dirItem)].x,0);
+            set(layer[get(dirItem)].y,get(allHeight));
+            set(layer[get(dirItem)].rotate,35););
             if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,40););
         );
         if(
@@ -374,7 +386,7 @@
             add(all,lheight,hheight);
             div(dpy,all,2); 
             add(lastPy,dpy,5);
-            trace('dpy::',dpy);
+            <!-- trace('dpy::',dpy); -->
             mul(lastPy, -1);
             set(layer[get(posName)].align,center);
             set(layer[get(posName)].y,get(lastPy));
@@ -418,8 +430,8 @@
        txtadd(clickName, '', get(name)); 
        txtreplace(clickName, 'tooltip_', ''); 
        txtreplace(clickName, 'tooldot_', ''); 
-       trace('opentype::',get(hotspot[get(clickName)].opentype));
-       trace('clickName::',get(clickName));
+       <!-- trace('opentype::',get(hotspot[get(clickName)].opentype));
+       trace('clickName::',get(clickName)); -->
        js(__sdk.Tags.linkopen(get(hotspot[get(clickName)].opentype),get(clickName)));
 </action>
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="txtcon">
+  <div class="articlecon">
     <div class="txtbody" v-html="currentTag.articleInfo.html"></div>
   </div>
 </template>
@@ -13,7 +13,7 @@ const currentTag = computed(() => store.getters["tags/currentTag"]);
 </script>
 
 <style lang="scss">
-.txtcon {
+.articlecon {
   display: flex;
   align-items: flex-start;
   justify-content: center;
@@ -57,3 +57,12 @@ const currentTag = computed(() => store.getters["tags/currentTag"]);
   }
 }
 </style>
+<style lang="scss">
+.articlecon {
+  img,
+  video {
+    max-width: 100% !important;
+    margin: 0 auto;
+  }
+}
+</style>

packages/qjkankan-view/src/components/assembly/Password.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="passwordcon" v-if="show">
     <img :src="metadata.icon" alt="" />
-    <ui-window @ok="onOk" :okText="$t('common.confirm')" :title="$t('common.tips')" :showCloseIcon="false" :showCancelButton="false">
+    <ui-window
+      @ok="onOk"
+      :okText="$t('common.confirm')"
+      :title="$t('common.tips')"
+      :showCloseIcon="false"
+      :showCancelButton="false"
+    >
       <template v-slot:content>
         <div class="wrapper">
           <ui-input
@@ -25,18 +31,18 @@
 import { ref, onMounted, computed, watch, nextTick } from "vue";
 import { useI18n, getLocale } from "@/i18n";
 import { useStore } from "vuex";
-import { getApp } from '@/app'
+import { getApp } from "@/app";
 
 const store = useStore();
 const { t } = useI18n({ useScope: "global" });
 const error = ref("");
-const show = ref(false)
+const show = ref(false);
 const password = ref("");
 const passwordkey = computed(() => store.getters["scene/password"]);
-const metadata = computed(() => store.getters['scene/metadata'])
+const metadata = computed(() => store.getters["scene/metadata"]);
 
 const onOk = () => {
-  let app = getApp()
+  let app = getApp();
 
   error.value = "";
   if (!password.value) {
@@ -45,8 +51,8 @@ const onOk = () => {
   if (password.value === passwordkey.value) {
     show.value = false;
     app.Scene.unlock();
-  } else{
-    error.value = t('common.passwordError')
+  } else {
+    error.value = t("common.passwordError");
   }
 };
 const onPasswordChange = (e) => {

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

@@ -1,36 +1,45 @@
 <template>
-  <div class="txtcon">
+  articlecon
+  <div class="articlecon">
     <div class="title">
-      <i class="iconfont icon-material_text"/>
-      {{currentTag.hotspotTitle}} 
+      <i class="iconfont icon-material_text" />
+      {{ currentTag.hotspotTitle }}
     </div>
 
-    <div class="txtbody" v-html="currentTag.articleInfo.html">
-    </div>
+    <div class="txtbody" v-html="currentTag.articleInfo.html"></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();
 
-const currentTag = computed(() => store.getters['tags/currentTag'])
-  
+const currentTag = computed(() => store.getters["tags/currentTag"]);
 </script>
 
 <style lang="scss" scoped>
-.txtcon{
+.articlecon {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   height: 100%;
   width: 100%;
   padding-top: 70px;
-  
-  .txtbody{
+
+  .txtbody {
     width: 744px;
-    background: rgba(0,0,0,0.6);
+    background: rgba(0, 0, 0, 0.6);
     border-radius: 10px;
     font-size: 14px;
     color: #fff;
@@ -42,21 +51,30 @@ const currentTag = computed(() => store.getters['tags/currentTag'])
       line-height: 24px;
     }
   }
-  .title{
+  .title {
     position: absolute;
     left: 20px;
     top: 20px;
     height: 36px;
     line-height: 36px;
     padding: 0 16px;
-    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>
+<style lang="scss">
+.articlecon {
+  img,
+  video {
+    max-width: 100% !important;
+    margin: 0 auto;
+  }
+}
+</style>

packages/qjkankan-view/src/pages/showMobile.vue

@@ -27,7 +27,7 @@ import Opening from "@/components/assembly/OpeningMobile";
 import LoadingLogo from "@/components/assembly/Loading";
 import { createApp } from "@/app";
 
-import { ref, onMounted, computed, watch, nextTick } from "vue";
+import { ref, onMounted, computed, unref,watch, nextTick } from "vue";
 import { getPanoInfo, checkWork } from "@/apis";
 import { useStore } from "vuex";
 import config from "@/utils/config";