Merge branch 'master' of http://face3d.4dage.com:7005/shaogen1995/518-JSSWLT into master

H5场景/src/views/gui/menu.vue

@@ -117,7 +117,8 @@
                         <div title="打开音乐" data-original-title="打开音乐" id="volumeBid" rel="tooltip"
                           :style="{ paddingLeft: screenWidth > 2000 ? '380px' : '' }" @click="switchBGM2(!isMusic)">
                           <!-- icon文字 -->
-                          <div class="iconTxt" :style="{ marginLeft: screenWidth > 2000 ? '190px' : '' }">〚打开音乐〛</div>
+                          <div class="iconTxt" :class="isMusic ? 'iconTxtAc': ''" :style="{ marginLeft: screenWidth > 2000 ? '40px !important' : '' }">{{
+                            isMusic ? '〚关闭音乐〛' : '〚打开音乐〛' }}</div>
                           <img v-if="isMusic" src="../../assets/img/openM.png" title="打开音乐" />
                           <img v-if="!isMusic" src="../../assets/img/closeM.png" alt="" title="关闭音乐" />
                         </div>

H5场景本地化/public/static/css/css/main.css

@@ -4042,7 +4042,9 @@ a.hasHover:hover, a:active {
     width: calc(100% - 20px);
     height: 97px;
     margin: 9px 10px;
-    float: left
+    float: left;
+    display: flex;
+    justify-content: center;
 }
 
 .frame.noScroll {
@@ -4054,6 +4056,7 @@ a.hasHover:hover, a:active {
     padding: 0;
     height: 100%;
     list-style: none
+
 }
 
 .frame .slidee li {

H5场景本地化/public/static/css/css/sceen2.css

@@ -3949,7 +3949,9 @@ a.hasHover:hover,a:active {
   width: calc(100% - 20px);
   height: 97px;
   margin: 9px 10px;
-  float: left
+  float: left;
+  display: flex;
+  justify-content: center;
 }
 
 .frame.noScroll {

H5场景本地化/public/static/css/sceen2.css

@@ -3949,7 +3949,9 @@ a.hasHover:hover,a:active {
   width: calc(100% - 20px);
   height: 97px;
   margin: 9px 10px;
-  float: left
+  float: left;
+  display: flex;
+  justify-content: center;
 }
 
 .frame.noScroll {

H5场景本地化/src/assets/style/myBase.css

@@ -1,22 +1,29 @@
 .pinBottom-container {
   bottom: 0 !important;
 }
-.pinBottom.left {
+/* .pinBottom.left {
   bottom: 0 !important;
-}
+} */
 #drawer-container {
   overflow: visible;
   max-width: 500px;
 }
 @media screen and (min-width: 2000px) {
   #drawer-container {
-    max-width: 650px;
+    max-width: auto;
   }
 }
 #drawer-container #drawer.open {
   bottom: 88px;
   height: 140px !important;
 }
+
+@media screen and (min-width: 1000px) {
+  #drawer-container #drawer.open {
+    bottom: 0px;
+  }
+}
+
 #drawer-container #drawer.open .darkGlass {
   background-color: rgba(0, 0, 0, 0.8);
 }
@@ -27,9 +34,23 @@
 #drawer-container #drawer.playing {
   bottom: 108px;
 }
+
+
+@media screen and (min-width: 1000px) {
+  #drawer-container #drawer.playing {
+    bottom: 20px;
+  }
+}
+
 #playHead.playing {
   bottom: 88px;
 }
+@media screen and (min-width: 1000px) {
+  #playHead.playing {
+    bottom: 0px;
+    width: 100vw;
+  }
+}
 .frame .slidee li {
   height: 100%;
   position: relative;

H5场景本地化/src/assets/style/myBase.less

@@ -14,6 +14,7 @@
     max-width: 650px;
   }
 
+
   #drawer.open {
     bottom: 88px;
     height: 140px !important;

H5场景本地化/src/views/gui/compomemt/hotspot.vue

@@ -11,13 +11,8 @@
       <div class="main">
         <div class="txtNone" v-if="data.length === 0">暂无热点</div>
         <div class="txt" v-else>
-          <span
-            :class="{ active: hotInd === index }"
-            @click="openHot(item, index)"
-            v-for="(item, index) in data"
-            :key="index"
-            >{{ item.info.title ? item.info.title : "热点" }}</span
-          >
+          <span :class="{ active: hotInd === index }" @click="openHot(item, index)" v-for="(item, index) in data"
+            :key="index">{{ item.info.title ? item.info.title : "热点" }}</span>
         </div>
       </div>
     </div>
@@ -57,14 +52,14 @@ export default {
     this.data = window.myHotList || [];
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  mounted() { },
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -76,6 +71,7 @@ export default {
   top: 0;
   right: 0;
   z-index: 998;
+
   .hotMain {
     position: absolute;
     left: 50%;
@@ -84,30 +80,59 @@ export default {
     width: 100%;
     height: calc(100% - 320px);
     max-width: 500px;
+
+    @media screen and (min-width: 1000px) {
+      height: 100%;
+      left: auto;
+      right: 0;
+      transform: translate(0)
+    }
+
     .closeX {
       cursor: pointer;
       position: absolute;
       right: 15px;
       top: 20px;
-      & > img {
+
+      @media screen and (min-width: 1000px) {
+        right: auto;
+        top: auto;
+        bottom: 2vh;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      &>img {
         width: 40px;
       }
     }
+
     .top {
       position: absolute;
       left: 50%;
       top: -73px;
       transform: translateX(-50%);
-      & > img {
+
+      @media screen and (min-width: 1000px) {
+        top: auto;
+      }
+
+      &>img {
         width: 70px;
       }
     }
+
     .main {
       width: 100%;
       height: 100%;
       border: 1px solid #144a80;
       border-radius: 30px;
       background-color: rgba(0, 0, 0, 0.8);
+
+      @media screen and (min-width: 1000px) {
+        border-radius: 0px;
+      }
+
       .txtNone {
         height: 90%;
         color: #7e522f;
@@ -116,6 +141,7 @@ export default {
         align-items: center;
         justify-content: center;
       }
+
       .txt {
         margin-top: 12%;
         padding: 0 20px;
@@ -123,26 +149,37 @@ export default {
         overflow-y: auto;
         color: #fff;
         font-size: 16px;
-        & > span {
+
+        @media screen and (min-width: 1000px) {
+          height: 76%;
+          margin-top: 27%;
+        }
+
+        &>span {
           margin-top: 20px;
           cursor: pointer;
           display: block;
           width: 100%;
           text-align: center;
+
           &:last-child {
             margin-bottom: 60px;
           }
         }
+
         :hover {
           color: #00c7d5;
         }
       }
+
       .active {
         color: #00c7d5;
       }
+
       .txt::-webkit-scrollbar-thumb {
         outline: 2px solid #00c7d5;
       }
+
       .txt::-webkit-scrollbar {
         width: 2px;
       }

H5场景本地化/src/views/gui/menu.vue

@@ -5,11 +5,7 @@
     </div>
 
     <!-- 展开按钮 -->
-    <div
-      class="myViewShowBox"
-      @click="viewShow = true"
-      :class="{ myViewShowBoxAc: !viewShow }"
-    >
+    <div class="myViewShowBox" @click="viewShow = true" :class="{ myViewShowBoxAc: !viewShow }">
       <img :src="require(`@/assets/img/show.png`)" />
     </div>
 
@@ -22,26 +18,15 @@
     <!-- 音乐按钮 -->
     <div class="myMusicBox" id="volume">
       <div>
-        <img
-          id="openMusic"
-          style="display: block"
-          @click="switchBGM(true)"
-          src="../../assets/img/openM.png"
-          alt=""
-          title="打开音乐"
-        />
-        <img
-          id="closeMusic"
-          style="display: none"
-          @click="switchBGM(false)"
-          src="../../assets/img/closeM.png"
-          alt=""
-          title="关闭音乐"
-        />
+        <img id="openMusic" style="display: block !important" @click="switchBGM(true)" src="../../assets/img/openM.png"
+          alt="" title="打开音乐" />
+        <img id="closeMusic" style="display: none !important" @click="switchBGM(false)" src="../../assets/img/closeM.png"
+          alt="" title="关闭音乐" />
       </div>
     </div>
 
-    <div class="pinBottom left" :class="{ viewShowAc: !viewShow }">
+    <div id="lineTop" class="pinBottom left" :class="{ viewShowAc: !viewShow }"
+      :style="{ bottom: timer ? '140px' : !isGuide && screenWidth > 1000 ? '150px ' : isGuide && screenWidth > 1000 ? '20px ' : '0px ' }">
       <div>
         <div class="viewContainer">
           <div class="viewXian">
@@ -53,224 +38,137 @@
             </div>
           </div>
 
-          <div
-            id="previous"
-            class="previous desktop-only ui-icon"
-            style="display: none"
-          >
+          <div id="previous" class="previous desktop-only ui-icon" style="display: none">
             <a>
-              <img
-                rel="tooltip"
-                title=""
-                :src="require('@/assets/images/play.png')"
-                data-original-title="播放"
-              />
+              <img rel="tooltip" title="" :src="require('@/assets/images/play.png')" data-original-title="播放" />
             </a>
           </div>
-          <div
-            id="play"
-            class="ui-icon"
-            rel="tooltip"
-            data-original-title="播放"
-          >
+          <div id="play" class="ui-icon" rel="tooltip" data-original-title="播放">
             <!-- icon文字 -->
-            <div class="iconTxt">自动漫游</div>
-            <a>
-              <img :src="require('@/assets/images/icon/play.png')" />
-            </a>
-          </div>
-          <div id="pause" class="ui-icon" style="display: none">
-            <!-- icon文字 -->
-            <div class="iconTxt iconTxtAc">自动漫游</div>
-            <a>
-              <img
-                rel="tooltip"
-                title=""
-                :src="require('@/assets/images/icon/pause.png')"
-                data-original-title="暂停"
-              />
-            </a>
-          </div>
-          <div
-            id="next"
-            class="next desktop-only ui-icon wide"
-            style="display: none"
-          >
-            <a>
-              <i
-                rel="tooltip"
-                title=""
-                class="icon icon-dpad-right"
-                data-original-title="下一个"
-              ></i>
-            </a>
-          </div>
-          <div id="gui-modes-map" class="ui-icon double active">
-            <div
-              data-original-title="导览"
-              @click="isGuide = !isGuide"
-              id="pullTab"
-              rel="tooltip"
-              title="场景导览"
-            >
+            <div class="iconTxt" :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '' }">{{
+              screenWidth < 1000 ? '自动导览' : '〚自动导览〛' }}</div>
+                <a>
+                  <img :src="require('@/assets/images/icon/play.png')" />
+                </a>
+            </div>
+            <div id="pause" class="ui-icon" style="display: none">
               <!-- icon文字 -->
-              <div class="iconTxt" :class="{ iconTxtAc: !isGuide }">
-                导览列表
+              <div class="iconTxt iconTxtAc"
+                :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '' }">{{ screenWidth < 1000
+                  ? '自动导览' : '〚自动导览〛' }}</div>
+                  <a>
+                    <img rel="tooltip" title="" :src="require('@/assets/images/icon/pause.png')"
+                      data-original-title="暂停" />
+                  </a>
               </div>
-              <img
-                title=""
-                class="icon icon-inside"
-                :src="
-                  require(`@/assets/images/icon/auto${
-                    !isGuide ? '_active' : ''
-                  }.png`)
-                "
-              />
-            </div>
-
-            <!-- 热点列表 -->
-            <div class="hotListBox" @click="meanInd = true">
-              <div class="iconTxt">热点列表</div>
-              <div class="hotListSon">
-                <img
-                  :src="
-                    require(`@/assets/images/icon/${
-                      meanInd ? 'hotAc' : 'hot'
-                    }.png`)
-                  "
-                />
+              <div id="next" class="next desktop-only ui-icon wide" style="display: none">
+                <a>
+                  <i rel="tooltip" title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
+                </a>
+              </div>
+              <div id="gui-modes-map" class="ui-icon double active">
+                <div data-original-title="导览" @click="isGuide = !isGuide" id="pullTab" rel="tooltip" title="场景导览"
+                  :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '100px' : '' }">
+                  <!-- icon文字 -->
+                  <div class="iconTxt" :class="{ iconTxtAc: !isGuide }"
+                    :style="{ marginLeft: screenWidth > 1000 && screenWidth < 2000 ? '50px' : '' }">
+                    {{ screenWidth < 1000 ? '导览列表' : '〚导览列表〛' }} </div>
+                      <img title="" class="icon icon-inside" :src="require(`@/assets/images/icon/auto${!isGuide ? '_active' : ''
+                        }.png`)
+                        " />
+                  </div>
+
+                  <!-- 热点列表 -->
+                  <div class="hotListBox" @click="meanInd = true"
+                    :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '' : '', paddingLeft: screenWidth > 2000 ? '' : '' }">
+                    <div class="iconTxt"
+                      :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '' : '', marginLeft: screenWidth > 2000 ? '' : '' }">
+                      {{ screenWidth < 1000 ? '热点列表' : '〚热点列表〛' }}</div>
+                        <div class="hotListSon">
+                          <img :src="require(`@/assets/images/icon/${meanInd ? 'hotAc' : 'hot'
+                            }.png`)
+                            " />
+                        </div>
+                    </div>
+
+                    <div data-original-title="全景漫游" id="gui-modes-inside" rel="tooltip">
+                      <img class="icon icon-inside" :src="require('@/assets/images/icon/inside.png')" />
+                      <img class="icon icon-inside active" :src="require('@/assets/images/icon/inside_active.png')" />
+                    </div>
+                    <div title="迷你漫游" data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip"
+                      :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '', paddingLeft: screenWidth > 2000 ? '' : '' }">
+                      <!-- icon文字 -->
+                      <div class="iconTxt"
+                        :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '', marginLeft: screenWidth > 2000 ? '' : '' }">
+                        {{ screenWidth < 1000 ? '迷你模型' : '〚迷你模型〛' }}</div>
+                          <img class="icon icon-inside" :src="require('@/assets/images/icon/dollhouse.png')" />
+                          <img class="icon icon-inside active"
+                            :src="require('@/assets/images/icon/dollhouse_active.png')" />
+                      </div>
+                      <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="顶部俯视"
+                        :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '40px' : '', paddingLeft: screenWidth > 2000 ? '' : '' }">
+                        <!-- icon文字 -->
+                        <div class="iconTxt"
+                          :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '40px' : '', marginLeft: screenWidth > 2000 ? '' : '' }">
+                          {{ screenWidth < 1000 ? '俯瞰视图' : '〚俯瞰视图〛' }}</div>
+                            <img class="icon icon-inside" :src="require('@/assets/images/icon/floor.png')" />
+                            <img class="active icon icon-inside active"
+                              :src="require('@/assets/images/icon/floor_active.png')" />
+                        </div>
+                        <div title="打开音乐" data-original-title="打开音乐" id="volumeBid" rel="tooltip"
+                          :style="{ paddingLeft: screenWidth > 2000 ? '80px !important' : '' }"
+                          @click="switchBGM2(!isMusic)">
+                          <!-- icon文字 -->
+                          <div class="iconTxt" :class="isMusic ? 'iconTxtAc': ''" :style="{ marginLeft: screenWidth > 2000 ? '40px !important' : '' }">{{
+                            isMusic ? '〚关闭音乐〛' : '〚打开音乐〛' }}</div>
+                          <img v-if="isMusic" src="../../assets/img/openM.png" title="打开音乐" />
+                          <img v-if="!isMusic" src="../../assets/img/closeM.png" alt="" title="关闭音乐" />
+                        </div>
+                        <div data-original-title="VR" id="vr" rel="tooltip" title="" style="display: none">
+                          <img class="icon icon-inside" :src="require('@/assets/images/VR.png')" />
+                        </div>
+                        <div data-original-title="热点列表" id="hotList" rel="tooltip" title="">
+                          <img class="icon icon-inside" :src="require('@/assets/images/hotlist.png')" />
+                          <img class="icon icon-inside active" :src="require('@/assets/images/hotlist.png')" />
+                        </div>
+                        <div data-original-title="消除外壳" id="gui-remove-face" rel="tooltip" title=""
+                          style="display: none; float: left">
+                          <img class="icon icon-inside" :src="require('@/assets/images/face.jpg')" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="pinBottom right hideTarget">
+                  <div class="rightViewContainer clearfix">
+                    <div class="gui-floor">
+                      <div class="gui-floor-title"></div>
+                      <div class="gui-floor-icon">
+                        <span class="gui-floor-number"></span>
+                      </div>
+                      <div class="container"></div>
+                    </div>
+
+                    <div id="vr" class="ui-icon wide hidden" style="display: none">
+                      <a>
+                        <i rel="tooltip" title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
+                      </a>
+                    </div>
+                    <div id="sharing" class="ui-icon wide hidden" style="display: none">
+                      <a>
+                        <i rel="tooltip" title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
+                      </a>
+                    </div>
+                    <!-- <div class="pull-right terms terms2">
+                    <a>{[{ TERMS }]}</a>
+                  </div> -->
+                  </div>
+                </div>
+
+                <!-- 热点列表组件 -->
+                <Hotspot v-if="meanInd" @close="meanInd = false" />
               </div>
-            </div>
-
-            <div
-              data-original-title="全景漫游"
-              id="gui-modes-inside"
-              rel="tooltip"
-            >
-              <img
-                class="icon icon-inside"
-                :src="require('@/assets/images/icon/inside.png')"
-              />
-              <img
-                class="icon icon-inside active"
-                :src="require('@/assets/images/icon/inside_active.png')"
-              />
-            </div>
-            <div
-              title="迷你漫游"
-              data-original-title="迷你模型"
-              id="gui-modes-dollhouse"
-              rel="tooltip"
-            >
-              <!-- icon文字 -->
-              <div class="iconTxt">迷你模型</div>
-              <img
-                class="icon icon-inside"
-                :src="require('@/assets/images/icon/dollhouse.png')"
-              />
-              <img
-                class="icon icon-inside active"
-                :src="require('@/assets/images/icon/dollhouse_active.png')"
-              />
-            </div>
-            <div
-              data-original-title="俯视图"
-              id="gui-modes-floorplan"
-              rel="tooltip"
-              title="顶部俯视"
-            >
-              <!-- icon文字 -->
-              <div class="iconTxt">顶部俯视</div>
-              <img
-                class="icon icon-inside"
-                :src="require('@/assets/images/icon/floor.png')"
-              />
-              <img
-                class="active icon icon-inside active"
-                :src="require('@/assets/images/icon/floor_active.png')"
-              />
-            </div>
-            <div
-              data-original-title="VR"
-              id="vr"
-              rel="tooltip"
-              title=""
-              style="display: none"
-            >
-              <img
-                class="icon icon-inside"
-                :src="require('@/assets/images/VR.png')"
-              />
-            </div>
-            <div
-              data-original-title="热点列表"
-              id="hotList"
-              rel="tooltip"
-              title=""
-            >
-              <img
-                class="icon icon-inside"
-                :src="require('@/assets/images/hotlist.png')"
-              />
-              <img
-                class="icon icon-inside active"
-                :src="require('@/assets/images/hotlist.png')"
-              />
-            </div>
-            <div
-              data-original-title="消除外壳"
-              id="gui-remove-face"
-              rel="tooltip"
-              title=""
-              style="display: none; float: left"
-            >
-              <img
-                class="icon icon-inside"
-                :src="require('@/assets/images/face.jpg')"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="pinBottom right hideTarget">
-      <div class="rightViewContainer clearfix">
-        <div class="gui-floor">
-          <div class="gui-floor-title"></div>
-          <div class="gui-floor-icon">
-            <span class="gui-floor-number"></span>
-          </div>
-          <div class="container"></div>
-        </div>
-
-        <div id="vr" class="ui-icon wide hidden" style="display: none">
-          <a>
-            <i
-              rel="tooltip"
-              title="{[{ VIEW_IN_VR }]}"
-              class="icon icon-webvr"
-            ></i>
-          </a>
-        </div>
-        <div id="sharing" class="ui-icon wide hidden" style="display: none">
-          <a>
-            <i
-              rel="tooltip"
-              title="{[{ SOCIAL_SHARING }]}"
-              class="icon icon-share"
-            ></i>
-          </a>
-        </div>
-        <div class="pull-right terms terms2">
-          <a>{[{ TERMS }]}</a>
-        </div>
-      </div>
-    </div>
-
-    <!-- 热点列表组件 -->
-    <Hotspot v-if="meanInd" @close="meanInd = false" />
-  </div>
 </template>
 
 <script>
@@ -288,6 +186,10 @@ export default {
       viewShow: true,
       // 小地图的展开和收起
       smMapShow: true,
+      isMusic: false,
+      screenWidth: null,
+      dialogWidth: 0,
+      timer: false
     };
   },
   watch: {
@@ -299,13 +201,19 @@ export default {
         dom.style.pointerEvents = "none";
       }
     },
-
+    // 屏幕宽度
+    screenWidth: {
+      handler: function (val, oldVal) {
+        this.dialogWidth = val
+        console.log(this.dialogWidth)
+      },
+    },
     viewShow(val) {
       const dom = document.querySelector("#drawer-container");
       if (val) {
         dom.style.transform = "translateX(0px)";
       } else {
-        dom.style.transform = "translateX(-500px)";
+        dom.style.transform = "translateX(-100vw)";
       }
     },
     smMapShow(val) {
@@ -317,7 +225,23 @@ export default {
     },
   },
   computed: {},
-  mounted() {},
+  mounted() {
+    this.screenWidth = document.body.clientWidth
+    window.onresize = () => {
+      return (() => {
+        this.screenWidth = document.body.clientWidth
+      })()
+    }
+    if (this.screenWidth > 1000) {
+      console.log('走')
+      setTimeout(() => {
+        this.timer = true
+      }, 3000)
+      setTimeout(() => {
+        this.timer = false
+      }, 5200)
+    }
+  },
   methods: {
     switchBGM(flag) {
       if (flag) {
@@ -330,6 +254,20 @@ export default {
         document.querySelector("#closeMusic").style.display = "none";
       }
     },
+    switchBGM2(flag) {
+      if (flag) {
+        window.manage.switchBgmState(true);
+        // document.querySelector("#openMusic").style.display = "none !important";
+        // document.querySelector("#closeMusic").style.display = "block ";
+        this.isMusic = true
+      } else {
+        window.manage.switchBgmState(false);
+        // document.querySelector("#openMusic").style.display = "block ";
+        // document.querySelector("#closeMusic").style.display = "none !important";
+        this.isMusic = false
+      }
+      console.log(this.isMusic)
+    },
   },
 };
 </script>
@@ -361,6 +299,14 @@ export default {
   position: relative;
 }
 
+#volumeBid {
+  position: relative;
+
+  @media screen and (max-width: 1000px) {
+    display: none !important;
+  }
+}
+
 #gui-modes-floorplan {
   position: relative;
 }
@@ -399,10 +345,10 @@ export default {
   //   min-width: 500px;
   // }
 
-  > div {
+  >div {
     margin-right: @margin;
 
-    > img {
+    >img {
       width: 44px;
       height: 44px;
       display: block !important;
@@ -424,7 +370,7 @@ export default {
   }
 
   .active {
-    > img {
+    >img {
       display: none !important;
     }
 
@@ -442,16 +388,19 @@ export default {
   width: 40px;
 }
 
+.guiUp {
+  @media screen and (min-width:1000px) {
+    bottom: 140px;
+  }
+}
+
 #volume {
   width: 40px;
 
-  @media screen and (min-width: 1000px) and(max-width: 2000px) {
-    width: 60px;
+  @media screen and (min-width: 1000px) {
+    display: none !important;
   }
 
-  @media screen and (min-width: 2000px) {
-    width: 80px;
-  }
 }
 
 #gui-fullscreen-exit img {
@@ -462,7 +411,7 @@ export default {
   background: none !important;
 
   // margin-right: 20px!important;
-  > div {
+  >div {
     width: 100%;
     cursor: pointer;
 
@@ -489,16 +438,16 @@ export default {
       font-size: 16px;
     }
 
-    &::before {
-      content: "";
-      position: absolute;
-      right: -4px;
-      bottom: 37px;
-      width: 9px;
-      height: 7px;
-      background-image: url("../../assets/img/dian.png");
-      background-size: 100% 100%;
-    }
+    // &::before {
+    //   content: "";
+    //   position: absolute;
+    //   right: -4px;
+    //   bottom: 37px;
+    //   width: 9px;
+    //   height: 7px;
+    //   background-image: url("../../assets/img/dian.png");
+    //   background-size: 100% 100%;
+    // }
   }
 
   .iconTxtAc {
@@ -532,16 +481,14 @@ export default {
 
     @media screen and (min-width: 1000px) {
       height: auto;
+      width: 300px;
     }
 
-    @media screen and (min-width: 2000px) {
-      width: 100px;
-    }
 
     .hotListSon {
       text-align: center;
 
-      & > img {
+      &>img {
         width: 44px !important;
         height: 44px !important;
 
@@ -568,8 +515,9 @@ export default {
     display: flex;
     position: relative;
 
-    @media screen and (min-width: 2000px) {
-      max-width: 650px;
+    @media screen and (min-width:1000px) {
+      background-color: #ebebeb00;
+      max-width: none;
     }
 
     .viewXian {
@@ -581,14 +529,32 @@ export default {
       left: 0;
       top: 0;
 
-      @media screen and (min-width: 2000px) {
-        max-width: 650px;
+      @media screen and (min-width:1000px) {
+        display: flex;
+        justify-content: center;
+        max-width: none;
+        padding: 0px 10px 46px 10px;
+        margin-top: -5px;
+      }
+
+      @media screen and (min-width:2000px) {
+        display: flex;
+        justify-content: center;
+        max-width: none;
+        padding: 0px 10px 46px 10px;
+        margin-top: -10px;
       }
 
-      & > img {
+      &>img {
         width: 100%;
         height: 100%;
         object-fit: contain;
+
+        @media screen and (min-width:1000px) {
+          width: 80%;
+          object-fit: inherit;
+        }
+
       }
 
       .viewShowIcon {
@@ -597,11 +563,22 @@ export default {
         right: 7px;
         top: 4px;
 
-        & > img {
+        @media screen and (min-width: 1000px) {
+          position: static;
+          right: none;
+          top: none;
+          margin-top: 4px;
+        }
+
+        &>img {
           width: 30px;
 
           @media screen and (min-width: 1000px) and (max-width: 2000px) {
             width: 40px;
+            z-index: 9999;
+            position: absolute;
+            z-index: 9999;
+            position: absolute;
           }
 
           @media screen and (min-width: 2000px) {
@@ -626,7 +603,7 @@ export default {
           right: 0px;
           top: 4px;
 
-          & > img {
+          &>img {
             width: 30px;
           }
         }
@@ -644,7 +621,7 @@ export default {
     pointer-events: none;
     transition: all 0.5s;
 
-    & > img {
+    &>img {
       width: 30px;
 
       @media screen and (min-width: 1000px) and (max-width: 2000px) {
@@ -663,10 +640,10 @@ export default {
   }
 
   .viewShowAc {
-    transform: translateX(-500px);
+    transform: translateX(-100vw);
 
-    @media screen and (min-width: 2000px) {
-      transform: translateX(-650px);
+    @media screen and (min-width:1000px) {
+      transform: translateX(-100vw);
     }
   }
 
@@ -687,7 +664,7 @@ export default {
       width: 80px;
     }
 
-    & > div {
+    &>div {
       width: 40px;
 
       @media screen and (min-width: 1000px) and(max-width: 2000px) {
@@ -698,7 +675,7 @@ export default {
         width: 80px;
       }
 
-      & > img {
+      &>img {
         width: 40px;
 
         @media screen and (min-width: 1000px) and(max-width: 2000px) {
@@ -722,6 +699,10 @@ export default {
     transition: all 0.3s;
     transform: rotate(90deg);
 
+    @media screen and (min-width: 1000px) {
+      right: 98px;
+    }
+
     .smMapBoxSon {
       border-radius: 0 0 4px 4px;
       height: 16px;
@@ -730,7 +711,7 @@ export default {
       margin: 0 auto;
       text-align: center;
 
-      & > img {
+      &>img {
         position: relative;
         top: -5px;
         width: 20px;