C端小程序
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

291 行
5.3 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. .loading {
  15. text-align: center;
  16. height: 80rpx;
  17. line-height: 80rpx;
  18. font-size: 26rpx;
  19. color: #fff;
  20. }
  21. .loading image {
  22. width: 60rpx;
  23. height: 60rpx;
  24. vertical-align: middle;
  25. margin-right: 10rpx;
  26. }
  27. .banner{
  28. margin-bottom: 20rpx;
  29. background: none;
  30. border-radius: 16rpx;
  31. }
  32. .banner .bg {
  33. display: block;
  34. width: 100%;
  35. }
  36. image{
  37. padding: 0;
  38. margin: 0;
  39. }
  40. .banner .bannerbg image{
  41. display: none!important;
  42. height: 0;
  43. overflow: hidden;
  44. }
  45. .bannerimg {
  46. display: block;
  47. width: 710rpx;
  48. height: 260rpx;
  49. border-radius: 15rpx;
  50. margin: -132rpx auto 0;
  51. }
  52. .banner .index-slide-view {
  53. margin: -132rpx auto 0;
  54. }
  55. .top{
  56. position: absolute;
  57. top: 30rpx;
  58. width: 710rpx;
  59. height: 260rpx;
  60. background: #fff;
  61. left: 20rpx;
  62. border-radius: 16rpx;
  63. overflow: hidden;
  64. }
  65. .content .sepll-list{
  66. width: 690rpx;
  67. height: 230rpx;
  68. background: #fff;
  69. border-radius: 30rpx;
  70. margin: 30rpx auto 0;
  71. }
  72. .content .spell-left{
  73. width: 230rpx;
  74. height: 230rpx;
  75. float: left;
  76. }
  77. .content .spell-left image{
  78. width: 180rpx;
  79. height: 180rpx;
  80. margin: 25rpx;
  81. }
  82. .content .spell-center{
  83. float: left;
  84. width: 304rpx;
  85. height: 100%;
  86. }
  87. .content .tilte{
  88. font-size:30rpx;
  89. font-family:PingFang-SC-Bold;
  90. font-weight:bold;
  91. color:rgba(51,51,51,1);
  92. line-height:44rpx;
  93. padding-top: 16rpx;
  94. overflow: hidden;
  95. text-overflow:ellipsis;
  96. white-space: nowrap;
  97. }
  98. .content .remark{
  99. width:304rpx;
  100. font-size:24rpx;
  101. font-family:PingFang-SC-Medium;
  102. font-weight:500;
  103. color:rgba(140,140,140,1);
  104. line-height:44rpx;
  105. overflow: hidden;
  106. text-overflow:ellipsis;
  107. white-space: nowrap;
  108. }
  109. .content .spell-num{
  110. width: 95rpx;
  111. border:1px solid rgba(255,50,50,1);
  112. border-radius:10rpx;
  113. font-size:24rpx;
  114. font-family:PingFang-SC-Medium;
  115. font-weight:500;
  116. color:rgba(255,50,50,1);
  117. line-height:30rpx;
  118. margin: 10rpx 0;
  119. text-align: center;
  120. }
  121. .content .price{
  122. overflow: hidden;
  123. margin-top: 10rpx;
  124. }
  125. .content .price01{
  126. font-size:50rpx;
  127. font-family:PingFang-SC-Medium;
  128. font-weight:500;
  129. color:rgba(255,50,50,1);
  130. line-height:44rpx;
  131. }
  132. .content .price02{
  133. font-size: 24rpx;
  134. font-family:PingFang-SC-Medium;
  135. font-weight:500;
  136. text-decoration:line-through;
  137. color:rgba(140,140,140,1);
  138. }
  139. .content .price-num{
  140. display: inline;
  141. }
  142. .content .price-unit{
  143. display: inline;
  144. font-size:24rpx;
  145. margin-right: 10rpx;
  146. }
  147. .content .spell-right{
  148. float: left;
  149. width: 156rpx;
  150. }
  151. .right-button{
  152. width:120rpx;
  153. height:48rpx;
  154. font-size:26rpx;
  155. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  156. border-radius:24rpx;
  157. font-family:PingFang-SC-Medium;
  158. font-weight:500;
  159. text-align: center;
  160. color:rgba(255,255,255,1);
  161. line-height:44rpx;
  162. margin: 110rpx auto 0;
  163. margin-top: 110rpx;
  164. }
  165. .right-text{
  166. font-size:22rpx;
  167. font-family:PingFang-SC-Medium;
  168. font-weight:500;
  169. color:rgba(140,140,140,1);
  170. line-height:60rpx;
  171. text-align: center;
  172. }
  173. .bottom{
  174. width: 690rpx;
  175. height: 85rpx;
  176. position: fixed;
  177. bottom: 26rpx;
  178. left: 30rpx;
  179. /* background:rgba(243,69,58,1); */
  180. border:1px solid rgba(255, 222, 67, 1);
  181. border-radius:40px;
  182. color: #fff;
  183. overflow: hidden;
  184. }
  185. .bottom-left{
  186. width: 50%;
  187. float: left;
  188. margin-left: -1rpx;
  189. text-align: center;
  190. line-height: 85rpx;
  191. font-size:30rpx;
  192. font-family:PingFang-SC-Medium;
  193. font-weight:500;
  194. color:rgba(255,253,245,1);
  195. border-right:1px solid rgba(255, 222, 67, 1);
  196. opacity: 1;
  197. }
  198. .bottom-right{
  199. width: 50%;
  200. float: left;
  201. text-align: center;
  202. line-height: 85rpx;
  203. font-size:30rpx;
  204. font-family:PingFang-SC-Medium;
  205. font-weight:500;
  206. color:rgba(255,253,245,1);
  207. opacity: 1;
  208. }
  209. .spell-bottom{
  210. overflow: hidden;
  211. }
  212. .spell-top{
  213. height: auto;
  214. margin: 0 30rpx;
  215. overflow: hidden;
  216. box-sizing: border-box;
  217. border-bottom: 1rpx solid #EEEEEE;
  218. }
  219. .spell-top-left{
  220. float: left;
  221. width: 60%;
  222. }
  223. .spell-top-right{
  224. float: left;
  225. width: 40%;
  226. }
  227. .top-title{
  228. display: inline;
  229. font-size:24rpx;
  230. font-family:PingFang-SC-Medium;
  231. font-weight:500;
  232. color:rgba(51,51,51,1);
  233. line-height:64rpx;
  234. }
  235. .top-num{
  236. display: inline;
  237. font-size:24rpx;
  238. font-family:PingFang-SC-Medium;
  239. font-weight:500;
  240. color:#FF3232;
  241. line-height:64rpx;
  242. padding-left: 8rpx;
  243. }
  244. .spell-top-right{
  245. text-align: right;
  246. font-size:26rpx;
  247. font-family:PingFang-SC-Medium;
  248. font-weight:500;
  249. color:rgba(255,50,50,1);
  250. line-height:64rpx;
  251. }
  252. .no-data01{
  253. width: 690rpx;
  254. padding-top: 174rpx;
  255. height: calc(100vh - 460rpx);
  256. background: #fff;
  257. margin: 0 auto;
  258. border-radius:15rpx;
  259. box-sizing: border-box;
  260. margin-top: 320rpx;
  261. }
  262. .no-data{
  263. width: 690rpx;
  264. padding-top: 174rpx;
  265. height: calc(100vh - 160rpx);
  266. background: #fff;
  267. margin: 0 auto;
  268. border-radius:15rpx;
  269. box-sizing: border-box;
  270. margin-top:20rpx;
  271. }
  272. .no-data01 image{
  273. width: 261rpx;
  274. height: 272rpx;
  275. display: block;
  276. margin: 0 auto;
  277. }
  278. .no-data image{
  279. width: 261rpx;
  280. height: 272rpx;
  281. display: block;
  282. margin: 0 auto;
  283. }
  284. .no-data-text{
  285. text-align: center;
  286. font-size:34rpx;
  287. font-family:PingFang-SC-Medium;
  288. font-weight:500;
  289. color:rgba(0,0,0,1);
  290. }