修改字体、图标自适应大小

H5场景本地化/public/index.html

@@ -17,6 +17,7 @@
     <!-- <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/CAD/cad.css?v=2.25"/> -->
     <style>
     </style>
+    <script src="<%= BASE_URL %>/static/js/flexible.js"></script>
     <script>
         var number = window.location.href.substring(window.location.href.indexOf("=") + 1);
         if (number.indexOf("&") != -1) {

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

@@ -3882,6 +3882,14 @@ a.hasHover:hover, a:active {
     cursor: pointer;
 }
 
+@media screen and (max-width: 800px) {
+    #play, #pause{
+        margin-top: -5px ;
+    }
+  }
+
+
+
 .tourSpinner {
     border-radius: 45px;
     top: -10px;
@@ -5355,6 +5363,7 @@ a.hasHover.tag-link:hover {
 @media only screen and (max-width: 736px) {
     #play, #pause{
         width: 85px;
+        margin-top: -5px;
     }
     #gui-modes-map>div[rel]{
         width: 85px;

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

@@ -4586,8 +4586,13 @@ a.tag-link {
   height: 132px;
   float: left;
   position: relative;
-  display: flex;
-  justify-content: center;
+  
+}
+@media screen and (min-width: 1000px) {
+  .frame {
+    display: flex;
+    justify-content: center;
+  }
 }
 
 .frame.noScroll {

H5场景本地化/public/static/css/oldVer/main0.css

@@ -93,13 +93,13 @@ iframe {
 }
 
 #closepop {
-	background: url('../../images/phone_step_01.png') no-repeat;
-	width: 30px;
-	height: 30px;
+	background: url(../../images/phone_step_01.png) no-repeat;
+	width: 40px;
+	height: 40px;
 	cursor: pointer;
 	position: absolute;
 	right: 20px;
-	top: 10px;
+	top: 15px;
 	text-indent: -999em;
 	background-size: 100% 100%;
 }

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

@@ -3950,8 +3950,8 @@ a.hasHover:hover,a:active {
   height: 97px;
   margin: 9px 10px;
   float: left;
-  display: flex;
-  justify-content: center;
+  /* display: flex;
+  justify-content: center; */
 }
 
 .frame.noScroll {

H5场景本地化/public/static/js/flexible.js

@@ -0,0 +1,43 @@
+(function flexible(window, document) {
+  var docEl = document.documentElement;
+  var dpr = window.devicePixelRatio || 1;
+
+  // adjust body font size
+  function setBodyFontSize() {
+    if (document.body) {
+      document.body.style.fontSize = 12 * dpr + "px";
+    } else {
+      document.addEventListener("DOMContentLoaded", setBodyFontSize);
+    }
+  }
+  setBodyFontSize();
+
+  // set 1rem = viewWidth / 10
+  function setRemUnit() {
+    var rem = docEl.clientWidth / 24;
+    docEl.style.fontSize = rem + "px";
+  }
+
+  setRemUnit();
+
+  // reset rem unit on page resize
+  window.addEventListener("resize", setRemUnit);
+  window.addEventListener("pageshow", function (e) {
+    if (e.persisted) {
+      setRemUnit();
+    }
+  });
+
+  // detect 0.5px supports
+  if (dpr >= 2) {
+    var fakeBody = document.createElement("body");
+    var testElement = document.createElement("div");
+    testElement.style.border = ".5px solid transparent";
+    fakeBody.appendChild(testElement);
+    docEl.appendChild(fakeBody);
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add("hairlines");
+    }
+    docEl.removeChild(fakeBody);
+  }
+})(window, document);

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

@@ -63,6 +63,12 @@
   transform: translate(0, 0);
   background-color: rgba(0, 0, 0, 0.8);
 }
+
+@media screen and (max-width: 1000px) {
+  .frame .slidee li .overlay{
+    font-size: 14px;
+  }
+}
 .frame .slidee li > img {
   width: 100% !important;
   height: 100% !important;

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

@@ -50,6 +50,9 @@
     width: 100%;
     transform: translate(0, 0);
     background-color: rgba(0, 0, 0, .8);
+    @media screen and (max-width: 1000px) {
+      font-size: 14px;
+    }
   }
 
   &>img {

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

@@ -3,10 +3,13 @@
     <div class="hotMain">
       <!-- 关闭按钮 -->
       <div class="closeX" @click="$emit('close')">
-        <img src="../../../assets/img/closeX.png" alt="" />
+        <img
+          :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+          src="../../../assets/img/closeX.png" alt="" />
       </div>
       <div class="top">
-        <img src="../../../assets/img/hotTop.png" alt="" />
+        <img :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 27) + 'px' : '70px' }"
+          src="../../../assets/img/hotTop.png" alt="" />
       </div>
       <div class="main">
         <div class="txtNone" v-if="data.length === 0">暂无热点</div>
@@ -29,12 +32,20 @@ export default {
     return {
       data: [],
       hotInd: null,
+      screenWidth: null,
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    screenWidth: {
+      handler: function (val, oldVal) {
+        this.dialogWidth = val
+        console.log('热点打开', this.dialogWidth)
+      },
+    },
+  },
   //方法集合
   methods: {
     openHot(e, index) {
@@ -52,7 +63,14 @@ export default {
     this.data = window.myHotList || [];
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() { },
+  mounted() {
+    this.screenWidth = document.body.clientWidth
+    window.onresize = () => {
+      return (() => {
+        this.screenWidth = document.body.clientWidth
+      })()
+    }
+  },
   beforeCreate() { }, //生命周期 - 创建之前
   beforeMount() { }, //生命周期 - 挂载之前
   beforeUpdate() { }, //生命周期 - 更新之前
@@ -79,13 +97,20 @@ export default {
     bottom: 0;
     width: 100%;
     height: calc(100% - 320px);
-    max-width: 500px;
 
     @media screen and (min-width: 1000px) {
       height: 100%;
       left: auto;
       right: 0;
-      transform: translate(0)
+      transform: translate(0);
+      width: 30%;
+    }
+
+    .imgLimit {
+      max-width: 160px;
+      max-height: 160px;
+      min-width: 40px;
+      min-height: 40px;
     }
 
     .closeX {
@@ -103,7 +128,10 @@ export default {
       }
 
       &>img {
-        width: 40px;
+        min-width: 40px;
+        min-height: 40px;
+        max-width: 160px;
+        max-height: 160px;
       }
     }
 
@@ -152,7 +180,12 @@ export default {
 
         @media screen and (min-width: 1000px) {
           height: 76%;
-          margin-top: 27%;
+          margin-top: 20%;
+
+        }
+
+        @media screen and (min-width: 1921px) {
+          font-size: 43px;
         }
 
         &>span {

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

@@ -4,9 +4,18 @@
       <div id="view-controllers"></div>
     </div>
 
+    <!-- 返回按钮 -->
+    <div class="backBtn" @click="goBack" v-if="screenWidth > 1000">
+      <img class="imgLimit"
+        :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+        :src="require(`@/assets/img/back.png`)" />
+      <span>返回</span>
+    </div>
+
     <!-- 展开按钮 -->
     <div class="myViewShowBox" @click="viewShow = true" :class="{ myViewShowBoxAc: !viewShow }">
-      <img :src="require(`@/assets/img/show.png`)" />
+      <img  :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 48) + 'px' : '30px' }"
+        :src="require(`@/assets/img/show.png`)" />
     </div>
 
     <!-- 展开收起小地图 -->
@@ -15,6 +24,7 @@
         <img src="../../assets/img/mapIcon.svg" alt="" />
       </div>
     </div>
+
     <!-- 音乐按钮 -->
     <div class="myMusicBox" id="volume">
       <div>
@@ -34,7 +44,8 @@
             <img src="../../assets/img/xian.png" alt="" />
             <!-- 收起按钮 -->
             <div class="viewShowIcon" @click="viewShow = false">
-              <img :src="require(`@/assets/img/hide.png`)" />
+              <img :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 48) + 'px' : '30px' }"
+                :src="require(`@/assets/img/hide.png`)" />
             </div>
           </div>
 
@@ -43,22 +54,29 @@
               <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="播放"
+            :style="{ marginTop: screenWidth < 1000 ? '-5px' : '' }">
             <!-- icon文字 -->
-            <div class="iconTxt" :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '' }">{{
-              screenWidth < 1000 ? '自动导览' : '〚自动导览〛' }}</div>
+            <div class="iconTxt"
+              :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '', bottom: screenWidth < 1000 ? '-14px' : '-18px' }">
+              {{
+                screenWidth < 1000 ? '自动导览' : '〚自动导览〛' }}</div>
                 <a>
-                  <img :src="require('@/assets/images/icon/play.png')" />
+                  <img class="imgLimit"
+                    :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                    :src="require('@/assets/images/icon/play.png')" />
                 </a>
             </div>
-            <div id="pause" class="ui-icon" style="display: none">
+            <div id="pause" class="ui-icon" style="display: none"
+              :style="{ marginTop: screenWidth < 1000 ? '-5px' : '' }">
               <!-- icon文字 -->
               <div class="iconTxt iconTxtAc"
-                :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '' }">{{ screenWidth < 1000
-                  ? '自动导览' : '〚自动导览〛' }}</div>
+                :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '', bottom: screenWidth < 1000 ? '-14px' : '-18px' }">
+                {{ screenWidth < 1000 ? '自动导览' : '〚自动导览〛' }}</div>
                   <a>
-                    <img rel="tooltip" title="" :src="require('@/assets/images/icon/pause.png')"
-                      data-original-title="暂停" />
+                    <img class="imgLimit"
+                      :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                      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">
@@ -73,27 +91,35 @@
                   <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`)
-                        " />
+                      <img
+                        :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                        title="" class="icon icon-inside imgLimit" :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 ? '' : '' }">
+                    <div class="iconTxt" :style="{ bottom: screenWidth < 1000 ? '-14px' : '-18px' }">
                       {{ screenWidth < 1000 ? '热点列表' : '〚热点列表〛' }}</div>
                         <div class="hotListSon">
-                          <img :src="require(`@/assets/images/icon/${meanInd ? 'hotAc' : 'hot'
-                            }.png`)
-                            " />
+                          <img class="imgLimit"
+                            :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                            :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')" />
+                      <img
+                        :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                        class="icon icon-inside imgLimit" :src="require('@/assets/images/icon/inside.png')" />
+                      <img
+                        :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                        class="icon icon-inside active imgLimit"
+                        :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 ? '' : '' }">
@@ -101,9 +127,12 @@
                       <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')" />
+                          <img
+                            :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                            class="icon icon-inside" :src="require('@/assets/images/icon/dollhouse.png')" />
+                          <img
+                            :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                            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 ? '' : '' }">
@@ -111,18 +140,27 @@
                         <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"
+                            <img
+                              :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                              class="icon icon-inside" :src="require('@/assets/images/icon/floor.png')" />
+                            <img
+                              :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                              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 class="iconTxt" :class="isMusic ? 'iconTxtAc' : ''"
+                            :style="{ marginLeft: screenWidth > 2000 ? '40px !important' : '' }">{{
+                              isMusic ? '〚关闭音乐〛' : '〚打开音乐〛' }}</div>
+                          <img
+                            :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                            v-if="isMusic" src="../../assets/img/openM.png" title="打开音乐" />
+                          <img
+                            :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
+                            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')" />
@@ -243,6 +281,10 @@ export default {
     }
   },
   methods: {
+    goBack() {
+      // 跨域传递信息
+      window.parent.postMessage({ command: "back" }, "*");
+    },
     switchBGM(flag) {
       if (flag) {
         window.manage.switchBgmState(true);
@@ -307,6 +349,13 @@ export default {
   }
 }
 
+.imgLimit {
+  max-width: 160px;
+  max-height: 160px;
+  min-width: 40px;
+  min-height: 40px;
+}
+
 #gui-modes-floorplan {
   position: relative;
 }
@@ -323,15 +372,15 @@ export default {
     width: @wh;
     height: @wh;
 
-    @media screen and (min-width: 1000px) and (max-width: 2000px) {
-      width: 60px !important;
-      height: 60px !important;
-    }
+    // @media screen and (min-width: 1000px) and (max-width: 2000px) {
+    //   width: 60px !important;
+    //   height: 60px !important;
+    // }
 
-    @media screen and (min-width: 2000px) {
-      width: 80px !important;
-      height: 80px !important;
-    }
+    // @media screen and (min-width: 2000px) {
+    //   width: 80px !important;
+    //   height: 80px !important;
+    // }
   }
 }
 
@@ -353,15 +402,15 @@ export default {
       height: 44px;
       display: block !important;
 
-      @media screen and (min-width: 1000px) and (max-width: 2000px) {
-        width: 60px !important;
-        height: 60px !important;
-      }
+      // @media screen and (min-width: 1000px) and (max-width: 2000px) {
+      //   width: 60px !important;
+      //   height: 60px !important;
+      // }
 
-      @media screen and (min-width: 2000px) {
-        width: 80px !important;
-        height: 80px !important;
-      }
+      // @media screen and (min-width: 2000px) {
+      //   width: 80px !important;
+      //   height: 80px !important;
+      // }
     }
 
     .active {
@@ -489,18 +538,18 @@ export default {
       text-align: center;
 
       &>img {
-        width: 44px !important;
-        height: 44px !important;
-
-        @media screen and (min-width: 1000px) and (max-width: 2000px) {
-          width: 60px !important;
-          height: 60px !important;
-        }
-
-        @media screen and (min-width: 2000px) {
-          width: 80px !important;
-          height: 80px !important;
-        }
+        // width: 44px !important;
+        // height: 44px !important;
+
+        // @media screen and (min-width: 1000px) and (max-width: 2000px) {
+        //   width: 60px !important;
+        //   height: 60px !important;
+        // }
+
+        // @media screen and (min-width: 2000px) {
+        //   width: 80px !important;
+        //   height: 80px !important;
+        // }
       }
     }
   }
@@ -611,6 +660,33 @@ export default {
     }
   }
 
+  .backBtn {
+    cursor: pointer;
+    position: fixed;
+    z-index: 99;
+    top: 36px;
+    left: 10px;
+    opacity: 1;
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 70px;
+      height: 70px;
+    }
+
+    span {
+      color: #FFFAE9;
+      font-family: 'Source Han Serif CN-Bold';
+      font-size: 2.5em;
+      text-shadow: 0px 0px 30px #9F7B46;
+      -webkit-background-clip: text;
+      // -webkit-text-fill-color: transparent;
+    }
+
+  }
+
   .myViewShowBox {
     cursor: pointer;
     position: fixed;
@@ -699,9 +775,9 @@ export default {
     transition: all 0.3s;
     transform: rotate(90deg);
 
-    @media screen and (min-width: 1000px) {
-      right: 98px;
-    }
+    // @media screen and (min-width: 1000px) {
+    //   right: 98px;
+    // }
 
     .smMapBoxSon {
       border-radius: 0 0 4px 4px;
@@ -715,6 +791,10 @@ export default {
         position: relative;
         top: -5px;
         width: 20px;
+
+        @media screen and (max-width: 1000px) {
+          top: -10px;
+        }
       }
     }
   }