Kaynağa Gözat

修复3个小bug

shaogen1995 4 yıl önce
ebeveyn
işleme
d05ba39442
2 değiştirilmiş dosya ile 42 ekleme ve 1 silme
  1. BIN
      src/assets/images/hengping.png
  2. 42 1
      src/views/Home.vue

BIN
src/assets/images/hengping.png


+ 42 - 1
src/views/Home.vue

@@ -15,6 +15,13 @@
       v-if="fixIcon.length > 0"
       :style="{ height: isMobile ? '100%' : '80%' }"
     >
+
+  <!-- 横屏后的遮罩层 -->
+  <div class="shade">
+    <img src="../assets/images/hengping.png" alt="">
+  </div>
+
+
       <div
         v-if="!isMobile"
         @click="slideto('slidePrev')"
@@ -23,6 +30,7 @@
         <div
           id="left"
           v-if="isShow"
+          @click="videoPlay"
           @mouseenter="move(0)"
           @mouseleave="leave(0)"
         >
@@ -68,6 +76,7 @@
         <div
           id="right"
           v-if="isShow"
+          @click="videoPlay"
           @mouseenter="move(1)"
           @mouseleave="leave(1)"
         >
@@ -99,6 +108,20 @@
 </template>
 
 <script>
+
+// 横屏时提示
+window.onorientationchange=function(){
+  let shade =document.querySelector('.shade')
+    if(window.orientation==90||window.orientation==-90){
+        // alert('横屏了');
+  shade.style.display='block'
+    }else{
+        // alert('没有横屏');
+  shade.style.display='none'
+    }
+}
+
+
 import { Swiper, SwiperSlide } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
 import browser from "@/utils/browser";
@@ -183,6 +206,14 @@ export default {
     SwiperSlide,
   },
   methods: {
+    // 控制中间的视频播放
+    videoPlay(){
+      setTimeout(()=>{
+        let nowVideo = document.querySelector('.swiper-slide-active video')
+        nowVideo.play()
+        // console.log(99999,nowVideo);
+      },100)
+    },
     // 左右图标鼠标移入
     move(val) {
       if (val) this.right = false;
@@ -296,6 +327,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.shade {
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
 .audio {
   position: fixed;
   top: -100px;
@@ -439,7 +479,7 @@ export default {
 
 @media screen and (max-width: 1000px) {
   /deep/.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
-    bottom: 220px;
+        bottom: 42%;
   }
   .home {
     background-color: rgba(0, 34, 93, 0.9);
@@ -553,6 +593,7 @@ export default {
   z-index: 999;
 }
 
+
 #left img {
   position: absolute;
   left: -50%;