<!--
/**
 * Created by PhpStorm.
 * User: z-yang
 * Date: 2019/4/11
 * Time: 15:33
 */

-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
              />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>微信阅读小管家福利</title>
	<style>
html,
body {
    margin: 0 auto;
  padding: 0;
  max-width: 450px;
  font-size: 100px;
}

html {
    background: #ff3628;
}

p {
    margin: 0;
}

i {
    font-style: normal;
}
a{text-decoration: none}

.container {
    position: relative;
    padding-bottom: .17rem;
}

.container .top_banner {
    font-size: 0;
  position: relative;
}

.container .top_banner img {
    width: 100%;
}

.container .top_banner .u_can_get {
    width: 1.5rem;
  height: 0.3rem;
  font-size: 0.14rem;
  line-height: 0.3rem;
  text-align: center;
  color: #d02a13;
  background: -webkit-gradient(linear, left bottom, left top, from(#ffb72c), to(#fff1af));
            background: linear-gradient(0deg, #ffb72c, #fff1af);
  -webkit-box-shadow: 0px 0.05rem 0.1rem 0px rgba(255, 81, 60, 0.4);
          box-shadow: 0px 0.05rem 0.1rem 0px rgba(255, 81, 60, 0.4);
  border-radius: 0.15rem;
  position: absolute;
  left: 4%;
  top: 48%;
}

.container .top_banner .u_can_get span {
    font-size: 0.17rem;
  font-weight: bold;
}

.container .wrap {
    font-size: 0;
  width: 95%;
  margin: 0 auto;
  padding-bottom: 0.17rem;
  background: -webkit-gradient(linear, left bottom, left top, from(white), to(#fffbe8));
            background: linear-gradient(0deg, white, #fffbe8);
  -webkit-box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

.container .wrap img {
    width: 100%;
}

.container .wrap .to_get {
    display:block;
    background: #ffdb5f;
    color: #8a4b18;
    font-size: 0.17rem;
  font-weight: bold;
  width: 85%;
  margin: 0 auto 0.15rem;
  padding: 0.15rem 0;
  text-align: center;
  border-radius: 40px;
}

.container .wrap .get_notice {
    font-size: 0.12rem;
  color: #666;
  text-align: center;
}

.container .wrap .help_wrap {
    background: white;
    border: 1px solid #d6cea5;
  border-radius: 2px;
  width: 90%;
  margin: 0.54rem auto 0;
  padding: 0.16rem 0 0.44rem;
  font-size: 0.13rem;
  color: #666;
}

.container .wrap .help_wrap p {
    padding: 0 0.18rem;
}

.container .wrap .help_wrap .title {
    color: #333;
    font-size: 0.15rem;
  font-weight: bold;
  margin-bottom: 0.15rem;
}

.container .wrap .help_wrap .item {
    line-height: 1.8;
}

.container .wrap .help_wrap .item i {
    color: #ff4930;
    font-size: 0.15rem;
  font-weight: bold;
}
.alert {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  transition: all 2s; ;
}
.alert .content {
  width: 80%;
  height: 2rem;
  position: absolute;
  font-size: 0.11rem;
  left: 50%;
  top: 50%;
  margin-left: -40%;
  margin-top: -40%;
  text-align: center;
  background: #f7f7f7;
  border-radius: 4px;
  overflow: hidden;
}

.content .title {
  height: 50px;
  line-height: 50px;
  font-size: 0.16rem;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #f7f7f7;
  background: #ff4930;
  color: #fff;
}

.content .title img {
  width: 0.32rem;
  height: 0.32rem;
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
}

.content .content-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: calc(100% - 50px);
}

.content-text p {
  width: 100%;
}

.content .notice1 {
  font-size: .18rem;
  margin-bottom: .2rem;
}

.content .notice2 {
  font-size: .16rem;
  color: #666;
}

.show {
  display: block;
}
.hide {
  display: none;
}
/*# sourceMappingURL=main.css.map */
	</style>
  </head>

  <body>
    <main class="container">
      <div class="top_banner">
        <img src="https://cdn-novel.iycdm.com/h5/20190411/free_currency_banner.jpg" alt="" />
        <p class="u_can_get"><span>{{$fee}}</span>书币 人人有份</p>
      </div>
      <div class="wrap">
        <img src="https://cdn-novel.iycdm.com/h5/20190411/free_currency_wrap.jpg" alt="" />

        <a class="to_get" href="{{$url}}">马上去看书> ></a>
        <p class="get_notice">领取成功 {{$fee}}书币已经到账</p>

        <div class="help_wrap">
          <p class="title">阅读小管家给您提供优质阅读体验</p>
          <div class="help_item">
            <p class="item">1.成功添加就送<i>{{$fee}}</i>书币奖励，人人有份；</p>
            <p class="item">2.提供最划算充值优惠，看书更便宜；</p>
            <p class="item">3.找书快人一步，提供任何您想看的书籍哦；</p>
            <p class="item">4.1对1阅读管家优质服务，疑难问题优先解决；</p>
            <p class="item">5.更多福利，您想要，我们就有！</p>
          </div>
        </div>
      </div>
    </main>
    <div class="{{$is_get == 0?'t':'hide'}}  alert">
      <div class="content">
        <p class="title">
          温馨提示
          <img class="close" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAYAAABzwahEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkM1QUFCMEQwMEFEQzExRThCMUE5OUM1NzYzQzgzODc3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkM1QUFCMEQxMEFEQzExRThCMUE5OUM1NzYzQzgzODc3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzVBQUIwQ0UwQURDMTFFOEIxQTk5QzU3NjNDODM4NzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzVBQUIwQ0YwQURDMTFFOEIxQTk5QzU3NjNDODM4NzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6qIoivAAAF/ElEQVR42uSb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" alt="" />
        </p>
        <div class="content-text">
          <p class="notice1">领取成功</p>
          <p class="notice2">{{$fee}}书币已到账</p>
        </div>
      </div>
    </div>
  </body>
  <script>
window.onload=function(){
    var d = document;
    var is_get = {{$is_get}};
    var source = "{{$source}}";
    var fee = {{$fee}};
    var url = "{{$url}}";
        is_get = parseInt(is_get);
        fee = parseInt(fee);
    var btn = d.querySelector('.js-get');
    var get_notice = d.querySelector('.get_notice');
    var uid = {{$uid}}
     uid = parseInt(uid);
    close();
    /*btn.addEventListener("click",function(){
        ajax('POST','/freecurrency',function(){
          show();
          setTimeout(function () {
            get_notice.innerText = '领取成功 200书币已经到账';
            btn.innerText = '马上去看书> >';
            btn.setAttribute("href",url);
          },200);
        })
    });
    //close();
    function ajax(method,url,callback){
        var xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send('uid='+uid+'&fee='+fee+'&source='+source);
        xhr.onreadystatechange=function(){
        if (xhr.readyState ==4 && xhr.status==200)
        {
          callback();
        }
      }
    }*/

    function close() {
      d.querySelector('.close').addEventListener('click',function () {
        d.querySelector('.alert').setAttribute("class","hide alert");
      })
    }

  function show() {
    d.querySelector('.alert').setAttribute("class","show alert");
  }

}

  </script>
</html>
