更新移动端初始页面

web/public/static/css/main.css

@@ -3996,6 +3996,7 @@ a.hasHover:hover, a:active {
 }
 
 .frame {
+    overflow: visible !important;
     width: calc(100% - 20px);
     height: 97px;
     margin: 9px 10px;
@@ -4022,9 +4023,9 @@ a.hasHover:hover, a:active {
 
 .frame .slidee li .overlay {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
+    bottom: 2px;
+    left: 2px;
+    width: calc(100% - 2px);
     padding: 6px;
     color: #fff;
     background-color: rgba(0, 0, 0, .7);
@@ -4300,7 +4301,7 @@ a.hasHover:hover, a:active {
         height: 77px
     }
     .frame .slidee li, .frame .slidee li .overlay {
-        width: 103px
+        width: 104px
     }
     #drawer-container{
         left: unset;

web/public/static/js/main_2020_show.js

@@ -3221,7 +3221,7 @@ window.Modernizr = function(n, e, t) {
             var hotList = $('#hotListWrap')[0];
             hotList.classList.remove('hotListActive');
             $('#hotListContent ul .active').removeClass('active');
-            $('#hotList')[0].classList.remove('active')
+            if($('#hotList')[0]) $('#hotList')[0].classList.remove('active')
         }
         ,
         n.prototype.onTouchMove = function(e) {
@@ -7545,7 +7545,7 @@ window.Modernizr = function(n, e, t) {
                     var hotList = $('#hotListWrap')[0];
                     hotList.classList.remove('hotListActive');
                     $('#hotListContent ul .active').removeClass('active');
-                    $('#hotList')[0].classList.remove('active')
+                    if($('#hotList')[0]) $('#hotList')[0].classList.remove('active')
                 })
             }
             

web/src/components/welcome/index.vue

@@ -1,13 +1,30 @@
 <template>
   <div class="welcome" v-if="isShow">
     <video
+      v-if="!isMobile"
       class="myVideo"
       src="../../assets/img/strat.mp4"
       autoplay
       muted
     ></video>
-    <div class="SeLanguage" :class="{active:languagShow}">
+    <div class="mobileBox" v-else>
+      <div class="videoPlay" v-if="videoPlay">
+        <video src="../../assets/img/strat.mp4" autoplay controls></video>
+        <i class="el-icon-close" @click="videoPlay = false"></i>
+      </div>
+      <img class="mobileBoxBg" src="../../assets/imgM/bgWe.png" alt="" />
+      <img
+        :style="`opacity: ${playImgOpa};`"
+        @click="videoPlay = true"
+        class="play"
+        src="../../assets/imgM/play_active.png"
+        alt=""
+      />
+      <div class="mobileBoxBtn" @click="languagShow = true">进入展馆</div>
+    </div>
+    <div class="SeLanguage" :class="{ active: languagShow }">
       <div class="box">
+        <i class="el-icon-close" v-if="isMobile" @click="languagShow = false"></i>
         <div class="top">
           <p>请选择语言</p>
           <p>Please select the language</p>
@@ -33,6 +50,9 @@ export default {
     return {
       isShow: false,
       languagShow: false,
+      videoPlay: false,
+      playImgOpa: 1,
+      myTime: null,
     };
   },
   methods: {
@@ -48,11 +68,26 @@ export default {
     this.$nextTick(() => {
       setTimeout(() => {
         let dom = document.querySelector(".myVideo");
-        dom.addEventListener("ended", () => {
-          this.languagShow=true
-        }, false);
+        if (dom) {
+          dom.addEventListener(
+            "ended",
+            () => {
+              this.languagShow = true;
+            },
+            false
+          );
+        }
       }, 100);
     });
+    // 移动端的play图片透明度变化
+    this.myTime = setInterval(() => {
+      console.log(123);
+      if (this.playImgOpa === 1) this.playImgOpa = 0.5;
+      else this.playImgOpa = 1;
+    }, 1500);
+  },
+  destroyed() {
+    clearInterval(this.myTime);
   },
 };
 </script>
@@ -88,6 +123,13 @@ export default {
       background-size: 100% 100%;
       width: 994px;
       height: 685px;
+      .el-icon-close {
+        position: absolute;
+        top: 40px;
+        right: 20px;
+        font-size: 30px;
+        color: #165491;
+      }
       .top {
         p {
           font-weight: 700;
@@ -162,38 +204,100 @@ export default {
       }
     }
   }
-  .active{
+  .active {
     opacity: 1;
-    pointer-events:initial
+    pointer-events: initial;
   }
 }
 
 @media only screen and (max-width: 800px) {
-  .welcome{
-    .SeLanguage{
-      .box{
+  .welcome {
+    .mobileBox {
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      position: relative;
+      .videoPlay {
+        z-index: 10;
+        background-color: black;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        & > video {
+          width: 100%;
+          position: absolute;
+          top: 50%;
+          left: 5;
+          transform: translateY(-50%);
+        }
+        i {
+          position: absolute;
+          top: 20px;
+          right: 20px;
+          font-size: 30px;
+          color: #fff;
+        }
+      }
+      .mobileBoxBg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        object-fit: cover;
+      }
+      .play {
+        transition: opacity 1.5s;
+        width: 112px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      .mobileBoxBtn {
+        line-height: 67px;
+        text-align: center;
+        padding-right: 30px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+        position: absolute;
+        left: 50%;
+        bottom: 50px;
+        transform: translateX(-50%);
+        width: 248px;
+        height: 67px;
+        background: url("../../assets/imgM/btnWe.png");
+        background-size: 100% 100%;
+      }
+    }
+    .SeLanguage {
+      .box {
         padding-top: 70px;
         width: 90vw;
         height: 534px;
-        background: url('../../assets/imgM/bgL.png');
+        background: url("../../assets/imgM/bgL.png");
         background-size: 100% 100%;
-        .top{
-          &>p{
-            font-size:24px;
-            &:nth-of-type(2){
+        .top {
+          & > p {
+            font-size: 24px;
+            &:nth-of-type(2) {
               font-size: 14px;
             }
           }
         }
-        .card{
+        .card {
           margin-top: 20px;
           width: 239px;
           display: block;
-          &>div{
+          & > div {
             margin-bottom: 20px;
             width: 239px;
-            height:162px;
-            .card_ic{
+            height: 162px;
+            .card_ic {
               height: 119px;
             }
             .aaa {
@@ -204,7 +308,7 @@ export default {
               background: url("../../assets/img/en2.png") no-repeat center
                 center/59px 54px;
             }
-            &>p{
+            & > p {
               height: 43px;
               line-height: 43px;
               font-size: 14px;

web/src/pages/Home.vue

@@ -172,7 +172,7 @@ export default {
         rotate.x = 0.001;
         setTimeout(() => {
           rotate.x = 0;
-        }, 0);
+        }, 200);
       });
     });
   },