forceGuidePersonalAccount.blade.php 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  8. />
  9. <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
  10. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  11. <title>{{$title or '阅读福利'}}</title>
  12. <style>
  13. body,
  14. html,
  15. p {
  16. margin: 0;
  17. padding: 0;
  18. }
  19. html {
  20. background: #e6e6e6;
  21. }
  22. i {
  23. font-style: normal;
  24. }
  25. .title-wrap {
  26. text-align: center;
  27. margin-top: 25px;
  28. }
  29. .title-wrap .title {
  30. font-size: 20px;
  31. color: #1a1a1a;
  32. margin-bottom: 10px;
  33. }
  34. .title-wrap span {
  35. font-size: 15px;
  36. color: #666;
  37. padding: 5px 10px;
  38. background: rgba(255, 255, 255, 0.3);
  39. border-radius: 12px;
  40. }
  41. .title-wrap span i {
  42. font-weight: bold;
  43. color: #ff6060;
  44. font-size: 17px;
  45. }
  46. .qrcode-wrap {
  47. font-size: 0;
  48. margin-top: 20px;
  49. text-align: center;
  50. }
  51. .qrcode-wrap img {
  52. width: 152px;
  53. height: 152px;
  54. margin-bottom: 10px;
  55. }
  56. .qrcode-wrap .qrcode-title {
  57. font-size: 14px;
  58. color: #333;
  59. margin-bottom: 4px;
  60. }
  61. .qrcode-wrap span {
  62. font-size: 12px;
  63. color: #999;
  64. }
  65. .notice-wrap {
  66. margin: 35px 10px 40px;
  67. background: rgba(255, 255, 255, 0.3);
  68. padding: 20px 12px;
  69. }
  70. .notice-wrap .title {
  71. font-size: 16px;
  72. color: #333;
  73. margin-bottom: 15px;
  74. }
  75. .notice-wrap .line {
  76. font-size: 12px;
  77. color: #333;
  78. line-height: 1.8;
  79. }
  80. .notice-wrap .line span {
  81. color: #ff6060;
  82. font-weight: bold;
  83. font-size: 13px;
  84. }
  85. .notice-wrap .line i {
  86. font-weight: bold;
  87. }
  88. .operator-wrap {
  89. margin: 0 10px 20px;
  90. display: -webkit-box;
  91. display: -ms-flexbox;
  92. display: flex;
  93. -webkit-box-pack: justify;
  94. -ms-flex-pack: justify;
  95. justify-content: space-between;
  96. -webkit-box-align: center;
  97. -ms-flex-align: center;
  98. align-items: center;
  99. }
  100. .operator-wrap a {
  101. color: #666;
  102. text-decoration: none;
  103. text-align: center;
  104. height: 40px;
  105. line-height: 40px;
  106. border-radius: 4px;
  107. border: 1px solid #666;
  108. background: #e6e6e6;
  109. font-size: 15px;
  110. }
  111. .operator-wrap a:not(:last-child) {
  112. margin-right: 12px;
  113. }
  114. .operator-wrap .prev,
  115. .operator-wrap .catalog {
  116. width: 82px;
  117. }
  118. .operator-wrap .ignore {
  119. -webkit-box-flex: 1;
  120. -ms-flex: 1;
  121. flex: 1;
  122. }
  123. @media screen and (max-width: 320px) {
  124. .operator-wrap .prev,
  125. .operator-wrap .catalog {
  126. width: 62px;
  127. }
  128. }
  129. </style>
  130. </head>
  131. <body>
  132. <div class="title-wrap">
  133. <p class="title">恭喜您获得微信VIP专属福利</p>
  134. <span>扫一扫赠送<i>200</i>书币</span>
  135. </div>
  136. <div class="qrcode-wrap">
  137. <img
  138. src="{{$img}}"
  139. alt=""
  140. />
  141. <p class="qrcode-title">微信阅读小管家</p>
  142. <span>(长按图片,识别二维码添加微信好友,不会打扰您哦~)</span>
  143. </div>
  144. <div class="notice-wrap">
  145. <p class="title">我是微信阅读小管家</p>
  146. <p class="line">
  147. 1. <i>免费书币</i>:成功添加微信好友即可赠送<span>200</span>书币;
  148. </p>
  149. <p class="line">
  150. 2. <i>优先答疑</i>:找不到看过的书啦?看书没钱啦?我都可以帮您哦!
  151. </p>
  152. <p class="line">
  153. 3.
  154. <i>帮您找书</i
  155. >:总裁豪门、婚恋出轨、甜蜜宠文等,提供最新最优质小说,拒绝书荒!
  156. </p>
  157. <p class="line">4. <i>书币福利</i>:每月获得免费书币,不要钱!</p>
  158. </div>
  159. <div class="operator-wrap">
  160. <a href="{{$link['prev']}}" class="operator-item prev">上一章</a>
  161. <a href="{{$link['catalog']}}" class="operator-item catalog">目录</a>
  162. <a href="{{$link['next']}}" class="operator-item ignore">点击忽略,继续阅读&gt;</a>
  163. </div>
  164. </body>
  165. </html>