upp

src/assets/style/reset.css

@@ -355,6 +355,7 @@ input::-webkit-input-placeholder {
   border-radius: 10px;
 }
 .pinBottom .rightViewContainer {
+  display: none !important;
   float: left;
   position: relative;
   top: -4px;

src/assets/style/reset.less

@@ -438,7 +438,7 @@ input::-webkit-input-placeholder {
 
 // 楼层
 .pinBottom .rightViewContainer {
-  // display: none !important;
+  display: none !important;
   float: left;
   position: relative;
   top: -4px;
@@ -477,4 +477,6 @@ input::-webkit-input-placeholder {
   .gui-floor.open .container .floorChoice.active {
     color: #e1cfac;
   }
-}
+}
+
+// 移动端样式

src/components/welcome/index.vue

@@ -1,21 +1,25 @@
 <template>
   <div class="welcome">
-    <div class="videoBox" v-if="videoShow">
-      <video
-        ref="myVideo"
-        src="../../assets/myData/play.mp4"
-        autoplay
-        muted
-      ></video>
-      <div class="button" v-if="time" @click="videoShow = false">
+    <div class="videoBox" v-show="!videoShow" v-if="!isMobileFu()">
+      <video ref="myVideo" src="../../assets/myData/play.mp4"></video>
+      <div class="button" v-if="time" @click.stop="$emit('close')">
         <img src="../../assets/myData/btn1.png" alt="" />
       </div>
     </div>
 
-    <div class="imgBox" v-else>
-      <div class="button" @click.stop="$emit('close')">
+    <div class="imgBox" v-if="videoShow">
+      <div class="button" @click="videoShow = false">
         <img src="../../assets/myData/btn2.png" alt="" />
       </div>
+      <!-- 移动端出来的播放按钮 -->
+      <div class="shoujiBut" v-if="isMobileFu()" @click="shoujiShow = true">
+        播放
+      </div>
+    </div>
+
+    <div class="shoujiBox" v-if="shoujiShow">
+      <div class="shoujiBoxClose" @click="shoujiShow = false">X</div>
+      <video src="../../assets/myData/play.mp4" autoplay controls></video>
     </div>
   </div>
 </template>
@@ -26,19 +30,44 @@ export default {
     return {
       videoShow: true,
       time: false,
+      shoujiShow: false,
     };
   },
-  methods: {},
-  mounted() {
-    // 监听视频播放完毕
-    this.$refs.myVideo.addEventListener("ended", () => {
-      this.videoShow = false;
-    });
 
-    setTimeout(() => {
-      this.time = true;
-    }, 1000);
+  watch: {
+    videoShow(val) {
+      // 监听视频播放完毕
+      if (!val) {
+        if (!this.isMobileFu()) {
+          // pc端逻辑
+          this.$refs.myVideo.play();
+          setTimeout(() => {
+            this.time = true;
+          }, 1000);
+          this.$refs.myVideo.addEventListener("ended", () => {
+            this.$emit("close");
+          });
+        } else {
+          // 移动端逻辑
+          this.$emit("close");
+        }
+      }
+    },
   },
+  methods: {
+    isMobileFu() {
+      if (
+        window.navigator.userAgent.match(
+          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+        )
+      ) {
+        return true; // 移动端
+      } else {
+        return false; // PC端
+      }
+    },
+  },
+  mounted() {},
 };
 </script>
 
@@ -75,6 +104,17 @@ export default {
     height: 100%;
     background-image: url("../../assets/myData/bg.jpg");
     background-size: 100% 100%;
+    .shoujiBut {
+      position: absolute;
+      z-index: 100;
+      left: 50%;
+      top: 200px;
+      transform: translateX(-50%);
+      width: 60px;
+      height: 60px;
+      background-image: url("../../assets/images/play.png");
+      background-size: 100% 100%;
+    }
   }
   .button {
     position: absolute;
@@ -86,5 +126,43 @@ export default {
       width: 260px;
     }
   }
+  .shoujiBox {
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    video {
+      max-width: 100%;
+      max-height: 100%;
+    }
+    .shoujiBoxClose {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      height: 40px;
+      width: 40px;
+      border-radius: 50%;
+      border: 1px solid #ccc;
+      color: #fff;
+      font-size: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  @media only screen and (max-width: 600px) {
+    .button {
+      bottom: 50px;
+    }
+    .imgBox{
+      background-image: url("../../assets/myData/mBg.jpg");
+    }
+  }
 }
 </style>

src/views/gui/menu.vue

@@ -34,7 +34,7 @@
             data-original-title="播放"
           >
             <!-- 鼠标移入的显示 -->
-            <div class="hoverTit">自动导览</div>
+            <div class="hoverTit" v-if="!isMobile">自动导览</div>
             <a>
               <img
                 :src="require('@/assets/images/icon/play.png')"
@@ -45,7 +45,7 @@
           </div>
           <div id="pause" class="ui-icon" style="display: none">
             <!-- 鼠标移入的显示 -->
-            <div class="hoverTit">自动导览</div>
+            <div class="hoverTit" v-if="!isMobile">自动导览</div>
 
             <a>
               <img
@@ -81,7 +81,7 @@
               title="场景导览"
             >
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">导览列表</div>
+              <div class="hoverTit" v-if="!isMobile">导览列表</div>
 
               <img
                 title=""
@@ -100,7 +100,7 @@
               rel="tooltip"
             >
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">自由漫游</div>
+              <div class="hoverTit" v-if="!isMobile">自由漫游</div>
 
               <img
                 class="icon icon-inside"
@@ -118,7 +118,7 @@
               rel="tooltip"
             >
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">三维视觉</div>
+              <div class="hoverTit" v-if="!isMobile">三维视觉</div>
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/dollhouse.png')"
@@ -135,7 +135,7 @@
               title="顶部俯视"
             >
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">平面视觉</div>
+              <div class="hoverTit" v-if="!isMobile">平面视觉</div>
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/floor.png')"
@@ -189,7 +189,7 @@
           <!-- 热点列表 -->
           <div class="hotInco" @click="smBtn = !smBtn">
             <!-- 鼠标移入的显示 -->
-            <div class="hoverTit">热点列表</div>
+            <div class="hoverTit" v-if="!isMobile">热点列表</div>
             <img
               :src="require(`@/assets/img/hotspot${smBtn ? 'Ac' : ''}.png`)"
               alt=""
@@ -207,7 +207,7 @@
           <div class="gui-floor-title"></div>
           <div class="gui-floor-icon">
             <!-- 鼠标移入的显示 -->
-            <div class="hoverTit">楼层</div>
+            <div class="hoverTit" v-if="!isMobile">楼层</div>
 
             <span class="gui-floor-number"></span>
           </div>
@@ -240,7 +240,7 @@
       <div id="volume" class="ui-icon bgandshare wide">
         <div>
           <!-- 鼠标移入的显示 -->
-          <div class="hoverTit">{{ musicState ? "关闭音乐" : "打开音乐" }}</div>
+          <div class="hoverTit" v-if="!isMobile">{{ musicState ? "关闭音乐" : "打开音乐" }}</div>
           <img
             id="openMusic"
             style="display: block"
@@ -266,7 +266,7 @@
         title="全屏"
       >
         <!-- 鼠标移入的显示 -->
-        <div class="hoverTit">全屏</div>
+        <div class="hoverTit" v-if="!isMobile">全屏</div>
 
         <a>
           <img :src="require('@/assets/img/full.png')" />
@@ -281,7 +281,7 @@
         style="display: none"
       >
         <!-- 鼠标移入的显示 -->
-        <div class="hoverTit">关闭全屏</div>
+        <div class="hoverTit" v-if="!isMobile">关闭全屏</div>
 
         <a>
           <img :src="require('@/assets/img/fullAc.png')" style="width: 50px" />
@@ -548,12 +548,12 @@ export default {
     margin-left: 12px;
   }
   .viewContainer {
-    background-color: rgba(0, 0, 0, 0.5);
+    // background-color: rgba(0, 0, 0, 0.5);
     padding: 15px 0 10px;
     border-radius: 50px;
   }
 
-  @wh: 22px;
+  @wh: 44px;
   @margin: 10px;
   #play,
   #pause {
@@ -589,7 +589,6 @@ export default {
     display: none !important;
     display: flex;
     position: fixed;
-    left: 50px;
     bottom: 25px;
     flex-direction: column;
     margin-right: 10px !important;
@@ -601,7 +600,23 @@ export default {
     }
   }
   #volume {
-    background-color: transparent !important;
+    display: block !important;
+    // position: fixed;
+    // z-index: 999;
+    // top: 30px;
+    // right: 20px;
+    width: 44px;
+    height: 44px;
+    // background-color: transparent !important;
+  }
+  .hotInco {
+    width: 50px;
+  }
+  #gui .pinBottom.open.noScroll{
+    bottom:180px
+  }
+  #gui .pinBottom.open.noScroll.playing{
+    bottom:190px
   }
 }
 </style>