giving.blade.php 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <!--
  2. /**
  3. * Created by PhpStorm.
  4. * User: z-yang
  5. * Date: 2019/4/11
  6. * Time: 15:33
  7. */
  8. -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12. <meta charset="UTF-8" />
  13. <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
  14. <meta
  15. name="viewport"
  16. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  17. />
  18. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  19. <title>书币福利</title>
  20. <style>
  21. html,
  22. body {
  23. margin: 0 auto;
  24. padding: 0;
  25. max-width: 450px;
  26. font-size: 100px;
  27. }
  28. html {
  29. background: #ff3628;
  30. }
  31. p {
  32. margin: 0;
  33. }
  34. i {
  35. font-style: normal;
  36. }
  37. a {
  38. text-decoration: none;
  39. }
  40. .container {
  41. position: relative;
  42. padding-bottom: 0.17rem;
  43. }
  44. .container .wrap {
  45. font-size: 0;
  46. width: 95%;
  47. margin: 2rem auto 0;
  48. background: -webkit-gradient(
  49. linear,
  50. left bottom,
  51. left top,
  52. from(white),
  53. to(#fffbe8)
  54. );
  55. background: linear-gradient(0deg, white, #fffbe8);
  56. -webkit-box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
  57. box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
  58. border-radius: 2px;
  59. }
  60. .wrap .text-container {
  61. font-size: 0.18rem;
  62. padding: 0.2rem;
  63. }
  64. .container .wrap img {
  65. width: 100%;
  66. }
  67. .button-wrap {
  68. margin-top: 0.2rem;
  69. }
  70. .button-wrap .to_get {
  71. display: block;
  72. background: #ffdb5f;
  73. color: #8a4b18;
  74. font-size: 0.17rem;
  75. font-weight: bold;
  76. width: 85%;
  77. margin: 0 auto 0.15rem;
  78. padding: 0.15rem 0;
  79. text-align: center;
  80. border-radius: 40px;
  81. }
  82. .button-wrap .get-coin {
  83. background: #fffbe8;
  84. }
  85. .container .wrap .get_notice {
  86. font-size: 0.12rem;
  87. color: #666;
  88. text-align: center;
  89. }
  90. .container .wrap .help_wrap {
  91. background: white;
  92. border: 1px solid #d6cea5;
  93. border-radius: 2px;
  94. width: 90%;
  95. margin: 0.54rem auto 0;
  96. padding: 0.16rem 0 0.44rem;
  97. font-size: 0.13rem;
  98. color: #666;
  99. }
  100. .container .wrap .help_wrap p {
  101. padding: 0 0.18rem;
  102. }
  103. .container .wrap .help_wrap .title {
  104. color: #333;
  105. font-size: 0.15rem;
  106. font-weight: bold;
  107. margin-bottom: 0.15rem;
  108. }
  109. .container .wrap .help_wrap .item {
  110. line-height: 1.8;
  111. }
  112. .container .wrap .help_wrap .item i {
  113. color: #ff4930;
  114. font-size: 0.15rem;
  115. font-weight: bold;
  116. }
  117. .alert {
  118. width: 100%;
  119. height: 100%;
  120. position: absolute;
  121. z-index: 100;
  122. left: 0;
  123. top: 0;
  124. overflow: hidden;
  125. background: rgba(0, 0, 0, 0.4);
  126. }
  127. .alert .content {
  128. width: 80%;
  129. height: 2rem;
  130. position: absolute;
  131. font-size: 0.11rem;
  132. left: 50%;
  133. top: 50%;
  134. margin-left: -40%;
  135. margin-top: -40%;
  136. text-align: center;
  137. background: #f7f7f7;
  138. border-radius: 4px;
  139. overflow: hidden;
  140. }
  141. .content .title {
  142. height: 50px;
  143. line-height: 50px;
  144. font-size: 0.16rem;
  145. text-align: center;
  146. position: relative;
  147. border-bottom: 1px solid #f7f7f7;
  148. background: #ff4930;
  149. color: #fff;
  150. }
  151. .content .title img {
  152. width: 0.32rem;
  153. height: 0.32rem;
  154. position: absolute;
  155. right: 4%;
  156. top: 50%;
  157. transform: translateY(-50%);
  158. }
  159. .content .content-text {
  160. display: flex;
  161. justify-content: center;
  162. align-items: center;
  163. flex-direction: column;
  164. height: calc(100% - 50px);
  165. }
  166. .content-text p {
  167. width: 100%;
  168. }
  169. .content .notice1 {
  170. font-size: 0.18rem;
  171. margin-bottom: 0.2rem;
  172. }
  173. .content .notice2 {
  174. font-size: 0.16rem;
  175. color: #666;
  176. }
  177. .show {
  178. display: block;
  179. }
  180. .hide {
  181. display: none;
  182. }
  183. /*# sourceMappingURL=main.css.map */
  184. </style>
  185. </head>
  186. <body>
  187. <main class="container">
  188. <div class="wrap">
  189. <div class="text-container">
  190. {{ $info }}
  191. </div>
  192. </div>
  193. <div class="button-wrap">
  194. <a class="to_get get-coin" href="/recent">去看书</a>
  195. </div>
  196. </main>
  197. </body>
  198. </html>