title

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

@@ -7,24 +7,18 @@
       :mode="mode"
     />
     <Editor
-      style="height: 500px; overflow-y: hidden;"
+      style="height: 500px; overflow-y: hidden"
       v-model="html"
       :defaultConfig="editorConfig"
       :mode="mode"
       @onCreated="onEditorCreated"
     />
     <div class="bottom-bar">
-      <button 
-        class="ui-button"
-        @click="onClickCancel"
-      >
-        {{$i18n.t('common.cancel')}}
+      <button class="ui-button" @click="onClickCancel">
+        {{ $i18n.t("common.cancel") }}
       </button>
-      <button 
-        class="ui-button submit"
-        @click="onClickOk"
-      >
-        {{$i18n.t('common.ok')}}
+      <button class="ui-button submit" @click="onClickOk">
+        {{ $i18n.t("common.ok") }}
       </button>
     </div>
 
@@ -53,8 +47,10 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import Vue from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { i18nChangeLanguage, i18nGetResources } from "@wangeditor/editor";
+import browser from "@/utils/browser";
 import MaterialSelector from "@/components/materialSelector.vue";
 
 export default Vue.extend({
@@ -66,71 +62,85 @@ export default Vue.extend({
   props: {
     initialHtml: {
       type: String,
-      defaut: '',
-    }
+      default: "",
+    },
   },
   data() {
     return {
       editor: null,
       html: this.initialHtml,
-      toolbarConfig: {
-      },
+      toolbarConfig: {},
       editorConfig: {
-        placeholder: 'fdf',
+        placeholder: "",
         MENU_CONF: {
           uploadImage: {
             customBrowseAndUpload: (insertFn) => {
-              this.isShowImageSelectionWindow = true
-              this.insertFn = insertFn
-            }
+              this.isShowImageSelectionWindow = true;
+              this.insertFn = insertFn;
+            },
           },
           uploadVideo: {
             customBrowseAndUpload: (insertFn) => {
-              this.isShowVideoSelectionWindow = true
-              this.insertFn = insertFn
-            }
+              this.isShowVideoSelectionWindow = true;
+              this.insertFn = insertFn;
+            },
           },
         },
       },
-      mode: 'default', // or 'simple',
+      mode: "default", // or 'simple',
 
       isShowImageSelectionWindow: false,
       isShowVideoSelectionWindow: false,
       insertFn: null,
-    }
+    };
   },
   methods: {
     onEditorCreated(editor) {
-      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
+      console.log("this.editor", this.editor);
+      let lang = browser.urlQueryValue("lang");
+
+      if (lang === "en") {
+        i18nChangeLanguage("en");
+      }
+      if (lang === "zh") {
+        i18nChangeLanguage("zh-CN");
+      }
+
     },
     onClickOk() {
-      this.$emit('ok', this.html)
+      this.$emit("ok", this.html);
     },
     onClickCancel() {
-      this.$emit('cancel')
+      this.$emit("cancel");
     },
     onSubmitFromImageMaterialSelector(selected) {
-      this.isShowImageSelectionWindow = false
+      this.isShowImageSelectionWindow = false;
       for (const selectedItem of selected) {
-        this.insertFn(selectedItem.icon, `[${this.$i18n.t('gather.image')}: ${selectedItem.name}]`)
+        this.insertFn(
+          selectedItem.icon,
+          `[${this.$i18n.t("gather.image")}: ${selectedItem.name}]`
+        );
       }
     },
     onSubmitFromVideoMaterialSelector(selected) {
-      this.isShowVideoSelectionWindow = false
+      this.isShowVideoSelectionWindow = false;
       for (const selectedItem of selected) {
         console.log(selectedItem);
-        this.insertFn(selectedItem.ossPath, selectedItem.ossPath + this.$videoImgOriginalSize)
+        this.insertFn(
+          selectedItem.ossPath,
+          selectedItem.ossPath + this.$videoImgOriginalSize
+        );
       }
     },
   },
-  mounted() {
-  },
+  mounted() {},
   beforeDestroy() {
-    const editor = this.editor
-    if (editor == null) return
-    editor.destroy() // 组件销毁时，及时销毁编辑器
-  }
-})
+    const editor = this.editor;
+    if (editor == null) return;
+    editor.destroy(); // 组件销毁时，及时销毁编辑器
+  },
+});
 </script>
 
 <style src="@wangeditor/editor/dist/css/style.css"></style>
@@ -142,7 +152,7 @@ export default Vue.extend({
   overflow: hidden;
   > .bottom-bar {
     padding: 10px;
-    background-color: rgba(0,0,0,0.8);
+    background-color: rgba(0, 0, 0, 0.8);
     border-top: 1px solid #ccc;
     display: flex;
     justify-content: flex-end;
@@ -155,11 +165,12 @@ export default Vue.extend({
 </style>
 <style>
 :root {
-    --w-e-textarea-bg-color: #333;
-    --w-e-textarea-color: #fff;
-    --w-e-toolbar-active-bg-color:#666;
-    --w-e-toolbar-color:#fff;
-    --w-e-toolbar-bg-color:rgba(0.0.0,0.9);
-    --w-e-modal-button-bg-color:rgba(0.0.0,0.5);
+  --w-e-textarea-bg-color: #333;
+  --w-e-textarea-color: #fff;
+  --w-e-toolbar-active-bg-color: #666;
+  --w-e-toolbar-color: #fff;
+  --w-e-toolbar-bg-color: rgba(0, 0, 0, 0.9);
+  --w-e-toolbar-active-color: #fff;
+  --w-e-modal-button-bg-color: rgba(0, 0.5);
 }
-</style>
+</style>

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

@@ -56,7 +56,10 @@ export default class Utils {
   /**
    * 编辑热点
    */
-
+  // 1280x720
+  // 1440x900
+  //1290x 1280
+  // 998px
   edithotspot(krpano, param) {
     try {
       const hotspot = convertJQHotspot(param);

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

@@ -65,7 +65,7 @@
           <TabbarSwitcher
             class="display-mode-selector"
             :tabList="[
-              $i18n.t('hotspot.show_on_hover'),
+              // $i18n.t('hotspot.show_on_hover'),
               $i18n.t('hotspot.always_show'),
               $i18n.t('hotspot.never_show'),
             ]"

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

@@ -79,7 +79,7 @@ const close = () => {
     width: 36px;
     height: 36px;
     right: 30px;
-    top: 30px;
+    top: 20px;
     position: absolute;
     cursor: pointer;
     z-index: 999;

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

@@ -64,7 +64,7 @@ const close = () => {
     left: 20px;
     top: 20px;
     height: 36px;
-    line-height: 36px;
+    line-height: 0;
     padding: 0 30px;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 20px;
@@ -80,7 +80,7 @@ const close = () => {
     width: 36px;
     height: 36px;
     right: 30px;
-    top: 30px;
+    top: 20px;
     position: absolute;
     cursor: pointer;
     z-index: 999;

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

@@ -1,7 +1,17 @@
 <script setup>
-import PhotoSwipe from 'photoswipe';
-import 'photoswipe/style.css';
-import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
+import PhotoSwipe from "photoswipe";
+import "photoswipe/style.css";
+import {
+  reactive,
+  defineEmits,
+  onBeforeMount,
+  onMounted,
+  ref,
+  watchEffect,
+  computed,
+  watch,
+  nextTick,
+} from "vue";
 import { useStore } from "vuex";
 import { useI18n, getLocale } from "@/i18n";
 
@@ -11,53 +21,55 @@ const { t } = useI18n({ useScope: "global" });
 let closeicon = `<svg t="1666060310188" class="pswp__icn" viewBox="0 0 1024 1024" version="1.1"
 class="pswp__icn" p-id="9000" width="24" height="24">
   <path d="M199.232 132.096l5.376 4.608L512 444.16l307.392-307.392a48 48 0 0 1 72.512 62.528l-4.608 5.376L579.84 512l307.456 307.392a48 48 0 0 1-62.528 72.512l-5.376-4.608L512 579.84l-307.392 307.456a48 48 0 0 1-72.512-62.528l4.608-5.376L444.16 512 136.704 204.608a48 48 0 0 1 62.528-72.512z" p-id="9001" fill="#ffffff"></path>
-</svg>`
+</svg>`;
 let options = {
   bgOpacity: 0,
   index: 0,
   zoom: false,
-  indexIndicatorSep: '/',
-  mainClass: 'm-img-tag',
-  errorMsg: t('common.image_fail'),
+  indexIndicatorSep: "/",
+  mainClass: "m-img-tag",
+  errorMsg: t("common.image_fail"),
   closeSVG: closeicon,
-  pinchToClose:false,
-  closeOnVerticalDrag:false,
-  showHideAnimationType: 'none'
+  pinchToClose: false,
+  closeOnVerticalDrag: false,
+  showHideAnimationType: "none",
 };
 
-const currentTag = computed(() => store.getters['tags/currentTag'])
-const pswp = ref(null)
+const currentTag = computed(() => store.getters["tags/currentTag"]);
+const pswp = ref(null);
 const emit = defineEmits(["close"]);
 
 onMounted(() => {
   if (!pswp.value) {
     pswp.value = new PhotoSwipe({
       ...options,
-      dataSource: currentTag.value.image.map(item => {
-        let dpiarr = item.dpi.replace('px', '').split('*')
+      dataSource: currentTag.value.image.map((item) => {
+        let dpiarr = item.dpi.replace("px", "").split("*");
         console.log(dpiarr);
         return {
           src: item.ossPath,
           width: dpiarr[0],
           height: dpiarr[1],
-          alt: item.name
-        }
-      })
+          alt: item.name,
+        };
+      }),
     });
     pswp.value.init();
-    pswp.value.on('close', () => {
+    pswp.value.on("close", () => {
       emit("close");
     });
   }
-})
-
+});
 </script>
 
 <style lang="scss">
 .m-img-tag {
   height: calc(100% - 100px);
-  top:50px;
-  overflow: hidden;
+  top: 50px;
+  overflow: visible;
+  .pswp__zoom-wrap img{
+    margin-bottom: 200px;
+  }
   .pswp__counter {
     position: fixed;
     left: 50%;
@@ -98,11 +110,11 @@ onMounted(() => {
         transform: translate(-50%, -50%);
         fill: rgba(255, 255, 255, 0.6);
 
-        >path {
+        > path {
           fill: rgba(255, 255, 255, 0.6);
         }
       }
     }
   }
 }
-</style>
+</style>

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

@@ -222,7 +222,10 @@ function handlePageRender(_, el) {
     border-top-right-radius: 10px;
     position: relative;
     overflow-y: scroll;
-
+    line-height: 1.5;
+    :deep(p) {
+      line-height: 24px;
+    }
     &::before {
       content: "";
       width: 35px;
@@ -240,7 +243,6 @@ function handlePageRender(_, el) {
 .swiper-pagination {
   width: 56px;
   height: 32px;
-  line-height: 30px;
   background: rgba(0, 0, 0, 0.4);
   opacity: 1;
   border: 1px solid rgba(255, 255, 255, 0.2);

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

@@ -68,7 +68,7 @@ const close = () => {
     width: 36px;
     height: 36px;
     right: 30px;
-    top: 30px;
+    top: 20px;
     position: absolute;
     cursor: pointer;
     z-index: 999;

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

@@ -1,5 +1,5 @@
 <template>
-  articlecon
+
   <div class="articlecon">
     <div class="title">
       <i class="iconfont icon-material_text" />
@@ -56,7 +56,9 @@ const currentTag = computed(() => store.getters["tags/currentTag"]);
     left: 20px;
     top: 20px;
     height: 36px;
-    line-height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     padding: 0 16px;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 20px;

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

@@ -40,8 +40,11 @@ const currentTag = computed(() => store.getters['tags/currentTag'])
     left: 20px;
     top: 20px;
     height: 36px;
-    line-height: 36px;
-    padding: 0 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 16px;
+
     background: rgba(0,0,0,0.6);
     border-radius: 20px;
     color: #fff;

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

@@ -147,7 +147,9 @@ const onClickCancelFullScreen = () => {
     left: 20px;
     top: 20px;
     height: 36px;
-    line-height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     padding: 0 16px;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 20px;

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

@@ -279,7 +279,7 @@ watchEffect(() => {
     width: 100%;
     height: 550px;
     // max-width: 1920px;
-    max-width: 998px;
+    max-width: 1564px;
     display: flex;
     background: rgba(0, 0, 0, 0.8);
     .image-left {
@@ -296,15 +296,22 @@ watchEffect(() => {
         display: block;
         word-wrap: break-word;
         margin: 30px;
+        overflow-y: auto;
+        line-height: 1.5;
+        :deep(p) {
+          line-height: 24px;
+        }
       }
     }
   }
-  .title {
+   .title{
     position: absolute;
     left: 20px;
     top: 20px;
     height: 36px;
-    line-height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     padding: 0 16px;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 20px;

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

@@ -29,8 +29,10 @@ const currentTag = computed(() => store.getters['tags/currentTag'])
     left: 20px;
     top: 20px;
     height: 36px;
-    line-height: 36px;
-    padding: 0 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 16px;
     background: rgba(0,0,0,0.6);
     border-radius: 20px;
     color: #fff;

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

@@ -96,8 +96,10 @@ const close = () => {
       left: 20px;
       top: 20px;
       height: 36px;
-      line-height: 36px;
-      padding: 0 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 16px;
       background: rgba(0, 0, 0, 0.6);
       border-radius: 20px;
       color: #fff;

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

@@ -47,7 +47,9 @@ const currentTag = computed(() => store.getters['tags/currentTag'])
     left: 20px;
     top: 20px;
     height: 36px;
-    line-height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     padding: 0 16px;
     background: rgba(0,0,0,0.6);
     border-radius: 20px;

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

@@ -33,7 +33,9 @@ const currentTag = computed(() => store.getters['tags/currentTag'])
     left: 20px;
     top: 20px;
     height: 36px;
-    line-height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     padding: 0 16px;
     background: rgba(0,0,0,0.6);
     border-radius: 20px;

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

@@ -29,8 +29,10 @@ const currentTag = computed(() => store.getters['tags/currentTag'])
     left: 20px;
     top: 20px;
     height: 36px;
-    line-height: 36px;
-    padding: 0 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 16px;
     background: rgba(0,0,0,0.6);
     border-radius: 20px;
     color: #fff;