bindHkFreeCurrencyV2.blade.php 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <!--
  2. ?php
  3. /**
  4. * Created by PhpStorm.
  5. * User: z-yang
  6. * Date: 2019/9/6
  7. * Time: 15:54
  8. */
  9. -->
  10. <!DOCTYPE html>
  11. <html lang="en">
  12. <head>
  13. <meta charset="UTF-8" />
  14. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  15. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  16. <title>阅读福利</title>
  17. <style>
  18. html {
  19. min-height: 100vh;
  20. background: #cce8ff;
  21. }
  22. html,
  23. body {
  24. margin: 0 auto;
  25. padding: 0;
  26. max-width: 450px;
  27. font-size: 100px;
  28. height:100%;
  29. background-color:#cce8ff;
  30. }
  31. .main_box{
  32. width:100%;
  33. position:relative;
  34. left:0;
  35. top:0;
  36. }
  37. .main_box .bg {
  38. width: 100%;
  39. }
  40. .fee {
  41. position: absolute;
  42. left: 49%;
  43. top: 38.5%;
  44. font-size: 0.28rem;
  45. font-weight: bold;
  46. color: #f74b4b;
  47. }
  48. .imgbutton {
  49. position: absolute;
  50. width: 65%;
  51. left: 50%;
  52. transform: translate(-50%);
  53. top: 51%;
  54. }
  55. .rule-dialog {
  56. position: fixed;
  57. top: 0;
  58. bottom: 0;
  59. left: 0;
  60. right: 0;
  61. background: rgba(0, 0, 0, 0.6);
  62. z-index: 9999;
  63. }
  64. .dialog-content {
  65. position: fixed;
  66. width: 90%;
  67. top: 40%;
  68. left: 50%;
  69. transform: translate(-50%, -50%);
  70. font-size: 0;
  71. border-radius: 6px;
  72. }
  73. .text-container {
  74. color: white;
  75. position: absolute;
  76. font-size: 0.2rem;
  77. top: 65%;
  78. left: 50%;
  79. transform: translate(-50%);
  80. }
  81. .dialog-notice {
  82. text-align: center;
  83. padding-bottom: 0.2rem;
  84. color: #facc78;
  85. }
  86. .dialog-close {
  87. background: center / contain url(./imgs/close.png) no-repeat;
  88. width: 0.32rem;
  89. height: 0.32rem;
  90. position: absolute;
  91. bottom: -12%;
  92. left: 50%;
  93. transform: translateX(-50%);
  94. }
  95. .d-none {
  96. display: none;
  97. }
  98. </style>
  99. </head>
  100. <body>
  101. <main class="main_box">
  102. <img src="https://cdn-novel.iycdm.com/crm/freecurrency/bg.jpg" class="bg" />
  103. <div class="fee">{{$fee}}</div>
  104. <a href="{{$url}}">
  105. <img src="https://cdn-novel.iycdm.com/crm/freecurrency/button.png" class="imgbutton" />
  106. </a>
  107. </main>
  108. @if($is_get == 0)
  109. <div class="rule-dialog" style="display: block;">
  110. <div class="dialog-content">
  111. <img src="https://cdn-novel.iycdm.com/crm/freecurrency/alert.png" alt="" width="100%" />
  112. <div class="text-container">
  113. {{$fee}}书币已到账
  114. </div>
  115. </div>
  116. </div>
  117. @endif
  118. </body>
  119. <script>
  120. var dialog = document.querySelector(".rule-dialog");
  121. function dialogBehavior() {
  122. dialog.addEventListener(
  123. "click",
  124. function() {
  125. dialog.style.display = "none";
  126. },
  127. false
  128. );
  129. }
  130. function init() {
  131. dialogBehavior();
  132. }
  133. init();
  134. </script>
  135. </html>