H5场景修改ui

H5场景/public/static/css/main.css

@@ -3931,16 +3931,17 @@ a.tag-link {
 }
 @media only screen and (min-width: 1000px) and (max-width: 2000px) {
     #gui-modes-map>div[rel] {
-        width: 70px;
+        width: 200px;
     }
 }
 
 @media only screen and (min-width: 2000px) {
     #gui-modes-map>div[rel] {
-        width: 100px;
+        width: 400px;
     }
 }
 
+
 /* #gui-modes-map>div[rel]:hover,
 .pinBottom.right .rightViewContainer>div:hover,
 #play:hover {} */
@@ -4353,14 +4354,16 @@ a.tag-link {
 @media only screen and (min-width: 1000px) and (max-width: 2000px) {
     #play,
     #pause {
-        width: 70px;
+        width: 200px;
+        margin-left: 70px;
+        padding-left: 80px;
     }
 }
 
-@media only screen and (min-width: 2000px) {
+@media only screen and (min-width: 2000px){
     #play,
     #pause {
-        width: 100px;
+        width: 400px;
     }
 }
 
@@ -4422,7 +4425,7 @@ a.tag-link {
     height: 200px;
     position: fixed;
     bottom: 0px;
-    overflow: hidden;
+    overflow: auto;
     pointer-events: none;
     -webkit-transition-property: bottom, opacity;
     -webkit-transition-duration: .5s;
@@ -4453,6 +4456,15 @@ a.tag-link {
     height: 140px
 }
 
+@media screen and (min-width: 1000px) {
+    #drawer.open {
+        width: 100vw;
+    }
+    #drawer {
+        width: 100vw;
+    }
+}
+
 #drawer-container.drawerOpen #drawer.open {
     height: 136px
 }
@@ -4478,6 +4490,12 @@ a.tag-link {
     bottom: 147px
 }
 
+@media screen and (min-width: 1000px) {
+    #gui .pinBottom.open.noScroll {
+        bottom: 147px
+    }
+}
+
 #gui .pinBottom.open.playing {
     bottom: 180px
 }
@@ -4525,6 +4543,15 @@ a.tag-link {
     position: relative;
 }
 
+@media screen and (min-width: 1000px) {
+    .frame {
+        float: none;
+        position: none;
+        display: flex;
+        justify-content: center;
+    }
+}
+
 .frame.noScroll {
     margin: 17px 10px
 }

H5场景/public/static/js/loadCAD.js

@@ -1,40 +1,39 @@
 window.grendCAD = (function grendCAD() {
-  let initFloor
-  let initScript
-  let initDOM
-  let point, dire
+  let initFloor;
+  let initScript;
+  let initDOM;
+  let point, dire;
 
   window.cad = {
-    setSign: function(p, d) {
-      point = p
-      dire = d
-    }
-  }
+    setSign: function (p, d) {
+      point = p;
+      dire = d;
+    },
+  };
 
   function loadScript(cb) {
-    if (initScript) return cb()
+    if (initScript) return cb();
 
-    let $script = document.createElement('script')
-    $script.src = '//www.4dmodel.com/CAD/bundle.js'
-    $script.onload = function() {
-      initScript = true
-      cb()
-    }
+    let $script = document.createElement("script");
+    $script.src = "//www.4dmodel.com/CAD/bundle.js";
+    $script.onload = function () {
+      initScript = true;
+      cb();
+    };
 
-    document.documentElement.appendChild($script)
+    document.documentElement.appendChild($script);
   }
 
   function loadDOM($parent) {
     if (initDOM) return initDOM;
-    let $layer = document.createElement('div')
-    let $cad = document.createElement('div')
+    let $layer = document.createElement("div");
+    let $cad = document.createElement("div");
 
-    $layer.className = 'cad'
-    $cad.id = 'cad'
-    $layer.appendChild($cad)
+    $layer.className = "cad";
+    $cad.id = "cad";
+    $layer.appendChild($cad);
 
-
-    let style = document.createElement('style')
+    let style = document.createElement("style");
     style.innerHTML = `
       .cad {
         position: absolute;
@@ -46,94 +45,100 @@ window.grendCAD = (function grendCAD() {
         border-radius: 5px;
       }
 
+      @media (min-width:1000px) {
+        .cad{
+          right: 20px;
+        }
+      }
+
       .cad > div {
         width: 100%;
         height: 100%;
       }
-    `
+    `;
 
-    document.documentElement.appendChild(style)
-    $('body').append($layer)
-    $parent.appendChild(style)
-    $parent.appendChild($layer)
-    return $layer
+    document.documentElement.appendChild(style);
+    $("body").append($layer);
+    $parent.appendChild(style);
+    $parent.appendChild($layer);
+    return $layer;
   }
 
-
   function setStyle(signColor, borderColor, borderWidth) {
     cad.setDefaultPointStyle({
       fillColor: "rgba(0,0,0,0)",
-      storkeColor: "rgba(0,0,0,0)"
+      storkeColor: "rgba(0,0,0,0)",
     });
 
-    console.log(borderWidth)
+    console.log(borderWidth);
     cad.setDefaultLineStyle({
       width: borderWidth,
-      color: borderColor
+      color: borderColor,
     });
 
     cad.setDefaultSignStyle({
-      color: signColor
-    })
+      color: signColor,
+    });
   }
 
-
-  return function(floor, $parent, signColor, borderColor, borderWidth) {
+  return function (floor, $parent, signColor, borderColor, borderWidth) {
     if (initFloor) {
-      console.log('cache')
-      return setStyle(signColor, borderColor, borderWidth)
+      console.log("cache");
+      return setStyle(signColor, borderColor, borderWidth);
     }
-    console.log('load')
-    initFloor = floor
+    console.log("load");
+    initFloor = floor;
 
-    loadScript(function() {
-      let $layer = loadDOM($parent)
+    loadScript(function () {
+      let $layer = loadDOM($parent);
 
-      $layer.style.visibility = 'hidden'
+      $layer.style.visibility = "hidden";
       window.cad = structureCAD({
         data: {
-            block: [],
-            column: [],
-            door: [],
-            hole: [],
-            segment: [],
-            "vertex-xy": [],
-            "vertex-z": [],
-        }, 
-        layer: $layer.querySelector('#cad'),
-        edit: false
+          block: [],
+          column: [],
+          door: [],
+          hole: [],
+          segment: [],
+          "vertex-xy": [],
+          "vertex-z": [],
+        },
+        layer: $layer.querySelector("#cad"),
+        edit: false,
       });
-      
-      setStyle(signColor, borderColor, borderWidth)
-      cad.hideDire()
-      cad.hideGauge()
-  
-      console.log('loadData')
+
+      setStyle(signColor, borderColor, borderWidth);
+      cad.hideDire();
+      cad.hideGauge();
+
+      console.log("loadData");
       cad.loadData(initFloor);
       if (point && dire) {
-        window.cad.setSign(point, dire)
+        window.cad.setSign(point, dire);
       }
-      $layer.style.visibility = 'visible'
-    })
-
-  }
+      $layer.style.visibility = "visible";
+    });
+  };
 })();
 
-
 $.ajax({
   url: g_Prefix + "data/" + window.number + "/someData.json" + "?" + Date.now(),
-  method: 'GET',
+  method: "GET",
   success(data) {
-    if (!data.showCad) return
+    if (!data.showCad) return;
 
-
-    
     $.ajax({
-      url: '//super.4dage.com/data/'+ window.number +'/floor.json', 
-      method: 'GET',
+      url: "//super.4dage.com/data/" + window.number + "/floor.json",
+      method: "GET",
       success(res) {
-        grendCAD(res, document.querySelector('body'), data.cadSignColor, data.cadBorderColor, data.cadBorderWidth)
-      }
-    })
-  }
-})
+        grendCAD(
+          res,
+          document.querySelector("body"),
+          data.cadSignColor,
+          data.cadBorderColor,
+          data.cadBorderWidth
+        );
+      },
+    });
+  },
+});

H5场景/src/assets/style/myBase.css

@@ -1,17 +1,15 @@
 .pinBottom-container {
   bottom: 0 !important;
 }
-.pinBottom.left {
-  bottom: 0 !important;
-}
+
 #drawer-container {
   overflow: visible;
   max-width: 500px;
 }
 
-@media screen and (min-width: 2000px) {
+@media screen and (min-width: 1000px) {
   #drawer-container {
-    max-width: 650px;
+    max-width: auto;
   }
 }
 #drawer-container #drawer.open {
@@ -19,9 +17,9 @@
   height: 140px !important;
 }
 
-@media screen and (min-width: 2000px) {
+@media screen and (min-width: 1000px) {
   #drawer-container #drawer.open {
-    bottom: 120px;
+    bottom: 0px;
   }
 }
 #drawer-container #drawer.open .darkGlass {
@@ -34,9 +32,21 @@
 #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

@@ -10,14 +10,15 @@
   overflow: visible;
   max-width: 500px;
 
-  @media screen and (min-width:2000px) {
-    max-width: 650px;
-  }
 
   #drawer.open {
     bottom: 88px;
     height: 140px !important;
 
+    // @media screen and (min-width:1000px) {
+    //   bottom: 0px;
+    // }
+
     .darkGlass {
       background-color: rgba(0, 0, 0, .8);
 

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,11 @@ export default {
   top: 0;
   right: 0;
   z-index: 998;
+
+  // @media screen and (min-width: 1000px) {
+  //   backdrop-filter: blur(0px);
+  // }
+
   .hotMain {
     position: absolute;
     left: 50%;
@@ -84,30 +84,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 +145,7 @@ export default {
         align-items: center;
         justify-content: center;
       }
+
       .txt {
         margin-top: 12%;
         padding: 0 20px;
@@ -123,26 +153,38 @@ 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/guide.vue

@@ -43,4 +43,5 @@ export default {
 #thumb-container {
   padding: 0 !important;
 }
+
 </style>

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

@@ -18,14 +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">
@@ -44,105 +45,127 @@
           </div>
           <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>
-
-            <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">
+              <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 ? '150px' : '' }">
+                    <div class="iconTxt"
+                      :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '' : '', marginLeft: screenWidth > 2000 ? '75px' : '' }">
+                      {{ 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 ? '300px' : '' }">
+                      <!-- icon文字 -->
+                      <div class="iconTxt"
+                        :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '', marginLeft: screenWidth > 2000 ? '150px' : '' }">
+                        {{ 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 ? '250px' : '' }">
+                        <!-- icon文字 -->
+                        <div class="iconTxt"
+                          :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '40px' : '', marginLeft: screenWidth > 2000 ? '125px' : '' }">
+                          {{ 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 ? '380px' : '' }" @click="switchBGM2(!isMusic)">
+                          <!-- icon文字 -->
+                          <div class="iconTxt" :style="{ marginLeft: screenWidth > 2000 ? '190px' : '' }">〚打开音乐〛</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>
+        </div> -->
+                  </div>
+                </div>
 
-    <!-- 热点列表组件 -->
-    <Hotspot v-if="meanInd" @close="meanInd = false" />
-  </div>
+                <!-- 热点列表组件 -->
+                <Hotspot v-if="meanInd" @close="meanInd = false" />
+              </div>
 </template>
 
 <script>
@@ -160,6 +183,10 @@ export default {
       viewShow: true,
       // 小地图的展开和收起
       smMapShow: true,
+      isMusic: false,
+      screenWidth: null,
+      dialogWidth: 0,
+      timer: false
     };
   },
   watch: {
@@ -171,7 +198,13 @@ 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) {
@@ -189,7 +222,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) {
@@ -202,7 +251,23 @@ 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)
+    },
   },
+  created() {
+  }
 };
 </script>
 
@@ -233,6 +298,14 @@ export default {
   position: relative;
 }
 
+#volumeBid {
+  position: relative;
+
+  @media screen and (max-width: 1000px) {
+    display: none !important;
+  }
+}
+
 #gui-modes-floorplan {
   position: relative;
 }
@@ -317,22 +390,33 @@ export default {
 
 #gui-fullscreen img {
   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;
-  }
+
+  // @media screen and (min-width: 1000px) and(max-width: 2000px) {
+  //   width: 60px;
+  // }
+
+  // @media screen and (min-width: 2000px) {
+  //   width: 80px;
+  // }
 }
 
+#volumeBig {}
+
 #gui-fullscreen-exit img {
   width: 40px !important;
 }
@@ -368,16 +452,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 {
@@ -409,15 +493,11 @@ export default {
     position: relative;
     z-index: 100;
 
-    @media screen and (min-width: 1000px) and (max-width: 2000px) {
+    @media screen and (min-width: 1000px) {
       height: auto;
-      width: 70px;
+      width: 300px;
     }
 
-    @media screen and (min-width: 2000px) {
-      height: auto;
-      width: 100px;
-    }
 
     .hotListSon {
       text-align: center;
@@ -449,8 +529,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 {
@@ -462,14 +543,33 @@ export default {
       left: 0;
       top: 0;
 
+      @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) {
-        max-width: 650px;
+        display: flex;
+        justify-content: center;
+        max-width: none;
+        padding: 0px 10px 46px 10px;
+        margin-top: -10px;
       }
 
+
       &>img {
         width: 100%;
         height: 100%;
         object-fit: contain;
+
+        @media screen and (min-width:1000px) {
+          width: 80%;
+          object-fit: inherit;
+        }
+
       }
 
       .viewShowIcon {
@@ -478,15 +578,26 @@ export default {
         right: 7px;
         top: 4px;
 
+        @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;
           }
 
           @media screen and (min-width: 2000px) {
             width: 52px;
+            z-index: 9999;
+            position: absolute;
           }
         }
       }
@@ -546,9 +657,8 @@ export default {
   .viewShowAc {
     transform: translateX(-500px);
 
-    @media screen and (min-width:2000px) {
-      transform: translateX(-650px);
-
+    @media screen and (min-width:1000px) {
+      transform: translateX(-100vw);
     }
   }
 
@@ -604,6 +714,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;
@@ -628,5 +742,4 @@ export default {
       border-radius: 4px 4px 0px 0px;
     }
   }
-}
-</style>
+}</style>