update

src/components/taskPage/Fire.vue

@@ -75,12 +75,19 @@
 }
 .videoBox{
     position: absolute;
-    width:490px;
+    width: 100%;
     height:290px;
-    top:1245px;
+    top:0;
     margin:auto;
-    left:90px;
     z-index:200;
+    box-sizing: border-box;
+}
+.iphoneVideo{
+    background: url('../../assets/img/juan/sp.png') no-repeat;
+    background-size:100% 100%;
+    padding: 15px 29px 41px 28px;
+    margin: 0 auto;
+    width:490px;
 }
 .TwoCode{
     width: 100%;
@@ -104,15 +111,18 @@
 <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}">
+            <img class="img" src="../../assets/img/juan/fire1.jpg" alt=""/>
+            <img class="img" src="../../assets/img/juan/fire2.jpg" alt=""/>
+            <div class="videoBox" :style="{zoom: zoom,top:topDiv}">
+                <div class="iphoneVideo">
                     <video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
-                    <source src="../../assets/media/fire.mp4" type="viedo/mp4">
-                    <source src="../../assets/media/fire.mp4" type="viedo/ogg">
-                    <source src="../../assets/media/fire.mp4" type="viedo/webm">
+                        <source src="../../assets/media/fire.mp4" type="video/mp4">
+                        <source src="../../assets/media/fire.mp4" type="video/ogg">
+                        <source src="../../assets/media/fire.mp4" type="video/webm">
                     </video>
                 </div>
+                
+            </div>
             <div class="TwoCode">
                 <img src="../../assets/img/juan/twoCode.png" alt=""/>
             </div>
@@ -168,6 +178,7 @@ export default {
         tiaoshui:[],
         isPhone:false,
         timer:'',
+        topDiv:'',
     };
   },
   mounted() {
@@ -178,14 +189,26 @@ export default {
         this.AutoExchange2();
 
       })
-      var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
-      if (ua.match(/MicroMessenger/i) == "micromessenger") {
-        //在微信中打开
-        this.isPhone=true;
+    //   var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
+    //   if (ua.match(/MicroMessenger/i) == "micromessenger") {
+    //     //在微信中打开
+    //     this.isPhone=true;
+    //     this.AutoExchange3();
+    //   } else {
+    //   //否则就是PC浏览器打开
+    //     this.isPhone=false;
+    //   }
+    let userAgentInfo = navigator.userAgent;
+    let Agents = ["Android", "iPhone",
+                "SymbianOS", "Windows Phone",
+                "iPad", "iPod"];
+    for (let v = 0; v < Agents.length; v++) {
+        if (userAgentInfo.indexOf(Agents[v]) > 0) {
+            this.isPhone = true;
             this.AutoExchange3();
-      } else {
-      //否则就是PC浏览器打开
-        this.isPhone=false;
+
+            break;
+        }
     }
   },
   created() {
@@ -209,7 +232,10 @@ export default {
         this.height2=(4427/1920)*oWidth+'px';
         this.loadTiaoshui();
         let oWidth2 = window.screen.width;
+        console.log("let oWidth2",oWidth2)
         this.height3=(5451/750)*oWidth2+'px';
+        this.topDiv=(1850/750)*oWidth2+'px';
+        console.log("this.topDiv",this.topDiv)
   },
   methods: {