增加手机端显示

src/components/taskPage/Fire.vue

@@ -53,39 +53,89 @@
     position: relative;
     top: -260px;
 }
+.FM_div{
+    width:100%;
+    height:auto;
+    position: relative;
+}
+.FM_div img{
+    width:100%;
+    position: absolute;
+    z-index:100;
+}
+.videoBox{
+    position: absolute;
+    width:490px;
+    height:290px;
+    top:1245px;
+    margin:auto;
+    left:90px;
+    z-index:200;
+}
+.TwoCode{
+    width: 100%;
+    text-align: center;
+    height:200px;
+    position: absolute;
+    bottom:0;
+    margin:auto;
+    z-index:200;
+}
+.TwoCode img{
+    width:150px!important;
+    width:100%;
+    bottom: 0;
+    z-index:21000;
+    position: relative;
+}
 </style>
 
 <template>
-<div style="position: relative;">
-    <img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
-    <div class="div1" ref="div1" :style="{height: height1}">
-        <img class="img" src="../../assets/img/juan/h1.png" alt=""/>
-        <img class="img" src="../../assets/img/juan/h11.png" alt=""/>
-        <div class="spDiv" :style="{zoom: zoom}">
-            <div style="box-sizing: border-box;padding: 21px 44px 17px 44px;">
+<div>
+    <div v-show="isPhone">
+        <div class="FM_div" ref="div3" :style="{height: height3}">
+            <img class="img" src="../../assets/img/juan/fire1.png" alt=""/>
+            <img class="img" src="../../assets/img/juan/fire2.png" alt=""/>
+            <div class="videoBox" :style="{zoom: zoom}">
                 <video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
                     <source src="../../assets/media/fire.mp4" type="video/ogg" />
                 </video>
             </div>
-            
+            <div class="TwoCode">
+                <img src="../../assets/img/juan/twoCode.jpg" alt=""/>
+            </div>
         </div>
     </div>
-    <div class="div1" ref="div2" :style="{height: height2}" style="margin-top:-75px">
-        <img class="img" src="../../assets/img/juan/h2.png" alt=""/>
-        <img class="img" src="../../assets/img/juan/h22.png" alt=""/>
-        <!-- <div class="tiaoDiv" :style="{zoom: zoom}">
-            <div style="position:relative;z-index:200;color:#fff;padding:40px 0 0 70px;box-sizing:border-box">
-                <el-row style="padding:8px 0;cursor:pointer;width: 100%;" :gutter="20" v-for="item in tiaoshui" :key="item.id">
-                    <el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-                    <p @click="goLocalDes(item.idDes, item)">{{item.title}}</p>
-                    </el-col>
-                    <el-col :span="8" style="text-align:center">出团日期：{{item.startDate}}</el-col>
-                </el-row>
+    <div style="position: relative;" v-show="!isPhone">
+        <img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
+        <div class="div1" ref="div1" :style="{height: height1}">
+            <img class="img" src="../../assets/img/juan/h1.png" alt=""/>
+            <img class="img" src="../../assets/img/juan/h11.png" alt=""/>
+            <div class="spDiv" :style="{zoom: zoom}">
+                <div style="box-sizing: border-box;padding: 21px 44px 17px 44px;">
+                    <video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
+                        <source src="../../assets/media/fire.mp4" type="video/ogg" />
+                    </video>
+                </div>
+                
             </div>
-        </div> -->
+        </div>
+        <div class="div1" ref="div2" :style="{height: height2}" style="margin-top:-75px">
+            <img class="img" src="../../assets/img/juan/h2.png" alt=""/>
+            <img class="img" src="../../assets/img/juan/h22.png" alt=""/>
+            <!-- <div class="tiaoDiv" :style="{zoom: zoom}">
+                <div style="position:relative;z-index:200;color:#fff;padding:40px 0 0 70px;box-sizing:border-box">
+                    <el-row style="padding:8px 0;cursor:pointer;width: 100%;" :gutter="20" v-for="item in tiaoshui" :key="item.id">
+                        <el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
+                        <p @click="goLocalDes(item.idDes, item)">{{item.title}}</p>
+                        </el-col>
+                        <el-col :span="8" style="text-align:center">出团日期：{{item.startDate}}</el-col>
+                    </el-row>
+                </div>
+            </div> -->
+        </div>
     </div>
 </div>
-    
 </template>
 <script>
 export default {
@@ -93,12 +143,15 @@ export default {
     return {
         ab:0,
         ab2:0,
+        ab3:0,
         SaleList:[],
         cityId:262,
         companyId:0,
         height1:"0px",
         height2:"0px",
+        height3:"0px",
         tiaoshui:[],
+        isPhone:false
     };
   },
   mounted() {
@@ -107,8 +160,17 @@ export default {
         this.AutoExchange();
         // this.getFirstImg2();
         this.AutoExchange2();
+
       })
-      
+      var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
+      if (ua.match(/MicroMessenger/i) == "micromessenger") {
+        //在微信中打开
+        this.isPhone=true;
+        this.AutoExchange3();
+      } else {
+      //否则就是PC浏览器打开
+        this.isPhone=false;
+      }
   },
   created() {
       this.cityId=localStorage.cityId;
@@ -130,6 +192,8 @@ export default {
         this.height1=(2465/1920)*oWidth+'px';
         this.height2=(4427/1920)*oWidth+'px';
         this.loadTiaoshui();
+        let oWidth2 = window.screen.width;
+        this.height3=(5451/750)*oWidth2+'px';
   },
   methods: {
       goLocalDes(idDes,obj){
@@ -182,6 +246,17 @@ export default {
             }
         }
     },
+    getFirstImg3(){
+        let div3 = this.$refs.div3;//整个区域
+        
+        var imgLen = div3.getElementsByClassName("img");//图片
+        for (var i=0;i<imgLen.length;i++){
+            if (i!=0){
+                imgLen[i].style.opacity = 0;
+            }
+        }
+    },
+
     //自动切换
     AutoExchange(){
         var div1 = this.$refs.div1;//整个区域
@@ -217,7 +292,26 @@ export default {
                 }
             }
         },5000);
+    },
+    //自动切换
+    AutoExchange3(){
+        let div3 = this.$refs.div3;//整个区域
+        var imgLen = div3.getElementsByClassName("img");//图片
+        var that = this;
+        setInterval(function ac() { //设置2000毫秒重复运行
+            that.ab3 = that.ab3>imgLen.length-2?0:++that.ab3; //5张图,当触摸到的按钮索引号大于3时(比如4),那么ab=0(下一张图为第0张),否则++ab;
+          //循环遍历下一张图的效果.
+            for (var b = 0; b < imgLen.length; b++) {
+                if (b == that.ab3) {
+                    imgLen[b].style.opacity = 1;
+                    imgLen[b].style.transition = "opacity 2s";
+                } else {
+                    imgLen[b].style.opacity = 0;
+                }
+            }
+        },5000);
     }
+
   }
 };
 </script>