update

Hot/src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <div class="main">
-      <div class="myTitle">{{ myTitle }}</div>
+      <!-- <div class="myTitle">{{ myTitle }}</div> -->
       <div class="mainCon" v-show="!oneTxt">
         <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="urlToFitFu(audio)" controls></audio>
         <!-- 如果只有一个模块 -->
@@ -18,8 +18,7 @@
 
         <div class="contenBoxMain swiper-container">
           <div class="swiper-wrapper">
-            <div class="contenBox swiper-slide" v-for="(item, index) in data[myType]"
-              :key="myType === 'video' ? item.url : item">
+            <div class="contenBox swiper-slide" v-for="(item, index) in data[myType]" :key="myType === 'video' ? item.url : item">
               <!-- 模型页面 -->
               <div class="modelBox" v-if="myType === 'model'">
                 <iframe :src="urlToFitFu(item)" frameborder="0" v-if="index === myInd"></iframe>
@@ -38,27 +37,30 @@
           </div>
           <!-- 左右箭头 -->
           <template v-if="!isMobile">
-            <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }"
-              v-if="data[myType] && data[myType].length > 1"></div>
-            <div @click="cutMyInd(1, myInd === data[myType].length - 1)" class="rightJJ awccJJ"
-              :class="{ noClick: myInd === data[myType].length - 1 }" v-if="data[myType] && data[myType].length > 1">
-            </div>
+            <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }" v-if="data[myType] && data[myType].length > 1"></div>
+            <div @click="cutMyInd(1, myInd === data[myType].length - 1)" class="rightJJ awccJJ" :class="{ noClick: myInd === data[myType].length - 1 }" v-if="data[myType] && data[myType].length > 1"></div>
           </template>
         </div>
-      </div>
 
-      <div class="swiper-pagination" v-if="data[myType] && data[myType].length > 1"></div>
+        <div class="swiper-pagination" v-if="data[myType] && data[myType].length > 1"></div>
+      </div>
 
       <!-- 下面的文字介绍 -->
-      <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
-        <div class="flooTxtBox">
-          <!-- <div class="myTitle">{{ myTitle }}</div> -->
-          <!-- 视频的介绍 -->
-          <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]" v-html="videoTxt[myInd]">
-          </div>
-          <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]" v-html="imgTxt[myInd]">
+      <div class="txtBox">
+        <div class="myTitle">{{ myTitle }}</div>
+        <div class="fixedTx">湖北省博物馆旧藏</div>
+        <div class="logo">
+          <img :src="require('@/assets/images/pc/logo.png')" alt="" />
+        </div>
+
+        <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
+          <div class="flooTxtBox">
+            <!-- <div class="myTitle">{{ myTitle }}</div> -->
+            <!-- 视频的介绍 -->
+            <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]" v-html="videoTxt[myInd]"></div>
+            <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]" v-html="imgTxt[myInd]"></div>
+            <div class="myTxt" v-html="myTxt"></div>
           </div>
-          <div class="myTxt" v-html="myTxt"></div>
         </div>
       </div>
     </div>
@@ -69,19 +71,11 @@
 
     <!-- 底部的tab -->
     <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.id}${myType === item.type ? 'Ac' : ''
-          }.png`)
-          " alt="" />
+      <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.id}${myType === item.type ? 'Ac' : ''}.png`)" alt="" />
         <div>
           {{ 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>
+          <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>
       <!-- 音频图标 -->
@@ -94,13 +88,12 @@
 </template>
 
 <script>
-import Swiper from "swiper"
-import "swiper/css/swiper.min.css"
+import Swiper from "swiper";
+import "swiper/css/swiper.min.css";
 
 export default {
   name: "Home",
-  components: {
-  },
+  components: {},
   data() {
     return {
       isMobile: /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
@@ -143,29 +136,29 @@ export default {
 
       // 只有标题和文字（没有视频，没有模型，没有图片）
       oneTxt: false,
-    }
+    };
   },
   watch: {
     myType() {
-      this.myInd = 0
+      this.myInd = 0;
     },
     // 音频的开启和关闭
     audioSta(val) {
-      const dom = document.querySelector("#myAudio")
+      const dom = document.querySelector("#myAudio");
       if (val) {
-        dom.play()
+        dom.play();
         dom.onended = () => {
           // console.log("----音频播放完毕");
-          this.audioSta = false
-        }
-      } else dom.pause()
+          this.audioSta = false;
+        };
+      } else dom.pause();
     },
   },
   computed: {},
   methods: {
     // 本地化 url 适配
     urlToFitFu(url) {
-      return url
+      return url;
       // const resUrl = url;
       // if (url.includes("https://super.4dage.com")) {
       //   return url.replace("https://super.4dage.com", "");
@@ -176,22 +169,22 @@ export default {
 
     // 点击左右箭头
     cutMyInd(num) {
-      console.log(num, this.swiper)
-      if (!this.swiper) return
+      console.log(num, this.swiper);
+      if (!this.swiper) return;
       if (num > 0) {
-        this.swiper.slideNext()
+        this.swiper.slideNext();
       } else {
-        this.swiper.slidePrev()
+        this.swiper.slidePrev();
       }
     },
     // 点击查看大图
     lookImg(url) {
       // console.log(url)
-      let dom = this.$refs.viewer.$viewer
-      this.lookPics = [url]
+      let dom = this.$refs.viewer.$viewer;
+      this.lookPics = [url];
       // console.log(Object.keys(dom))
-      dom.options.toolbar = false
-      dom.show()
+      dom.options.toolbar = false;
+      dom.show();
     },
     async getData() {
       // https://www.4dmodel.com/
@@ -202,74 +195,69 @@ export default {
         // let url = `/data/${
         //本地化部署
         this.id
-        }/hot/js/data.js?time=${Math.random()}`
-      let result = (await this.$http.get(url)).data
-      const resData = result[this.m]
+      }/hot/js/data.js?time=${Math.random()}`;
+      let result = (await this.$http.get(url)).data;
+      const resData = result[this.m];
       // console.log("----", resData);
       if (resData) {
-        this.audio = resData.backgroundMusic
+        this.audio = resData.backgroundMusic;
         // 只有单独的音频上传
-        if (
-          resData.backgroundMusic &&
-          !resData.model &&
-          !resData.video &&
-          !resData.images
-        ) {
-          this.isOneAduio = true
+        if (resData.backgroundMusic && !resData.model && !resData.video && !resData.images) {
+          this.isOneAduio = true;
         }
         // 底部的tab
-        const arr = []
-        const obj = {}
+        const arr = [];
+        const obj = {};
         if (resData.model) {
-          obj.model = resData.model
-          arr.push({ id: 1, type: "model", name: "模型" })
+          obj.model = resData.model;
+          arr.push({ id: 1, type: "model", name: "模型" });
         }
         if (resData.video) {
-          obj.video = resData.video
-          arr.push({ id: 2, type: "video", name: "视频" })
+          obj.video = resData.video;
+          arr.push({ id: 2, type: "video", name: "视频" });
         }
         if (resData.images) {
-          obj.img = resData.images
-          arr.push({ id: 3, type: "img", name: "图片" })
+          obj.img = resData.images;
+          arr.push({ id: 3, type: "img", name: "图片" });
         }
-        this.flooTab = arr
-        this.data = obj
+        this.flooTab = arr;
+        this.data = obj;
 
         // 当前type的值 应该为
-        if (resData.model) this.myType = "model"
-        else if (resData.video) this.myType = "video"
-        else if (resData.images) this.myType = "img"
+        if (resData.model) this.myType = "model";
+        else if (resData.video) this.myType = "video";
+        else if (resData.images) this.myType = "img";
 
-        this.myTitle = resData.title || ""
-        this.myTxt = resData.content || ""
-        this.videoTxt = resData.videosDesc || []
-        this.imgTxt = resData.imagesDesc || []
+        this.myTitle = resData.title || "";
+        this.myTxt = resData.content || "";
+        this.videoTxt = resData.videosDesc || [];
+        this.imgTxt = resData.imagesDesc || [];
 
         // 只有 标题和 文字介绍（没有视频，没有模型，没有图片）
         if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
-          this.oneTxt = true
+          this.oneTxt = true;
         }
 
         this.$nextTick(() => {
-          const _this = this
-          this.swiper = new Swiper('.contenBoxMain', {
+          const _this = this;
+          this.swiper = new Swiper(".contenBoxMain", {
             on: {
               slideChange() {
-                _this.myInd = this.activeIndex
-              }
+                _this.myInd = this.activeIndex;
+              },
             },
             pagination: {
-              el: '.swiper-pagination',
-            }
-          })
-        })
+              el: ".swiper-pagination",
+            },
+          });
+        });
       }
     },
   },
   mounted() {
-    this.getData()
+    this.getData();
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -296,7 +284,7 @@ export default {
       opacity: 1;
 
       &.swiper-pagination-bullet-active {
-        background: #603C23;
+        background: #603c23;
       }
     }
   }
@@ -318,23 +306,41 @@ export default {
     width: 100%;
     margin: 0 auto;
     height: 100%;
-    padding: 30px 0 20px 0;
+    padding: 30px 50px 20px 20px;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
     .myTitle {
       font-size: 22px;
       font-weight: 700;
       margin-bottom: 20px;
-      text-align: center;
+      padding: 0 30px;
+      letter-spacing: 4px;
+      color: #4b4b4b;
+    }
+    .fixedTx {
+      font-size: 14px;
+      width: 250px;
+      height: 30px;
+      margin-bottom: 20px;
+      padding: 0 30px;
+      letter-spacing: 4px;
+      color: #535353;
+    }
+    .logo {
+      margin-bottom: 20px;
+      padding: 0 30px;
+      & > img {
+        width: 45px;
+        object-fit: contain;
+      }
     }
     .mainCon {
       position: relative;
       border-radius: 6px;
       overflow: hidden;
-      width: 100%;
-      height: calc(100% - 300px);
+      width: 700px;
+      height: calc(100% - 270px);
       .oneTabNum {
         z-index: 10;
         position: absolute;
@@ -370,7 +376,7 @@ export default {
           }
         }
         .imgBox {
-          padding: 0px 50px;
+          padding: 0px 140px;
           .smImgBox {
             width: 100%;
             height: 100%;
@@ -388,9 +394,9 @@ export default {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        left: 30px;
-        width: 16px;
-        height: 30px;
+        left: 80px;
+        width: 37px;
+        height: 49px;
         background-image: url("../assets/images/pc/left.png");
         background-size: 100% 100%;
         z-index: 1;
@@ -400,51 +406,58 @@ export default {
       }
       .rightJJ {
         left: auto;
-        right: 30px;
+        right: 80px;
         background-image: url("../assets/images/pc/right.png");
       }
       .noClick {
         cursor: default;
-        opacity: 0.4;
+        opacity: 0.6;
       }
     }
-    .flooTxt {
-      margin: 0 auto;
-      margin-top: 10px;
-      width: 70%;
-      height: 100%;
-      max-height: 200px;
-      .flooTxtBox {
+    .txtBox {
+      width: 0;
+      flex: 1;
+      height: 380px;
+      .flooTxt {
+        margin: 0 auto;
+        margin-top: 10px;
         width: 100%;
         height: 100%;
-        padding: 0 30px;
-        overflow-y: auto;
+        max-height: 300px;
+        .flooTxtBox {
+          width: 100%;
+          height: 100%;
+          padding: 0 30px;
+          overflow-y: auto;
 
-        .myTxt {
-          font-size: 16px;
-          color: #333333;
-          line-height: 24px;
-        }
-        &::-webkit-scrollbar {
-          /*滚动条整体样式*/
-          width: 3px;
-          /*高宽分别对应横竖滚动条的尺寸*/
-          height: 1px;
-        }
-        &::-webkit-scrollbar-thumb {
-          /*滚动条里面小方块*/
-          border-radius: 10px;
-          -webkit-box-shadow: inset 0 0 5px transparent;
-          background: rgb(192, 166, 126);
-        }
-        &::-webkit-scrollbar-track {
-          /*滚动条里面轨道*/
-          -webkit-box-shadow: inset 0 0 5px transparent;
-          border-radius: 10px;
-          background: transparent;
+          .myTxt {
+            font-size: 16px;
+            color: #414141;
+            letter-spacing: 3px;
+            line-height: 32px;
+          }
+          &::-webkit-scrollbar {
+            /*滚动条整体样式*/
+            width: 3px;
+            /*高宽分别对应横竖滚动条的尺寸*/
+            height: 1px;
+          }
+          &::-webkit-scrollbar-thumb {
+            /*滚动条里面小方块*/
+            border-radius: 10px;
+            -webkit-box-shadow: inset 0 0 5px transparent;
+            background: rgb(192, 166, 126);
+          }
+          &::-webkit-scrollbar-track {
+            /*滚动条里面轨道*/
+            -webkit-box-shadow: inset 0 0 5px transparent;
+            border-radius: 10px;
+            background: transparent;
+          }
         }
       }
     }
+
     .flooTxtOne {
       height: 600px;
     }

Scene/public/css/main.css

@@ -3625,10 +3625,7 @@ ul {
   top: 25%;
 }
 
-.pinTop.right,
-.ui-icon {
-  text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
-}
+
 
 #quick-logo {
   position: fixed;

Scene/public/css/oldVer/main0.css

@@ -78,8 +78,8 @@ iframe {
 }
 .popup-content {
   position: relative;
-  width: 80%;
-  height: 85%;
+  width: 70%;
+  height: 80%;
   overflow: hidden;
 }
 #id1 {

Scene/public/js/Hot.js

@@ -53,10 +53,10 @@ window.initHot = function (model) {
     var src = ''
     var r = link.substring(link.indexOf('html') + 4),
       o = 'en' == manage.number('lang') ? '&lang=' + manage.number('lang') : ''
-      ; -1 == r.indexOf('?') ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o) : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
+    ;-1 == r.indexOf('?') ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o) : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
 
-    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'https://houseoss.4dkankan.com/project/WuhanMuseum/hot')
-    // return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
+    // return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'https://houseoss.4dkankan.com/project/WuhanMuseum/hot')
+    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
     // return src
   }
   var removeSrcPostMark = function (url) {
@@ -341,7 +341,7 @@ window.initHot = function (model) {
         if (media) {
           this.changeShineTex(media)
         } else {
-          this.styleImg = /* this.styleImg || */[]
+          this.styleImg = /* this.styleImg || */ []
           if (this.info.styleImg) {
             this.styleImg = this.info.styleImg.map(src => {
               return { src: /* manage.dealURL( */ src } //如果要dealURL,在predeal里
@@ -429,7 +429,7 @@ window.initHot = function (model) {
         {
           let action = CloneObject(settings.hotClickEvent.shine)
           if (info.actionType == 'noAction' || info.noAction) {
-            ; (action.examine = false), (action.openHot = false)
+            ;(action.examine = false), (action.openHot = false)
           } else if (info.actionType == 'dontExam') {
             action.examine = false
           }
@@ -1135,29 +1135,29 @@ window.initHot = function (model) {
       var popup = document.getElementById('popup')
 
       if (openHot) {
-        ; (g_currentHot = this), (popup.style.display = 'block'), popup.classList.add('wait')
+        ;(g_currentHot = this), (popup.style.display = 'block'), popup.classList.add('wait')
         var n = document.createElement('iframe')
 
         SoundManager.play('hot')
 
         var src = getLink(this.info.link)
         n.src = src
-          ; (n.id = 'id1'), (n.allowTransparency = 'true')
+        ;(n.id = 'id1'), (n.allowTransparency = 'true')
         var a = document.getElementById('id1')
         if (void 0 === a || null == a) {
           document.querySelector('.popup-content').appendChild(n)
           var s = !1
-            ; (window.loaddingSuccess = function () {
-              s = !0
-            }),
-              setTimeout(function e() {
-                if (s) {
-                  var t = document.querySelector('#id1').contentWindow.document
-                  t.querySelector('video') &&
-                    (t.querySelector('video').play(), !t.querySelector('video').paused && t.querySelector('.playPause') && t.querySelector('.playPause').classList.add('fa-pause')),
-                    t.querySelector('audio') && t.querySelector('audio').play()
-                } else setTimeout(e, 300)
-              }, 800)
+          ;(window.loaddingSuccess = function () {
+            s = !0
+          }),
+            setTimeout(function e() {
+              if (s) {
+                var t = document.querySelector('#id1').contentWindow.document
+                t.querySelector('video') &&
+                  (t.querySelector('video').play(), !t.querySelector('video').paused && t.querySelector('.playPause') && t.querySelector('.playPause').classList.add('fa-pause')),
+                  t.querySelector('audio') && t.querySelector('audio').play()
+              } else setTimeout(e, 300)
+            }, 800)
         }
       }
 
@@ -1203,7 +1203,7 @@ window.initHot = function (model) {
           var f = new THREE.Matrix4().lookAt(c.position, h, new THREE.Vector3(0, 1, 0))
           p.quaternion = new THREE.Quaternion().setFromRotationMatrix(f)
         }
-        ; (p.callback = done), (p.duration = options.duration || 1500), (p.mode = 'panorama'), (p.aimDuration = options.aimDuration)
+        ;(p.callback = done), (p.duration = options.duration || 1500), (p.mode = 'panorama'), (p.aimDuration = options.aimDuration)
         player.flyToNewMode(p)
       }
     }

Scene/src/pages/A2main/index.module.scss

@@ -12,23 +12,50 @@
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 45px;
+      top: 38px;
       width: 80px;
       height: 37px;
       line-height: 30px;
       text-align: center;
       font-size: 14px;
-      color: #fff;
+      color: #326f64;
     }
 
     // 样式重置
     .pinBottom.left {
-      width: fit-content;
-      background-color: transparent;
-      left: 20px;
+      width: 1050px;
+      margin-right: 350px;
+      height: 85px;
+      left: 50%;
+      transform: translateX(-50%);
+      background-size: contain;
+      background: url('../../assets/img/toolBar_bg.png');
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      padding-bottom: 20px;
+      justify-content: center;
+
+      .logo {
+        position: relative;
+        bottom: -10px;
+        left: 20px;
+        height: 60px;
+        & img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
+      .splitImg {
+        height: 100%;
+        object-fit: contain;
+        margin: 20px 0px 0px 36px;
+      }
     }
 
     #gui-modes-map {
+      margin-left: 30px;
       #play,
       #pause,
       #next,
@@ -37,14 +64,15 @@
       #gui-modes-inside,
       #gui-modes-dollhouse,
       #gui-modes-floorplan {
-        width: var(--pcIconWidth);
-        height: var(--pcIconWidth);
-        margin-left: 38px;
+        width: 45px;
+        height: 45px;
+        margin-left: 30px;
         background-color: transparent !important;
         position: relative;
+
         img {
-          width: 48px;
-          height: 48px;
+          width: 45px;
+          height: 45px;
         }
       }
 
@@ -59,15 +87,16 @@
       display: flex;
       justify-content: flex-end;
       align-items: center;
-      gap: 38px;
+      gap: 30px;
       .likeBox,
+      .A2_map_box,
       #volume,
       #gui-fullscreen,
       #gui-fullscreen-exit,
       .A2_share_box,
       .A2_view_box {
-        width: 48px;
-        height: 48px;
+        width: 45px;
+        height: 45px;
         margin: 0;
         background-color: transparent !important;
         position: relative;
@@ -75,12 +104,16 @@
           width: 100%;
           height: 100%;
         }
+        .hasHover {
+          width: 45px;
+          height: 45px;
+        }
       }
     }
 
     // 底部的位置
     .pinBottom {
-      bottom: 34px;
+      bottom: 26px;
     }
     .pinBottom.playing {
       bottom: 50px !important;
@@ -103,7 +136,10 @@
     }
 
     // 点赞
-    .likeBox {
+    .likeBox,
+    .A2_map_box,
+    .A2_share_box,
+    .A2_view_box {
       float: left;
       cursor: pointer;
 
@@ -197,20 +233,131 @@
       }
     }
 
+    .sectionIndex {
+      position: fixed;
+      bottom: 40px;
+      right:30px;
+      .sectionIndexImg {
+        width: 125px;
+        height: 100%;
+        object-fit: cover;
+        cursor: pointer;
+      }
+    }
+    .section {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 30000;
+      .arrL {
+        position: absolute;
+        left: 2%;
+        cursor: pointer;
+      }
+      .arrR {
+        position: absolute;
+        right: 2%;
+        cursor: pointer;
+      }
+      .sectionBox {
+        padding: 0 20px;
+        width: fit-content;
+        overflow: auto;
+        height: 89%;
+        width: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+        scroll-behavior: smooth;
+        justify-content: center;
+        align-items: center;
+        gap: 20px;
+        ::-webkit-scrollbar {
+          display: none; /* Chrome, Safari, Edge */
+        }
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+
+        & > div {
+          flex: 0 0 auto;
+          width: 19%;
+          height: 91%;
+          background-size: contain;
+          cursor: pointer;
+          p {
+            margin-top: 250px;
+            padding: 38px;
+            font-size: 13px;
+            line-height: 21px;
+            text-indent: 2em;
+          }
+        }
+        .section1 {
+          background: url(../../assets/img/section1.png) no-repeat;
+          background-size: 100% 100%;
+          p {
+            color: #000000;
+          }
+        }
+        .section2 {
+          background: url(../../assets/img/section2.png) no-repeat;
+          background-size: 100% 100%;
+          p {
+    
+            color: #fff;
+          }
+        }
+        .section3 {
+          background: url(../../assets/img/section3.png) no-repeat;
+          background-size: 100% 100%;
+          p {
+          
+            color: #fff;
+          }
+        }
+        .section4 {
+          background: url(../../assets/img/section4.png) no-repeat;
+          background-size: 100% 100%;
+          p {
+           
+            color: #000;
+          }
+        }
+      }
+      .sectionClose {
+        position: fixed;
+        top: 70px;
+        right: 130px;
+        cursor: pointer;
+      }
+    }
+
     // 移动端
 
     @media screen and (max-width: 1000px) {
       .hoveImg {
         height: 20px;
-        top: 30px;
+        top: 24px;
         font-size: 10px;
+        color: #fff;
+        text-shadow: 0 0 5px rgba(253, 251, 178, 0.8), 0 0 10px rgba(253, 251, 178, 0.6);
       }
       #gui-modes-map {
+        border-radius: 25px;
         display: flex;
         justify-content: flex-end;
         align-items: center;
         flex-direction: column;
         gap: 30px;
+        margin-left: 10px;
+        padding: 30px 0px;
+        width: 45px;
         #play,
         #pause,
         #next,
@@ -220,8 +367,8 @@
         #gui-modes-dollhouse,
         #gui-modes-floorplan {
           margin: 0;
-          width: 35px;
-          height: 35px;
+          width: 30px;
+          height: 30px;
           background-color: transparent !important;
           position: relative;
           img {
@@ -232,38 +379,56 @@
       }
 
       .pinBottom {
+        width: 100% !important;
+        align-items: flex-end !important;
+        justify-content: space-between !important;
+        background: transparent !important;
         right: 20px;
+        padding: 0 !important;
+        .logo {
+          display: none;
+        }
+        .splitImg {
+          display: none;
+        }
       }
 
       .rightViewContainer {
+        border-radius: 25px;
+        margin-right: 10px;
+        width: 45px;
         display: flex;
         justify-content: flex-end;
         flex-direction: column;
         align-items: center;
         gap: 30px;
-        margin-bottom: -30px;
         .likeBox,
+        .A2_map_box,
         #volume,
         #gui-fullscreen,
         #gui-fullscreen-exit,
         .A2_share_box,
         .A2_view_box {
-          width: 35px;
-          height: 35px;
+          width: 30px;
+          height: 30px;
           margin: 0;
           background-color: transparent !important;
           position: relative;
-          a {
-            width: 35px;
-            height: 35px;
+          .hasHover {
+            width: 30px;
+            height: 30px;
             img {
-              width: 35px;
-              height: 35px;
+              width: 30px;
+              height: 30px;
             }
           }
         }
       }
 
+      .sectionIndex {
+        display: none;
+      }
+
       .darkGlass {
         background-color: rgba(0, 0, 0, 0.5);
       }

Scene/src/pages/A3hotList/index.module.scss

@@ -3,7 +3,7 @@
   top: 50%;
   right: 0;
   transform: translate(0, -50%);
-  width: 250px;
+  width: 350px;
   height: 100%;
   z-index: 30001;
   display: flex;
@@ -16,15 +16,16 @@
       align-items: center;
       justify-content: flex-start;
       gap: 10px;
-      width: 250px;
+      width: 100%;
       height: 100%;
-      background: url('../../assets/img/hotlist_bg.png') center center;
-      background-size: cover;
-      color: rgba(43, 31, 23, 0.9);
+      // background: url('../../assets/img/hotlist_bg.png') center center;
+      // background-size: cover;
+      background-color: #e8efef;
+      color: #4b5253;
       font-size: 17px;
       font-weight: 500;
       overflow: auto;
-      padding-bottom: 40px;
+      padding-bottom: 50px;
       // 隐藏滚动条
       &::-webkit-scrollbar {
         display: none;
@@ -44,15 +45,15 @@
         padding: 4px 3px;
         cursor: pointer;
         &:hover {
-          background-color: rgb(182, 154, 117);
+          background-color: #abb8bc;
         }
       }
       .A3close {
         position: fixed;
         bottom: 0;
-        width: 250px;
-        height: 40px;
-        background-color: rgba(157, 135, 106, 0.9);
+        width: 350px;
+        height: 50px;
+        background-color: #e8efef;
         border-top: 1px solid rgba(43, 31, 23, 0.1);
         cursor: pointer;
         &:hover {
@@ -63,8 +64,8 @@
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
-          width: 24px;
-          height: 24px;
+          width: 50px;
+          height: 50px;
           opacity: 0.6;
         }
       }