index.blade.php 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>领红包</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7. {{-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>--}}
  8. <style>
  9. *{
  10. padding: 0;
  11. margin: 0;
  12. }
  13. body{
  14. min-height: 100vh;
  15. background: url(https://cdn-novel.iycdm.com/distribution/welfare/background.jpg) top/100% no-repeat #a62656;
  16. }
  17. .active{
  18. position: absolute;
  19. width: 32vw;
  20. height: 32vw;
  21. top: 70VW;
  22. left: 35vw;
  23. }
  24. .result img{
  25. width: 80vw;
  26. display: block;
  27. margin: 30vw auto 0;
  28. }
  29. .result{
  30. position: absolute;
  31. top: 0;
  32. left: 0;
  33. width: 100vw;
  34. height: 100vh;
  35. background: rgba(0,0,0,0.7);
  36. }
  37. .hide{
  38. display: none;
  39. }
  40. .text{
  41. position: absolute;
  42. text-align: center;
  43. font-size: 5vw;
  44. width: 100%;
  45. top: 80vw;
  46. color: #333;
  47. font-weight: bold;
  48. }
  49. .amount{
  50. color: #FF0016;
  51. font-size: 10vw;
  52. vertical-align: -1vw;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <div class="active"></div>
  58. <div class="prize hide result">
  59. <img src="https://cdn-novel.iycdm.com/distribution/welfare/get.png" >
  60. <p class="text"><span class="amount">{{$amount}}</span> <span>元红包</span></p>
  61. </div>
  62. <div class="no-prize hide result">
  63. <img src="https://cdn-novel.iycdm.com/distribution/welfare/over.png" >
  64. </div>
  65. <script>
  66. var options = {!! $options!!};
  67. document.querySelector('.active').addEventListener('click',function () {
  68. if(options.is_access) {
  69. //axios()
  70. document.querySelector('.prize').className = 'prize result'
  71. }else{
  72. document.querySelector('.no-prize').className = 'no-prize result'
  73. }
  74. })
  75. </script>
  76. </body>
  77. </html>