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,14 +111,17 @@
 <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="viedo/mp4">
-                    <source src="../../assets/media/fire.mp4" type="viedo/ogg">
-                    <source src="../../assets/media/fire.mp4" type="viedo/webm">
-                </video>
+            <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="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=""/>
@@ -168,6 +178,7 @@ export default {
         tiaoshui:[],
         isPhone:false,
         timer:'',
+        topDiv:'',
     };
   },
   mounted() {
@@ -178,15 +189,27 @@ export default {
         this.AutoExchange2();
 
       })
-      var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
-      if (ua.match(/MicroMessenger/i) == "micromessenger") {
-        //在微信中打开
-        this.isPhone=true;
-        this.AutoExchange3();
-      } else {
-      //否则就是PC浏览器打开
-        this.isPhone=false;
-      }
+    //   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();
+
+            break;
+        }
+    }
   },
   created() {
       this.cityId=localStorage.cityId;
@@ -202,14 +225,17 @@ export default {
         this.Calculation = Width/Height - 1.77 > 0.02 ? true : false
         // console.log(Height, Width, oHeight, oWidth,Width/Height, this.Calculation, Width/Height - 1.77)
         if (oWidth < 1920) {
-        this.smallWindow = true
+            this.smallWindow = true
         }
         this.zoom = Math.round((Height/1080) * 100) / 100;
         this.height1=(2465/1920)*oWidth+'px';
         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: {