C端小程序
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.

316 righe
5.7 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. display: inline;
  127. font-size:50rpx;
  128. font-family:PingFang-SC-Medium;
  129. font-weight:500;
  130. color:rgba(255,50,50,1);
  131. line-height:44rpx;
  132. }
  133. .content .price02{
  134. display: inline;
  135. font-size: 24rpx;
  136. font-family:PingFang-SC-Medium;
  137. font-weight:500;
  138. text-decoration:line-through;
  139. color:rgba(140,140,140,1);
  140. }
  141. .content .price-num{
  142. display: inline;
  143. }
  144. .content .price-unit{
  145. display: inline;
  146. font-size:24rpx;
  147. margin-right: 10rpx;
  148. }
  149. .content .spell-right{
  150. float: left;
  151. width: 156rpx;
  152. }
  153. .right-button{
  154. width:120rpx;
  155. height:48rpx;
  156. font-size:26rpx;
  157. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  158. border-radius:24rpx;
  159. font-family:PingFang-SC-Medium;
  160. font-weight:500;
  161. text-align: center;
  162. color:rgba(255,255,255,1);
  163. line-height:44rpx;
  164. margin: 110rpx auto 0;
  165. margin-top: 110rpx;
  166. }
  167. .right-text{
  168. font-size:22rpx;
  169. font-family:PingFang-SC-Medium;
  170. font-weight:500;
  171. color:rgba(140,140,140,1);
  172. line-height:60rpx;
  173. text-align: center;
  174. }
  175. .bottom{
  176. width: 690rpx;
  177. height: 85rpx;
  178. position: fixed;
  179. bottom: 26rpx;
  180. left: 30rpx;
  181. /* background:rgba(243,69,58,1); */
  182. border:1px solid rgba(255, 222, 67, 1);
  183. border-radius:40px;
  184. color: #fff;
  185. overflow: hidden;
  186. }
  187. .bottom-left{
  188. width: 50%;
  189. float: left;
  190. margin-left: -1rpx;
  191. text-align: center;
  192. line-height: 85rpx;
  193. font-size:30rpx;
  194. font-family:PingFang-SC-Medium;
  195. font-weight:500;
  196. color:rgba(255,253,245,1);
  197. border-right:1px solid rgba(255, 222, 67, 1);
  198. opacity: 1;
  199. }
  200. .bottom-right{
  201. width: 50%;
  202. float: left;
  203. text-align: center;
  204. line-height: 85rpx;
  205. font-size:30rpx;
  206. font-family:PingFang-SC-Medium;
  207. font-weight:500;
  208. color:rgba(255,253,245,1);
  209. opacity: 1;
  210. }
  211. .spell-bottom{
  212. overflow: hidden;
  213. }
  214. .spell-top{
  215. height: auto;
  216. margin: 0 30rpx;
  217. overflow: hidden;
  218. box-sizing: border-box;
  219. border-bottom: 1rpx solid #EEEEEE;
  220. }
  221. .spell-top-left{
  222. float: left;
  223. width: 60%;
  224. }
  225. .spell-top-right{
  226. float: left;
  227. width: 40%;
  228. }
  229. .top-title{
  230. display: inline;
  231. font-size:24rpx;
  232. font-family:PingFang-SC-Medium;
  233. font-weight:500;
  234. color:rgba(51,51,51,1);
  235. line-height:64rpx;
  236. }
  237. .top-num{
  238. display: inline;
  239. font-size:24rpx;
  240. font-family:PingFang-SC-Medium;
  241. font-weight:500;
  242. color:#FF3232;
  243. line-height:64rpx;
  244. padding-left: 8rpx;
  245. }
  246. .spell-top-right{
  247. text-align: right;
  248. font-size:26rpx;
  249. font-family:PingFang-SC-Medium;
  250. font-weight:500;
  251. color:rgba(255,50,50,1);
  252. line-height:64rpx;
  253. }
  254. .no-data01{
  255. width: 690rpx;
  256. padding-top: 174rpx;
  257. height: calc(100vh - 460rpx);
  258. background: #fff;
  259. margin: 0 auto;
  260. border-radius:15rpx;
  261. box-sizing: border-box;
  262. margin-top: 320rpx;
  263. }
  264. .no-data{
  265. width: 690rpx;
  266. padding-top: 174rpx;
  267. height: calc(100vh - 160rpx);
  268. background: #fff;
  269. margin: 0 auto;
  270. border-radius:15rpx;
  271. box-sizing: border-box;
  272. margin-top:20rpx;
  273. }
  274. .no-data01 image{
  275. width: 261rpx;
  276. height: 272rpx;
  277. display: block;
  278. margin: 0 auto;
  279. }
  280. .no-data image{
  281. width: 261rpx;
  282. height: 272rpx;
  283. display: block;
  284. margin: 0 auto;
  285. }
  286. .no-data-text{
  287. text-align: center;
  288. font-size:34rpx;
  289. font-family:PingFang-SC-Medium;
  290. font-weight:500;
  291. color:rgba(0,0,0,1);
  292. }
  293. button::after{ border: none; }
  294. .goback{
  295. position: fixed;
  296. right: 50rpx;
  297. bottom: 60rpx;
  298. width:100rpx!important;
  299. height:100rpx;
  300. z-index: 100;
  301. background:rgba(255,255,255,1);
  302. line-height: 95rpx;
  303. border:1rpx solid rgba(227,227,227,1);
  304. border-radius:50%;
  305. }
  306. .goback image{
  307. position: absolute;
  308. width: 60rpx;
  309. left: 0;
  310. right: 0;
  311. top: 0;
  312. bottom: 0;
  313. margin: auto;
  314. }