123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- <!--
- ?php
- /**
- * Created by PhpStorm.
- * User: z-yang
- * Date: 2019/9/6
- * Time: 15:54
- */
- -->
- <!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 {
- min-height: 100vh;
- background: #cce8ff;
- }
- html,
- body {
- margin: 0 auto;
- padding: 0;
- max-width: 450px;
- font-size: 100px;
- height:100%;
- background-color:#cce8ff;
- }
- .main_box{
- width:100%;
- position:relative;
- left:0;
- top:0;
- }
- .main_box .bg {
- width: 100%;
- }
- .fee {
- position: absolute;
- left: 49%;
- top: 38.5%;
- font-size: 0.28rem;
- font-weight: bold;
- color: #f74b4b;
- }
- .imgbutton {
- position: absolute;
- width: 65%;
- left: 50%;
- transform: translate(-50%);
- top: 51%;
- }
- .rule-dialog {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background: rgba(0, 0, 0, 0.6);
- z-index: 9999;
- }
- .dialog-content {
- position: fixed;
- width: 90%;
- top: 40%;
- left: 50%;
- transform: translate(-50%, -50%);
- font-size: 0;
- border-radius: 6px;
- }
- .text-container {
- color: white;
- position: absolute;
- font-size: 0.2rem;
- top: 65%;
- left: 50%;
- transform: translate(-50%);
- }
- .dialog-notice {
- text-align: center;
- padding-bottom: 0.2rem;
- color: #facc78;
- }
- .dialog-close {
- background: center / contain url(./imgs/close.png) no-repeat;
- width: 0.32rem;
- height: 0.32rem;
- position: absolute;
- bottom: -12%;
- left: 50%;
- transform: translateX(-50%);
- }
- .d-none {
- display: none;
- }
- </style>
- </head>
- <body>
- <main class="main_box">
- <img src="https://cdn-novel.iycdm.com/crm/freecurrency/bg.jpg" class="bg" />
- <div class="fee">{{$fee}}</div>
- <a href="{{$url}}">
- <img src="https://cdn-novel.iycdm.com/crm/freecurrency/button.png" class="imgbutton" />
- </a>
- </main>
- @if($is_get == 0)
- <div class="rule-dialog" style="display: block;">
- <div class="dialog-content">
- <img src="https://cdn-novel.iycdm.com/crm/freecurrency/alert.png" alt="" width="100%" />
- <div class="text-container">
- {{$fee}}书币已到账
- </div>
- </div>
- </div>
- @endif
- </body>
- <script>
- var dialog = document.querySelector(".rule-dialog");
- function dialogBehavior() {
- dialog.addEventListener(
- "click",
- function() {
- dialog.style.display = "none";
- },
- false
- );
- }
- function init() {
- dialogBehavior();
- }
- init();
- </script>
- </html>
|