up

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

@@ -4,6 +4,15 @@
       <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`)" />
@@ -117,8 +126,9 @@
                         <div title="打开音乐" data-original-title="打开音乐" id="volumeBid" rel="tooltip"
                           :style="{ paddingLeft: screenWidth > 2000 ? '380px' : '' }" @click="switchBGM2(!isMusic)">
                           <!-- icon文字 -->
-                          <div class="iconTxt" :class="isMusic ? 'iconTxtAc': ''" :style="{ marginLeft: screenWidth > 2000 ? '40px !important' : '' }">{{
-                            isMusic ? '〚关闭音乐〛' : '〚打开音乐〛' }}</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>
@@ -140,7 +150,7 @@
 
                 <div class="pinBottom right hideTarget">
                   <div class="rightViewContainer clearfix">
-                    
+
                     <!-- 添加自己写的逻辑的楼层选择 -->
                     <FloorSelect />
 
@@ -180,7 +190,7 @@
 import Hotspot from "./compomemt/hotspot";
 import FloorSelect from "./compomemt/floorSelect";
 export default {
-  components: { Hotspot,FloorSelect },
+  components: { Hotspot, FloorSelect },
   data() {
     return {
       // 自动导览切换
@@ -248,6 +258,16 @@ export default {
     }
   },
   methods: {
+    goBack() {
+      console.log(window.history)
+      // 如果有上一页，则传递信息
+      if (window.history.length === 1) {
+        window.close()
+      } else {
+        // 跨域传递信息
+        window.parent.postMessage({ command: "back" }, "*");
+      }
+    },
     switchBGM(flag) {
       if (flag) {
         window.manage.switchBgmState(true);
@@ -280,9 +300,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
 // 隐藏原本的楼层选择
-.gui-floor{
+.gui-floor {
   display: none !important;
 }
 
@@ -641,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;
@@ -757,4 +803,5 @@ export default {
       border-radius: 4px 4px 0px 0px;
     }
   }
-}</style>
+}
+</style>

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

@@ -3975,13 +3975,13 @@ a.tag-link {
   cursor: pointer;
 }
 
-@media only screen and (min-width: 1000px) and (max-width: 2000px) {
+@media only screen and (min-width: 1000px) and (max-width: 1700px) {
   #gui-modes-map > div[rel] {
-    width: 200px;
+    width: 10vw;
   }
 }
 
-@media only screen and (min-width: 2000px) {
+@media only screen and (min-width: 1700px) {
   #gui-modes-map > div[rel] {
     width: 200px;
   }

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

@@ -86,7 +86,7 @@
               </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' : '' }">
+                  :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '100px' : '', }">
                   <!-- icon文字 -->
                   <div class="iconTxt" :class="{ iconTxtAc: !isGuide }"
                     :style="{ marginLeft: screenWidth > 1000 && screenWidth < 2000 ? '50px' : '' }">
@@ -299,15 +299,18 @@ export default {
         }
       }, 500);
     }
-
-
-
-
   },
   methods: {
     goBack() {
-      // 跨域传递信息
       window.parent.postMessage({ command: "back" }, "*");
+      // console.log(window.history)
+      // // 如果有上一页，则传递信息
+      // if (window.history.length === 1) {
+      //   window.close()
+      // } else {
+      //   // 跨域传递信息
+      //   window.parent.postMessage({ command: "back" }, "*");
+      // }
     },
     switchBGM(flag) {
       if (flag) {
@@ -315,6 +318,7 @@ export default {
         document.querySelector("#openMusic").style.display = "none";
         document.querySelector("#closeMusic").style.display = "block";
       } else {
+        ``
         window.manage.switchBgmState(false);
         document.querySelector("#openMusic").style.display = "block";
         document.querySelector("#closeMusic").style.display = "none";
@@ -513,7 +517,11 @@ export default {
     width: 100%;
     text-align: center;
 
-    @media screen and (min-width: 2000px) {
+    @media screen and (min-width: 1000px) and (max-width: 1700px) {
+      width: 200%;
+    }
+
+    @media screen and (min-width: 1700px) {
       font-size: 16px;
     }
 
@@ -558,7 +566,12 @@ export default {
     position: relative;
     z-index: 100;
 
-    @media screen and (min-width: 1000px) {
+    @media screen and (min-width: 1000px) and (max-width: 1700px) {
+      height: auto;
+      width: 250px;
+    }
+
+    @media screen and (min-width: 1700px) {
       height: auto;
       width: 300px;
     }