PC、iOS端、微信端修改

src/App.vue

@@ -12,7 +12,8 @@
        // window.location.replace('/android-mobile.html')
        this.$router.push('/Android');
      } else if (!this.isPC() && this.isIos()) {
        window.location.replace('/ios-mobile.html')
        //window.location.replace('/ios-mobile.html')
        this.$router.push('/ios');
      }
    },
    methods: {
@@ -51,11 +52,14 @@
<style>
  #app {
    height: 100%;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    /*margin-top: 60px;*/
    margin: 0;
    padding: 0;
  }
</style>

src/assets/main.css

@@ -0,0 +1,9 @@
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}

src/main.js

@@ -1,10 +1,11 @@
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/main.css'
Vue.config.productionTip = false
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')
}).$mount('#app')

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
import Router from 'vue-router'
import PC from '@/views/PC.vue'
import Android from '@/views/Android.vue'
import ios from '@/views/ios.vue'
Vue.use(Router)
@@ -24,6 +25,11 @@ export default new Router({
      path: '/Android',
      name: 'Android',
      component: Android
    },
    {
      path: '/ios',
      name: 'ios',
      component: ios
    }
     ]
})

src/views/PC.vue

@@ -10,11 +10,13 @@
        <div class="noti">
          <font>旅游生活娱乐 就在开心0元购</font>
        </div>
        <div class="btnP" @click="download()">
        <div class="btnP" @click="jump()">
          <img class="btnImg" src="~@/assets/apple.png">
          <font class="btnFont">iOS系统下载</font>
        </div>
        <div class="btnP" @click="download()" style="margin-top: 20px">
          <img class="btnImg" src="~@/assets/bot.png">
          <!-- <a href="https://s3.cn-northwest-1.amazonaws.com.cn/s3.jianos.com/Zero.apk" download="" traget="_blank"> -->
          <font class="btnFont">Android系统下载</font>
          <!-- </a> -->
        </div>
      </div>
      <img id="shouji" src="~@/assets/shouji2.png">
@@ -207,6 +209,14 @@
    },
    methods: {
      jump() {
        var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
        if(isMac){
          window.location.href = 'itms-apps://itunes.apple.com/app/id1531655695';
          return
        }
        alert('请在iOS手机safari浏览器中打卡此页面!');
      },
      download() {
        console.log('点击下载按钮了')
        window.open(downUrl, "_blank");

src/views/iOS.vue

@@ -1,13 +0,0 @@
<template>
  <div>
  </div>
</template>
<style scoped>
</style>
<script>
</script>

src/views/ios.vue

@@ -0,0 +1,215 @@
<template>
  <div>
    <div ref="ios_mask" class="mask">
      <img src="~@/assets/arrow.png" style="margin: 1rem 0 0 2.5rem;">
      <p style="color: #ffffff;font-size: 23px;margin:.5rem 0 .9rem 0;">请在浏览器中打开</p>
      <img src="~@/assets/know.png"  style="CURSOR: pointer">
    </div>
    <!--上半部分-->
    <div>
      <img class="topbg" src="../assets/topbg_mobile.png">
      <div class="top_content">
        <img class="app_icon" src="../assets/icon.png"/>
        <font class="app_name">开心0元购</font>
      </div>
      <font class="des">连续打卡全额返 就在开心0元购</font>
      <div class="btnP">
        <div @click="jump()">
          <img class="btnImg" src="~@/assets/bot.png">
          <!-- <a href="https://s3.cn-northwest-1.amazonaws.com.cn/s3.jianos.com/Zero.apk" download="" traget="_blank"> -->
          <font class="btnFont">iOS系统下载</font>
          <!-- </a> -->
        </div>
      </div>
    </div>
    <!--下半部分-->
    <div>
      <img class="img1" src="~@/assets/right_top.png">
      <div class="WordP">
        <div>
          <h1>打卡简单 全额返购自主提现</h1>
          <h2>只要坚持完成连续打卡任务 即全额返现</h2>
          <h3>• 进入指定京东或天猫店铺购买想要的指定商品</h3>
          <h3>• 进入开心0元购注册账号，关联商品 </h3>
          <h3>• 每日打卡，完成阶段任务自主提现，直至全额</h3>
        </div>
      </div>
      <img class="img1" src="~@/assets/left_bottom.png">
      <div class="WordP">
        <div>
          <h1>提现便捷 拒绝意外翻车</h1>
          <h2>分阶段返现，完成阶段任务即可直接提现</h2>
          <h3>• 在开心0元购打卡至阶段任务完成</h3>
          <h3>• 进入领奖处，填写收款账户直接申请提现</h3>
          <h3>• 全部现金到账，更有神秘福利免费领取</h3>
        </div>
      </div>
    </div>
  </div>
</template>
<!--(1920 px 1082 px)-->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    min-height: 100vh;
    background-color: #555555f0;
    display: block;
    z-index: 10;
  }
  .topbg {
    width: 100%;
    height: auto;
  }
  .top_content {
    width: auto;
    left: 18%;
    top: 25%;
    position: absolute;
    text-align: left;
    display: flex;
    align-items: center
  }
  .app_icon {
    width: 60px;
    height: 60px;
  }
  .app_name {
    font-size: 30px;
    font-weight: bold;
    margin-left: 25px;
  }
  .des {
    color: #FB4644;
    font-weight: bold;
    font-size: 16px;
    left: 18%;
    top: 36%;
    position: absolute;
  }
  .btnP {
    position: absolute;
    bottom: 6%;
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
  }
  .btnP div {
    background-color: #FB4644;
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    border-radius: 20px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 20px;
  }
  .btnP:active {
    /*transform: scale(10);*/
  }
  .btnImg {
    width: 30px;
    height: 30px;
  }
  .btnFont {
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
  }
  .btnFont:active {
    font-size: 18px;
  }
  .img1 {
    width: 80%;
    height: auto;
    margin-top: 20px;
  }
  .WordP {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .WordP div {
    text-align: center;
    margin-top: 10px;
  }
  .WordP h1 {
    font-size: 17px;
  }
  .WordP h2 {
    font-size: 15px;
  }
  .WordP h3 {
    font-size: 13px;
  }
</style>
<script>
  export default {
    name: 'ios',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
      }
    },
    mounted() {
      this.initV();
    },
    methods: {
      initV() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          //是微信环境，弹出遮罩
          //document.getElementById('ios-mask').style.display='block';
          this.$refs.ios_mask.style.display='block';
        } else {
          //document.getElementById('ios-mask').style.display='none';
          this.$refs.ios_mask.style.display='none';
        }
      },
      jump() {
        window.location.href = 'itms-apps://itunes.apple.com/app/id1531655695';
      }
    }
  }
</script>
<!--本地网络地址：   http://192.168.31.101:8082-->