<template>
    <div class="container-box">
        <div class="content">
            <div class="head-img"><img src="//static.hoolihome.com/m/images/yindaoye_head.png" /></div>
            <div class="btn">
          <a href="https://itunes.apple.com/cn/app/id1261296346?mt=8" v-if="env === 'ios'">点击下载</a>
          <a href="https://sj.qq.com/myapp/detail.htm?apkName=com.hooli.hoolihome" v-else>点击下载</a>
        </div>
            <div class="enter" @click="enterFuc">进入网页<img src="../assets/imgs/enter_img.png" /></div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      env: ""
    };
  },
  created: function() {
    if (this.$util.checkIsHooliAndroid() || this.$util.checkIsHooliIos()) {
      this.isInHooliApp = true;
    }
    let u = navigator.userAgent;
    if (u.indexOf("Android") > -1 || u.indexOf("Adr") > -1)
      this.env = "android";
    if (u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) this.env = "ios";
  },
  methods: {
    enterFuc() {
      let cityItem = this.$util.storage.fetch("CityItem");
      let lang = this.$store.state.langStr;
      if (cityItem) {
        this.$router.push({
          path: `/${lang}/${cityItem.other_name}`
        });
      } else {
        this.$router.push({
          path: `/${lang}/guide`
        });
      }
    }
  }
};
</script>
<style scoped lang="less">
.container-box {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  background: url(//static.hoolihome.com/m/images/yindaoye_bg.png) center center
    no-repeat/cover;
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .head-img {
      width: 144px;
      height: 99px;
      margin: auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .btn {
      margin: 44px 88px 0;
      a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 45px;
        background: linear-gradient(
          135deg,
          rgba(255, 143, 85, 1) 0%,
          rgba(255, 108, 80, 1) 51%,
          rgba(255, 84, 61, 1) 100%
        );
        box-shadow: 0px 4px 10px 0px rgba(255, 82, 61, 0.2);
        border-radius: 45px;
        font-size: 18px;
        color: #fff;
        background: #ff523d;
        font-weight: 500;
      }
    }
    .enter {
      margin-top: 20px;
      font-size: 16px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(204, 204, 204, 1);
      text-align: center;
      img {
        display: inline-block;
        margin-left: 6px;
        width: 7px;
        height: 12px;
      }
    }
  }
}
</style>
