PC端默认为Android下载

src/views/Home.vue

@@ -1,108 +1,112 @@
<template>
  <div>
    <div>
        <div>
            <img id="topbg" src="../assets/top_bg.png">
            <div id="topleft">
                <img id="icon" src="../assets/icon2.png">
                <div class="kaixin">
                    <div id="kaixin_title">漫步今日益行</div>
                </div>
                <div class="noti">
                    <font>旅游生活娱乐 就在漫步今日益行</font>
                </div>
                <div class="btnP">
                    <img class="btnImg" src="~@/assets/apple.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>
            <img id="shouji" src="~@/assets/shouji2.png">
      <img id="topbg" src="../assets/top_bg.png">
      <div id="topleft">
        <img id="icon" src="../assets/icon.png">
        <div class="kaixin">
          <div id="kaixin_title">开心0元购</div>
        </div>
        <div>
            <div class="bottom1">
                <div class="WordP">
                    <h1>多样活动 旅游爱好者的集散地</h1>
                    <h2>参与主题游记等活动，与全国驴友一起记录旅途美好</h2>
                    <h3>• 在指定微店、京东、天猫等店铺购买指定的旅游卡</h3>
                    <h3>• 进入漫步今日益行，关联旅游卡，领取游记中心空间</h3>
                    <h3>• 快速手机写游记，记录旅途精彩点滴</h3>
                </div>
                <img class="img1" src="~@/assets/right_top.png">
            </div>
            <div class="bottom2">
                <img class="img2" src="~@/assets/left_bottom.png">
                <div class="WordP">
                    <h1>主题游记</h1>
                    <h2>你负责说走就走，我负责记录美好</h2>
                    <h3>• 进入主题活动专属游记中心</h3>
                    <h3>• 点击我的游记，随时保存、查看自己的精美游记</h3>
                    <h3>• 全部现金到账，更有神秘福利免费领取</h3>
                </div>
            </div>
        <div class="noti">
          <font>旅游生活娱乐 就在开心0元购</font>
        </div>
        <div class="btnP" @click="download()">
          <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">
    </div>
    <div>
      <div class="bottom1">
        <div class="WordP">
          <h1>多样活动 旅游爱好者的集散地</h1>
          <h2>参与主题游记等活动，与全国驴友一起记录旅途美好</h2>
          <h3>• 在指定微店、京东、天猫等店铺购买指定的旅游卡</h3>
          <h3>• 进入开心0元购，关联旅游卡，领取游记中心空间</h3>
          <h3>• 快速手机写游记，记录旅途精彩点滴</h3>
        </div>
        <img class="img1" src="~@/assets/right_top.png">
      </div>
      <div class="bottom2">
        <img class="img2" src="~@/assets/left_bottom.png">
        <div class="WordP">
          <h1>主题游记</h1>
          <h2>你负责说走就走，我负责记录美好</h2>
          <h3>• 进入主题活动专属游记中心</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>
#topbg {
  #topbg {
    width: 100%;
    height: 100%;
}
  }
#topleft {
  #topleft {
    width: 1200px;
    left: 18%;
    top: 224px;
    position: absolute;
    text-align: left;
}
  }
#icon {
  #icon {
    width: 144px;
    height: 144px;
}
  }
.kaixin {
  .kaixin {
    position: relative;
    display: table;
    top: 30px;
}
  }
#kaixin_title {
  #kaixin_title {
    color: #F84842;
    font-size: 40px;
    font-weight: bold;
}
  }
.noti {
  .noti {
    margin-top: 20px;
    color:#AEAEAE;;
    color: #AEAEAE;;
    font-weight: bold;
    font-size: 20px;
    position: relative;
    white-space: nowrap;
    top: 20px;
}
  }
.btnP {
    width: 300px;
  .btnP {
    width: 350px;
    height: 66px;
    position: relative;
    margin-top: 57px;
    border-radius: 33px;
    background-color: #FB4644;
}
  }
  .btnP:active {
    top: 5px; /**向下偏移2px **/
  }
.btnImg {
  .btnImg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40px;
}
  }
.btnFont {
  .btnFont {
    color: white;
    font-size: 28px;
    font-weight: bold;
@@ -111,68 +115,77 @@
    transform: translateY(-50%);
    right: 40px;
    /*left: auto;*/
}
  }
  .btnFont:active {
    font-size: 26px;
  }
#shouji {
  #shouji {
    width: 380px;
    height: 380px;
    right: 19%;
    top: 224px;
    position: absolute;
}
  }
.bottom1 {
  .bottom1 {
    display: inline-flex;
    margin-top: 50px;
    width: 62%;
}
  }
.WordP {
  .WordP {
    text-align: left;
    margin: auto 0;
}
  }
.WordP h1 {
  .WordP h1 {
    font-size: 30px;
}
  }
.WordP h2 {
  .WordP h2 {
    font-size: 20px;
}
  }
.WordP h3 {
  .WordP h3 {
    font-size: 14px;
}
  }
.img1 {
  .img1 {
    margin-left: 60px;
}
  }
.bottom2 {
  .bottom2 {
    display: inline-flex;
    margin-top: 50px;
    width: 62%;
}
  }
.img2 {
  .img2 {
    margin-right: 60px;
}
  }
</style>
<script>
export default {
  export default {
    name: 'Home',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
        }
      return {
        msg: 'Welcome to Your Vue.js App',
      }
    },
    methods: {
        openNewTab() {
            window.open("http://d.firim.info/freepa", "_blank");
        },
      openNewTab() {
        window.open("http://d.firim.info/freepa", "_blank");
      },
      download() {
        console.log('点击下载按钮了')
        //window.location.href = "https://s3.cn-northwest-1.amazonaws.com.cn/s3.jianos.com/Zero.apk";
        window.open("https://s3.cn-northwest-1.amazonaws.com.cn/s3.jianos.com/Zero.apk", "_blank");
      },
    }
}
  }
</script>
<!--本地网络地址：   http://192.168.31.101:8082-->