抖音c端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

266 lines
4.1 KiB

  1. @import "../../app.ttss";
  2. .couponBox{
  3. height: 100%;
  4. margin-top: 20rpx;
  5. background:linear-gradient(180deg,rgba(253,131,45,1) 0%,rgba(254,74,22,1) 100%);
  6. }
  7. page {
  8. background: linear-gradient(180deg,rgba(253,131,45,1) 0%,rgba(254,74,22,1) 100%);
  9. height: auto !important;
  10. }
  11. .couponbg {
  12. position: relative;
  13. background: #fff;
  14. overflow: hidden;
  15. width: 92%;
  16. margin: 0 auto 6%;
  17. border-radius: 16rpx;
  18. padding-bottom: 20rpx;
  19. }
  20. .coedTiem{
  21. text-align: center;
  22. color: rgba(253,131,45,1);
  23. margin-bottom: 20rpx;
  24. }
  25. .title {
  26. line-height: 36rpx;
  27. text-align: center;
  28. padding-top: 54rpx;
  29. font-size: 32rpx;
  30. color: #1f2d3d;
  31. letter-spacing: 0;
  32. }
  33. .subtitle {
  34. color: #7f8b9e;
  35. font-size: 26rpx;
  36. line-height: 30rpx;
  37. margin-top: 16rpx;
  38. text-align: center;
  39. }
  40. .line {
  41. height: 10rpx;
  42. display: block;
  43. width: 100%;
  44. margin-top: 20rpx;
  45. }
  46. .panel, .zhuangtai image {
  47. width:500rpx;
  48. display:block;
  49. border-radius:10rpx;
  50. margin:0 auto;
  51. padding:0;
  52. z-index:10000;
  53. }
  54. .panel{
  55. position: relative;
  56. }
  57. .pane2 {
  58. background: #fff;
  59. opacity: 0.6;
  60. }
  61. .pane2 image {
  62. width: 500rpx;
  63. display: block;
  64. margin: 40rpx auto 0;
  65. }
  66. .barcode {
  67. height: 100rpx;
  68. width: 500rpx;
  69. margin: 0 auto;
  70. }
  71. .barnum {
  72. height: 46rpx;
  73. line-height: 46rpx;
  74. font-size: 24rpx;
  75. text-align: center;
  76. letter-spacing: 2rpx;
  77. white-space: nowrap;
  78. color: #7f7f7f;
  79. }
  80. .barnum text {
  81. display: inline-block;
  82. vertical-align: top;
  83. font-size: 24rpx;
  84. color: #999;
  85. letter-spacing: 0;
  86. margin-right: 6rpx;
  87. }
  88. .barcode > canvas {
  89. width: 500rpx;
  90. height: 100rpx;
  91. }
  92. .qrcode {
  93. position: relative;
  94. height: 360rpx;
  95. display: flex;
  96. flex-direction: column;
  97. justify-content: flex-end;
  98. align-items: center;
  99. }
  100. .qrcode > canvas {
  101. width: 350rpx;
  102. height: 350rpx;
  103. }
  104. .jine {
  105. color: #f96563 !important;
  106. font-size: 36rpx !important;
  107. }
  108. .buy-view {
  109. background: #fff;
  110. position: fixed;
  111. padding-top: 10rpx;
  112. height: 98rpx;
  113. bottom: 0rpx;
  114. left: 0;
  115. right: 0;
  116. }
  117. .buy {
  118. background: #fff;
  119. height: 88rpx;
  120. width: 100%;
  121. margin: 0 auto 40rpx;
  122. line-height: 88rpx;
  123. border: 2rpx solid #ccc;
  124. border-radius: 10px;
  125. font-size: 36rpx;
  126. color: #333;
  127. letter-spacing: 0;
  128. }
  129. .mai {
  130. font-size: 24rpx;
  131. color: #919191;
  132. letter-spacing: 0;
  133. }
  134. .remark {
  135. padding-top: 17rpx;
  136. font-size: 24rpx;
  137. color: #333;
  138. letter-spacing: 0;
  139. line-height: 42rpx;
  140. }
  141. /* 小游戏入口
  142. */
  143. .game-entry{
  144. width: 690rpx;
  145. height: 140rpx;
  146. margin: 0 auto;
  147. border-radius: 14rpx;
  148. box-shadow: 1px 4px 20px #C4C4C4;
  149. background: #fff;
  150. }
  151. .game {
  152. position: relative;
  153. width: 750rpx;
  154. height: 200rpx;
  155. margin: 0 auto;
  156. padding-top: 30rpx;
  157. box-sizing: border-box;
  158. }
  159. .gameimg{
  160. position: absolute;
  161. right: 25rpx;
  162. top: -14rpx;
  163. width: 250rpx;
  164. }
  165. .game text {
  166. display: block;
  167. position: relative;
  168. }
  169. .game text:nth-of-type(1) {
  170. display: inline-block;
  171. padding-top: 39rpx;
  172. padding-left: 70rpx;
  173. font-size: 32rpx;
  174. color: #333;
  175. line-height: 36rpx;
  176. }
  177. .game text:nth-of-type(2) {
  178. font-size: 24rpx;
  179. color: #999;
  180. line-height: 24rpx;
  181. padding-left: 70rpx;
  182. }
  183. .notes view:nth-child(1) {
  184. height: 87rpx;
  185. line-height: 87rpx;
  186. background: #fff;
  187. }
  188. .notes {
  189. width: 92%;
  190. margin: 0 auto;
  191. }
  192. .notes view:nth-child(1) text {
  193. color: #333;
  194. letter-spacing: 0;
  195. font-size: 30rpx;
  196. height: 70rpx;
  197. line-height: 70rpx;
  198. }
  199. .notes view:nth-child(2) {
  200. background: #fff;
  201. display: flex;
  202. flex-direction: column;
  203. }
  204. .notes view:nth-child(2)>text {
  205. font-size: 24rpx;
  206. color: #919191;
  207. letter-spacing: 0;
  208. line-height: 42rpx;
  209. }
  210. .closeRq{
  211. position: absolute;
  212. width: 420rpx;
  213. height: 420rpx;
  214. line-height: 420rpx;
  215. text-align: center;
  216. background-color: rgba(0, 0, 0, 0.8);
  217. left: 50%; top: 42%;
  218. transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
  219. z-index: 10000000;
  220. color: #fff;
  221. font-size: 38rpx;
  222. }
  223. .updataRqCode{
  224. width: 80rpx !important;
  225. height: 80rpx;
  226. margin-top: calc(50%-80rpx) !important;
  227. margin-left: calc(50%-80rpx) !important;
  228. display: inline-block !important;
  229. }
  230. .upDataRq{
  231. position: absolute;
  232. width: 100%;
  233. text-align: center;
  234. height: 80rpx;
  235. color: #fff ;
  236. top: 20%;
  237. left: 0;
  238. }
  239. /* rich-text img{
  240. max-width: 100%;
  241. } */