123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- <!--
- /**
- * Created by PhpStorm.
- * User: z-yang
- * Date: 2019/4/11
- * Time: 15:33
- */
- -->
- <!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=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;
- }
- /*# 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>200</span>书币 人人有份</p>
- </div>
- <div class="wrap">
- <img src="https://cdn-novel.iycdm.com/h5/20190411/free_currency_wrap.jpg" alt="" />
- @if($is_get)
- <a class="to_get" href="{{$url}}">马上去看书> ></a>
- <p class="get_notice">领取成功 200书币已经到账</p>
- @else
- <a class="to_get js-get">领取200书币奖励</a>
- <p class="get_notice">领取成功后,会自动发放到您的余额中</p>
- @endif
- <div class="help_wrap">
- <p class="title">阅读小管家给您提供优质阅读体验</p>
- <div class="help_item">
- <p class="item">1.成功添加就送<i>200</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>
- </body>
- <script>
- window.onload=function(){
- var d = document;
- var is_get = {{$is_get}};
- var url = "{{$url}}";
- is_get = parseInt(is_get);
- var btn = d.querySelector('.js-get');
- var get_notice = d.querySelector('.get_notice');
- var uid = {{$uid}}
- uid = parseInt(uid);
- if(is_get){
- return ;
- }
- btn.addEventListener("click",function(){
- ajax('POST','/freecurrency',function(){
- get_notice.innerText = '领取成功 200书币已经到账';
- btn.innerText = '马上去看书> >';
- btn.setAttribute("href",url);
- })
- });
- 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);
- if (xhr.readyState==4 && xhr.status==200)
- {
- var res = xmlhttp.responseText;
- console.log(res)
- callback();
- }
- }
- }
- </script>
- </html>
|