thanksGivingDayActivity.blade.php 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  7. <title>感恩回馈-好礼驾到</title>
  8. <style>
  9. html,
  10. body {
  11. margin: 0 auto;
  12. padding: 0;
  13. max-width: 450px;
  14. font-size: 100px;
  15. }
  16. html {
  17. background: #ffd4af;
  18. }
  19. .main_box {
  20. font-size: 0;
  21. position: relative;
  22. }
  23. .main_box img {
  24. width: 100%;
  25. }
  26. .recharge_box_one a {
  27. position: absolute;
  28. width: 80%;
  29. height: 0.75rem;
  30. top: 72%;
  31. left: 50%;
  32. transform: translateX(-50%);
  33. z-index: 999;
  34. }
  35. .recharge-list-box {
  36. font-size: 0;
  37. position: absolute;
  38. top: 41%;
  39. left: 50%;
  40. transform: translateX(-50%);
  41. width: 90%;
  42. }
  43. .recharge-list-box img {
  44. -webkit-tap-highlight-color: transparent;
  45. }
  46. .d_none {
  47. display: none;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <main class="main_box">
  53. <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/banner.jpg" alt=""/>
  54. <div class="recharge-list-box">
  55. @if($charge_count == 0)
  56. <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/01-focus.png"
  57. data-src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/01.png"
  58. data-active="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/01-focus.png"
  59. data-check="1"
  60. data-href="{{$url['slow']}}"
  61. alt=""/>
  62. @endif
  63. <img
  64. src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/02.png"
  65. data-src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/02.png"
  66. data-active="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/02-focus.png"
  67. data-check="0"
  68. data-href="{{$url['height']}}"
  69. alt=""/>
  70. </div>
  71. <div class="recharge_box_one">
  72. @if($code == 0)
  73. <!-- 活动进行中 -->
  74. @if($charge_count == 0)
  75. <a href="{{$url['slow']}}" class="beginning" id="pay">
  76. <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/doing.png" alt=""/>
  77. </a>
  78. @else
  79. <a href="{{$url['height']}}" class="beginning" id="pay">
  80. <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/doing.png" alt=""/>
  81. </a>
  82. @endif
  83. @elseif($code == 1)
  84. <!-- 活动未开始 -->
  85. <a href="javascript:void(0)" class="un_begin" id="pay">
  86. <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/undone.png" alt=""/>
  87. </a>
  88. @else
  89. <!-- 活动结束 -->
  90. <a href="javascript:void(0)" class="over" id="pay">
  91. <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/over.png" alt=""/>
  92. </a>
  93. @endif
  94. </div>
  95. </main>
  96. </body>
  97. <script>
  98. var d = document;
  99. var i = d.querySelectorAll(".recharge-list-box img");
  100. var pay = d.querySelector("#pay");
  101. for (var j = 0; j < i.length; j++) {
  102. (function (index) {
  103. i[index].addEventListener(
  104. "click",
  105. function () {
  106. resetAllStatus();
  107. var s = this.getAttribute("data-check");
  108. var a = this.getAttribute("data-active");
  109. var n = this.getAttribute("data-src");
  110. pay.setAttribute("href",this.getAttribute("data-href"));
  111. if (s === "0") {
  112. this.setAttribute("src", a);
  113. this.setAttribute("data-check", "1");
  114. } else {
  115. this.setAttribute("src", n);
  116. this.setAttribute("data-check", "0");
  117. }
  118. },
  119. false
  120. );
  121. })(j);
  122. }
  123. function resetAllStatus() {
  124. for (var j = 0; j < i.length; j++) {
  125. (function (index) {
  126. var n = i[index].getAttribute("data-src");
  127. i[index].setAttribute("data-check", "0");
  128. i[index].setAttribute("src", n);
  129. })(j);
  130. }
  131. }
  132. </script>
  133. </html>