移动端 按钮和小地图样式之类的

public/static/js/main_2020_show.js

@@ -6545,7 +6545,7 @@ window.Modernizr = function(n, e, t) {
             }
             function A(e, t) {
                 $("#play").on("mousedown touchstart", function(e) {
- 					l(e); 
+                    l(e); 
                     Ze("tour");
                     ve.play();
                     J.trackAlways("showcase_gui", {

src/App.vue

@@ -18,7 +18,6 @@
 
 <script>
 import '@/assets/style/reset.less'
-import '@/assets/style/public.less'
 
 export default {
   mounted() {
@@ -30,8 +29,8 @@ export default {
 </script>
 <style lang="less">
 .vue-root{
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 
@@ -90,4 +89,46 @@ export default {
   font-family: 'DFLiShuW7';
   src: url('@/assets/style/DFLiShuW7.ttf');
 }
+
+.cad{
+  top: 24px !important;
+  right: 26px !important;
+  width: 222px !important;
+  height: 222px !important;
+  border-radius: 10px;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.37) !important;
+  svg {
+    path {
+      stroke-width: 1;
+    }
+  }
+}
+
+.mobile {
+  .cad{
+    top: 12px !important;
+    right: 13px !important;
+    width: 111px !important;
+    height: 111px !important;
+    border-radius: 5px;
+  }
+}
+
+.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'], .mobile[view-mode='transitioning'] {
+  .cad {
+    // display: none;
+  }
+}
+
+// 小地图 当前位置标志
+// 位置圆圈。默认半径2.69，圆圈粗细1.076
+#ele1 circle {
+  fill: #fff;
+  r: 0.8;
+}
+// 视野
+#ele1 path {
+  fill: rgba(117, 31, 17, 0.8);
+}
 </style>

src/assets/style/public.less

@@ -1,115 +0,0 @@
-
-
-*{
-  font-family: 'SY-medium';
-}
-
-img{
-  -webkit-user-drag: none;
-}
-
-.ui-button {
-  height: 50px;
-  line-height: 1;
-  border-radius: 25px;
-  border:none;
-  background-color: transparent;
-  text-align: center;
-  letter-spacing: 1px;
-  outline: none;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.ui-button.default {
-  background-color: #CCCCCC;
-  color: #333333;
-}
-.ui-button.submit {
-  color: #fff;
-  background-color: #BC1915;
-}
-
-.ui-button.cancel {
-  color: #05c8ae;
-  background-color: transparent
-}
-
-.ui-button.block {
-  width: 100%
-}
-
-.ui-button.link {
-  display: inline-block;
-  text-decoration: none;
-}
-
-.ui-button.danger {
-  background-color: #c80303;
-  color: #fff
-}
-
-
-.ui-input{
-  padding: 0 14px;
-  color: #fff;
-  letter-spacing: 1px;
-  height: 50px;
-  line-height: 50px;
-  width: 100%;
-  background: rgba(#CCCCCC, 0.2);
-  border: 1px solid #FFB521;
-  border-radius: 25px;
-}
-
-input::-webkit-input-placeholder{
-  color:#fff;
-}
-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
-  color:#fff;
-}
-input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
-  color:#fff;
-}
-input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
-  color:#fff;
-}
-
-.cad{
-  top: 24px !important;
-  right: 26px !important;
-  width: 222px !important;
-  height: 222px !important;
-  border-radius: 10px;
-  z-index: 999;
-  background: rgba(0, 0, 0, 0.37) !important;
-  svg {
-    path {
-      stroke-width: 1;
-    }
-  }
-}
-
-.mobile {
-  .cad{
-    width: 159px !important;
-    height: 111px !important;
-  }
-}
-
-.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'], .mobile[view-mode='transitioning'] {
-  .cad {
-    // display: none;
-  }
-}
-
-// 小地图 当前位置标志
-// 位置圆圈。默认半径2.69，圆圈粗细1.076
-#ele1 circle {
-  fill: #fff;
-  r: 0.8;
-}
-// 视野
-#ele1 path {
-  fill: rgba(117, 31, 17, 0.8);
-}

src/directives/v-click-outside.js

@@ -0,0 +1,28 @@
+export default {
+  install(Vue) {
+    Vue.directive('click-outside', {
+      bind(el, binding) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false
+          }
+          if (binding.expression) {
+            binding.value(e)
+          }
+        }
+        el.__vueClickOutside__ = documentHandler
+        if (binding.modifiers.click) {
+          document.addEventListener('click', documentHandler)
+        }
+        if (binding.modifiers.mousedown) {
+          document.addEventListener('mousedown', documentHandler)
+        }
+      },
+      unbind(el) {
+        document.removeEventListener('click', el.__vueClickOutside__)
+        document.removeEventListener('mousedown', el.__vueClickOutside__)
+        delete el.__vueClickOutside__
+      }
+    })
+  }
+}

src/main.js

@@ -1,26 +1,29 @@
 import Vue from 'vue'
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 import App from './App.vue'
 import '@/mixins'
 import router from './router'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
-import "@/assets/style/my-reset.css";
+import clickOutside from "@/directives/v-click-outside.js"
 
-Vue.use(Viewer,{
+import "@/assets/style/my-reset.css"
+
+Vue.use(Viewer, {
   defaultOptions: {
-    navbar:false,
-    button:false,
-    maxZoomRatio:2,
-    zIndex:99999,
+    navbar: false,
+    button: false,
+    maxZoomRatio: 2,
+    zIndex: 99999,
     title: false
   }
 })
 
 
 Vue.config.productionTip = false
-Vue.use(ElementUI);
+Vue.use(ElementUI)
+Vue.use(clickOutside)
 
 new Vue({
   router,

src/pages/Home.vue

@@ -45,11 +45,6 @@
         <v-title />
         <!-- 针对本项目需求的标题 -->
 
-        <ModeSelectorMobile
-          v-if="isMobile"
-          class="mode-selector-mobile"
-        />
-
         <!-- 底部菜单 -->
         <v-menu />
 
@@ -134,7 +129,6 @@ import vError from "@/views/gui/error"
 import vrCon from "@/views/gui/vrcon"
 import vOther from "@/views/gui/other"
 // import MiniMapDecorator from "@/views/gui/MiniMapDecorator.vue"
-import ModeSelectorMobile from "@/views/gui/ModeSelectorMobile.vue"
 
 export default {
   name: "Home",
@@ -151,7 +145,6 @@ export default {
     vrCon,
     vOther,
     // MiniMapDecorator,
-    ModeSelectorMobile,
   },
 
   data() {
@@ -214,13 +207,6 @@ export default {
   height: 100%;
   > #gui-parent {
     > #gui {
-      > .mode-selector-mobile {
-        position: absolute;
-        z-index: 1;
-        top: 17px;
-        left: 50%;
-        transform: translateX(-50%);
-      }
     }
   }
 }
@@ -229,16 +215,11 @@ export default {
   transition: all 0.3s;
 }
 
-.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'], .mobile[view-mode='transitioning'] {
-  .mini-map-decorator {
-    display: none;
-  }
-}
-.mobile[view-mode='panorama'], .mobile[view-mode='outside'] {
-  .mode-selector-mobile {
-    display: none;
-  }
-}
+// .mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'], .mobile[view-mode='transitioning'] {
+//   .mini-map-decorator {
+//     display: none;
+//   }
+// }
 
 .pano-layer {
   position: absolute;

src/views/gui/guide.vue

@@ -67,6 +67,9 @@ export default {
     &.open {
       height: 160px;
     }
+    &.playing {
+      bottom: 0;
+    }
     .frame-container {
       background-color: transparent;
       button.collapse {

src/views/gui/menu.vue

@@ -31,6 +31,7 @@
             class="ui-icon"
             rel="tooltip"
             data-original-title="播放"
+            @click="onClickPlay"
           >
             <!-- 鼠标移入的显示 -->
             <!-- <div class="hoverTit">自动导览</div> -->
@@ -53,7 +54,6 @@
                 title=""
                 :src="require('@/assets/images/pause.png')"
                 data-original-title="暂停"
-                :style="{opacity: '1',}"
               >
             </a>
           </div>
@@ -95,7 +95,6 @@
             </div>
 
             <div
-              v-show="!isMobile"
               id="gui-modes-inside"
               data-original-title="全景漫游"
               rel="tooltip"
@@ -108,7 +107,6 @@
               >
             </div>
             <div
-              v-show="!isMobile"
               id="gui-modes-dollhouse"
               title="迷你模型"
               data-original-title="迷你模型"
@@ -122,7 +120,6 @@
               >
             </div>
             <div
-              v-show="!isMobile"
               id="gui-modes-floorplan"
               data-original-title="俯视图"
               rel="tooltip"
@@ -180,14 +177,15 @@
     <div class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
         <div
+          v-if="!isMobile"
           class="ui-icon my-floor"
+          :class="{
+            active: currentSceneCode === '1265'
+          }"
           @click="ChangeFloor('1265')"
         >
           <a>
             <img
-              :class="{
-                active: currentSceneCode === '1265'
-              }"
               src="@/assets/images/floor-1.png"
               alt=""
               draggable="false"
@@ -195,14 +193,15 @@
           </a>
         </div>
         <div
+          v-if="!isMobile"
           class="ui-icon my-floor"
+          :class="{
+            active: currentSceneCode === '1263'
+          }"
           @click="ChangeFloor('1263')"
         >
           <a>
             <img
-              :class="{
-                active: currentSceneCode === '1263'
-              }"
               src="@/assets/images/floor-2.png"
               alt=""
               draggable="false"
@@ -210,14 +209,15 @@
           </a>
         </div>
         <div
+          v-if="!isMobile"
           class="ui-icon my-floor"
+          :class="{
+            active: currentSceneCode === '1264'
+          }"
           @click="ChangeFloor('1264')"
         >
           <a>
             <img
-              :class="{
-                active: currentSceneCode === '1264'
-              }"
               src="@/assets/images/floor-3.png"
               alt=""
               draggable="false"
@@ -225,6 +225,72 @@
           </a>
         </div>
 
+        <div
+          v-if="isMobile"
+          class="floor-selector-wrap"
+          :class="{
+            expanded: isSelectingFloor,
+          }"
+        >
+          <div
+            class="ui-icon floor-mobile"
+            :style="{
+              opacity: (currentSceneCode === '1265' || isSelectingFloor) ? '1' : '0',
+              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? '0' : 'calc(44px + 12px)',
+            }"
+            @click="onClickFloorBtnMobile('1265')"
+          >
+            <a>
+              <img
+                :class="{
+                  active: currentSceneCode === '1265'
+                }"
+                src="@/assets/images/floor-1.png"
+                alt=""
+                draggable="false"
+              >
+            </a>
+          </div>
+          <div
+            class="ui-icon floor-mobile"
+            :style="{
+              opacity: (currentSceneCode === '1263' || isSelectingFloor) ? '1' : '0',
+              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? 'calc(44px + 12px)' : currentSceneCode === '1263' ? '0' : 'calc(44px * 2 + 12px * 2)',
+            }"
+            @click="onClickFloorBtnMobile('1263')"
+          >
+            <a>
+              <img
+                :class="{
+                  active: currentSceneCode === '1263'
+                }"
+                src="@/assets/images/floor-2.png"
+                alt=""
+                draggable="false"
+              >
+            </a>
+          </div>
+          <div
+            class="ui-icon floor-mobile"
+            :style="{
+              opacity: (currentSceneCode === '1264' || isSelectingFloor) ? '1' : '0',
+              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? 'calc(44px * 2 + 12px * 2)' : currentSceneCode === '1263' ? 'calc(44px * 2 + 12px * 2)' : '0',
+            }"
+            @click="onClickFloorBtnMobile('1264')"
+          >
+            <a>
+              <img
+                :class="{
+                  active: currentSceneCode === '1264'
+                }"
+                src="@/assets/images/floor-3.png"
+                alt=""
+                draggable="false"
+              >
+            </a>
+          </div>
+        </div>
+
         <!-- 音乐 -->
         <div
           id="volume"
@@ -243,9 +309,6 @@
             <img
               id="closeMusic"
               style="display: none"
-              :style="{
-                opacity: '1',
-              }"
               src="../../assets/images/music.png"
               alt=""
               title="关闭音乐"
@@ -256,6 +319,7 @@
 
         <!-- 全屏 -->
         <div
+          v-show="!isMobile"
           id="gui-fullscreen"
           class="ui-icon wide"
           data-placement="top"
@@ -297,6 +361,8 @@ export default {
   data() {
     return {
       isGuide: false,
+      isSelectingFloor: false,
+      floorBtnCollapseTimeoutId: null,
     }
   },
   computed: {
@@ -305,6 +371,16 @@ export default {
     }
   },
   watch: {
+    isSelectingFloor: {
+      handler(vNew) {
+        clearTimeout(this.floorBtnCollapseTimeoutId)
+        if (vNew) {
+          this.floorBtnCollapseTimeoutId = setTimeout(() => {
+            this.isSelectingFloor = false
+          }, 2000)
+        }
+      }
+    }
   },
   mounted() {
   },
@@ -321,12 +397,23 @@ export default {
       }
     },
     ChangeFloor(sceneCode) {
-      console.log(sceneCode)
-      const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
-      locationQuerySection.set('m', sceneCode)
-      const newLocation = location.href.split('?')[0] + '?' + locationQuerySection.toString()
-      location.assign(newLocation)
-      location.reload(true)
+      if (this.currentSceneCode !== sceneCode) {
+        const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
+        locationQuerySection.set('m', sceneCode)
+        const newLocation = location.href.split('?')[0] + '?' + locationQuerySection.toString()
+        location.assign(newLocation)
+        location.reload(true)
+      }
+    },
+    onClickFloorBtnMobile(floorCode) {
+      if (!this.isSelectingFloor) {
+      } else {
+        this.ChangeFloor(floorCode)
+      }
+      this.isSelectingFloor = !this.isSelectingFloor
+    },
+    onClickPlay() {
+      console.log('sadfsfdsdfsdfgdfg')
     }
   },
 }
@@ -407,7 +494,6 @@ export default {
         img {
           height: 100%;
           width: 100%;
-          opacity: 0.7;
         }
       }
       #gui-modes-map {
@@ -456,40 +542,44 @@ export default {
         > img {
           width: 100%;
           height: 100%;
-          opacity: 0.7;
-        }
-        > img.active {
-          opacity: 1;
         }
       }
     }
-    > #gui-fullscreen, #gui-fullscreen-exit {
-      > a {
-        > img {
-          opacity: 1;
-        }
-      }
+    .ui-icon.my-floor {
+      opacity: 0.7;
+    }
+    .ui-icon.my-floor.active {
+      opacity: 1;
     }
   }
 }
 // ----------end of 右下方菜单---------------
 
 // -------------移动端特殊样式---------------
-@button-margin: calc((100vw - 50px * 4) / 5);
 .mobile {
   .pinBottom.left {
+    left: 0;
+    bottom: 0;
     > div {
       > .viewContainer {
-        margin-left: @button-margin;
+        flex-direction: column;
+        margin-left: 20px;
+        margin-bottom: 25px;
         #play,
         #pause {
-          margin-right: @button-margin;
+          margin-top: 15px;
+          margin-right: 0;
+          width: 45px;
+          height: 60px;
           img {
           }
         }
         #gui-modes-map {
           > div {
-            margin-right: @button-margin;
+            margin-top: 15px;
+            margin-right: 0;
+            width: 45px;
+            height: 60px;
             > img {
             }
             &.active {
@@ -503,10 +593,35 @@ export default {
   }
 
   .pinBottom.right {
+    position: fixed;
+    top: 130px;
+    bottom: initial;
     .rightViewContainer {
-      margin-right: @button-margin;
+      margin-right: 14px;
+      padding-bottom: 0;
+      flex-direction: column;
+      align-items: flex-end !important;
+      > .floor-selector-wrap {
+        height: 44px;
+        width: 44px;
+        position: relative;
+        margin-bottom: 10.5px;
+        > .floor-mobile {
+          position: absolute;
+          top: 0;
+          right: 0;
+          opacity: 0;
+          transition: all 0.5s;
+        }
+        &.expanded {
+          width: calc(44px * 3 + 12px * 2);
+        }
+      }
       .ui-icon {
-        margin-left: @button-margin;
+        width: 44px;
+        height: 44px;
+        margin-bottom: 10.5px;
+        margin-left: initial;
         > a {
           > img {
           }