修改页面样式

src/App.vue

@@ -6,42 +6,48 @@
 import { ref, onMounted, watch, nextTick, provide, computed } from "vue";
 import emitter from "@/mitt/index";
 import { useRoute } from "vue-router";
-import browser from '@/utils/browser'
+import browser from "@/utils/browser";
 import wxShare from "@/utils/wxshare";
 
-const isMobile = computed(() => browser.isMobile())
-const detectIPad = computed(() => browser.detectIPad())
+const isMobile = computed(() => browser.isMobile());
+const detectIPad = computed(() => browser.detectIPad());
 
-const isLandscape = ref(window.orientation === 90 || window.orientation === -90)
-watch(isLandscape, ()=>{
+const isLandscape = ref(
+  window.orientation === 90 || window.orientation === -90
+);
+watch(isLandscape, () => {
   if (isLandscape.value) {
-    window.location.reload()
+    window.location.reload();
   }
 });
 
 onMounted(() => {
-  nextTick(()=>{
+  nextTick(() => {
     wxShare({
-        title: `香山湖酒店`,
-        desc: ``,
-        link: window.location.href.split("#")[0],
-        imgUrl: "https://culture.4dage.com/demo/xiangshanhu/sharelogo.png",
-      });
-  })
+      title: `香山湖酒店`,
+      desc: ``,
+      link: window.location.href.split("#")[0],
+      imgUrl: "https://culture.4dage.com/demo/xiangshanhu/sharelogo.png",
+    });
+  });
   if (isMobile.value || detectIPad.value) {
     // window.orientation：获取屏幕旋转方向
-    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
-      // 正常方向或屏幕旋转180度
-      if (window.orientation === 180 || window.orientation === 0) {
-        isLandscape.value = false
-      }
+    window.addEventListener(
+      "onorientationchange" in window ? "orientationchange" : "resize",
+      () => {
+        // 正常方向或屏幕旋转180度
+        if (window.orientation === 180 || window.orientation === 0) {
+          isLandscape.value = false;
+        }
 
-      // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
-      if (window.orientation === 90 || window.orientation === -90) {
-        isLandscape.value = true
+        // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
+        if (window.orientation === 90 || window.orientation === -90) {
+          isLandscape.value = true;
+        }
       }
-    });
+    );
   }
+  localStorage.setItem("listIsShow", true);
 });
 </script>
 
@@ -83,7 +89,7 @@ body {
     width: 80%;
     padding: 20px;
 
-    >p {
+    > p {
       text-align: center;
       font-size: 18px;
       line-height: 2;

src/store/index.js

@@ -16,13 +16,14 @@ const appStore = defineStore('app', {
     secondaryList: {},
     //当前场景分组
     currentScenesList: {},
+    // 是否隐藏
+    listIsShow: true
   }),
   getters: {},
   actions: {
     // 设置当前二级分组
     setCurrentSecondary(payload) {
       this.currentSecondary = payload;
-
       let arr = this.list.filter((item) => {
         return this.currentSecondary.id == item.category;
       });
@@ -49,7 +50,6 @@ const appStore = defineStore('app', {
             }
           });
         });
-
       this.setSecondaryList(temp)
     },
 
@@ -60,6 +60,16 @@ const appStore = defineStore('app', {
         this.setCurrentSecondary(payload[0])
       }
     },
+    // 设置currentScene为该层第一个（只有点击区域时候触发）
+    setCurrentSceneFirst() {
+      this.currentScene = this.currentScenesList[0]
+    },
+    // 设置列表是否显示
+    setListIsShow (isShow) {
+      this.listIsShow = isShow
+      // 存放到本地，实现大场景代码的交互
+      localStorage.setItem('listIsShow', isShow)
+    }
   },
 });
 

src/views/map/raside.vue

@@ -1,28 +1,61 @@
 <template>
   <div class="asidecon">
-    <img class="back" @click="emit('close')" :src="require(`@/assets/images/resource/map/ico_back2.png`)" alt="" />
+    <img
+      class="back"
+      @click="emit('close')"
+      :src="require(`@/assets/images/resource/map/ico_back2.png`)"
+      alt=""
+    />
     <ul>
       <li v-for="(item, i) in list" :key="i">
-        <p>
-          <img :src="require(`@/assets/images/resource/map/${item.color}.png`)" alt="">
-          {{ item.name }}
+        <p v-if="item.color">
+          <img
+            :src="require(`@/assets/images/resource/map/${item.color}.png`)"
+            alt=""
+          />
+          {{ item.name + item.color }}
         </p>
         <ul>
-          <li @click="handleItem(sub)" :class="{ active: paramsId == sub.sceneCode?.toLowerCase() }" v-for="(sub, idx) in item.children" :key="idx">
+          <li
+            @click="handleItem(sub)"
+            :class="{ active: paramsId == sub.sceneCode?.toLowerCase() }"
+            :style="{
+              background:
+                paramsId == sub.sceneCode?.toLowerCase() &&
+                item.color == 'ico_blue'
+                  ? '#5fb6dc94'
+                  : paramsId == sub.sceneCode?.toLowerCase() &&
+                    item.color == 'ico_green'
+                  ? '#6c9263b0'
+                  : paramsId == sub.sceneCode?.toLowerCase()
+                  ? '#e7e7052e'
+                  : '',
+              border:
+                paramsId == sub.sceneCode?.toLowerCase() &&
+                item.color == 'ico_blue'
+                  ? '1px solid  #459bb6'
+                  : paramsId == sub.sceneCode?.toLowerCase() &&
+                    item.color == 'ico_green'
+                  ? '1px solid  #506943'
+                  : paramsId == sub.sceneCode?.toLowerCase()
+                  ? '1px solid  #dc9e4a'
+                  : '',
+            }"
+            v-for="(sub, idx) in item.children"
+            :key="idx"
+          >
             <span>{{ sub.sceneTitle }}</span>
           </li>
         </ul>
       </li>
     </ul>
-</div>
+  </div>
 </template>
 
 <script setup>
-
-
 import { onMounted, computed, inject, ref, defineEmits, nextTick } from "vue";
-import appStore from '@/store/index';
-import { scene,tag_position } from '@/data';
+import appStore from "@/store/index";
+import { scene, tag_position } from "@/data";
 import { useRouter, useRoute } from "vue-router";
 
 const store = appStore();
@@ -30,86 +63,87 @@ const emit = defineEmits(["close"]);
 const router = useRouter();
 const route = useRoute();
 
-console.log('result:route.params.id', route.params.id);
-const paramsId = computed(() => route.params.id.toLowerCase())
+console.log("result:route.params.id", route.params.id);
+const paramsId = computed(() => route.params.id.toLowerCase());
 
-let number = 'WK1597972789485113344'
+let number = "WK1597972789485113344";
 
-let list = ref([])
+let list = ref([]);
 
-const COLORMAP = ['ico_blue', 'ico_green', 'ico_yellow']
+const COLORMAP = ["ico_blue", "ico_green", "ico_yellow"];
 
-const handleItem = (item)=>{
-  router.replace({name:'scene',params:{
-    id:item.sceneCode
-  }})
-}
+const handleItem = (item) => {
+  router.replace({
+    name: "scene",
+    params: {
+      id: item.sceneCode,
+    },
+  });
+};
 
 onMounted(() => {
   $.ajax({
-    method: 'get',
-    url: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${number}/someData.json?_=${Math.random()}`,
-    dataType: 'json',
+    method: "get",
+    url: `${
+      process.env.VUE_APP_CDN
+    }/720yun_fd_manage/${number}/someData.json?_=${Math.random()}`,
+    dataType: "json",
     success(data) {
-      store.metadata = data
-      data.scenes = scene.concat(data.scenes).map(item=>{
+      store.metadata = data;
+      data.scenes = scene.concat(data.scenes).map((item) => {
         return {
           ...item,
-          tag_position: tag_position[item.sceneCode]
-        }
-      })
-
+          tag_position: tag_position[item.sceneCode],
+        };
+      });
       // 过滤空分组
       let ttt = data.catalogRoot.filter((item) => {
-        let flag = ''
-
+        let flag = "";
         if (item.children) {
           item.children.some((sub) => {
-            flag = data.scenes.some(son => {
+            flag = data.scenes.some((son) => {
               // console.log(String(son.category).toLowerCase(), String(sub).toLowerCase());
-              return String(son.category).toLowerCase() == String(sub).toLowerCase()
-            })
-            return flag
+              return (
+                String(son.category).toLowerCase() == String(sub).toLowerCase()
+              );
+            });
+            return flag;
           });
         }
-        return flag
+        return flag;
       });
 
-      console.log('result:', ttt);
-
+      console.log("result:", ttt);
 
       list.value = ttt.map((item, idx) => {
         let cc = item.children.map((sub, i) => {
           let arr = data.scenes.filter((son) => {
             return sub == son.category;
           });
-          return arr
-        })
+          return arr;
+        });
         return {
           ...item,
           children: cc[0],
-          color: COLORMAP[idx]
-        }
-      })
-
-      console.log('result:', list.value);
+          color: COLORMAP[idx],
+        };
+      });
+      console.log("result:", list.value);
       // 查询初始场景的所在2级分组
       // store.setCurrentSecondary(catalog);
-
     },
-    error() {
-
-    }   //请求失败后的回调函数
-  })
-
-})
-
+    error() {}, //请求失败后的回调函数
+  });
+});
 </script>
 
 <style lang="scss" scoped>
+::-webkit-scrollbar {
+  display: none;
+}
 .asidecon {
   width: 100%;
-  padding: 20px 26px;
+  padding: 20px 0px 20px 26px;
   height: 100%;
 
   .back {
@@ -118,21 +152,21 @@ onMounted(() => {
     margin-bottom: 20px;
   }
 
-  >ul {
+  > ul {
     height: calc(100% - 40px);
     overflow-y: auto;
 
-    >li {
+    > li {
       margin-bottom: 40px;
 
-      >p {
+      > p {
         font-size: 26px;
         font-weight: bold;
         color: #484641;
         padding-left: 48px;
         position: relative;
 
-        >img {
+        > img {
           position: absolute;
           left: 0;
           top: 50%;
@@ -142,30 +176,47 @@ onMounted(() => {
         }
       }
 
-      >ul {
-        >li {
+      > ul {
+        > li {
           margin: 10px 0;
           cursor: pointer;
           height: 46px;
           font-size: 20px;
           color: #484641;
           line-height: 46px;
+          padding-left: 48px;
+          overflow: hidden;
+          text-overflow: ellipsis;
 
-          >span {
+          > span {
             display: inline-block;
           }
 
           // &:hover,
           &.active {
-            width: 80%;
+            width: 100%;
             height: 100%;
-            background: linear-gradient(270deg, #8D7F64 0%, rgba(141, 127, 100, 0) 100%);
-            border-top-right-radius: 30px;
-            border-bottom-right-radius: 30px;
+            // background: #6c9263b0;
+            border-top-left-radius: 30px;
+            border-bottom-left-radius: 30px;
+            border-right: none !important;
+            color: white;
+
+            // 绿色
+            // background: #6c9263b0;
+            // border: 1px solid #506943;
+
+            // 黄色
+            // background: #e7e7052e;
+            // border: 1px solid #dc9e4a;
+
+            // 蓝色
+            // background: #5fb6dc94;
+            // border: 1px solid #459bb6;
           }
         }
       }
     }
   }
 }
-</style>
+</style>

src/views/scene/ifr.vue

@@ -1,22 +1,44 @@
 <template>
-  <iframe id="ifr" :key="ifr" :src="ifr"></iframe>
+  <iframe id="ifr" :key="ifr" :src="ifr" ref="myifr"></iframe>
 </template>
 
 <script setup>
-import { ref, onMounted, computed, watch, nextTick,defineProps } from "vue";
+import { ref, onMounted, computed, watch, nextTick, defineProps } from "vue";
+import appStore from "@/store";
+const store = appStore();
 const props = defineProps({
   ifrsrc: {
-    default: '',
+    default: "",
   },
 });
 
-const ifr = computed(()=>props.ifrsrc)
+const ifr = computed(() => props.ifrsrc);
 
+// 发送参数
+const sendMsg = (data) => {
+  const iframeWin = document.getElementById("ifr").contentWindow;
+  iframeWin.postMessage(
+    {
+      params: {
+        listIsShow: data, //传的数据
+      },
+    },
+    // `https://houseoss.4dkankan.com/project/xiangshanhu/scene/index.html#/?m=${store.currentScene.sceneCode}`
+  );
+};
 
+
+store.$subscribe((mutation, state) => {
+  sendMsg(state.listIsShow);
+});
+
+onMounted(() => {
+  sendMsg(store.listIsShow);
+});
 </script>
 
 <style lang="scss" scoped>
-#ifr{
+#ifr {
   position: absolute;
   top: 0;
   left: 0;
@@ -26,4 +48,4 @@ const ifr = computed(()=>props.ifrsrc)
   height: 100%;
   z-index: 99;
 }
-</style>
+</style>

src/views/scene/index.vue

@@ -1,43 +1,62 @@
 <template>
   <div class="home">
     <pano />
-    <div class="mapcon" @click="router.push({ name: 'map', params: { id: store.currentScene.sceneCode } })">
+    <img class="up-icon" v-show="!store.listIsShow" src="../../assets/images/resource/scene/upIcon.png" @click="departure" />
+    <div class="planform-box">
+      <span>当前位置:{{ store.currentScene.sceneTitle }}</span>
+      <img src="../../assets/images/resource/scene/map-top.png" alt="" />
+    </div>
+    <div
+      class="mapcon"
+      @click="
+        router.push({
+          name: 'map',
+          params: { id: store.currentScene.sceneCode },
+        })
+      "
+    >
       <vmap :tagdata="tagData" />
       <!-- <vmap :left="`calc(-${tagData.left} )`" :top="`calc(-${tagData.top} )`"/> -->
     </div>
+
     <!-- <div @click="gohome" class="homeicon" v-if="isMobile">
         <img :src="require(`@/assets/images/resource/home.png`)" alt="" />
       </div>
       <vaside v-else /> -->
-</div>
+  </div>
 </template>
 
 <script setup>
-
 import vaside from "./aside";
 import { useRouter, useRoute } from "vue-router";
 import pano from "./pano";
 import vmap from "./mapIcon";
-import browser from '@/utils/browser'
+import browser from "@/utils/browser";
 import { onMounted, watch, computed, ref, nextTick } from "vue";
-import appStore from '@/store/index';
+import appStore from "@/store/index";
 import { tag_position } from "@/data";
 
 const router = useRouter();
 const store = appStore();
 
-const isMobile = computed(() => browser.isMobile())
-
-const tagData = computed(() => tag_position[store.currentScene.sceneCode] || {})
+const isMobile = computed(() => browser.isMobile());
 
+const tagData = computed(
+  () => tag_position[store.currentScene.sceneCode] || {}
+);
+const currentSceneTitme = ref("");
 
 const gohome = () => {
   router.push({
     path: `/`,
   });
   setTimeout(() => {
-    window.location.reload()
+    window.location.reload();
   }, 0);
+};
+
+const departure = () => {
+  store.setListIsShow(true)
 }
 </script>
 
@@ -47,20 +66,50 @@ const gohome = () => {
   height: 100%;
   position: relative;
   z-index: 10;
+  .planform-box {
+    width: 280px;
+    height: 200px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    z-index: 999;
+    background: #0c0c0c87;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+    border: 1px solid;
+    border-image: linear-gradient(to right, #dedcaf, #6d6a6a7d) 1;
 
+    span {
+      color: white;
+    }
+    img {
+      width: 100%;
+      height: calc(100% - 30px);
+      margin-top: 10px;
+    }
+  }
   .mapcon {
     position: absolute;
     z-index: 999;
-    left: 30px;
-    top: 60px;
-    width: 240px;
-    height: 240px;
+    right: 5px;
+    top: 220px;
+    width: 100px;
+    height: 100px;
     overflow: hidden;
     border-radius: 50%;
-    border: 4px solid #E1CEAA;
+    border: 4px solid #e1ceaa;
     cursor: pointer;
     background-color: #a6b5a8;
   }
+  .up-icon {
+    position: absolute;
+    z-index: 999;
+    width: 44px;
+    bottom: 60px;
+    right: 20px;
+    cursor: pointer;
+  }
 }
 
 @media screen and (max-width: 1000px) {
@@ -71,9 +120,8 @@ const gohome = () => {
       left: unset;
       right: 10px;
       top: 10px;
-      border: 2px solid #E1CEAA;
+      border: 2px solid #e1ceaa;
     }
-
   }
 }
 </style>

src/views/scene/list.vue

@@ -1,73 +1,149 @@
 <template>
-  <div class="bar-list">
-    <div class="swiper-container" id="swcatalogRoot"
-      :style="`width:${catalogRootW > innerW ? '100%' : (catalogRootW + 'px')}`"
-      v-if="store.metadata.catalogRoot.length > 0 && store.metadata.catalogs.length > 1">
+  <div class="bar-list" :class=" store.listIsShow ? '' : 'bar-list-hidden'">
+    <div
+      class="swiper-container"
+      id="swcatalogRoot"
+      v-if="
+        store.metadata.catalogRoot.length > 0 &&
+        store.metadata.catalogs.length > 1
+      "
+    >
       <ul class="swiper-wrapper" v-if="store.metadata.catalogRoot.length > 1">
-        <li class="swiper-slide" :class="{
-          active: store.currentCatalogRoot.id == item.id,
-          loopspan: item.name.length > spanlength && store.currentCatalogRoot.id == item.id,
-        }" @click="tabRoot(item)" v-for="(item, i) in store.metadata.catalogRoot" :key="i">
-          <span v-if="store.currentCatalogRoot.id == item.id">{{ item.name }}</span>
-          <span v-else>{{ item.name.length > spanlength ? item.name.slice(0, spanlength) : item.name }}</span>
+        <li
+          class="swiper-slide"
+          :class="{
+            active: store.currentCatalogRoot.id == item.id,
+            loopspan:
+              item.name.length > spanlength &&
+              store.currentCatalogRoot.id == item.id,
+          }"
+          @click="tabRoot(item)"
+          v-for="(item, i) in store.metadata.catalogRoot"
+          :key="i"
+        >
+          <div class="area-text" v-if="store.currentCatalogRoot.id == item.id">
+            {{ item.name }}
+            <div class="active-line"></div>
+          </div>
+          <div class="area-text" v-else>
+            {{
+              item.name.length > spanlength
+                ? item.name.slice(0, spanlength)
+                : item.name
+            }}
+            <!-- <div class="active-line"></div> -->
+          </div>
         </li>
       </ul>
+      <img
+        src="../../assets/images/resource/scene/downIcon.png"
+        @click="departure"
+      />
     </div>
-    <div class="bottom-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="store.currentScenesList.length > 0">
+    <div
+      class="bottom-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="store.currentScenesList.length > 0"
+      >
         <ul class="swiper-wrapper">
-          <li @click="tabCurrentScene(item)" class="swiper-slide" :class="{
-            active: store.currentScene.sceneCode == item.sceneCode,
-            loopspan: item.sceneTitle.length > spanlength && store.currentScene.id == item.id,
-          }" :style="{ backgroundImage: `url(${item.icon})` }" v-for="(item, i) in store.currentScenesList" :key="i">
+          <li
+            @click="tabCurrentScene(item)"
+            class="swiper-slide"
+            :class="{
+              active: store.currentScene.sceneCode == item.sceneCode,
+              loopspan:
+                item.sceneTitle.length > spanlength &&
+                store.currentScene.id == item.id,
+            }"
+            :style="{ backgroundImage: `url(${item.icon})` }"
+            v-for="(item, i) in store.currentScenesList"
+            :key="i"
+          >
             <div>
-              <span v-if="store.currentScene.id == item.id">{{ item.sceneTitle }}</span>
+              <span v-if="store.currentScene.id == item.id"
+                >{{ item.sceneTitle }}
+              </span>
               <span v-else>{{
-                item.sceneTitle.length > spanlength ? item.sceneTitle.slice(0, spanlength) :
-                  item.sceneTitle
+                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="store.secondaryList.length > 1">
+      <div
+        class="swiper-container"
+        id="swSecondary"
+        :style="`width:${secondaryW}px`"
+        v-if="store.secondaryList.length > 1"
+      >
         <ul class="swiper-wrapper">
-          <li class="swiper-slide" @click="tabSecondary(item)" :class="{
-            active: store.currentSecondary.id == item.id,
-            loopspan: item.name.length > spanlength && store.currentSecondary.id == item.id,
-          }" v-for="(item, i) in store.secondaryList" :key="i">
-            <span v-if="store.currentSecondary.id == item.id">{{ item.name }}</span>
-            <span v-else>{{ item.name.length > spanlength ? item.name.slice(0, spanlength) : item.name }}</span>
+          <li
+            class="swiper-slide"
+            @click="tabSecondary(item)"
+            :class="{
+              active: store.currentSecondary.id == item.id,
+              loopspan:
+                item.name.length > spanlength &&
+                store.currentSecondary.id == item.id,
+            }"
+            v-for="(item, i) in store.secondaryList"
+            :key="i"
+          >
+            <span v-if="store.currentSecondary.id == item.id">{{
+              item.name
+            }}</span>
+            <span v-else>{{
+              item.name.length > spanlength
+                ? item.name.slice(0, spanlength)
+                : item.name
+            }}</span>
           </li>
         </ul>
       </div>
     </div>
-
   </div>
 </template>
 
 <script setup>
-import appStore from '@/store/index';
+import appStore from "@/store/index";
 import { ref, onMounted, computed, watch, nextTick } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 
 const store = appStore();
 const spanlength = ref(5);
 
 const swidth = ref({
-  "swcatalogRoot": 130,
-  "swSecondary": 84,
-  "swScenes": 124,
-})
-
-const scenesListW = computed(() => store.currentScenesList.length * (swidth.value['swScenes'] + 10) - 10)
-const secondaryW = computed(() => store.secondaryList.length * (swidth.value['swSecondary'] + 10) - 10)
-const catalogRootW = computed(() => store.metadata.catalogRoot.length * (swidth.value['swcatalogRoot'] + 10) - 10)
-const innerW = computed(() => 1150)
-
+  swcatalogRoot: 130,
+  swSecondary: 84,
+  swScenes: 124,
+});
+
+const scenesListW = computed(
+  () => store.currentScenesList.length * (swidth.value["swScenes"] + 10) - 10
+);
+const secondaryW = computed(
+  () => store.secondaryList.length * (swidth.value["swSecondary"] + 10) - 10
+);
+const catalogRootW = computed(
+  () =>
+    store.metadata.catalogRoot.length * (swidth.value["swcatalogRoot"] + 10) -
+    10
+);
+const innerW = computed(() => 1150);
 
 const loadList = () => {
   nextTick(() => {
@@ -79,11 +155,11 @@ const loadList = () => {
           centeredSlides: true,
           spaceBetween: 10,
           centerInsufficientSlides: true,
-          mousewheel:true,
+          mousewheel: true,
           centeredSlidesBounds: true,
           freeMode: true,
           observer: true,
-          observeParents:true
+          observeParents: true,
         });
       });
     }, 100);
@@ -92,6 +168,7 @@ const loadList = () => {
 
 const tabCurrentScene = (data) => {
   store.currentScene = data;
+  route.params.id = data.sceneCode;
 };
 
 const tabSecondary = (data) => {
@@ -100,91 +177,131 @@ const tabSecondary = (data) => {
 
 const tabRoot = (data) => {
   store.setCurrentCatalogRoot(data);
+  setTimeout(() => {
+    // 当前场景初始化为第一个
+    store.setCurrentSceneFirst();
+  }, 300);
 };
 
-
+// 向下离场
+const departure = () => {
+  store.setListIsShow(false)
+};
 
 onMounted(() => {
-  loadList()
+  loadList();
   store.$subscribe((mutation, state) => {
-    loadList()
-  })
-})
-
+    loadList();
+  });
+});
 </script>
 <style lang="scss" scoped>
-$width: 1150px;
+$width: 100%;
 
+.bar-list-hidden {
+  bottom: -200px !important;
+}
 .bar-list {
   position: absolute;
   bottom: 68px;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
-  max-width: $width;
+  width: $width;
   overflow: hidden;
-  transition: .3s all ease;
+  transition: 0.3s all ease;
   z-index: 9999;
+  // border-top: 2px solid #e1ceaa;
+  // border-bottom: 2px solid #e1ceaa;
+  background: linear-gradient(
+    89deg,
+    rgba(141, 127, 100, 0) 0%,
+    rgb(158 135 90 / 35%) 22%,
+    rgba(141, 127, 100, 0.56) 80%,
+    rgb(141 127 100 / 56%) 100%
+  );
+  backdrop-filter: blur(20px);
+  padding: 10px;
+  transition-property: bottom;
+  transition-duration: 0.5s;
+  pointer-events: all;
+  box-shadow: inset 0px 2px 5px 0px rgba(255, 255, 255, 0.25);
+  bottom: 0;
+
+  .up-icon {
+    position: absolute;
+    top: -20px;
+    z-index: 999;
+  }
 
   .swiper-container {
     width: 100%;
     position: relative;
-    margin: 0 auto;
+    // margin-top: 10px;
 
-    >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);
+          color: rgba(255, 255, 255);
+          font-weight: bold;
+          font-size: 14px;
         }
 
         &.loopspan {
-
-          >span,
-          >div>span {
+          > span,
+          > div > span {
             animation: 5s wordsLoop linear infinite normal;
           }
         }
 
         &.active {
-
-          >span,
-          >div>span {
-            color: rgba(255, 255, 255, 1);
+          .area-text {
+            color: rgba(255, 255, 255, 1) !important;
+            font-weight: bold !important;
           }
         }
+
+        .active-line {
+          width: 80%;
+          height: 4px;
+          background-color: #e1ceaaad;
+          position: absolute;
+          bottom: 5px;
+          left: 10px;
+        }
       }
     }
   }
 
   .bottom-con {
-    margin: 20px auto 0;
+    margin: 0px auto 0;
     padding: 10px;
-    border-top: 2px solid #E1CEAA;
-    border-bottom: 2px solid #E1CEAA;
-    background: linear-gradient(89deg, rgba(141,127,100,0) 0%, rgba(141,127,100,0.8) 22%, rgba(141,127,100,0.8) 80%, rgba(141,127,100,0) 100%);
-    backdrop-filter: blur(20px);
   }
 
   #swcatalogRoot {
-    >ul {
-      >li {
+    .swiper-wrapper {
+      transform: translate3d(0, 0px, 0px) !important;
+    }
+    > ul {
+      > li {
         box-sizing: border-box;
         overflow: hidden;
-        width: 130px;
+        width: 90px;
         line-height: 30px;
         height: 30px;
-        background: rgba(132,115,83,0.5);
-        border-radius: 25px 25px 25px 25px;
-        border: 1px solid #E1CEAA;
-        backdrop-filter: blur(4px);
-        >span {
+        .area-text {
           width: 100%;
           word-break: keep-all;
+          color: #ffffff;
+          font-weight: 400;
+          cursor: pointer;
+          position: relative;
+          font-size: 14px;
         }
 
         &.active {
@@ -192,19 +309,28 @@ $width: 1150px;
         }
       }
     }
+
+    img {
+      width: 35px;
+      position: absolute;
+      right: 20px;
+      z-index: 999;
+      top: -2px;
+      cursor: pointer;
+    }
   }
 
   #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;
         }
@@ -230,8 +356,8 @@ $width: 1150px;
   }
 
   #swScenes {
-    >ul {
-      >li {
+    > ul {
+      > li {
         cursor: pointer;
         border-radius: 6px;
         border: 2px solid transparent;
@@ -242,7 +368,7 @@ $width: 1150px;
         width: 124px;
         height: 90px;
         border-radius: 1px;
-        &::after{
+        &::after {
           position: absolute;
           top: 0;
           left: 0;
@@ -250,19 +376,21 @@ $width: 1150px;
           width: 100%;
           height: 100%;
           display: inline-block;
-          background: rgba(0,0,0,0.3);
-          content: '';
+          background: rgba(0, 0, 0, 0.5);
+          content: "";
           pointer-events: none;
         }
-        >div {
+        > div {
           position: absolute;
-          bottom: 10px;
-          left: 0;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          left: 50%;
           height: 20px;
           width: 100%;
           overflow: hidden;
+          z-index: 999;
 
-          >span {
+          > span {
             width: 100%;
             line-height: 20px;
             word-break: keep-all;
@@ -270,12 +398,30 @@ $width: 1150px;
         }
 
         &.active {
-          border: 2px solid #D9C7A4;
-          &::after{
-            display: none;
+          border: 2px solid #d9c7a4;
+          &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            display: inline-block;
+            background: linear-gradient(
+              to top,
+              rgb(0 0 0 / 59%),
+              rgba(255, 0, 0, 0)
+            );
+            content: "";
+            pointer-events: none;
           }
-          >div {
-            >span {}
+          > div {
+            top: auto;
+            bottom: 10px;
+            transform: translate(0, 0);
+            left: 0;
+            > span {
+            }
           }
         }
       }

src/views/scene/pano.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="panocon">
     <div id="pano"></div>
-    <ifr v-if="store.currentScene.type != 'pano'" :src="fdkk_link" frameborder="0"></ifr>
+    <ifr
+      v-if="store.currentScene.type != 'pano'"
+      :src="fdkk_link"
+      frameborder="0"
+    ></ifr>
     <template v-if="loadFinish">
       <mblist v-if="isMobile" />
-      <list v-else />
+      <div v-else>
+        <list />
+      </div>
     </template>
-</div>
+  </div>
 </template>
 
 <script setup>
-
-
-
-
 import { ref, onMounted, computed, watch, onUnmounted, nextTick } from "vue";
 import list from "./list.vue";
 import mblist from "./mblist.vue";
@@ -23,66 +25,68 @@ import Tags from "@/utils/Tag";
 import Scene from "@/utils/Scene";
 import emitter from "@/mitt/index";
 import { useRouter, useRoute } from "vue-router";
-import browser from '@/utils/browser'
+import browser from "@/utils/browser";
 
-import appStore from '@/store/index';
-import { scene,order } from "@/data";
+import appStore from "@/store/index";
+import { scene, order } from "@/data";
 
 const store = appStore();
-const isMobile = computed(() => browser.isMobile())
+const isMobile = computed(() => browser.isMobile());
 
-const loadFinish = ref(false)
+const loadFinish = ref(false);
 
 const route = useRoute();
 
-let number = 'WK1597972789485113344'
+let number = "WK1597972789485113344";
 
 let gdBgm = new Audio();
 
-gdBgm.src = ''
-
+gdBgm.src = "";
 
 const fdkk_link = computed(() => {
-  let url = ''
-
-  if (store.currentScene.type == '4dkk') {
-    url = browser.isMobile() ?
-      `https://www.4dkankan.com/embed.html?from=mingyuan&m=${store.currentScene.sceneCode}`
-      : `https://www.4dkankan.com/spc.html?m=${store.currentScene.sceneCode}`
-  }
-  else if (store.currentScene.type == 'oldfdkk') {
-    url = `https://www.4dkankan.com/spc.html?m=${store.currentScene.sceneCode}`
-  }
-  else if (store.currentScene.type == 'bigscene') {
-    url = `https://www.4dmodel.com/SuperTwo/index.html?m=${store.currentScene.sceneCode}`
-  }
-  else {
-    url = ``
+  let url = "";
+
+  if (store.currentScene.type == "4dkk") {
+    url = browser.isMobile()
+      ? `https://www.4dkankan.com/embed.html?from=mingyuan&m=${store.currentScene.sceneCode}`
+      : `https://www.4dkankan.com/spc.html?m=${store.currentScene.sceneCode}`;
+  } else if (store.currentScene.type == "oldfdkk") {
+    url = `https://www.4dkankan.com/spc.html?m=${store.currentScene.sceneCode}`;
+  } else if (store.currentScene.type == "bigscene") {
+    // url = `https://www.4dmodel.com/SuperTwo/index.html?m=${store.currentScene.sceneCode}`;
+    url = `https://houseoss.4dkankan.com/project/xiangshanhu/scene/index.html?m=${store.currentScene.sceneCode}`;
+  } else {
+    url = ``;
   }
 
-  return url
-})
-
+  return url;
+});
 
 const loadScene = (currentScene) => {
   if (window.krpanoDom) {
     let { sceneCode, initVisual, someData } = currentScene;
-    if (window.krpanoDom.get('xml.scene').toLowerCase() == `scene_${sceneCode}`.toLowerCase()) {
-      return
+    if (
+      window.krpanoDom.get("xml.scene").toLowerCase() ==
+      `scene_${sceneCode}`.toLowerCase()
+    ) {
+      return;
     }
 
-    window.krpanoDom.call(`skin_loadscene('scene_${sceneCode}',${initVisual ? initVisual.vlookat : '0'},${initVisual ? initVisual.hlookat : '0'})`);
+    window.krpanoDom.call(
+      `skin_loadscene('scene_${sceneCode}',${
+        initVisual ? initVisual.vlookat : "0"
+      },${initVisual ? initVisual.hlookat : "0"})`
+    );
     if (someData && someData.hotspots && someData.hotspots.length > 0) {
       window.__sdk.Tags.initHotspot(someData.hotspots, false);
     }
   }
 };
 
-
-
 const updateListPosi = () => {
-
-  let catalog = store.metadata.catalogs.find((item) => item.id == store.currentScene.category);
+  let catalog = store.metadata.catalogs.find(
+    (item) => item.id == store.currentScene.category
+  );
   // 查询初始场景的所在1级分组
   store.metadata.catalogRoot.forEach((item) => {
     let temp = item.children && item.children.find((sub) => sub == catalog.id);
@@ -93,7 +97,7 @@ const updateListPosi = () => {
   });
   // 查询初始场景的所在2级分组
   store.setCurrentSecondary(catalog);
-}
+};
 
 store.$subscribe((mutation, state) => {
   if (state.currentScene) {
@@ -101,50 +105,59 @@ store.$subscribe((mutation, state) => {
       loadScene(state.currentScene);
     });
   }
-})
+});
 
 onUnmounted(() => {
   removepano("#pano");
 }),
-
   onMounted(() => {
-    window.krpanoDom = null
+    window.krpanoDom = null;
     $.ajax({
-      method: 'get',
-      url: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${number}/someData.json?_=${Math.random()}`,
-      dataType: 'json',
+      method: "get",
+      url: `${
+        process.env.VUE_APP_CDN
+      }/720yun_fd_manage/${number}/someData.json?_=${Math.random()}`,
+      dataType: "json",
       success(data) {
-        store.metadata = data
-        store.list = (scene.concat(data.scenes)).sort((a,b)=>{
-          return order.indexOf(a.sceneTitle) - order.indexOf(b.sceneTitle)
-        })
+        store.metadata = data;
+        store.list = scene.concat(data.scenes).sort((a, b) => {
+          return order.indexOf(a.sceneTitle) - order.indexOf(b.sceneTitle);
+        });
 
-        let firstScene = store.list.find((item) => item.sceneCode == route.params.id);
-        store.currentScene = firstScene || data.scenes[0]
+        let firstScene = store.list.find(
+          (item) => item.sceneCode == route.params.id
+        );
+        store.currentScene = firstScene || data.scenes[0];
 
         // 过滤空分组
         let ttt = data.catalogRoot.filter((item) => {
-          let flag = ''
+          let flag = "";
 
           if (item.children) {
             item.children.some((sub) => {
-              flag = store.list.some(son => {
+              flag = store.list.some((son) => {
                 // console.log(String(son.category).toLowerCase(), String(sub).toLowerCase());
-                return String(son.category).toLowerCase() == String(sub).toLowerCase()
-              })
-              return flag
+                return (
+                  String(son.category).toLowerCase() ==
+                  String(sub).toLowerCase()
+                );
+              });
+              return flag;
             });
           }
-          return flag
+          return flag;
         });
 
-        data.catalogRoot = ttt
+        data.catalogRoot = ttt;
 
-        let catalog = data.catalogs.find((item) => item.id == store.currentScene.category);
+        let catalog = data.catalogs.find(
+          (item) => item.id == store.currentScene.category
+        );
 
         // 查询初始场景的所在1级分组
         data.catalogRoot.forEach((item) => {
-          let temp = item.children && item.children.find((sub) => sub == catalog.id);
+          let temp =
+            item.children && item.children.find((sub) => sub == catalog.id);
           if (temp) {
             store.setCurrentCatalogRoot(item);
             return;
@@ -154,75 +167,84 @@ onUnmounted(() => {
         // 查询初始场景的所在2级分组
         store.setCurrentSecondary(catalog);
 
-        loadFinish.value = true
+        loadFinish.value = true;
         window.onPanoReady = () => {
           if (!window.krpanoDom) {
             window.krpanoDom = document.getElementById("krpanoSWFObject");
             let app = {
-              krpanoDom: window.krpanoDom
-            }
+              krpanoDom: window.krpanoDom,
+            };
             window.__sdk = {
-              Tags: '',
-              Scene
-            }
-            window.__sdk.Tags = new Tags(app)
-            window.__sdk.Scene = new Scene(app)
-            let { someData } = store.currentScene
+              Tags: "",
+              Scene,
+            };
+            window.__sdk.Tags = new Tags(app);
+            window.__sdk.Scene = new Scene(app);
+            let { someData } = store.currentScene;
             window.__sdk.Scene.on("sceneReady", (data) => {
-              if (someData && someData.hotspots && someData.hotspots.length > 0) {
+              if (
+                someData &&
+                someData.hotspots &&
+                someData.hotspots.length > 0
+              ) {
                 window.__sdk.Tags.initHotspot(someData.hotspots, false);
               }
-            })
+            });
             window.__sdk.Tags.on("clickHotspot", (data) => {
               let { id } = data;
-              let tt = store.currentScene.someData.hotspots.find((item) => item.name == id);
-              if (tt.hotspotType == 'scene') {
-                store.currentScene = store.list.find(item => item.id == tt.secne.id)
+              let tt = store.currentScene.someData.hotspots.find(
+                (item) => item.name == id
+              );
+              if (tt.hotspotType == "scene") {
+                store.currentScene = store.list.find(
+                  (item) => item.id == tt.secne.id
+                );
                 // store.commit("scene/setCurrentScene", scenesList.value.find(item => item.id == tt.secne.id));
-                updateListPosi()
+                updateListPosi();
               }
             });
           }
         };
 
         window.onRemovepano = () => {
-          console.log('result:onRemovepano');
-        }
+          console.log("result:onRemovepano");
+        };
 
         let settings = {
           "events[skin_events].onloadcomplete": "js(window.onPanoReady());",
           "events[skin_events].onremovepano": "js(window.onRemovepano());",
-
         };
         removepano("#pano");
         $("#pano").empty();
 
         embedpano({
           // xml: `showviewer/lib/krpano/tour.xml?rnd=${Math.random()}`,
-          xml: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${number}/tour.xml?rnd=${Math.random()}`,
-          swf: "%HTMLPATH%/resource/js/lib/krpano/tour.swf" + `?rnd=${Math.random()}`,
+          xml: `${
+            process.env.VUE_APP_CDN
+          }/720yun_fd_manage/${number}/tour.xml?rnd=${Math.random()}`,
+          swf:
+            "%HTMLPATH%/resource/js/lib/krpano/tour.swf" +
+            `?rnd=${Math.random()}`,
           target: "pano",
           html5: "auto",
           mobilescale: 1,
           vars: {
             startscene: "scene_" + store.currentScene.sceneCode,
-            "view.vlookat": store.currentScene.initVisual ? store.currentScene.initVisual.vlookat : 0,
-            "view.hlookat": store.currentScene.initVisual ? store.currentScene.initVisual.hlookat : 0,
+            "view.vlookat": store.currentScene.initVisual
+              ? store.currentScene.initVisual.vlookat
+              : 0,
+            "view.hlookat": store.currentScene.initVisual
+              ? store.currentScene.initVisual.hlookat
+              : 0,
             "skin_settings.littleplanetintro": 1,
             "autorotate.enabled": true,
-            ...settings
+            ...settings,
           },
         });
-
-
       },
-      error() {
-
-      }   //请求失败后的回调函数
-    })
-  })
-
-
+      error() {}, //请求失败后的回调函数
+    });
+  });
 </script>
 
 <style lang="scss" scoped>
@@ -235,4 +257,4 @@ onUnmounted(() => {
     height: 100%;
   }
 }
-</style>
+</style>