<template>
  <div class="body">
    <img class="plum" src="../assets/images/bg_1.png" />
    <img class="plum right" src="../assets/images/bg_1.png" />
    <img class="lantern" src="../assets/images/bg_2.png" />
    <img class="lantern right" src="../assets/images/bg_2.png" />
    <div id="download_component" style="display: block">
      <div
        class="app"
        style="
          background-image: url('https://senbackkg.salinent.com/clientManage/279d6b6f65f445c6b77e00461c543fb7.jpg');
        "
      >
        <div class="download">
          <h3 class="show_code"></h3>
          <div class="content">
            <div class="logo_box">
              <img
                src="https://senbackkg.salinent.com/clientManage/490cfea3327445e8b19248fd6926d9fa.png"
              />
            </div>
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="#f4af00"
            >
              <van-swipe-item>
                <img
                  alt=""
                  class="download_slide_img"
                  src="https://senbackkg.salinent.com/clientManage/1ab04b72c7464a7eadf2ac855308bc9e.png"
              /></van-swipe-item>
              <van-swipe-item>
                <img
                  alt=""
                  class="download_slide_img"
                  src="https://senbackkg.salinent.com/clientManage/d15f340d4a434309ac1efc1093fb367d.png"
              /></van-swipe-item>
              <van-swipe-item>
                <img
                  alt=""
                  class="download_slide_img"
                  src="https://senbackkg.salinent.com/clientManage/d38b2a0a9bfb4342a8e33038bdc01888.png"
              /></van-swipe-item>
              <van-swipe-item>
                <img
                  alt=""
                  class="download_slide_img"
                  src="https://senbackkg.salinent.com/clientManage/559c34bad6cd42068efe14a33f06e23c.png"
              /></van-swipe-item>
            </van-swipe>
            <div v-if="true">
              <div>
                <div class="install_btn_wrap">
                  <div class="process_box"></div>
                  <span class="down_btn" @click="handleDownload()"
                    >立即下载</span
                  >
                </div>
              </div>
              <div class="ios_trust_tip"></div>
              <div class="open_h5_wrap" style="margin-top: 0.5rem">
                <a target="_blank" class="down_btn2" :href="url"
                  >若无法下载APP，请点击此处使用手机网页版</a
                >
              </div>
              <div class="download_tip">
                <span>为了您的隐私安全，请勿与“国家反诈中心”APP同设备使用</span
                ><span class="h5-btn-show" style="display: none"
                  >；若无法正常安装，请使用手机自带浏览器打开本页面</span
                ><span
                  class="download_tip_text h5-btn-show"
                  style="display: none"
                  >（谷歌浏览器Chrome、苹果浏览器Safari）</span
                >
              </div>
              <div class="scroll_view_tutorials">
                <p>下滑查看安装教程</p>
                <i class="arrow_down_img"></i>
              </div>
            </div>
            <div v-else>
              <div style="display: flex; justify-content: space-evenly">
                <div class="install_btn_wrap" style="width: 10.8rem">
                  <span class="down_btn" @click="handleDownload()"
                    >立即下载</span
                  >
                </div>
                <div class="open_h5_wrap" style="width: 8rem">
                  <a target="_blank" class="down_btn2" :href="url"
                    >手机网页版</a
                  >
                </div>
              </div>

              <div class="download_tip">
                <span
                  >下载安装过程中请勿切换网络，推荐使用手机自带浏览器打开本页面</span
                >
              </div>
              <div class="scroll_view_tutorials">
                <p>下滑查看安装教程</p>
                <i class="arrow_down_img"></i>
              </div>
            </div>
          </div>
        </div>
        <div v-if="isiOS" class="tutorials">
          <div class="tutorials_logo_wrap">
            <img style="height: 2rem" src="../assets/images/apple.webp" />
          </div>
          <img class="tutorials_bg_img" src="../assets/images/apple_rule.png" />
        </div>
        <div v-else class="tutorials">
          <div class="tutorials_logo_wrap">
            <img style="height: 2rem" src="../assets/images/android.webp" />
          </div>
          <img
            class="tutorials_bg_img"
            src="../assets/images/android_rule.png.png"
          />
        </div>
      </div>
      <a
        target="_blank"
        href="https://app-download-service.2edfgs.com/download?siteId=iUeAl7xM"
        ><div id="sign_off_wrap" class="sign_off_wrap">
          <img class="sign_off_img" src="../assets/images/sign-off.png" /></div
      ></a>

      <div class="guide_tip_mask"><img class="guide_tip_img" /></div>
    </div>
    <script>
      !(function (win) {
        // 禁用safari缩放
        win.document.addEventListener("gesturestart", function (e) {
          e.preventDefault();
        });
      })(window);
    </script>
  </div>
</template>

<script>
export default {
  name: "H5Index",
  data() {
    return {
      isiOS: null,
      code: "",
      url: "https://www.yibovip613.com:34225/entry/login",
    };
  },
  head() {
    return {
      script: [
        {
          src: "https://res.sharetrace.com/sharetrace.min.js",
        },
      ],
    };
  },
  mounted() {
    setTimeout(function () {
      ShareTrace.init({
        appkey: "a4a9e45dc76e096a",
        success: function () {
          console.log("init success...");
        },
        error: function (msg) {
          console.log(msg);
        },
      });
    }, 1000);

    const u = navigator.userAgent;
    const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    this.isiOS = isiOS;

    this.code =
      location.href.split("?")[1] && location.href.split("?")[1].split("=")[1];
    if (this.code) {
      this.url =
        "https://www.yibovip613.com:34225/entry/login?code=" + this.code;
    }
  },
  methods: {
    handleDownload() {
      // 请在用户点击下载按钮时，触发此函数
      ShareTrace.download();
    },
  },
};
</script>
<style scoped>
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: PingFangSC-Regular, sans-serif;
  outline: none;
  border: none;
  text-decoration: none;
}
</style>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
#download_component {
  display: none;
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.skin_top_wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  display: none;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.skin_top_wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  display: none;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.download {
  min-height: 12.68rem;
  background-size: 100% auto;
  background-position: center top;
  position: relative;
}
.show_code {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.24rem;
  color: #ddd;
  z-index: 1;
}
.content {
  color: #f4af00;
  font-size: 0.24rem;
  padding-bottom: 0.12rem;
}
.logo_box {
  width: 100%;
  text-align: center;
  font-size: 0;
  margin-top: 0.6rem;
}
.logo_box img {
  height: 2.72rem;
  vertical-align: middle;
}
.install_btn_wrap {
  display: flex;
  justify-content: center;
}
.down_btn {
  font-size: 1rem;
  background-image: linear-gradient(90deg, #ffe88a 0%, #fccb14 100%);
  color: #26283a;
  width: 20rem;
  text-align: center;
  height: 44px;
  line-height: 44px;
  border-radius: 44px;
}
.down_btn2 {
  font-size: 12px;
  color: #f4af00;
  border: 0.02rem solid #f4af00;
  width: 20rem;
  text-align: center;
  height: 44px;
  line-height: 44px;
  border-radius: 44px;
}
.trust_btn {
  display: none;
  width: 5.08rem;
}
.disabled_btn {
  opacity: 0.5;
  pointer-events: none;
}
.ios_trust_tip {
  display: none;
}
.open_h5_wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.download_tip {
  margin-top: 0.6rem;
  padding: 0 0.42rem;
  text-align: center;
  font-size: 0.2rem;
  color: #4e5566;
}
.scroll_view_tutorials {
  margin-top: 0.12rem;
  font-size: 0.24rem;
  color: #f4af00;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.arrow_down_img {
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 0.06rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../assets/images/iconJiantou.png);
}
.tutorials {
  margin-top: 3rem;
  background-size: 100% auto;
  background-position: center top;
}
.tutorials_logo_wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tutorials_bg_img {
  width: 100%;
}
.sign_off_wrap {
  position: fixed;
  top: 25rem;
  right: 0;
  z-index: 2;
  width: 5.68rem;
  background: #f4af00;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0.8rem 0 0 0.8rem;
}
.sign_off_img {
  display: inline-block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.download_slide_img {
  width: 100%;
}
.plum {
  position: absolute;
  width: 100px;
}
.plum.right {
  right: 0;
  transform: scaleX(-1);
}
.lantern {
  position: absolute;
  width: 30px;
  transform: scaleX(-1);
  top: 10px;
  left: 15px;
}
.lantern.right {
  transform: scaleX(1);
  left: unset;
  right: 15px;
}
</style>>
