123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- <!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;
- }
- body {
- background: #fef1eb;
- }
- .main_box {
- font-size: 0.15rem;
- position: relative;
- text-align: center;
- color: #c94918;
- line-height: 0.11rem;
- }
- .main_box p:nth-child(2) {
- font-weight: bold;
- }
- .main_box img {
- width: 100%;
- }
- .content {
- margin: 20px 0;
- }
- .content-img {
- margin-bottom: 50px;
- }
- .bottom {
- position: fixed;
- bottom: 0px;
- width: 100%;
- height: 50px;
- background-color: white;
- line-height: 50px;
- display: flex;
- justify-content: space-between;
- font-size: 0.15rem;
- }
- .bottom div {
- padding: 0 20px;
- color: #333;
- display: flex;
- position: relative;
- }
- .bottom div:nth-child(1) {
- color: #f85530;
- font-weight: bold;
- font-size: 0.2rem;
- }
- .bottom div:nth-child(3) {
- background-color: #f85530;
- color: white;
- font-weight: bold;
- }
- .sign {
- color: white;
- background-color: #f85530;
- border-radius: 100%;
- position: absolute;
- top: 33%;
- left: 0;
- line-height: 0.13rem;
- padding: 0.02rem 0.025rem;
- }
- .dialog {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background: rgba(0, 0, 0, 0.6);
- z-index: 9999;
- }
- .dialog .dialog_content {
- position: absolute;
- top: 35%;
- left: 50%;
- transform: translate(-50%);
- width: 80%;
- }
- .pay a{
- text-decoration: none;
- color: white;
- }
- </style>
- </head>
- <body>
- <main class="main_box">
- <img src="https://cdn-novel.iycdm.com/h5/activity-crm/year-banner.jpg" alt="" />
- <div class="content">
- <p>原价365,领券立减80元,仅需285元</p>
- <p>每天不到0.8元,全年免费看</p>
- </div>
- <img src="https://cdn-novel.iycdm.com/h5/activity-crm/year-80.png" alt="" />
- <img src="https://cdn-novel.iycdm.com/h5/activity-crm/year-footer.jpg" class="content-img" alt="" />
- <div class="bottom">
- <div>¥285</div>
- <div>
- <span class="sign">√</span>
- 使用
- <span style="color:#f85530;padding: 0">80</span>
- 元优惠券
- </div>
- <div class="pay"><a href="{{$url}}">立即订购</a></div>
- </div>
- @if(!$is_get)
- <div class="dialog">
- <img src="https://cdn-novel.iycdm.com/h5/activity-crm/year-alert.png" class="dialog_content" />
- </div>
- @endif
- </main>
- </body>
- <script>
- var is_get = {{$is_get}}
- is_get = parseInt(is_get);
- var dialogClose = document.querySelector(".dialog");
- function dialogBehavior() {
- dialogClose.addEventListener(
- "click",
- function() {
- dialogClose.style.display = "none";
- },
- false
- );
- }
- function init() {
- dialogBehavior();
- }
- init();
- </script>
- </html>
|