123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- <!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;
- background: #ff572a;
- }
- p {
- margin: 0;
- padding: 0;
- text-align: center;
- }
- .main_box {
- font-size: 0;
- position: relative;
- }
- .main_box img {
- width: 100%;
- }
- .main_box .box {
- position: relative;
- background: #fef7e9;
- margin: 0 .1rem;
- padding: .2rem .1rem;
- top: -.6rem;
- border-radius: .2rem;
- }
- .main_box .intro {
- font-size: 0.16rem;
- /* font-weight: bold; */
- color: #c9391c;
- padding: 0.06rem;
- text-align: center;
- }
- .main_box .weight {
- font-size: .18rem;
- color: #ff572a;
- font-weight: bold;
- }
- .to-buy {
- display: block;
- width: 90%;
- margin: 0.1rem auto;
- background: #ff572a;
- color: #fff;
- font-size: .18rem;
- font-weight: bolder;
- text-align: center;
- text-decoration: none;
- border-radius: .3rem;
- padding: .1rem 0;
- }
- .over {
- background: #CCCCCC;
- }
- .intro span {
- font-size: 0.16rem;
- display: block;
- }
- .intro.intro-weight {
- font-size: .18rem;
- font-weight: bold;
- }
- .intro-weight span {
- display: inline;
- }
- .intro span.weight {
- font-weight: bolder;
- margin-top: 0.05rem;
- }
- .main_box .coupon {
- width: 90%;
- margin: 0 auto;
- }
- .main_box .gray {
- color: #b4b4b4;
- font-size: 0.14rem;
- }
- .main_box .gray span {
- color: #ff3728;
- font-weight: bolder;
- }
- .main_box .strong {
- font-size: 0.16rem;
- font-weight: 800;
- color: #fe7b27;
- margin: 0.1rem;
- }
- .book-list {
- padding: 0 .2rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .book-list .book-item {
- width: 30%;
- font-size: .14rem;
- }
- .book-item p {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- color: #999;
- }
- .count-down {
- font-size: .14rem;
- text-align: center;
- background: #ffece2;
- padding: .1rem 0;
- margin: 0 .2rem .2rem;
- color: #c9391c;
- }
- .count-down .time {
- display: inline-block;
- background: #ff572a;
- color: #fff;
- width: .2rem;
- height: .2rem;
- border-radius: 3px;
- margin-right: .05rem;
- }
- .banner-box {
- width: 80%;
- margin: .2rem auto;
- }
- .d-none {
- display: none;
- }
- </style>
- </head>
- <body>
- <main class="main_box">
- <div class="banner">
- <img src="https://cdn-novel.iycdm.com/h5/20181106/banner.jpg" alt="">
- </div>
- <div class="box">
- <div class="coupon-box">
- <p class="intro">原价365元年费VIP 仅需68元即可订购</p>
- <p class="intro intro-weight">每天<span class="weight">2毛钱</span> 全站小说免费看</p>
- </div>
- @if($code == 0)
- <a href="{{$url}}" class="to-buy paying">立即订购</a>
- @else
- <a href="#" class="to-buy over">活动过期</a>
- @endif
- <div class="count-down">
- 活动倒计时 |
- <span class="time" id="day">0</span>天
- <span class="time" id="hour">00</span>:
- <span class="time" id="minute">00</span>:
- <span class="time" id="second">00</span>
- </div>
- <div class="banner-box" style="width:100%;margin-bottom:0">
- <img src="https://cdn-novel.iycdm.com/h5/20181106/2.png" alt="">
- </div>
- </div>
- </main>
- </body>
- <script>
- var time_diff = {{$time_diff}}
- var status = {{$code}}
- var p = document.querySelectorAll('.paying');
- var i = 0;
- var j = 0;
- status =parseInt(status);
- time_diff = parseInt(time_diff);
- function times() {
- var oDay = document.querySelector('#day');
- var oHour = document.querySelector('#hour');
- var oMinute = document.querySelector('#minute');
- var oSecond = document.querySelector('#second');
- time_diff--;
- if(time_diff>=0){
- day = Math.floor(time_diff/86400);
- hour = Math.floor((time_diff-day*86400)/3600);
- minute = Math.floor((time_diff - day * 86400 - hour * 3600) / 60);
- second = time_diff - day * 86400 - hour * 3600 - minute * 60;
- oDay.innerHTML = day;
- oHour.innerHTML = hour<10?'0'+hour:hour;
- oMinute.innerHTML = minute<10?'0'+minute:minute;
- oSecond.innerHTML = second<10?'0'+second:second;
- }
- }
- function over() {
- for(i = 0;i<p.length;i++){
- p[i].setAttribute('href','#');
- p[i].setAttribute('class','to-buy over');
- p[i].innerText='活动过期';
- }
- }
- times();
- if(status == 0){
- var timeInterval = setInterval(function () {
- if(time_diff<=0){
- clearInterval(timeInterval);
- over();
- }else{
- times()
- }
- },1000)
- }
- </script>
- </html>
|