移动端 小地图样式与功能；下方按钮样式

public/static/js/Hot.js

@@ -37,8 +37,8 @@ window.initHot = function (model) {
     var getLink = function (link) {
         var querySectionInLink = link.split('?')[1]
         var langParam = "en" == manage.number("lang") ? "&lang=" + manage.number("lang") : "";
-        // return 'http://192.168.20.16:8085/#/new/' + "?" + querySectionInLink + "&time=" + randomTime().getTime() + "&id=" + window.number + langParam
-        return '/AnhuiDaily/hotspot/index.html#/new/' + "?" + querySectionInLink + "&time=" + randomTime().getTime() + "&id=" + window.number + langParam
+        return 'http://192.168.20.16:8085/#/new/' + "?" + querySectionInLink + "&time=" + randomTime().getTime() + "&id=" + window.number + langParam
+        // return '/AnhuiDaily/hotspot/index.html#/new/' + "?" + querySectionInLink + "&time=" + randomTime().getTime() + "&id=" + window.number + langParam
     }
     var removeSrcPostMark = function (url) {//去除texture.load时自动加上的'?'
         var index = url.indexOf('?')

public/static/js/main_2020_show.js

@@ -2520,6 +2520,16 @@ window.Modernizr = function(n, e, t) {
             }
             ,
             n.prototype.handlePlayerModeChanged = function(e, t) {
+                console.log(t); // 'dollhouse' | 'floorplan' | 'panorama' | 'outside' | 'transitioning'
+                const mapT = {
+                  dollhouse: 'doll-house',
+                  floorplan: 'floor-plain',
+                  panorama: 'panorama',
+                  outside: 'outside',
+                  transitioning: 'transitioning',
+                }
+                document.body.setAttribute('view-mode', mapT[t])
+              
                 var i = this.modelManager.getActiveModel()
                   , n = t === c.PANORAMA ? r.DoubleSide : r.FrontSide;
                 i.setSide(n),
@@ -6429,8 +6439,7 @@ window.Modernizr = function(n, e, t) {
                 $("#view-controllers").is(":visible") || $("#view-controllers").slideDown(Q.guiAnimationSpeed))
             }
             function m(e, t) {
-                var i = t.player;
-                $("#gui-modes-inside").on("mousedown touchstart", function(e) {
+                function onMousedownInside(e) {
                     l(e),
                     J.updateInteraction(Se.InteractionGui, "inside-button"),
                     J.track("USER", {
@@ -6438,32 +6447,52 @@ window.Modernizr = function(n, e, t) {
                         gui_action: "click_inside_mode_button"
                     }),
                     t.changeMode(_e.PANORAMA);
-                }),
-                $("#gui-modes-outside").find("a").on("click", function(e) {
-                    l(e),
-                    J.track("showcase_gui", {
-                        gui_action: "click_outside_mode_button"
-                    }),
-                    t.changeMode(Be)
-                }),
-                $("#gui-modes-floorplan").on("click", function(e) {
-                    SoundManager.pause('tour')
-                    l(e),
-                    i.mode !== _e.FLOORPLAN && (J.track("showcase_gui", {
-                        gui_action: "click_floorplan_mode_button"
-                    }),
-                    t.changeMode(_e.FLOORPLAN));
-                }),
-                $("#gui-modes-dollhouse").on("click", function(e) {
-                    SoundManager.pause('tour')
-                    l(e),
-                    i.mode !== _e.DOLLHOUSE && (J.track("showcase_gui", {
-                        gui_action: "click_dollhouse_mode_button"
-                    }),
-                    t.changeMode(_e.DOLLHOUSE));
-                })
-                $("#gui-modes-inside").on("click", function() {
-                    SoundManager.pause('tour')
+                }
+                function onClickOutside(e) {
+                  l(e),
+                  J.track("showcase_gui", {
+                      gui_action: "click_outside_mode_button"
+                  }),
+                  t.changeMode(Be)
+                }
+                function onClickFloorPlain(e) {
+                  SoundManager.pause('tour')
+                  l(e),
+                  i.mode !== _e.FLOORPLAN && (J.track("showcase_gui", {
+                      gui_action: "click_floorplan_mode_button"
+                  }),
+                  t.changeMode(_e.FLOORPLAN));
+                }
+                function onClickDollHouse(e) {
+                  SoundManager.pause('tour')
+                  l(e),
+                  i.mode !== _e.DOLLHOUSE && (J.track("showcase_gui", {
+                      gui_action: "click_dollhouse_mode_button"
+                  }),
+                  t.changeMode(_e.DOLLHOUSE));
+                }
+                function onClickInside() {
+                  SoundManager.pause('tour')
+                }
+                
+                document.onMousedownInside = onMousedownInside
+                document.onClickOutside = onClickOutside
+                document.onClickFloorPlain = onClickFloorPlain
+                document.onClickDollHouse = onClickDollHouse
+                document.onClickInside = onClickInside
+                
+                var i = t.player;
+                $("#gui-modes-inside").on("mousedown touchstart", onMousedownInside),
+                $("#gui-modes-inside").on("click", onClickInside)
+                $("#gui-modes-outside").find("a").on("click", onClickOutside),
+                $("#gui-modes-floorplan").on("click", onClickFloorPlain),
+                $("#gui-modes-dollhouse").on("click", function (e) {
+                  SoundManager.pause('tour')
+                  l(e),
+                  i.mode !== _e.DOLLHOUSE && (J.track("showcase_gui", {
+                      gui_action: "click_dollhouse_mode_button"
+                  }),
+                  t.changeMode(_e.DOLLHOUSE));
                 })
             }
             function v(e, t) {
@@ -6731,7 +6760,7 @@ window.Modernizr = function(n, e, t) {
                 // 2 !== K.valueFromHash("mls", 0) && (i = e.name + " - " + i),
                 2 !== K.valueFromHash("mls", 0) && e.name && (i = e.name),
                 // document.title = i ,
-                K.isMobile() ? $("#gui-fullscreen").css("display", "none") : ($("[rel=tooltip]").tooltip({
+                K.isMobile() ? /* $("#gui-fullscreen").css("display", "none") */ console.log('移动端也显示全屏按钮') : ($("[rel=tooltip]").tooltip({
                     delay: {
                         show: 50,
                         hide: 0

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="vvvv">
+    <div class="vue-root">
         <router-view/>
         <div class="orientation-tip" v-if="isMobile">
         <div>
@@ -15,11 +15,15 @@ import '@/assets/style/reset.less'
 import '@/assets/style/public.less'
 
 export default {
-    
+  mounted() {
+    if (this.isMobile) {
+      document.body.classList.add('mobile')
+    }
+  }
 }
 </script>
 <style lang="less">
-.vvvv{
+.vue-root{
     width: 100%;
     height: 100%;
 }

src/assets/style/my-reset.css

@@ -0,0 +1,60 @@
+*,
+*::before,
+*::after {
+  /* 阻止safari在用户交互设置一些元素的背景色 */
+  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+}
+
+html {
+  overflow: hidden;
+  touch-action: none;
+  scroll-behavior: smooth; /* MDN: When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.(???) */
+  height: 100%;
+}
+
+body {
+  text-align: justify;
+  height: 100%;
+  overflow: hidden;
+}
+
+a {
+  color: initial;
+  text-decoration: initial;
+  outline: none;
+}
+
+button {
+  padding: 0;
+  cursor: pointer;
+  background-color: initial;
+  border: initial;
+  outline: none;
+  white-space: pre;
+}
+
+img {
+  user-select: none;
+}
+
+menu {
+  list-style-type: initial;
+}
+
+li {
+  display: initial;
+}
+
+input {
+  outline: initial;
+  background: initial;
+  border: initial;
+  border-radius: initial;
+  width: initial;
+  height: initial;
+}
+
+td {
+  vertical-align: inherit;
+}

src/assets/style/public.less

@@ -82,6 +82,20 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
   height: 149px !important;
   border-radius: initial !important;
   z-index: 999;
+  background: initial !important;
+}
+
+.mobile {
+  .cad{
+    width: 159px !important;
+    height: 111px !important;
+  }
+}
+
+.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'] {
+  .cad {
+    display: none;
+  }
 }
 
 // 小地图 当前位置标志

src/components/MiniMapDecorator.vue

@@ -1,11 +1,70 @@
 <template>
-  <div class="mini-map-dec">
+  <div
+    class="mini-map-dec"
+    :class="{
+      mobile: isMobile,
+    }"
+  >
     <img class="roof" src="@/assets/images/mini-map-pc.png" alt="" draggable="false">
+    <div
+      v-if="isMobile"
+      class="bottom-bar"
+    >
+      <button
+        class="plain"
+        @click="onClickPlain"
+      >
+        <img
+          class=""
+          src="@/assets/images/dingbufushi-mobile.png"
+          alt=""
+          draggable="false"
+        >
+        <span>平面</span>
+      </button>
+      <button
+        class="model"
+        @click="onClick3D"
+      >
+        <img
+          class=""
+          src="@/assets/images/minimoxing-mobile.png"
+          alt=""
+          draggable="false"
+        >
+        <span>三维</span>
+      </button>
+    </div>
   </div>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  methods: {
+    onClickPlain(e) {
+      document.onClickFloorPlain(e)
+    },
+    onClick3D(e) {
+      document.onClickDollHouse(e)
+    }
+  }
+}
+</script>
+
 <style lang="less" scoped>
 .mini-map-dec {
+  position: fixed;
+  top: 28px;
+  right: 20px;
+  width: 237px !important;
+  height: 149px !important;
+  background: rgba(86,86,86,0.2);
+  backdrop-filter: blur(10px);
+  z-index: 998;
   .roof {
     position: absolute;
     left: 50%;
@@ -13,7 +72,52 @@
     width: 254px;
     height: 18px;
     transform: translate(-50%, -100%);
-    
+  }
+  .bottom-bar {
+    position: absolute;
+    left: 50%;
+    bottom: 13px;
+    transform: translateX(-50%);
+    width: 100%;
+    height: 18px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    > button.plain {
+      display: flex;
+      align-items: center;
+      > img {
+        width: 19px;
+        height: 19px;
+        margin-right: 4px;
+      }
+      > span {
+        font-size: 16px;
+        color: #FFF0BD;
+      }
+    }
+    > button.model {
+      display: flex;
+      align-items: center;
+      > img {
+        width: 23px;
+        height: 22px;
+        margin-right: 4px;
+      }
+      > span {
+        font-size: 16px;
+        color: #FFF0BD;
+      }
+    }
+  }
+}
+
+.mobile.mini-map-dec {
+  width: 159px !important;
+  height: 142px !important;
+  .roof {
+    width: 170px;
+    height: 12px;
   }
 }
 </style>

src/main.js

@@ -6,6 +6,8 @@ import '@/mixins'
 import router from './router'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
+import "@/assets/style/my-reset.css";
+
 Vue.use(Viewer,{
   defaultOptions: {
     navbar:false,

src/pages/Home.vue

@@ -151,13 +151,6 @@ export default {
 
 <style lang="less" scoped>
 .mini-map-decorator {
-  position: fixed;
-  top: 28px;
-  right: 20px;
-  width: 237px !important;
-  height: 149px !important;
-  backdrop-filter: blur(10px);
-  z-index: 998;
 }
 
 .parent-body {
@@ -185,4 +178,10 @@ export default {
 /deep/#drawer {
   transition: all 0.3s;
 }
+
+.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'] {
+  .mini-map-decorator {
+    display: none;
+  }
+}
 </style>

src/views/gui/menu.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="pinBottom-container" @touchstart.stop @keydown.stop>
-    
+  <div
+    class="pinBottom-container"
+    :class="{
+      mobile: isMobile,
+    }"
+  >
     <div class="pinBottom center">
       <div id="view-controllers"></div>
     </div>
@@ -88,6 +92,7 @@
             </div>
 
             <div
+              v-show="!isMobile"
               data-original-title="全景漫游"
               id="gui-modes-inside"
               rel="tooltip"
@@ -100,7 +105,8 @@
               />
             </div>
             <div
-              title="迷你漫游"
+              v-show="!isMobile"
+              title="迷你模型"
               data-original-title="迷你模型"
               id="gui-modes-dollhouse"
               rel="tooltip"
@@ -113,6 +119,7 @@
               />
             </div>
             <div
+              v-show="!isMobile"
               data-original-title="俯视图"
               id="gui-modes-floorplan"
               rel="tooltip"
@@ -167,37 +174,6 @@
 
     <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
           id="volume"
@@ -274,7 +250,8 @@ export default {
   watch: {
   },
   computed: {},
-  mounted() {},
+  mounted() {
+  },
   methods: {
     switchBGM(flag) {
       if (flag) {
@@ -350,25 +327,33 @@ export default {
 @wh: 50px;
 // ----------左下方菜单--------------
 .pinBottom.left {
+  bottom: 30px;
   > div {
     > .viewContainer {
-      margin-left: 20px;
+      flex-direction: row;
+      margin-left: 30px;
       padding: 0;
       #play,
       #pause {
-        margin-right: 5px;
+        margin-right: 30px;
+        width: @wh;
+        height: @wh;
+        padding: 0;
         img {
-          width: @wh;
-          height: @wh;
+          height: 100%;
+          width: 100%;
           opacity: 0.7;
         }
       }
       #gui-modes-map {
         > div {
-          margin-right: 5px;
+          margin-right: 30px;
+          width: @wh;
+          height: @wh;
+          padding: 0;
           > img {
-            width: @wh;
-            height: @wh;
+            height: 100%;
+            width: 100%;
             opacity: 0.7;
             display: block !important;
           }
@@ -385,27 +370,75 @@ export default {
 // ----------end of 左下方菜单--------------
 
 // ----------右下方菜单---------------
-.rightViewContainer {
-  display: flex !important;
-  align-items: center !important;
-  margin-right: 30px;
-  .ui-icon {
-    width: @wh;
-    height: @wh;
-    margin-left: 30px;
-    margin-right: initial;
-    background: none;
-    border: none;
-    > a {
-      width: 100% !important;
-      height: 100% !important;
-      > img {
-        width: 100%;
-        height: 100%;
-        opacity: 0.7;
+.pinBottom.right {
+  bottom: 30px;
+  .rightViewContainer {
+    display: flex !important;
+    align-items: center !important;
+    margin-right: 30px;
+    .ui-icon {
+      width: @wh;
+      height: @wh;
+      margin-left: 30px;
+      margin-right: initial;
+      background: none;
+      border: none;
+      padding: 0 !important;
+      > a {
+        width: 100% !important;
+        height: 100% !important;
+        > img {
+          width: 100%;
+          height: 100%;
+          opacity: 0.7;
+        }
       }
     }
   }
 }
 // ----------end of 右下方菜单---------------
+
+// -------------移动端特殊样式---------------
+@button-margin: calc((100vw - 50px * 4) / 5);
+.mobile {
+  .pinBottom.left {
+    > div {
+      > .viewContainer {
+        margin-left: @button-margin;
+        #play,
+        #pause {
+          margin-right: @button-margin;
+          img {
+          }
+        }
+        #gui-modes-map {
+          > div {
+            margin-right: @button-margin;
+            > img {
+            }
+            &.active {
+              > img {
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pinBottom.right {
+    .rightViewContainer {
+      margin-right: @button-margin;
+      .ui-icon {
+        margin-left: @button-margin;
+        > a {
+          > img {
+          }
+        }
+      }
+    }
+  }
+}
+// -------------end of 移动端特殊样式---------------
+
 </style>