update

packages/qjkankan-editor/package.json

@@ -37,6 +37,7 @@
     "vue-cropperjs": "^4.2.0",
     "vue-demi": "^0.14.5",
     "vue-i18n": "^8.22.3",
+    "vue-marquee-text-component": "1.2.0",
     "vue-photo-preview": "^1.1.3",
     "vue-router": "^3.4.9",
     "vue-toast-notification": "^3.1.1",

packages/qjkankan-editor/src/framework/play/pano/components/list.vue

@@ -25,9 +25,9 @@
             class="swiper-slide"
             :class="{
               active: currentScene.id == item.id,
-              loopspan:
-                item.sceneTitle.length > spanlength &&
-                currentScene.id == item.id,
+              // loopspan:
+              //   item.sceneTitle.length > spanlength &&
+              //   currentScene.id == item.id,
             }"
             :style="{ backgroundImage: `url(${item.icon})` }"
             v-for="(item, i) in currentScenesList"
@@ -37,7 +37,7 @@
               class="iconfont icon-edit_type_3d"
               :class="{ iconedit_type_panorama: item.type !== '4dkk' }"
             ></i>
-            <div>
+            <!-- <div>
               <span v-if="currentScene.id == item.id">{{
                 item.sceneTitle
               }}</span>
@@ -46,6 +46,22 @@
                   ? item.sceneTitle.slice(0, spanlength)
                   : item.sceneTitle
               }}</span>
+            </div> -->
+            <div class="marquee">
+              <marquee-text
+                :repeat="1"
+                :duration="Math.ceil(item.sceneTitle.length / 10) * 5"
+                :key="item.id"
+                v-if="
+                  item.sceneTitle.length > spanlength &&
+                  currentScene.id == item.id
+                "
+              >
+                {{ item.sceneTitle }}
+              </marquee-text>
+              <span v-else>
+                {{ item.sceneTitle }}
+              </span>
             </div>
           </li>
         </ul>
@@ -77,14 +93,20 @@
             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>
+          <marquee-text
+              :duration="Math.ceil(fixTitle(item.name).length / 10) * 5"
+              :key="item.id"
+              :repeat="1"
+              v-if="
+                fixTitle(item.name).length > spanlength &&
+                currentSecondary.id == item.id
+              "
+            >
+              {{ fixTitle(item.name) }}
+            </marquee-text>
+            <span v-else>
+              {{ fixTitle(item.name) }}
+            </span>
           </li>
         </ul>
       </div>
@@ -110,14 +132,20 @@
           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>
+        <marquee-text
+            :duration="Math.ceil(fixTitle(item.name).length / 10) * 5"
+            :key="item.id"
+            :repeat="1"
+            v-if="
+              fixTitle(item.name).length > spanlength &&
+              currentCatalogRoot.id == item.id
+            "
+          >
+            {{ fixTitle(item.name) }}
+          </marquee-text>
+          <span v-else>
+            {{ fixTitle(item.name) }}
+          </span>
         </li>
       </ul>
     </div>
@@ -127,8 +155,10 @@
 <script>
 import { mapGetters } from "vuex";
 import { debounce } from "lodash";
+import MarqueeText from "vue-marquee-text-component";
 
 export default {
+  components: { MarqueeText },
   data() {
     return {
       spanlength: 6,

packages/qjkankan-kankan-view/src/pages/SMG.vue

@@ -15,7 +15,7 @@
         <p
           class="change"
           v-if="controls.showDollhouse"
-          @click="changeMode('dollhouse')"
+          @click.stop="changeMode('dollhouse')"
         >
           <ui-icon type="show_3d_normal"></ui-icon>
           {{ $t("mode.dollhouseModel") }}
@@ -78,7 +78,7 @@ import Guide from "@/components/shared/Guide.vue";
 import Password from "@/components/shared/Password.vue";
 
 import { createApp } from "@/app";
-import { ref, onMounted, computed, nextTick, watch } from "vue";
+import { ref, onMounted, computed, nextTick, watch, unref } from "vue";
 import { useStore } from "vuex";
 import browser from "@/utils/browser";
 import { useApp, getApp } from "@/app";
@@ -187,16 +187,16 @@ watch(
 watch(
   () => mode.value,
   (val, old) => {
-    console.log(val);
+    console.error("mode", unref(val));
     let timer = setTimeout(() => {
       clearTimeout(timer);
-      if (val == "floorplan") {
+      if (unref(val) == "floorplan") {
         if (floorplan_ref.value && floorplan_ref.value) {
           background.value.style.width =
             floorplan_ref.value.getBoundingClientRect().width + "px";
           background.value.style.left = floorplan_ref.value.offsetLeft + "px";
         }
-      } else if (val == "dollhouse") {
+      } else if (unref(val) == "dollhouse") {
         if (dollhouse_ref.value && dollhouse_ref.value) {
           background.value.style.width =
             dollhouse_ref.value.getBoundingClientRect().width + "px";
@@ -227,6 +227,7 @@ const changeMode = (name, e) => {
     // }, 0)
   }
 };
+
 // console.dir(document.querySelector(".tabs>span:last-of-type"));
 const toggleMap = () => {
   isCollapse.value = !isCollapse.value;
@@ -252,6 +253,8 @@ const onClickTagInfo = (el) => {
 };
 
 onMounted(() => {
+  window.changeMode = changeMode;
+
   const app = createApp({
     num: browser.getURLParam("m"),
     dom: scene$.value,

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

@@ -168,10 +168,10 @@ import {
 } from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
-
+import MarqueeText from "vue-marquee-text-component";
 import { useI18n, getLocale } from "@/i18n";
 const { t } = useI18n({ useScope: "global" });
-import MarqueeText from "vue-marquee-text-component";
+
 const store = useStore();
 
 const spanlength = ref(5);
@@ -555,8 +555,11 @@ $width: 1150px;
     -webkit-transform: translateX(-180%);
   }
 }
-.marquee-text-wrap {
+.marquee{
+  .marquee-text-wrap {
   height: 20px;
   line-height: 20px;
 }
+}
+
 </style>

yarn.lock

@@ -17135,6 +17135,14 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     watchpack "^2.4.0"
 
+vue-marquee-text-component@1.2.0:
+  version "1.2.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/vue-marquee-text-component/-/vue-marquee-text-component-1.2.0.tgz#5c93a8b3d3d0b625d88524d854a3bcf6e6b116d3"
+  integrity sha512-wMqr7AnyCF1VjXFAnAXavAD2yCeiBULy6AbLet/YIGaI2KzuaUmi+Q3UyFYJOM2gWt994jl2PWilnkh9heLqAA==
+  dependencies:
+    core-js "^3.6.5"
+    vue "^2.5.17"
+
 vue-marquee-text-component@^2.0.1:
   version "2.0.1"
   resolved "https://mirrors.cloud.tencent.com/npm/vue-marquee-text-component/-/vue-marquee-text-component-2.0.1.tgz#62691df195f755471fa9bdc9b1969f836a922b9a"
@@ -17238,7 +17246,7 @@ vue3-smooth-scrollbar@^1.0.2:
     smooth-scrollbar "^8.6.2"
     vue "^3.0.4"
 
-vue@^2.4.4, vue@^2.6.12:
+vue@^2.4.4, vue@^2.5.17, vue@^2.6.12:
   version "2.7.14"
   resolved "http://192.168.0.47:4873/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
   integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==