C端小程序
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

243 行
4.5 KiB

  1. /* pages/spellGroup/spellGroup.wxss */
  2. page {
  3. height: auto;
  4. overflow: auto;
  5. background: #f89132;
  6. background-image: url('https://s3.cn-northwest-1.amazonaws.com.cn/iformall-net/cimg/spell-bg.png');
  7. background-size: cover;
  8. background-repeat: no-repeat;
  9. }
  10. .content-box{
  11. height: auto;
  12. padding-bottom: 200rpx;
  13. }
  14. .banner{
  15. margin-bottom: 20rpx;
  16. background: none;
  17. border-radius: 16rpx;
  18. }
  19. .banner .bg {
  20. display: block;
  21. width: 100%;
  22. }
  23. image{
  24. padding: 0;
  25. margin: 0;
  26. }
  27. .banner .bannerbg image{
  28. display: none!important;
  29. height: 0;
  30. overflow: hidden;
  31. }
  32. .bannerimg {
  33. display: block;
  34. width: 710rpx;
  35. height: 260rpx;
  36. border-radius: 15rpx;
  37. margin: -132rpx auto 0;
  38. }
  39. .banner .index-slide-view {
  40. margin: -132rpx auto 0;
  41. }
  42. .top{
  43. position: absolute;
  44. top: 30rpx;
  45. width: 710rpx;
  46. height: 260rpx;
  47. background: #fff;
  48. left: 20rpx;
  49. border-radius: 16rpx;
  50. overflow: hidden;
  51. }
  52. .content{
  53. margin-top: 320rpx;
  54. }
  55. .content .sepll-list{
  56. width: 690rpx;
  57. height: 230rpx;
  58. background: #fff;
  59. border-radius: 30rpx;
  60. margin: 30rpx auto 0;
  61. }
  62. .content .spell-left{
  63. width: 230rpx;
  64. height: 230rpx;
  65. float: left;
  66. }
  67. .content .spell-left image{
  68. width: 180rpx;
  69. height: 180rpx;
  70. margin: 25rpx;
  71. }
  72. .content .spell-center{
  73. float: left;
  74. width: 304rpx;
  75. height: 100%;
  76. }
  77. .content .tilte{
  78. font-size:30rpx;
  79. font-family:PingFang-SC-Bold;
  80. font-weight:bold;
  81. color:rgba(51,51,51,1);
  82. line-height:44rpx;
  83. padding-top: 16rpx;
  84. overflow: hidden;
  85. text-overflow:ellipsis;
  86. white-space: nowrap;
  87. }
  88. .content .remark{
  89. width:304rpx;
  90. font-size:24rpx;
  91. font-family:PingFang-SC-Medium;
  92. font-weight:500;
  93. color:rgba(140,140,140,1);
  94. line-height:44rpx;
  95. overflow: hidden;
  96. text-overflow:ellipsis;
  97. white-space: nowrap;
  98. }
  99. .content .spell-num{
  100. width: 95rpx;
  101. border:1px solid rgba(255,50,50,1);
  102. border-radius:10rpx;
  103. font-size:24rpx;
  104. font-family:PingFang-SC-Medium;
  105. font-weight:500;
  106. color:rgba(255,50,50,1);
  107. line-height:30rpx;
  108. margin: 10rpx 0;
  109. text-align: center;
  110. }
  111. .content .price{
  112. overflow: hidden;
  113. margin-top: 10rpx;
  114. }
  115. .content .price01{
  116. display: inline;
  117. font-size:50rpx;
  118. font-family:PingFang-SC-Medium;
  119. font-weight:500;
  120. color:rgba(255,50,50,1);
  121. line-height:44rpx;
  122. }
  123. .content .price02{
  124. display: inline;
  125. font-size: 24rpx;
  126. font-family:PingFang-SC-Medium;
  127. font-weight:500;
  128. text-decoration:line-through;
  129. color:rgba(140,140,140,1);
  130. }
  131. .content .price-num{
  132. display: inline;
  133. }
  134. .content .price-unit{
  135. display: inline;
  136. font-size:24rpx;
  137. margin-right: 10rpx;
  138. }
  139. .content .spell-right{
  140. float: left;
  141. width: 156rpx;
  142. }
  143. .right-button{
  144. width:120rpx;
  145. height:48rpx;
  146. font-size:26rpx;
  147. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  148. border-radius:24rpx;
  149. font-family:PingFang-SC-Medium;
  150. font-weight:500;
  151. text-align: center;
  152. color:rgba(255,255,255,1);
  153. line-height:44rpx;
  154. margin: 110rpx auto 0;
  155. margin-top: 110rpx;
  156. }
  157. .right-text{
  158. font-size:22rpx;
  159. font-family:PingFang-SC-Medium;
  160. font-weight:500;
  161. color:rgba(140,140,140,1);
  162. line-height:60rpx;
  163. text-align: center;
  164. }
  165. .bottom{
  166. width: 690rpx;
  167. height: 85rpx;
  168. position: fixed;
  169. bottom: 26rpx;
  170. left: 30rpx;
  171. /* background:rgba(243,69,58,1); */
  172. border:1px solid rgba(255, 222, 67, 1);
  173. border-radius:40px;
  174. color: #fff;
  175. overflow: hidden;
  176. }
  177. .bottom-left{
  178. width: 50%;
  179. float: left;
  180. margin-left: -1rpx;
  181. text-align: center;
  182. line-height: 85rpx;
  183. font-size:30rpx;
  184. font-family:PingFang-SC-Medium;
  185. font-weight:500;
  186. color:rgba(255,253,245,1);
  187. border-right:1px solid rgba(255, 222, 67, 1);
  188. opacity: 1;
  189. }
  190. .bottom-right{
  191. width: 50%;
  192. float: left;
  193. text-align: center;
  194. line-height: 85rpx;
  195. font-size:30rpx;
  196. font-family:PingFang-SC-Medium;
  197. font-weight:500;
  198. color:rgba(255,253,245,1);
  199. opacity: 1;
  200. }
  201. .spell-bottom{
  202. overflow: hidden;
  203. }
  204. .spell-top{
  205. height: auto;
  206. margin: 0 30rpx;
  207. overflow: hidden;
  208. box-sizing: border-box;
  209. border-bottom: 1rpx solid #EEEEEE;
  210. }
  211. .spell-top-left{
  212. float: left;
  213. width: 60%;
  214. }
  215. .spell-top-right{
  216. float: left;
  217. width: 40%;
  218. }
  219. .top-title{
  220. display: inline;
  221. font-size:24rpx;
  222. font-family:PingFang-SC-Medium;
  223. font-weight:500;
  224. color:rgba(51,51,51,1);
  225. line-height:64rpx;
  226. }
  227. .top-num{
  228. display: inline;
  229. font-size:24rpx;
  230. font-family:PingFang-SC-Medium;
  231. font-weight:500;
  232. color:#FF3232;
  233. line-height:64rpx;
  234. padding-left: 8rpx;
  235. }
  236. .spell-top-right{
  237. text-align: right;
  238. font-size:26rpx;
  239. font-family:PingFang-SC-Medium;
  240. font-weight:500;
  241. color:rgba(255,50,50,1);
  242. line-height:64rpx;
  243. }