C端小程序
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

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