更新细节错误

src/App.vue

@@ -1,4 +1,17 @@
 <script setup lang="ts">
+onMounted(() => {
+  //首先我们获得视口高度并将其乘以1%以获得1vh单位的值
+  let vh = window.innerHeight * 0.01;
+  // 然后，我们将——vh自定义属性中的值设置为文档的根
+  document.documentElement.style.setProperty("--vh", `${vh}px`);
+
+  // 我们监听resize事件 视图大小发生变化就重新计算1vh的值
+  window.addEventListener("resize", () => {
+    // 我们执行与前面相同的脚本
+    let vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+  });
+});
 </script>
 
 <template>

src/assets/data/Model/index.ts

@@ -102,11 +102,11 @@ const ModelList = [
     viewTop: "30%",
     viewLeft: "72%",
     swiperImage: [
-      "/public/image/swiperImage/天主堂/DJI_0312.JPG",
-      "/public/image/swiperImage/天主堂/DJI_0313.JPG",
-      "/public/image/swiperImage/天主堂/DJI_0314.JPG",
-      "/public/image/swiperImage/天主堂/DJI_0315.JPG",
-      "/public/image/swiperImage/天主堂/DJI_0317.JPG",
+      "./image/swiperImage/天主堂/DJI_0312.JPG",
+      "./image/swiperImage/天主堂/DJI_0313.JPG",
+      "./image/swiperImage/天主堂/DJI_0314.JPG",
+      "./image/swiperImage/天主堂/DJI_0315.JPG",
+      "./image/swiperImage/天主堂/DJI_0317.JPG",
     ],
   },
   {
@@ -212,12 +212,12 @@ const ModelList = [
     viewTop: "25%",
     viewLeft: "50%",
     swiperImage: [
-      "/public/image/swiperImage/老芜湖海关/DJI_0296.JPG",
-      "/public/image/swiperImage/老芜湖海关/DJI_0298.JPG",
-      "/public/image/swiperImage/老芜湖海关/DJI_0299.JPG",
-      "/public/image/swiperImage/老芜湖海关/DJI_0300.JPG",
-      "/public/image/swiperImage/老芜湖海关/DJI_0301.JPG",
-      "/public/image/swiperImage/老芜湖海关/DJI_0302.JPG",
+      "./image/swiperImage/老芜湖海关/DJI_0296.JPG",
+      "./image/swiperImage/老芜湖海关/DJI_0298.JPG",
+      "./image/swiperImage/老芜湖海关/DJI_0299.JPG",
+      "./image/swiperImage/老芜湖海关/DJI_0300.JPG",
+      "./image/swiperImage/老芜湖海关/DJI_0301.JPG",
+      "./image/swiperImage/老芜湖海关/DJI_0302.JPG",
     ],
   },
   {
@@ -323,9 +323,9 @@ const ModelList = [
     viewTop: "45%",
     viewLeft: "67%",
     swiperImage: [
-      "/public/image/swiperImage/英驻芜领事官邸旧址/DJI_0344.JPG",
-      "/public/image/swiperImage/英驻芜领事官邸旧址/DJI_0345.JPG",
-      "/public/image/swiperImage/英驻芜领事官邸旧址/DJI_0346.JPG",
+      "./image/swiperImage/英驻芜领事官邸旧址/DJI_0345.JPG",
+      "./image/swiperImage/英驻芜领事官邸旧址/DJI_0344.JPG",
+      "./image/swiperImage/英驻芜领事官邸旧址/DJI_0346.JPG",
     ],
   },
   {
@@ -431,9 +431,9 @@ const ModelList = [
     viewTop: "52%",
     viewLeft: "56%",
     swiperImage: [
-      "/public/image/swiperImage/英驻芜领事署旧址/DJI_0360.JPG",
-      "/public/image/swiperImage/英驻芜领事署旧址/DJI_0355.JPG",
-      "/public/image/swiperImage/英驻芜领事署旧址/DJI_0358.JPG",
+      "./image/swiperImage/英驻芜领事署旧址/DJI_0358.JPG",
+      "./image/swiperImage/英驻芜领事署旧址/DJI_0360.JPG",
+      "./image/swiperImage/英驻芜领事署旧址/DJI_0355.JPG",
     ],
   },
   {
@@ -539,9 +539,9 @@ const ModelList = [
     viewTop: "30%",
     viewLeft: "59%",
     swiperImage: [
-      "/public/image/swiperImage/总税务司公所旧址/DJI_0363.JPG",
-      "/public/image/swiperImage/总税务司公所旧址/DJI_0362.JPG",
-      "/public/image/swiperImage/总税务司公所旧址/DJI_0435.DNG",
+      "./image/swiperImage/总税务司公所旧址/DJI_0363.JPG",
+      "./image/swiperImage/总税务司公所旧址/DJI_0362.JPG",
+      "./image/swiperImage/总税务司公所旧址/DJI_0435.DNG",
     ],
   },
   {
@@ -647,11 +647,11 @@ const ModelList = [
     viewTop: "52%",
     viewLeft: "62%",
     swiperImage: [
-      "/public/image/swiperImage/洋员帮办楼旧址/DJI_0348.JPG",
-      "/public/image/swiperImage/洋员帮办楼旧址/DJI_0350.JPG",
-      "/public/image/swiperImage/洋员帮办楼旧址/DJI_0352.JPG",
-      "/public/image/swiperImage/洋员帮办楼旧址/DJI_0353.JPG",
-      "/public/image/swiperImage/洋员帮办楼旧址/DJI_0354.JPG",
+      "./image/swiperImage/洋员帮办楼旧址/DJI_0348.JPG",
+      "./image/swiperImage/洋员帮办楼旧址/DJI_0350.JPG",
+      "./image/swiperImage/洋员帮办楼旧址/DJI_0352.JPG",
+      "./image/swiperImage/洋员帮办楼旧址/DJI_0353.JPG",
+      "./image/swiperImage/洋员帮办楼旧址/DJI_0354.JPG",
     ],
   },
   {
@@ -759,14 +759,14 @@ const ModelList = [
     viewTop: "30%",
     viewLeft: "65%",
     swiperImage: [
-      "/public/image/swiperImage/神父楼旧址/DJI_0320.JPG",
-      "/public/image/swiperImage/神父楼旧址/DJI_0321.JPG",
-      "/public/image/swiperImage/神父楼旧址/DJI_0324.JPG",
-      "/public/image/swiperImage/神父楼旧址/DJI_0325.JPG",
-      "/public/image/swiperImage/神父楼旧址/DJI_0331.JPG",
-      "/public/image/swiperImage/神父楼旧址/DJI_0332.JPG",
-      "/public/image/swiperImage/神父楼旧址/DJI_0333.JPG",
-      "/public/image/swiperImage/神父楼旧址/DJI_0334.JPG",
+      "./image/swiperImage/神父楼旧址/DJI_0320.JPG",
+      "./image/swiperImage/神父楼旧址/DJI_0321.JPG",
+      "./image/swiperImage/神父楼旧址/DJI_0324.JPG",
+      "./image/swiperImage/神父楼旧址/DJI_0325.JPG",
+      "./image/swiperImage/神父楼旧址/DJI_0331.JPG",
+      "./image/swiperImage/神父楼旧址/DJI_0332.JPG",
+      "./image/swiperImage/神父楼旧址/DJI_0333.JPG",
+      "./image/swiperImage/神父楼旧址/DJI_0334.JPG",
     ],
   },
   {
@@ -872,9 +872,9 @@ const ModelList = [
     viewTop: "17%",
     viewLeft: "34%",
     swiperImage: [
-      "/public/image/swiperImage/天主教主教公署旧址/DJI_0383.JPG",
-      "/public/image/swiperImage/天主教主教公署旧址/DJI_0385.JPG",
-      "/public/image/swiperImage/天主教主教公署旧址/DJI_0386.JPG",
+      "./image/swiperImage/天主教主教公署旧址/DJI_0383.JPG",
+      "./image/swiperImage/天主教主教公署旧址/DJI_0385.JPG",
+      "./image/swiperImage/天主教主教公署旧址/DJI_0386.JPG",
     ],
   },
   {
@@ -982,9 +982,9 @@ const ModelList = [
     viewTop: "13%",
     viewLeft: "44%",
     swiperImage: [
-      "/public/image/swiperImage/圣母院/DJI_0381.JPG",
-      "/public/image/swiperImage/圣母院/DJI_0379.JPG",
-      "/public/image/swiperImage/圣母院/DJI_0380.JPG",
+      "./image/swiperImage/圣母院/DJI_0381.JPG",
+      "./image/swiperImage/圣母院/DJI_0379.JPG",
+      "./image/swiperImage/圣母院/DJI_0380.JPG",
     ],
   },
   {
@@ -1090,10 +1090,10 @@ const ModelList = [
     viewTop: "30%",
     viewLeft: "40%",
     swiperImage: [
-      "/public/image/swiperImage/天主教修士楼旧址/DJI_0438.JPG",
-      "/public/image/swiperImage/天主教修士楼旧址/DJI_0439.JPG",
-      "/public/image/swiperImage/天主教修士楼旧址/DJI_0441.JPG",
-      "/public/image/swiperImage/天主教修士楼旧址/DJI_0442.JPG",
+      "./image/swiperImage/天主教修士楼旧址/DJI_0438.JPG",
+      "./image/swiperImage/天主教修士楼旧址/DJI_0439.JPG",
+      "./image/swiperImage/天主教修士楼旧址/DJI_0441.JPG",
+      "./image/swiperImage/天主教修士楼旧址/DJI_0442.JPG",
     ],
   },
 
@@ -1200,11 +1200,11 @@ const ModelList = [
     viewTop: "36%",
     viewLeft: "76%",
     swiperImage: [
-      "/public/image/swiperImage/内思高级工业职业学校旧址/DJI_0337.JPG",
-      "/public/image/swiperImage/内思高级工业职业学校旧址/DJI_0335.JPG",
-      "/public/image/swiperImage/内思高级工业职业学校旧址/DJI_0338.JPG",
-      "/public/image/swiperImage/内思高级工业职业学校旧址/DJI_0341.JPG",
-      "/public/image/swiperImage/内思高级工业职业学校旧址/DJI_0343.JPG",
+      "./image/swiperImage/内思高级工业职业学校旧址/DJI_0337.JPG",
+      "./image/swiperImage/内思高级工业职业学校旧址/DJI_0335.JPG",
+      "./image/swiperImage/内思高级工业职业学校旧址/DJI_0338.JPG",
+      "./image/swiperImage/内思高级工业职业学校旧址/DJI_0341.JPG",
+      "./image/swiperImage/内思高级工业职业学校旧址/DJI_0343.JPG",
     ],
   },
   {
@@ -1310,10 +1310,10 @@ const ModelList = [
     viewTop: "33%",
     viewLeft: "40%",
     swiperImage: [
-      "/public/image/swiperImage/博仁堂/DJI_0430.JPG",
-      "/public/image/swiperImage/博仁堂/DJI_0431.JPG",
-      "/public/image/swiperImage/博仁堂/DJI_0432.JPG",
-      "/public/image/swiperImage/博仁堂/DJI_0429.JPG",
+      "./image/swiperImage/博仁堂/DJI_0430.JPG",
+      "./image/swiperImage/博仁堂/DJI_0431.JPG",
+      "./image/swiperImage/博仁堂/DJI_0432.JPG",
+      "./image/swiperImage/博仁堂/DJI_0429.JPG",
     ],
   },
   {
@@ -1419,8 +1419,8 @@ const ModelList = [
     viewTop: "33%",
     viewLeft: "35%",
     swiperImage: [
-      "/public/image/swiperImage/义徳堂/DJI_0433.JPG",
-      "/public/image/swiperImage/义徳堂/DJI_0434.JPG",
+      "./image/swiperImage/义徳堂/DJI_0433.JPG",
+      "./image/swiperImage/义徳堂/DJI_0434.JPG",
     ],
   },
   {
@@ -1526,8 +1526,8 @@ const ModelList = [
     viewTop: "17%",
     viewLeft: "34%",
     swiperImage: [
-      "/public/image/swiperImage/经方堂/DJI_0435.JPG",
-      "/public/image/swiperImage/经方堂/DJI_0436.JPG",
+      "./image/swiperImage/经方堂/DJI_0435.JPG",
+      "./image/swiperImage/经方堂/DJI_0436.JPG",
     ],
   },
   {
@@ -1633,13 +1633,13 @@ const ModelList = [
     viewTop: "55%",
     viewLeft: "34%",
     swiperImage: [
-      "/public/image/swiperImage/广济寺塔/DJI_0414.JPG",
-      "/public/image/swiperImage/广济寺塔/DJI_0415.JPG",
-      "/public/image/swiperImage/广济寺塔/DJI_0416.JPG",
-      "/public/image/swiperImage/广济寺塔/DJI_0417.JPG",
-      "/public/image/swiperImage/广济寺塔/DJI_0419.JPG",
-      "/public/image/swiperImage/广济寺塔/DJI_0425.JPG",
-      "/public/image/swiperImage/广济寺塔/DJI_0426.JPG",
+      "./image/swiperImage/广济寺塔/DJI_0416.JPG",
+      "./image/swiperImage/广济寺塔/DJI_0414.JPG",
+      "./image/swiperImage/广济寺塔/DJI_0415.JPG",
+      "./image/swiperImage/广济寺塔/DJI_0417.JPG",
+      "./image/swiperImage/广济寺塔/DJI_0419.JPG",
+      "./image/swiperImage/广济寺塔/DJI_0425.JPG",
+      "./image/swiperImage/广济寺塔/DJI_0426.JPG",
     ],
   },
 ];

src/components/Tabbar.vue

@@ -8,7 +8,9 @@ const homeChange = () => {
   curRoute.value = 3;
   const length = store.backgroundImages.length;
   if (length > 0) {
-    store.setCurrentIndex(parseInt(Math.random() * length));
+    store.setCurrentIndex(
+      store.currentIndex === length - 1 ? 0 : store.currentIndex + 1
+    );
   }
 };
 

src/data/home/index.ts

@@ -1,22 +1,82 @@
- const imageList = [
+const imageList = [
+  // 内....
   {
     upCoverageURL: "img-up1.png",
-    downCoverageURL: "博仁堂.png",
+    downCoverageURL: "DJI_0337.png",
+  },
+  // 广济寺塔
+  {
+    upCoverageURL: "img-up2.png",
+    downCoverageURL: "DJI_0420.png",
   },
+
+  // 天主堂
+  {
+    upCoverageURL: "img-up2.png",
+    downCoverageURL: "tianzhutang.png",
+  },
+  // 英驻芜领事署
   {
     upCoverageURL: "img-up1.png",
-    downCoverageURL: "DJI_0337.png",
+    downCoverageURL: "lingshishu.png",
+  },
+  // 老海关
+  {
+    upCoverageURL: "img-up1.png",
+    downCoverageURL: "haiguan.png",
+  },
+
+  // 博仁堂
+  {
+    upCoverageURL: "img-up2.png",
+    downCoverageURL: "borentang.png",
+  },
+  // 英驻芜领事官邸
+  {
+    upCoverageURL: "img-up1.png",
+    downCoverageURL: "guandi.png",
+  },
+  // 神父楼
+  {
+    upCoverageURL: "img-up1.png",
+    downCoverageURL: "shenfu.png",
+  },
+  // 总税务司
+  {
+    upCoverageURL: "img-up1.png",
+    downCoverageURL: "zongshuiwu.png",
+  },
+  // 义德tang
+  {
+    upCoverageURL: "img-up1.png",
+    downCoverageURL: "xiushilou.png",
+  },
+  // 义德tang
+  {
+    upCoverageURL: "img-up1.png",
+    downCoverageURL: "jingfangtang.png",
   },
+  // 圣母院
+  {
+    upCoverageURL: "img-up1.png",
+    downCoverageURL: "shengmuyuan.png",
+  },
+  // 洋员帮办
   {
     upCoverageURL: "img-up2.png",
-    downCoverageURL: "DJI_0298.png",
+    downCoverageURL: "yangyuan.png",
   },
+  // 天主教公署
   {
     upCoverageURL: "img-up2.png",
-    downCoverageURL: "DJI_0420.png",
-  }
+    downCoverageURL: "jiaogonshu.png",
+  },
+  // 义德tang
+  {
+    upCoverageURL: "img-up1.png",
+    downCoverageURL: "yidetang.png",
+  },
+  
 ];
 
-export default imageList
-
-
+export default imageList;

src/style.css

@@ -1,85 +1,12 @@
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
+  margin: 0;
   width: 100vw;
-  height: 100vh;
+  height: 100%;
+  overflow: hidden;
 }
 body {
   margin: 0;
   padding: 0;
-}
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+  display: block;
 }

src/view/bldgMap/detail/index.vue

@@ -21,17 +21,18 @@ const goVr = (code: string) => {
 };
 
 const lastY = ref(0);
-const bottomHeight = ref("53vh");
+const bottomHeight = ref("50%");
 // 手指滑动
 const touchMove = (event: any) => {
+  console.log(event);
   // 左右切换为 X 即可
   let currentY = event.changedTouches[0].pageY;
   let ty = currentY - lastY.value;
   if (ty < -20) {
-    bottomHeight.value = 97 + "vh";
+    bottomHeight.value = 97 + "%";
     return;
   } else if (ty > 20) {
-    bottomHeight.value = 53 + "vh";
+    bottomHeight.value = 50 + "%";
     return;
   }
 };
@@ -103,15 +104,21 @@ onMounted(async () => {
       class="bottom"
       :style="{
         height: bottomHeight,
-        overflow: bottomHeight === '97vh' ? 'auto' : '',
+        overflow: bottomHeight === '97%' ? 'auto' : '',
       }"
     >
       <div
-        class="bottom-line"
+        class="bottom-top"
         @touchmove="touchMove"
         @touchstart="handletouchstart"
-      ></div>
-      <div class="bottom-name">
+      >
+        <div class="bottom-line"></div>
+      </div>
+      <div
+        class="bottom-name"
+        @touchmove="touchMove"
+        @touchstart="handletouchstart"
+      >
         <!-- 拼音 -->
         <div class="bottom-name-pinyin">{{ currentScene.pinyin }}</div>
         <!-- 汉字 -->
@@ -272,12 +279,19 @@ onMounted(async () => {
     transition-duration: 0.2s;
     transition-timing-function: ease-in;
     transition-delay: 0.2s;
-    &-line {
-      width: 25%;
-      height: 5px;
-      background: #867858;
-      border-radius: 50px;
-      margin: auto;
+    .bottom-top {
+      width: 100%;
+      height: 10px;
+      background: rgba(0, 128, 0, 0);
+      display: flex;
+      justify-content: center;
+      .bottom-line {
+        width: 25%;
+        height: 5px;
+        background: #867858;
+        border-radius: 50px;
+        margin: auto;
+      }
     }
 
     &-name {

src/view/bldgMap/detail/scene/index.vue

@@ -1,25 +1,31 @@
-<script setup lang='ts'>
-const sceneId = ref('')
-const route = useRoute()
+<script setup lang="ts">
+const sceneId = ref("");
+const route = useRoute();
 onMounted(() => {
-  sceneId.value = route.query.code
-  console.log(sceneId.value)
-})
+  sceneId.value = route.query.code;
+  console.log(sceneId.value);
+
+});
 </script>
 
 <template>
-<div class='scene'>
-  <iframe class="irf" :src="`https://www.4dmodel.com/SuperTwo/index.html?m=${sceneId}`" frameborder="0"></iframe>
-</div>
+  <div class="scene">
+    <iframe
+      class="irf"
+      :src="`https://www.4dmodel.com/SuperTwo/index.html?m=${sceneId}`"
+      frameborder="0"
+    ></iframe>
+  </div>
 </template>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
 .scene {
   width: 100%;
-  height: 100%;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   .irf {
     width: 100%;
     height: 100%;
   }
 }
-</style>
+</style>

src/view/bldgMap/index.vue

@@ -181,7 +181,9 @@ onMounted(() => {
 <style lang="less" scoped>
 .map {
   min-width: 100%;
-  min-height: 100%;
+  min-height: 100vh;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-image: url(../../assets/img/map/home/mapBg.png);
   background-size: 100rem;
   // background-position: 20% 0%;
@@ -228,7 +230,6 @@ onMounted(() => {
 
   .swiper-box {
     width: 100%;
-    // height: 100vh;
     background: linear-gradient(to top, #0c0c0c45, #ffffff00);
     position: fixed;
     bottom: 0;

src/view/bldgModel/change/index.vue

@@ -109,8 +109,11 @@ onMounted(() => {
 <style lang="less" scoped>
 .change {
   width: 100vw;
-  min-height: 100vh;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background: #fffff7;
+  // overflow: auto;
+
   ::-webkit-scrollbar {
     display: none; /* Chrome Safari */
   }
@@ -133,7 +136,8 @@ onMounted(() => {
   &-bottom {
     background: #fffff7;
     width: 100%;
-    height: calc(100vh - 30vh);
+    height: calc(70vh);
+    height: calc(var(--vh, 1vh) * 70);
     margin-top: -10px;
     padding: 15px 25px;
     box-sizing: border-box;

src/view/bldgModel/detail/index.vue

@@ -43,7 +43,9 @@ const goChange = () => {
 <style lang="less" scoped>
 .detail {
   width: 100%;
-  height: 100%;
+  height: 100vh;
+
+  height: calc(var(--vh, 1vh) * 100);
   position: relative;
 
   .map-top {

src/view/bldgModel/index.vue

@@ -58,7 +58,8 @@ onMounted(() => {
 .model {
   overflow: auto;
   width: 100%;
-  height: 100%;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   position: relative;
   .map-top {
     width: 100%;

src/view/bldgPanorama/detail/index.vue

@@ -4,9 +4,11 @@ import { ModelType } from "@/types/Model/index";
 import DownIcon from "@/assets/img/panorama/down.png";
 import UpIcon from "@/assets/img/panorama/up.png";
 
+const route = useRoute();
+
 const showList = ref([]);
-const currentArea = ref({});
-const currentScene = ref({});
+const currentArea = ref({} as any);
+const currentScene = ref({} as any);
 const getData = () => {
   // 处理数据
   const dataList = ModelList.map((item: ModelType) => {
@@ -27,6 +29,27 @@ const getData = () => {
 
   currentArea.value = showList.value[0];
   currentScene.value = currentArea.value.list[0];
+
+  // 获取当前
+  if (route.query.name) {
+    currentScene.value = ModelList.find((item: any) => {
+      return route.query.name === item.name;
+    });
+    currentArea.value = showList.value.find((item:any) => {
+      return item.area === currentScene.value.region
+    })
+  } else {
+    currentArea.value = showList.value[0];
+    currentScene.value = currentArea.value.list[0];
+  }
+
+  console.log(
+    showList.value,
+    newDataList,
+    route.query.name,
+    currentArea.value,
+    currentScene.value
+  );
 };
 
 const currentAreaChange = (item: any) => {
@@ -52,7 +75,7 @@ onMounted(() => {
       :src="`https://zzbbh.4dage.com/SWKK/show.html?id=${currentScene.birdId}`"
       frameborder="0"
     ></iframe>
-    <div class="mini-tabbar" >
+    <div class="mini-tabbar">
       <div class="mini-tabbar-top">
         <div class="top-left">
           <div
@@ -83,7 +106,7 @@ onMounted(() => {
           @click="sceneChange(item)"
         >
           <img
-            :src="`https://houseoss.4dkankan.com/project/yifangyice2/thumbnail/${item.name}.png`"
+            :src="item.swiperImage[0]"
             alt=""
           />
           <div class="item-name">{{ item.name }}</div>
@@ -96,7 +119,8 @@ onMounted(() => {
 <style lang="less" scoped>
 .detail {
   width: 100%;
-  height: 100%;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   position: relative;
   overflow: hidden;
   .map-top {

src/view/bldgPanorama/index.vue

@@ -1,25 +1,44 @@
 <script setup lang="ts">
 import Tabbar from "@/components/Tabbar.vue";
-const router = useRouter()
-const goDetail = () => {
-    router.push({
-        path: '/bldgPanorama/detail'
-    })
+const router = useRouter();
+const goDetail = (name: string) => {
+  router.push({
+    path: "/bldgPanorama/detail",
+    query:{
+      name: name
+    }
+  });
 };
 </script>
 
 <template>
   <div class="panorama">
-    <!-- <img
+    <img
       src="../../assets/img/panorama/panoramaBG.png"
       alt=""
-      @click="goDetail()"
-    /> -->
-    <!-- 鸠江区 -->
-    <div class="div-1">
-      <div class="dian-small"></div>
-      <div class="dian-big"></div>
-    </div>
+    />
+    <!-- 总税务司公所旧址 -->
+    <div class="box" :style="{ top: '10.6rem', left: '13rem' }"   @click="goDetail('总税务司公所旧址')"></div>
+    <!-- 老芜湖海关旧址 -->
+    <div class="box" :style="{ top: '13.2rem', left: '10.8rem' }" @click="goDetail('老芜湖海关旧址')"></div>
+    <!-- 洋员帮办楼旧址 -->
+    <div class="box" :style="{ top: '15.1rem', left: '16.8rem' }" @click="goDetail('洋员帮办楼旧址')"></div>
+    <!-- 英驻芜领事官邸旧址 -->
+    <div class="box" :style="{ top: '15.5rem', left: '5.4rem' }" @click="goDetail('英驻芜领事官邸旧址')"></div>
+    <!-- 内思高级工业职业学校旧址 -->
+    <div
+      class="box"
+      :style="{ width: '38%', top: '18rem', left: '2.7rem' }"
+      @click="goDetail('内思高级工业职业学校旧址')"
+    ></div>
+    <!-- 博仁堂 -->
+    <div class="box" :style="{ top: '18.2rem', left: '13.7rem' }" @click="goDetail('博仁堂')"></div>
+    <!-- 英驻芜领事署旧址 -->
+    <div class="box" :style="{ top: '20rem', left: '2.7rem' }" @click="goDetail('英驻芜领事署旧址')"></div>
+    <!-- 天主教堂 -->
+    <div class="box" :style="{ top: '20.5rem', left: '14.7rem' }" @click="goDetail('天主堂')"></div>
+     <!-- 神父楼 -->
+     <div class="box" :style="{ top: '22.7rem', left: '17.7rem' }" @click="goDetail('神父楼旧址')"></div>
   </div>
   <Tabbar />
 </template>
@@ -28,43 +47,48 @@ const goDetail = () => {
 .panorama {
   width: 100%;
   height: 100%;
-  background-image: url(/src\assets/img/panorama/panoramaBG.png);
-  background-size: cover;
-  background-position: 0 -60px ;
+  overflow: auto;
+  position: relative;
   img {
     width: 100%;
-    height: 100%;
   }
 
-  .div-1 {
-    width: 100px;
-    height: 200px;
+  .box {
+    width: 25%;
+    height: 1.2rem;
     background: rgba(0, 128, 0, 0);
-    border-left: 1px dashed #2058BD ;
-    position: fixed;
-    left: 10%;
-    top: 30%;
-    position: relative;
+    position: absolute;
+  }
 
-    .dian-small {
-      width: 8px;
-      height: 8px;
-      background: #2159c2;
-      border-radius: 50%;
-      position: absolute;
-      bottom: -4px;
-      left: -4px;
-    }
+  // .div-1 {
+  //   width: 100px;
+  //   height: 200px;
+  //   background: rgba(0, 128, 0, 0);
+  //   border-left: 1px dashed #2058BD ;
+  //   position: fixed;
+  //   left: 10%;
+  //   top: 30%;
+  //   position: relative;
 
-    .dian-big {
-      width: 20px;
-      height: 20px;
-      background: #235ac073;
-      border-radius: 50%;
-      position: absolute;
-      bottom: -10px;
-      left: -10px;
-    }
-  }
+  //   .dian-small {
+  //     width: 8px;
+  //     height: 8px;
+  //     background: #2159c2;
+  //     border-radius: 50%;
+  //     position: absolute;
+  //     bottom: -4px;
+  //     left: -4px;
+  //   }
+
+  //   .dian-big {
+  //     width: 20px;
+  //     height: 20px;
+  //     background: #235ac073;
+  //     border-radius: 50%;
+  //     position: absolute;
+  //     bottom: -10px;
+  //     left: -10px;
+  //   }
+  // }
 }
 </style>

src/view/bldgVideo/detail/index.vue

@@ -20,6 +20,7 @@ onMounted(() => {
 .detail {
   width: 100vw;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background: black;
   display: flex;
   .vedio {

src/view/bldgVideo/index.vue

@@ -197,13 +197,13 @@ watch(currentIndex, (newVale: any) => {
 
 .swiper-slide-active {
   transform: translate3d(0, 0, 0);
-  height: 40vh;
+  height: 36vh;
 }
 
 .swiper-slide-next,
 .swiper-slide-prev {
   opacity: 0.6;
-  height: 35vh;
+  height: 30vh;
   transform: translate3d(0, 20px, -200px);
 }
 
@@ -359,7 +359,7 @@ watch(currentIndex, (newVale: any) => {
       }
     }
     .module-box {
-      margin-top: -45px;
+      margin-top: -16%;
       img {
         height: 72%;
       }

src/view/home/index.vue

@@ -6,10 +6,6 @@ import { HomeBGImgType } from "@/types/Home/index";
 
 const store = useHome();
 
-store.$subscribe((mutation: any, state: any) => {
-  currentImage.value = state.currentImage;
-});
-
 const getAssetURL = (image: string) => {
   return new URL(`../../assets/img/home/${image}`, import.meta.url).href;
 };
@@ -27,8 +23,16 @@ onMounted(() => {
     <div v-for="(item, index) in imageList" :key="index">
       <!-- <img v-if="item.upCoverageURL == currentImage.upCoverageURL" class="up-box" :src="getAssetURL(currentImage.upCoverageURL)" />
       <img v-if="item.downCoverageURL == currentImage.downCoverageURL" class="down-box" :src="getAssetURL(currentImage.downCoverageURL)" /> -->
-      <img v-if="index === store.currentIndex" class="up-box" :src="getAssetURL(item.upCoverageURL)" />
-      <img v-if="index === store.currentIndex" class="down-box" :src="getAssetURL(item.downCoverageURL)" />
+      <img
+        v-if="index === store.currentIndex"
+        class="up-box"
+        :src="getAssetURL(item.upCoverageURL)"
+      />
+      <img
+        v-if="index === store.currentIndex"
+        class="down-box"
+        :src="getAssetURL(item.downCoverageURL)"
+      />
     </div>
   </div>
   <Tabbar />
@@ -50,6 +54,7 @@ onMounted(() => {
   .up-box {
     width: 100vw;
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     object-fit: cover;
     position: absolute;
     z-index: 2;
@@ -57,6 +62,7 @@ onMounted(() => {
   .down-box {
     max-width: 100vw;
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     object-fit: cover;
     // position: absolute;
     z-index: 1;
@@ -66,14 +72,13 @@ onMounted(() => {
   }
   @keyframes fadenum {
     from {
-      transform: scale(1); /*放大1.1倍*/
+      transform: scale(1.05); /*放大1.1倍*/
       object-fit: cover;
     }
     to {
-      transform: scale(1.2); /*放大1.1倍*/
+      transform: scale(1.17); /*放大1.1倍*/
       object-fit: cover;
     }
-   
   }
 }
 </style>