123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <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;
- }
- p {
- margin: 0;
- padding: 0;
- text-align: center;
- }
- .main_box {
- font-size: 0;
- position: relative;
- }
- .main_box img {
- width: 100%;
- }
- .main_box .intro {
- font-size: 0.15rem;
- line-height: 0.26rem;
- color: #612e24;
- text-indent: 2em;
- margin: 0.1rem;
- /*font-weight: 600;*/
- text-align: left;
- }
- .main_box .coupon {
- width: 90%;
- margin: 0 auto;
- }
- .main_box .coupon img{
- pointer-events: none;
- }
- .main_box .gray {
- color: #b4b4b4;
- font-size: 0.14rem;
- }
- .main_box .gray span {
- color: #ff3728;
- font-weight: bolder;
- }
- .purchase {
- display: block;
- width: 90%;
- margin: 0 auto 0.2rem;
- }
- .main_box .strong {
- font-size: 0.16rem;
- font-weight: 800;
- color: #f62b24;
- margin: 0.1rem;
- }
- .book-list {
- /* padding: 0.2rem 0; */
- background: #fff5f4;
- font-size: 0;
- }
- .book-list h3 {
- font-size: 0.16rem;
- color: #000;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- }
- h3::before {
- content: "";
- display: inline-block;
- vertical-align: sup;
- width: 0.04rem;
- height: 0.16rem;
- border-radius: 4px;
- background: #ff7326;
- margin-right: 0.1rem;
- }
- h3 span {
- font-size: 0.14rem;
- color: #fe4c3f;
- margin-left: 0.1rem
- }
- .book-list__container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-flow: row wrap;
- padding: 0 0.1rem;
- }
- .book-item {
- width: 28%;
- margin-bottom: 0.1rem;
- }
- .book-item span {
- background: #ffe0e1;
- color: #ff7474;
- font-size: 0.12rem;
- margin-right: 0.05rem;
- padding: 0.02rem 0.06rem;
- border-radius: 20px;
- display: inline-block;
- margin-top: 0.1rem;
- }
- .coupon-dialog {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background: rgba(0, 0, 0, 0.3);
- overflow: hidden;
- z-index: 99;
- }
- .dialog-box {
- position: absolute;
- width: 90%;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .dialog-box img {
- width: 100%;
- }
- .dialog-box .close {
- background: url(https://cdn-novel.iycdm.com/h5/activity-2018-10-26/close.png) center / contain no-repeat;
- width: 0.32rem;
- height: 0.32rem;
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <main class="main_box">
- <div class="banner">
- <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/banner.png" alt="">
- </div>
- <p class="intro">
- 365天内,全站小说任你畅读!一站式阅读所有小说,无需额外付费!不是每个人都像你这么幸运哦,时间有限,快使用优惠券成为最尊贵的VIP吧~
- </p>
- <input type="hidden" name="is_get" value="{{$is_get}}">
- <div class="coupon" data-value="{{$discount}}">
- @if($discount == 50)
- <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/coupon_pick.png" alt="">
- @else
- <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/coupon_pick_80.png" alt="">
- @endif
- </div>
- @if($discount == 50)
- <p class="gray">原价365元,领券立减50元,仅需<span>315</span>元</p>
- <p class="strong">每天0.8元,全站小说免费看</p>
- @elseif($discount == 80)
- <p class="gray">原价365元,领券立减80元,仅需<span>285</span>元</p>
- <p class="strong">每天0.7元,全站小说免费看</p>
- @endif
- <div>
- @if($code == 0)
- <!-- 活动进行中 -->
- <a class="purchase doing" href="{{$coupons_url}}" id="js-purchase-doing">
- {{-- <img src="https://cdn-novel.iycdm.com/h5/year_doing.png" alt="">--}}
- <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/button.png" alt="">
- </a>
- @elseif($code == 1)
- <!-- 活动未开始 -->
- <a class="purchase undone " href="#">
- <img src="https://cdn-novel.iycdm.com/h5/year_undone.png" alt="">
- </a>
- @elseif($code == 2)
- <!-- 活动结束 -->
- <a class="purchase over " href="#">
- <img src="https://cdn-novel.iycdm.com/h5/year_over.png" alt="">
- </a>
- @elseif($code == 3)
- <!-- 已订购 -->
- <a class="purchase done " href="#">
- <img src="https://cdn-novel.iycdm.com/h5/year_done.png" alt="">
- </a>
- @endif
- </div>
- <div class="book-list">
- <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/shuping.jpg" alt="">
- </div>
- </main>
- <div class="coupon-dialog" style="display:none">
- <div class="dialog-box">
- @if($discount == 80)
- <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/dialog80.png" alt="">
- @else
- <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/dialog50.png" alt="">
- @endif
- <div class="close"></div>
- </div>
- </div>
- </body>
- <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- <script>
- var isget = {{$is_get}}
- isget = parseInt(isget)
- var d = document.querySelector('.coupon-dialog')
- var c = document.querySelector('.close')
- function showDialog() {
- var s = document.body.style
- s.overflow = 'hidden'
- d.style.display = 'block'
- // ajax 自动打开领取框
- }
- c.addEventListener('click', function (e) {
- e.stopPropagation()
- d.style.display = 'none'
- closeDialog()
- }, false)
- function closeDialog() {
- document.body.style.overflow = ''
- }
- if(!isget){
- showDialog()
- }
- </script>
- </html>
|