zhuishuyun
/
zhuishuyun_quickapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no0"
  />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0 auto;
      padding: 0;
      /* max-width: 450px; */
      font-size: 100px;
    }

    p {
      margin: 0;
      padding: 0;
    }

    main {
      font-size: 0;
      position: relative;
    }

    main img {
      width: 100%;
    }

    .section-box {
      width: 95%;
      margin: 0 auto;
    }

    .welfare-box {
      font-size: 0.14rem;
      margin-bottom: 0.14rem;
      color: #282828;
    }

    .welfare-box span {
      display: inline-block;
    }

    .welfare-box .label {
      background: #ff4223;
      color: #fff;
      padding: 0.05rem 0.1rem;
      font-weight: bold;
      border-radius: 2px;
    }

    .welfare-box .strong {
      color: #5235ff;
      font-size: 0.18rem;
      font-weight: bold;
    }

    .down-for-free {
      background: linear-gradient(
              0deg,
              rgba(243, 57, 31, 1),
              rgba(255, 122, 100, 1)
      );
      box-shadow: 0px 5px 9px 0px rgba(255, 85, 62, 0.3);
      border-radius: 23px;
      font-size: 0.16rem;
      font-weight: bold;
      color: #fff;
      text-align: center;
      padding: 0.14rem 0;
      width: 80%;
      margin: 0.24rem auto;
    }

    .disable-status {
      background: #ccc;
      box-shadow: none;
    }

    .rules-box {
      background: #f7f7f7;
      padding: 0.1rem 0.16rem;
      font-size: 0.13rem;
      color: #666;
      line-height: 0.2rem;
    }

    .rules-box .rule-title {
      font-weight: bold;
      color: #333;
    }

    @media screen and (max-width: 360px) {
      .welfare-box {
        font-size: 0.12rem;
      }

      .welfare-box .strong {
        font-size: 0.16rem;
      }

      .down-for-free {
        padding: 0.1rem 0;
      }

      .rules-box {
        font-size: 0.12rem;
      }
    }
  </style>
</head>
<body>
<main>
  <img src="./imgs/banner.jpg" alt="米读App" />
  <div class="section-box">
    <p class="welfare-box">
      <span class="label">微信内福利</span>
      <span class="text">《女总裁的贴身老司机》</span>
      <span class="strong">全本免费看</span>
    </p>
    <p class="welfare-box">
      <span class="label">米读内福利</span>
      <span class="text">免费抽取iPhone XS</span>
    </p>
    <!-- 按钮变灰使用class disable-status -->
    <div class="down-for-free">立即下载</div>

    <div class="rules-box">
      <p class="rule-title">规则</p>
      <p class="rule-item">1. App下载注册成功后福利兑现</p>
      <p class="rule-item">2. 微信内福利在当前服务号兑现</p>
      <p class="rule-item">3. 米读内福利下载成功后兑现</p>
    </div>
  </div>
</main>
</body>
<script>
    var u = navigator.userAgent.toLowerCase();
    var isWechat = u.match(/MicroMessenger/i) == "micromessenger";
    // 按钮状态 1-可以点击下载 0-无法点击下载
    var btn_status = 1;
    var btn = document.querySelector(".down-for-free");
    btn.addEventListener(
        "click",
        function() {
            // 判断按钮的可点击状态
            if (!btn_status) {
                alert("您已下载过该应用");
                return;
            }
            // 判断是否在微信内
            if (isWechat) {
                alert("请在浏览器内打开");
                return;
            }
            // 执行下载操作
        },
        false
    );
</script>
</html>