feat: .

hot/src/assets/base.css

@@ -3,7 +3,7 @@
   padding: 0;
   box-sizing: border-box;
 }
-body{
+body {
   user-select: none;
 }
 .viewer-title {
@@ -23,12 +23,31 @@ body{
 }
 
 .viewer-close {
+  /* display: none !important; */
+  background: none;
+}
+.viewer-close:hover {
+  background: none;
+}
+.viewer-close:active {
+  background: none;
+  border: none;
+}
+.viewer-close:focus {
+  box-shadow: none;
+  border: none;
+}
+.viewer-toolbar {
   display: none !important;
 }
-
+@media screen and (max-width: 1000px) {
+  .viewer-close {
+    display: none !important;
+  }
+}
 @media screen and (max-width: 800px) {
   .viewer-footer {
     bottom: auto;
     top: 10px;
   }
-}
+}

hot/src/views/Home.vue

@@ -2,12 +2,31 @@
   <div class="home">
     <div class="main">
       <!-- 底部的tab -->
-      <div class="flooTabBox" v-if="flooTab.length > 1">
+      <!-- <div class="flooTabBox" v-if="flooTab.length > 1">
         <div @click="myType = item.type" class="tabRow" :class="{ tabRowAc: myType === item.type }" v-for="item in flooTab" :key="item.id">
           <img :src="require(`@/assets/images/pc/icon_${item.type}.png`)" alt="" />
           {{ item.name }}
           <span v-if="data[item.type] && data[item.type].length && data[item.type].length > 1">{{ item.type === myType ? myInd + 1 + "/" : null }}{{ data[item.type].length }}</span>
         </div>
+      </div> -->
+      <!-- 下面的文字介绍 -->
+
+      <div class="flooTxt" :class="{ flooTxtOne: oneTxt, hideText: hideText }">
+        <!-- <div class="close-btn" @click="hideText = !hideText"><span v-if="hideText">展开</span><span v-else>收起</span></div> -->
+        <div class="num" v-if="flooTab.length === 1 && data[myType] && data[myType].length && data[myType].length > 1">{{ myInd + 1 }} / {{ data[myType].length }}</div>
+        <div class="flooTxtBox">
+          <div class="myTitle">{{ myTitle }}</div>
+          <!-- <div class="line"></div> -->
+          <!-- 视频的介绍 -->
+          <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
+            {{ videoTxt[myInd] }}
+          </div>
+          <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
+            {{ imgTxt[myInd] }}
+          </div>
+          <div class="myTxt" v-html="myTxt"></div>
+        </div>
+        <div class="pic"></div>
       </div>
       <div class="mainCon" v-show="!oneTxt">
         <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="urlToFitFu(audio)" controls></audio>
@@ -17,7 +36,7 @@
         </div>
 
         <!-- 如果只有一个模块 -->
-        <div class="oneTabNum" v-if="flooTab.length === 1 && data[myType] && data[myType].length && data[myType].length > 1">{{ myInd + 1 }} / {{ data[myType].length }}</div>
+        <!-- <div class="oneTabNum" v-if="flooTab.length === 1 && data[myType] && data[myType].length && data[myType].length > 1">{{ myInd + 1 }} / {{ data[myType].length }}</div> -->
 
         <!-- 主要内容 -->
 
@@ -48,25 +67,6 @@
           ></div>
         </div>
       </div>
-
-      <!-- 下面的文字介绍 -->
-
-      <div class="flooTxt" :class="{ flooTxtOne: oneTxt, hideText: hideText }">
-        <div class="close-btn" @click="hideText = !hideText"><span v-if="hideText">展开</span><span v-else>收起</span></div>
-        <div class="flooTxtBox">
-          <div class="myTitle">{{ myTitle }}</div>
-          <div class="line"></div>
-          <!-- 视频的介绍 -->
-          <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
-            {{ videoTxt[myInd] }}
-          </div>
-          <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
-            {{ imgTxt[myInd] }}
-          </div>
-          <div class="myTxt" v-html="myTxt"></div>
-        </div>
-        <div class="pic"></div>
-      </div>
     </div>
     <!-- 查看图片 -->
     <viewer class="viewerCla" ref="viewer" :images="lookPics">
@@ -76,6 +76,7 @@
 </template>
 
 <script>
+// 图片懒加载
 export default {
   name: "Home",
   data() {
@@ -120,9 +121,20 @@ export default {
 
       // 只有标题和文字（没有视频，没有模型，没有图片）
       oneTxt: false,
+      isShow: false,
+      dom: null,
     };
   },
   watch: {
+    "dom.isShown"(val) {
+      if (val) {
+        let closepop = window.parent.document.getElementById("closepop");
+        closepop.style.display = "none";
+      } else {
+        let closepop = window.parent.document.getElementById("closepop");
+        closepop.style.display = "block";
+      }
+    },
     myType() {
       this.myInd = 0;
     },
@@ -159,9 +171,27 @@ export default {
     },
     // 点击查看大图
     lookImg(url) {
-      let dom = this.$refs.viewer.$viewer;
-      this.lookPics = [url];
-      dom.show();
+      if (!this.dom) {
+        this.dom = this.$refs.viewer.$viewer;
+        this.lookPics = [url];
+      }
+      this.dom.show();
+
+      // setTimeout(() => {
+      //   this.$refs.viewer.on("show", () => {
+      //     console.error("show");
+      //   });
+      // }, 1000);
+      // console.error(window.parent.getElementById("closepop"));
+
+      // this.$refs.viewer.$viewer.addEventListener('hide',()=>{
+
+      //   console.error('hide')
+      // })
+      // try {
+      //   let closepop = window.parent.getElementById("closepop");
+      //   closepop.style.display = "none";
+      // } catch (err) {}
     },
     async getData() {
       // https://www.4dmodel.com/
@@ -232,7 +262,7 @@ export default {
   height: 100%;
   // background-color: rgba(255, 252, 247, 0.6);
   // backdrop-filter: blur(10px);
-  background: linear-gradient(180deg, rgba(14, 13, 10, 0.6) 0%, rgba(44, 42, 36, 0.6) 100%);
+  background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(12.5px);
   position: relative;
   #myAudio {
@@ -245,10 +275,14 @@ export default {
     height: 60px;
   }
   .main {
-    width: 1200px;
+    width: 100%;
     margin: 0 auto;
     height: 100%;
-    padding-top: 40px;
+    // padding-top: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: row;
     .flooTabBox {
       z-index: 10;
       position: absolute;
@@ -288,14 +322,23 @@ export default {
       // width: 100%;
       // height: calc(100% - 200px);
 
-      position: absolute;
+      // position: absolute;
       border-radius: 6px;
       overflow: hidden;
-      width: 100%;
+      width: 50%;
+      // width: 100%;
       height: calc(100% - 200px);
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
+      // left: 50%;
+      // top: 50%;
+      // transform: translate(-50%, -50%);
+      &::before {
+        content: "";
+        width: 35px;
+        height: 768px;
+        background: url(../assets/images/pc/Vector1.png) no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+      }
       .audioIcon {
         z-index: 10;
         cursor: pointer;
@@ -310,6 +353,7 @@ export default {
         left: 50%;
         transform: translateX(-50%);
         font-size: 14px;
+        display: none;
       }
 
       .contenBoxMain {
@@ -351,7 +395,7 @@ export default {
           }
         }
         .imgBox {
-          padding: 100px 100px 120px;
+          padding: 0px 70px;
           .smImgBox {
             width: 100%;
             height: 100%;
@@ -371,13 +415,13 @@ export default {
       }
       .awccJJ {
         cursor: pointer;
-        position: absolute;
+        position: fixed;
         top: 50%;
         transform: translateY(-50%);
         left: 10px;
-        width: 37px;
-        height: 37px;
-        background-image: url("../assets/images/pc/left.png");
+        width: 56px;
+        height: 56px;
+        background-image: url("../assets/images/pc/icon_left.png");
         background-size: 100% 100%;
         &:focus {
           outline: none;
@@ -386,7 +430,7 @@ export default {
       .rightJJ {
         left: auto;
         right: 10px;
-        background-image: url("../assets/images/pc/right.png");
+        background-image: url("../assets/images/pc/icon_right.png");
       }
       .noClick {
         cursor: default;
@@ -394,22 +438,28 @@ export default {
       }
     }
     .flooTxt {
-      width: 566px;
+      // width: 566px;
+
+      width: 50%;
       height: 100%;
-      position: absolute;
-      right: 0;
-      top: 0;
-      padding: 71px 62px 30px 58px;
-      background: linear-gradient(138deg, rgba(33, 28, 21, 0.9) 27.8%, rgba(90, 78, 61, 0.9) 97.76%);
+      // position: absolute;
+      // right: 0;
+      // top: 0;
+      padding: 71px 94px 30px 258px;
+      // background: linear-gradient(138deg, rgba(33, 28, 21, 0.9) 27.8%, rgba(90, 78, 61, 0.9) 97.76%);
+      box-sizing: border-box;
       transition: transform 0.3s;
       transform: translateX(0);
-      &.hideText {
-        transform: translateX(566px);
-        .close-btn {
-          background: url(../assets/images/pc/tab-close.png) no-repeat;
-          background-size: 100% 100%;
-        }
+      .num {
+        display: none;
       }
+      // &.hideText {
+      //   transform: translateX(566px);
+      //   .close-btn {
+      //     background: url(../assets/images/pc/tab-close.png) no-repeat;
+      //     background-size: 100% 100%;
+      //   }
+      // }
       .close-btn {
         // width: 69px;
         // height: 156px;
@@ -435,11 +485,17 @@ export default {
         height: 100%;
         // overflow-y: auto;
         // overflow-x: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
         .myTitle {
-          color: #ffecb0;
-          font-size: 36px;
+          font-size: 24px;
+          color: #ffffff;
           font-weight: bold;
+          text-align: left;
           margin-bottom: 10px;
+          width: 100%;
         }
         .line {
           width: 448px;
@@ -448,16 +504,16 @@ export default {
           background-size: 100% 100%;
         }
         .myTxt {
-          font-size: 20px;
+          font-size: 18px;
           color: #ffffff;
           line-height: 40px;
           text-align: left;
-          margin-top: 40px;
+          margin-top: 10px;
           padding-right: 30px;
           padding-bottom: 10px;
-          overflow-y: auto;
-          overflow-x: hidden;
-          height: calc(100% - 101px);
+          // overflow-y: auto;
+          // overflow-x: hidden;
+          // height: calc(100% - 101px);
           &::-webkit-scrollbar {
             /*滚动条整体样式*/
             width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
@@ -504,10 +560,12 @@ export default {
       width: 100%;
       height: 100%;
       padding: 0;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+      // position: absolute;
+      // top: 50%;
+      // left: 50%;
+      // transform: translate(-50%, -50%);
+      justify-content: flex-end;
+      flex-direction: column-reverse;
       .flooTabBox {
         width: 100%;
         // bottom: 20px;
@@ -530,10 +588,18 @@ export default {
       }
       .mainCon {
         border-radius: 8px 8px 0 0;
-        height: 235px;
-        top: 128px;
-        left: 0;
+        height: 50%;
+        width: 80%;
+        // padding: 10px 0;
+        overflow: visible;
         transform: none;
+        position: relative;
+        &::before {
+          display: none;
+        }
+        .oneTabNum {
+          display: block;
+        }
         .audioIcon {
           cursor: default;
           right: auto;
@@ -561,69 +627,83 @@ export default {
           }
           .imgBox {
             // padding: 60px 50px 80px;
-            padding:50px 0 0 ;
+            padding: 0;
             .smImgBox {
               cursor: default;
             }
           }
         }
         .awccJJ {
-          left: 5px;
+          left: -10%;
           width: 36px;
           height: 36px;
           cursor: default;
+          position: absolute;
           background-image: url("../assets/images/mobile/icon_left.png");
         }
         .rightJJ {
           left: auto;
-          right: 5px;
+          right: -10%;
           background-image: url("../assets/images/mobile/icon_right.png");
         }
       }
       .flooTxt {
         width: 100%;
         margin-top: 0;
-        padding: 20px 15px 15px;
-        height: 200px;
+        padding: 10px 15px 10px;
+        height: 50%;
+        background: #ffffff;
         // background-color: #fff;
-        border-radius: 0 0 8px 8px;
-        height: 325px;
-        bottom: 0;
-        left: 0;
+        border-radius: 20px 20px 0 0;
+        // height: 325px;
+        // bottom: 0;
+        // left: 0;
+        color: rgba(124, 102, 66, 1);
         top: auto;
-        background-image: url("../assets/images/mobile/bg2.png");
+        // background-image: url("../assets/images/mobile/bg2.png");
         transform: none;
-
+        .num {
+          display: block;
+          font-weight: 400;
+          font-size: 16px;
+          text-align: center;
+          color: #000;
+          border-bottom: 1px solid #949494;
+          padding: 10px;
+          margin-bottom: 26px;
+          height: 40px;
+        }
         .pic,
         .close-btn {
           display: none;
         }
         .flooTxtBox {
+          justify-content: flex-start;
+          height: calc(100% - 80px);
+          overflow-y: scroll;
           .line {
             display: none;
           }
           .myTitle {
-            font-size: 18px;
-            position: fixed;
-            top: 34px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 70%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            text-align: center;
+            color: rgba(124, 102, 66, 1);
+            font-size: 20px;
+            font-weight: bold;
+            // white-space: nowrap;
+            // // overflow: hidden;
+            // text-overflow: ellipsis;
+            text-align: left;
           }
           .myTxt {
-            font-size: 14px;
+            font-size: 16px;
             line-height: 22px;
-            padding: 0 34px 10px;
+            // padding: 0 34px 10px;
             width: 100%;
-            height: calc(325px - 64px) !important;
+            color: rgba(124, 102, 66, 1);
           }
         }
       }
       .flooTxtOne {
+        color: rgba(124, 102, 66, 1);
         height: 100%;
       }
     }

scene/package.json

@@ -15,6 +15,7 @@
     "element-ui": "^2.15.6",
     "html2canvas": "^1.4.1",
     "install": "^0.13.0",
+    "lib-flexible": "^0.3.2",
     "npm": "^8.10.0",
     "swiper": "^5.3.8",
     "v-viewer": "^1.6.4",

scene/public/static/css/oldVer/main0.css

@@ -52,12 +52,12 @@ iframe{
 	opacity:0.1; 
 }
 #closepop {
-	background: url('../../images/icon-close.png') no-repeat;
+	background: url('../../images/icon_close.png') no-repeat;
 	width: 51px;
 	height: 51px;
 	cursor: pointer;
 	position: absolute;
-	right: 30px;
+	left: 30px;
 	top: 30px;
 	text-indent: -999em;
 	background-size: 100% 100%;

scene/src/assets/style/myBase.css

@@ -171,11 +171,12 @@
   #closepop {
     /* top: 4px;
     right: 4px; */
-    top: 31px;
-    left: 17px;
-    width: 36px;
-    height: 36px;
-    background: url(../image/icon_left.png) no-repeat;
+    top: .1333rem;
+    right: .1333rem;
+    left: auto;
+    width: 1rem;
+    height: 1rem;
+    background: url(../image/icon/new-icon/icon_close.png) no-repeat;
     background-size: 100% 100%;
   }
 }

scene/src/main.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
+import 'lib-flexible/flexible'
 import App from "./App.vue";
 import "@/mixins";
 import router from "./router";

scene/src/views/gui/components/hotList.vue

@@ -203,25 +203,47 @@ export default {
 }
 @media screen and (max-width: 1000px) {
   .hotList {
-    max-width: 500px;
-    width: 73%;
-    height: 100%;
-    padding: 30px 0 30px 30px;
-
-    top: 0;
+    width: 100%;
+    height: 334px;
+    padding: 20px 30px 10px;
+    background: rgba(0, 0, 0, 0.8);
+    bottom: 0;
     right: 0;
+    top: auto;
     // width: 434px;
     // height: 100vh;
-    background: url(../../../assets/image/mobile/list.png) no-repeat;
-    background-size: 100% 100%;
+    .close-btn {
+      width: 100%;
+      height: 30px;
+      background: none;
+      left: auto;
+      right: 0;
+      top: 0;
+      transform: translate(0, 0);
+      position: relative;
+      &::after {
+        content: "";
+        width: 0.28rem;
+        height: 0.1733rem;
+        background: url(../../../assets/image/icon/new-icon/icon_down-2.png) no-repeat;
+        background-size: 100%;
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
     z-index: 100;
     .title {
-      height: 236px;
+      // height: 236px;
+      height: 30px;
+      width: 100%;
       .pic-one {
         width: 202px;
         height: 162px;
         background: url(../../../assets/image/mobile/img_01.png) no-repeat;
         background-size: 100% 100%;
+        display: none;
       }
       .pic-two {
         background: url(../../../assets/image/mobile/img_title.png) no-repeat;
@@ -230,6 +252,7 @@ export default {
         height: 183px;
         left: -85px;
         top: 34px;
+        display: none;
       }
       .titleLL {
         font-size: 18px;
@@ -241,30 +264,35 @@ export default {
       }
     }
     .search-box {
-      width: 180px;
-      right: 30px;
+      width: 100%;
+      left: 0;
+      // right: 30px;
+      border-bottom: 1px solid #bbab92;
       input {
         width: 159px;
       }
     }
     .main {
       margin-top: 10px;
-      padding: 10px 15px 0 33px;
-      height: calc(100% - 266px);
+      // padding: 10px 15px 0 33px;
+      height: calc(100% - 40px);
+      padding: 0;
+      position: relative;
       .txtNone {
         font-size: 14px;
       }
       .txt {
         font-size: 14px;
-
+        text-align: left;
+        width: 100%;
         & > span {
           font-size: 14px;
           &:hover {
-            color: #fff;
+            color: rgba(255, 255, 255, 0.8);
           }
         }
         .active {
-          color: #d6b970 !important;
+          color: #fff !important;
         }
       }
     }

scene/src/views/gui/components/layerMap.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="layer-box">
+  <div class="layer-box" :class="{ isMobile }">
     <div class="layer-close" @click="$emit('close')"></div>
     <div class="layer-content">
       <div class="map-content" ref="mapEle">
@@ -9,7 +9,7 @@
           <li class="li" :class="{ active: unit == 2 }" @click="changeUnit(2)"><span>第二单元</span></li>
         </ul>
         <div class="map-box-main" ref="mapMainEle">
-          <div class="map-box" :style="`    transform: translate(-50%, -50%) scale(${0.58 * mapScale});`">
+          <div class="map-box" ref="mapBox" :style="`transform: translate(-50%, -50%) scale(${mapScale});`">
             <div class="map-svg">
               <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="665px" height="963px">
                 <!-- <polygon
@@ -125,7 +125,7 @@ export default {
     ...mapMutations(["setData"]),
     goPano(id) {
       player.flyToPano({ pano: player.model.panos.get(id) });
-      this.panoId = id;
+      // this.panoId = id;
       // if (!this.points[id].over) {
       //   this.points[id].over = true;
       // }
@@ -147,7 +147,13 @@ export default {
         let refH = this.$refs.mapMainEle.getBoundingClientRect().height;
         let scaleW = refW / 598;
         let scaleH = refH / 622;
-        this.mapScale = scaleW > scaleH ? scaleH : scaleW;
+        if (this.isMobile) {
+          this.mapScale = (refW * 0.96) / 805;
+          this.$refs.mapMainEle.style.height = this.mapScale * 1064 + "px";
+        } else {
+          this.mapScale = scaleW > scaleH ? scaleH : scaleW;
+          this.mapScale = this.mapScale * 0.58;
+        }
       } catch (err) {
         // console.error(err);
       }
@@ -204,6 +210,7 @@ export default {
     right: 56px;
     top: 56px;
     cursor: pointer;
+    z-index: 100;
   }
   .layer-content {
     max-width: 85%;
@@ -416,5 +423,82 @@ export default {
       }
     }
   }
+
+  &.isMobile {
+    overflow: scroll;
+    .layer-close {
+      width: 1.0667rem;
+      height: 1.0667rem;
+      right: 0.4533rem;
+      top: 0.4533rem;
+    }
+    .layer-content {
+      flex-direction: column;
+      overflow: scroll;
+      height: auto;
+      max-width: 91%;
+      padding-top: 1.8667rem;
+      .cell-list {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .li {
+          width: 2.16rem;
+          height: 0.7733rem;
+          font-size: 0.3467rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .map-content {
+        max-width: 100%;
+        height: auto;
+        .map-box-main {
+          flex: none;
+          .map-box {
+            // left: 0;
+            // top: 0;
+            .map-svg {
+              .point-list {
+                .tool_map_point {
+                  width: 0.32rem;
+                  height: 0.32rem;
+
+                  &:hover {
+                    .tips {
+                      display: none;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .point-type-list {
+        dt {
+          width: 0.3867rem;
+          height: 0.3867rem;
+        }
+        dd {
+          font-size: 0.32rem;
+        }
+        dl {
+          padding: 0 0.3333rem 0;
+        }
+      }
+      .desc-box {
+        margin-left: 0;
+        .title {
+          font-size: 0.5067rem;
+          margin: 1.0133rem 0 0.8rem;
+        }
+        .desc-conntent {
+          font-size: 0.3467rem;
+        }
+      }
+    }
+  }
 }
 </style>

scene/src/views/gui/components/tourList.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="tour-list" v-click-outside="handleClickOutside">
+  <div class="tour-list" :class="{ isMobile }" v-click-outside="handleClickOutside">
     <div class="tour-controls" @click="handleClickOutside">
       <span>重点展位</span>
       <i></i>
@@ -39,17 +39,16 @@ export default {
     }),
     swiperOption() {
       let that = this;
-      return {
+
+      let options = {
         slidesPerView: "auto",
         autoplay: false,
         mousewheel: true,
-        // centeredSlides: true,
-        // watchSlidesProgress: true,
+
+        spaceBetween: 0,
+
         freeMode: true,
-        // loop: this.hotspot.images.length > 1,
-        // pagination: {
-        //   el: ".swiper-pagination",
-        // },
+
         on: {
           slideChangeTransitionEnd: function () {
             // that.mbactive = this.realIndex;
@@ -65,6 +64,11 @@ export default {
           },
         },
       };
+      if (this.isMobile) {
+        // options.slidesPerView = 3;
+        // options.spaceBetween = 10;
+      }
+      return options;
     },
   },
   //监控data中的数据变化
@@ -169,5 +173,40 @@ export default {
       }
     }
   }
+  &.isMobile {
+    height: 2.6667rem;
+    padding: 0.2667rem;
+    bottom: 0;
+    left: 0;
+    margin-left: 0;
+    width: 100%;
+    .tour-controls {
+      width: 2.9333rem;
+      height: 0.6133rem;
+      align-items: center;
+      justify-content: center;
+      top: -0.6133rem;
+      span {
+        font-size: 0.32rem;
+        color: rgba(179, 152, 105, 1);
+      }
+      i {
+        width: 0.28rem;
+        height: 0.1733rem;
+        background: url(../../../assets/image/icon/new-icon/icon_down-2.png) no-repeat;
+        background-size: 100% 100%;
+        margin-left: 5px;
+      }
+    }
+    .swiper-wrapper {
+      .swiper-slide {
+        width: 31%;
+        margin-left: 0.2667rem;
+        .sl-item {
+          font-size: 0.32rem;
+        }
+      }
+    }
+  }
 }
 </style>

scene/src/views/gui/menu.vue

@@ -134,53 +134,91 @@
       <Share v-show="openInd === 2" @close="openInd = 0" :openInd="openInd" />
     </div> -->
     <!-- 手动触发导览 -->
-
-    <transition name="slide" appear>
-      <HotList v-if="openType === 'hots'" @close="openType = null" />
-    </transition>
+    <template v-if="!isMobile">
+      <transition name="slide" appear>
+        <HotList v-if="openType === 'hots'" @close="openType = null" />
+      </transition>
+    </template>
+    <template v-else>
+      <transition enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
+        <HotList v-if="openType === 'hots'" @close="openType = null" />
+      </transition>
+    </template>
 
     <!-- 小地图控制按钮 -->
-    <div class="minimap-controls" :class="{ open: !miniMapStatus }" @click="toggleMiniMap"></div>
-    <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
-      <div v-show="openType != 'immersive'" class="left-btn">
-        <div class="button-item" :class="getActive(i.type)" v-for="(i, index) in leftButtons" @click.stop="hanlderButtons(i, i.type)">
+    <div class="minimap-controls" :class="{ open: !miniMapStatus, mobile: isMobile }" @click="toggleMiniMap"></div>
+    <template v-if="!isMobile">
+      <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
+        <div v-show="openType != 'immersive'" class="left-btn">
+          <div class="button-item" :class="getActive(i.type)" v-if="i.type == 'model' || mode == 'panorama'" v-for="(i, index) in leftButtons" @click.stop="hanlderButtons(i, i.type)">
+            <img class="normal" :src="i.normalIcon" alt="" />
+            <img class="active" :src="i.activeIcon" alt="" />
+            <div class="tip-box">{{ i.name }}</div>
+          </div>
+        </div>
+      </transition>
+
+      <div class="kanzhan-btns">
+        <transition name="preScene">
+          <div v-show="openType == 'immersive'" @click="goScene('prev')" class="button-item">
+            <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_pre.png')" alt="" />
+          </div>
+        </transition>
+        <transition name="activeScene">
+          <div v-show="openType == 'immersive'" class="button-item" @click="openType = null">
+            <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_mod_active.png')" alt="" />
+          </div>
+        </transition>
+        <transition name="nextScene">
+          <div v-show="openType == 'immersive'" class="button-item" @click="goScene('next')">
+            <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_next.png')" alt="" />
+          </div>
+        </transition>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="mobile-top-button">
+        <div
+          class="button-item"
+          :class="getActive(i.type)"
+          @click.stop="hanlderButtons(i, i.type)"
+          v-for="(i, index) in mobileTopBtns"
+          v-show="i.type == 'model' || i.type == 'music' || mode == 'panorama'"
+        >
           <img class="normal" :src="i.normalIcon" alt="" />
           <img class="active" :src="i.activeIcon" alt="" />
-          <div class="tip-box">{{ i.name }}</div>
         </div>
       </div>
-    </transition>
+      <div class="mobile-bottom-button">
+        <div
+          class="button-item"
+          :class="getBottomActive(i.type)"
+          @click.stop="hanlderButtons(i, i.type)"
+          v-for="(i, index) in mobileBottomBtns"
+          v-if="(i.type == 'controls' && openType == 'immersive') || i.type == 'hots' || (openType != 'immersive' && i.type != 'controls')"
+          v-show="i.type == 'model' || i.type == 'music' || mode == 'panorama'"
+        >
+          <img class="normal" :src="i.normalIcon" alt="" />
+          <img class="active" :src="i.activeIcon" alt="" />
+        </div>
+      </div>
+    </template>
+    <!-- 音乐按钮 -->
     <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
-      <div v-show="openType != 'immersive'" class="right-btn">
+      <div v-show="openType != 'immersive' || isMobile" class="right-btn" :class="{ mobile: isMobile }">
         <div id="bgm" class="button-item" :class="getActive(i.type)" v-for="(i, index) in rightButtons">
           <img class="normal" id="openMusic" :src="i.normalIcon" alt="" @click="switchBGM(false)" />
           <img class="active" id="closeMusic" :src="i.activeIcon" alt="" @click="switchBGM(true)" />
-          <div class="tip-box">{{ i.name }}</div>
+          <div v-if="!isMobile" class="tip-box">{{ i.name }}</div>
         </div>
       </div>
     </transition>
-    <div class="kanzhan-btns">
-      <transition name="preScene">
-        <div v-show="openType == 'immersive'" @click="goScene('prev')" class="button-item">
-          <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_pre.png')" alt="" />
-        </div>
-      </transition>
-      <transition name="activeScene">
-        <div v-show="openType == 'immersive'" class="button-item" @click="openType = null">
-          <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_mod_active.png')" alt="" />
-        </div>
-      </transition>
-      <transition name="nextScene">
-        <div v-show="openType == 'immersive'" class="button-item" @click="goScene('next')">
-          <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_next.png')" alt="" />
-        </div>
-      </transition>
-    </div>
     <transition name="tour">
       <TourList :tourList="tourList" v-if="openType == 'tour'" @close="openType = null"> </TourList>
     </transition>
     <transition name="fade" enter-active-class="animate__animated animate__fadeIn animate__faster" leave-active-class="animate__animated animate__fadeOut animate__faster">
-      <LayerMap v-if="openType == 'map'" :points="points" @close="openType = null"> </LayerMap>
+      <LayerMap v-if="openType == 'map'" @close="openType = null"> </LayerMap>
     </transition>
   </div>
 </template>
@@ -265,6 +303,58 @@ export default {
           type: "music",
         },
       ],
+      mobileTopBtns: [
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_dollhouse.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_dollhouse_active.png"),
+          name: "3d模型",
+          type: "model",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_map.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_map_active.png"),
+          name: "导航地图",
+          type: "map",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_mod.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_mod_active.png"),
+          name: "沉浸看展",
+          type: "immersive",
+        },
+      ],
+      mobileBottomBtns: [
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_detail.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_detail_active.png"),
+          name: "热点列表",
+          type: "hots",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_point.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_point_active.png"),
+          name: "重点展位",
+          type: "tour",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_line.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_line_active.png"),
+          name: "展览路线",
+          type: "route",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_pre.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_line_active.png"),
+          name: "后退",
+          type: "controls",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_next.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_line_active.png"),
+          name: "前进",
+          type: "controls",
+        },
+      ],
     };
   },
   watch: {},
@@ -327,7 +417,7 @@ export default {
     },
 
     hanlderButtons(item, type) {
-      if (!["route", "fullScreen"].includes(type)) {
+      if (!["route", "fullScreen", "controls"].includes(type)) {
         if (this.openType != type) {
           this.openType = type;
         } else {
@@ -360,6 +450,13 @@ export default {
         case "fullScreen":
           this.onFullScreen();
           break;
+        case "controls":
+          if (item.name == "前进") {
+            this.goScene("next");
+          } else {
+            this.goScene("prev");
+          }
+          break;
       }
     },
     getActive(item) {
@@ -389,6 +486,10 @@ export default {
           if (this.openType == "hots") {
             return "active";
           }
+        case "immersive":
+          if (this.openType == "immersive") {
+            return "active";
+          }
         case "fullScreen":
           if (this.isFullscreen) {
             return "active";
@@ -396,6 +497,26 @@ export default {
           break;
       }
     },
+    getBottomActive(item) {
+      switch (item) {
+        case "tour":
+          if (this.openType == "tour") {
+            return "active";
+          }
+          break;
+        case "route":
+          if (this.isRoute) {
+            return "active";
+          }
+          break;
+        case "hots":
+          if (this.openType == "hots") {
+            return "active";
+          }
+
+          break;
+      }
+    },
     openTags() {
       if (this.openInd) {
         this.openInd = 0;
@@ -653,8 +774,72 @@ export default {
     background: url(../../assets/image/icon/new-icon/icon_scale.png) no-repeat;
     background-size: 100%;
   }
+  &.mobile {
+    top: 6px;
+    right: 6px;
+  }
+}
+@mobileIconSize: 1.1733rem;
+
+.mobile-top-button {
+  width: @mobileIconSize;
+  position: fixed;
+  left: 10px;
+  top: 20px;
+  .button-item {
+    width: @mobileIconSize;
+    height: @mobileIconSize;
+    margin-bottom: 0.6667rem;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    .active {
+      display: none;
+    }
+
+    &.active {
+      .normal {
+        display: none;
+      }
+      .active {
+        display: block;
+      }
+    }
+  }
 }
+.mobile-bottom-button {
+  width: @mobileIconSize;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 200px;
+  .button-item {
+    width: @mobileIconSize;
+    height: @mobileIconSize;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    .active {
+      display: none;
+    }
 
+    &.active {
+      .normal {
+        display: none;
+      }
+      .active {
+        display: block;
+      }
+    }
+  }
+}
 .left-btn {
   display: flex;
   align-items: center;
@@ -775,6 +960,22 @@ export default {
       }
     }
   }
+  &.mobile {
+    position: fixed;
+    right: auto;
+    left: 10px;
+    bottom: auto;
+    top: @mobileIconSize*5.1;
+    .button-item {
+      width: @mobileIconSize;
+      height: @mobileIconSize;
+      margin-left: 0;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
 }
 .kanzhan-btns {
   display: flex;
@@ -944,12 +1145,12 @@ export default {
 </style>
 <style>
 .scale-close {
-  transition: transform 0.3s;
-  transform: scale(0);
+  transition: transform 0.3s !important;
+  transform: scale(0) !important;
   transform-origin: 90% 10%;
 }
 .scale-open {
-  transition: transform 0.3s;
+  transition: transform 0.3s !important;
   transform: scale(1);
   transform-origin: 80% 20%;
 }

scene/vue.config.js

@@ -1,6 +1,5 @@
-const fs = require('fs');
-const path = require('path');
-
+const fs = require("fs");
+const path = require("path");
 
 module.exports = {
   publicPath: "./",
@@ -9,28 +8,46 @@ module.exports = {
   css: {
     loaderOptions: {
       less: {
-        globalVars: getLessVariables(path.resolve(__dirname, './src/assets/style/globalVars.less'))
-      }
-    }
-  }
+        globalVars: getLessVariables(path.resolve(__dirname, "./src/assets/style/globalVars.less")),
+      },
+    },
+  },
+  devServer: {
+    headers: {
+      "Cache-Control": "no-store",
+    },
+    https: false,
+    proxy: {
+      // "/page": {
+      //   target: "http://192.168.0.12:8081",
+      //   changeOrigin: true,
+      //   rewrite: (path) => path.replace(/^\/page/, ""),
+      // },
+      // "/js": {
+      //   target: "http://192.168.0.12:8081",
+      //   changeOrigin: true,
+      //   // rewrite: (path) => path.replace(/^\/page/, ""),
+      // },
+    },
+  },
 };
 
-
-
-
 function getLessVariables(file) {
-  var themeContent = fs.readFileSync(file, 'utf-8')
-  var variables = {}
-  themeContent.split('\n').forEach(function(item) {
-      if (item.indexOf('//') > -1 || item.indexOf('/*') > -1) {
-          return
-      }
-      var _pair = item.split(':')
-      if (_pair.length < 2) return;
-      var key = _pair[0].replace('\r', '').replace('@', '')
-      if (!key) return;
-      var value = _pair[1].replace(';', '').replace('\r', '').replace(/^\s+|\s+$/g, '')
-      variables[key] = value
-  })
-  return variables
-}
+  var themeContent = fs.readFileSync(file, "utf-8");
+  var variables = {};
+  themeContent.split("\n").forEach(function (item) {
+    if (item.indexOf("//") > -1 || item.indexOf("/*") > -1) {
+      return;
+    }
+    var _pair = item.split(":");
+    if (_pair.length < 2) return;
+    var key = _pair[0].replace("\r", "").replace("@", "");
+    if (!key) return;
+    var value = _pair[1]
+      .replace(";", "")
+      .replace("\r", "")
+      .replace(/^\s+|\s+$/g, "");
+    variables[key] = value;
+  });
+  return variables;
+}