C端小程序
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

350 rader
6.2 KiB

  1. /* pages/spellGroup/spellGroup.wxss */
  2. .topbg image{
  3. display: block;
  4. width: 100%;
  5. }
  6. .topbg {
  7. position: relative;
  8. }
  9. .topbg text{
  10. position: absolute;
  11. left: 0;
  12. right: 0;
  13. text-align: center;
  14. font-size: 32rpx;
  15. color: #fff;
  16. }
  17. .topbg .my{
  18. top:25rpx;
  19. }
  20. .topbg .score{
  21. top:60rpx;
  22. font-size: 56rpx;
  23. font-weight: bold;
  24. }
  25. page {
  26. height: auto;
  27. overflow: auto;
  28. background: #f7f7f7;
  29. /* background-image: url('https://s3.cn-northwest-1.amazonaws.com.cn/iformall-net/cimg/spell-bg.png'); */
  30. background-size: cover;
  31. background-repeat: no-repeat;
  32. }
  33. .content-box{
  34. height: auto;
  35. padding-bottom: 200rpx;
  36. }
  37. .loading {
  38. text-align: center;
  39. height: 80rpx;
  40. line-height: 80rpx;
  41. font-size: 26rpx;
  42. color: #666;
  43. }
  44. .loading image {
  45. width: 60rpx;
  46. height: 60rpx;
  47. vertical-align: middle;
  48. margin-right: 10rpx;
  49. }
  50. .banner{
  51. margin-bottom: 20rpx;
  52. background: none;
  53. border-radius: 16rpx;
  54. }
  55. .banner .bg {
  56. display: block;
  57. width: 100%;
  58. }
  59. image{
  60. padding: 0;
  61. margin: 0;
  62. }
  63. .banner .bannerbg image{
  64. display: none!important;
  65. height: 0;
  66. overflow: hidden;
  67. }
  68. .bannerimg {
  69. display: block;
  70. width: 710rpx;
  71. height: 260rpx;
  72. border-radius: 15rpx;
  73. margin: -132rpx auto 0;
  74. }
  75. .banner .index-slide-view {
  76. margin: -132rpx auto 0;
  77. }
  78. .top{
  79. position: absolute;
  80. top: 30rpx;
  81. width: 710rpx;
  82. height: 260rpx;
  83. background: #fff;
  84. left: 20rpx;
  85. border-radius: 16rpx;
  86. overflow: hidden;
  87. }
  88. .content .sepll-list{
  89. width: 690rpx;
  90. height: 230rpx;
  91. background: #fff;
  92. border-radius: 30rpx;
  93. margin: 0 auto 30rpx;
  94. }
  95. .content .spell-left{
  96. width: 230rpx;
  97. height: 230rpx;
  98. float: left;
  99. }
  100. .content .spell-left image{
  101. width: 180rpx;
  102. height: 180rpx;
  103. margin: 25rpx;
  104. border-radius: 8rpx;
  105. }
  106. .content .spell-center{
  107. float: left;
  108. width: 304rpx;
  109. height: 100%;
  110. }
  111. .content .tilte{
  112. font-size:30rpx;
  113. font-family:PingFang-SC-Bold;
  114. font-weight:bold;
  115. color:rgba(51,51,51,1);
  116. line-height:44rpx;
  117. padding-top: 16rpx;
  118. overflow: hidden;
  119. text-overflow:ellipsis;
  120. white-space: nowrap;
  121. }
  122. .content .remark{
  123. width:304rpx;
  124. font-size:24rpx;
  125. font-family:PingFang-SC-Medium;
  126. font-weight:500;
  127. color:rgba(140,140,140,1);
  128. line-height:44rpx;
  129. overflow: hidden;
  130. text-overflow:ellipsis;
  131. white-space: nowrap;
  132. }
  133. .content .spell-num{
  134. width: 95rpx;
  135. border:1px solid rgba(255,50,50,1);
  136. border-radius:10rpx;
  137. font-size:24rpx;
  138. font-family:PingFang-SC-Medium;
  139. font-weight:500;
  140. color:rgba(255,50,50,1);
  141. line-height:30rpx;
  142. margin: 10rpx 0;
  143. text-align: center;
  144. }
  145. .content .price{
  146. overflow: hidden;
  147. margin-top: 10rpx;
  148. }
  149. .content .price01{
  150. font-size:50rpx;
  151. font-family:PingFang-SC-Medium;
  152. font-weight:500;
  153. color:rgba(255,50,50,1);
  154. line-height:44rpx;
  155. }
  156. .content .price02{
  157. font-size: 24rpx;
  158. font-family:PingFang-SC-Medium;
  159. font-weight:500;
  160. text-decoration:line-through;
  161. color:rgba(140,140,140,1);
  162. }
  163. .content .price-num{
  164. display: inline;
  165. }
  166. .content .price-unit{
  167. display: inline;
  168. font-size:24rpx;
  169. margin-right: 10rpx;
  170. }
  171. .content .spell-right{
  172. float: left;
  173. width: 156rpx;
  174. }
  175. .right-button{
  176. width:120rpx;
  177. height:48rpx;
  178. font-size:26rpx;
  179. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  180. border-radius:8rpx;
  181. font-family:PingFang-SC-Medium;
  182. font-weight:500;
  183. text-align: center;
  184. color:rgba(255,255,255,1);
  185. line-height:44rpx;
  186. margin: 110rpx auto 0;
  187. margin-top: 110rpx;
  188. }
  189. .right-text{
  190. font-size:22rpx;
  191. font-family:PingFang-SC-Medium;
  192. font-weight:500;
  193. color:rgba(140,140,140,1);
  194. line-height:60rpx;
  195. text-align: center;
  196. }
  197. .bottom{
  198. width: 690rpx;
  199. height: 85rpx;
  200. position: fixed;
  201. bottom: 26rpx;
  202. left: 30rpx;
  203. /* background:rgba(243,69,58,1); */
  204. border:1px solid rgba(255, 222, 67, 1);
  205. border-radius:40px;
  206. color: #fff;
  207. overflow: hidden;
  208. }
  209. .bottom-left{
  210. width: 50%;
  211. float: left;
  212. margin-left: -1rpx;
  213. text-align: center;
  214. line-height: 85rpx;
  215. font-size:30rpx;
  216. font-family:PingFang-SC-Medium;
  217. font-weight:500;
  218. color:rgba(255,253,245,1);
  219. border-right:1px solid rgba(255, 222, 67, 1);
  220. opacity: 1;
  221. }
  222. .bottom-right{
  223. width: 50%;
  224. float: left;
  225. text-align: center;
  226. line-height: 85rpx;
  227. font-size:30rpx;
  228. font-family:PingFang-SC-Medium;
  229. font-weight:500;
  230. color:rgba(255,253,245,1);
  231. opacity: 1;
  232. }
  233. .spell-bottom{
  234. overflow: hidden;
  235. }
  236. .spell-top{
  237. height: auto;
  238. margin: 0 30rpx;
  239. overflow: hidden;
  240. box-sizing: border-box;
  241. border-bottom: 1rpx solid #EEEEEE;
  242. }
  243. .spell-top-left{
  244. float: left;
  245. width: 60%;
  246. }
  247. .spell-top-right{
  248. float: left;
  249. width: 40%;
  250. }
  251. .top-title{
  252. display: inline;
  253. font-size:24rpx;
  254. font-family:PingFang-SC-Medium;
  255. font-weight:500;
  256. color:rgba(51,51,51,1);
  257. line-height:64rpx;
  258. }
  259. .top-num{
  260. display: inline;
  261. font-size:24rpx;
  262. font-family:PingFang-SC-Medium;
  263. font-weight:500;
  264. color:#FF3232;
  265. line-height:64rpx;
  266. padding-left: 8rpx;
  267. }
  268. .spell-top-right{
  269. text-align: right;
  270. font-size:26rpx;
  271. font-family:PingFang-SC-Medium;
  272. font-weight:500;
  273. color:rgba(255,50,50,1);
  274. line-height:64rpx;
  275. }
  276. .no-data01{
  277. width: 690rpx;
  278. padding-top: 174rpx;
  279. height: calc(100vh - 460rpx);
  280. background: #fff;
  281. margin: 0 auto;
  282. border-radius:15rpx;
  283. box-sizing: border-box;
  284. margin-top: 20rpx;
  285. }
  286. .no-data{
  287. width: 690rpx;
  288. padding-top: 174rpx;
  289. height: calc(100vh - 160rpx);
  290. background: #fff;
  291. margin: 0 auto;
  292. border-radius:15rpx;
  293. box-sizing: border-box;
  294. margin-top:20rpx;
  295. }
  296. .no-data01 image{
  297. width: 261rpx;
  298. height: 272rpx;
  299. display: block;
  300. margin: 0 auto;
  301. }
  302. .no-data image{
  303. width: 261rpx;
  304. height: 272rpx;
  305. display: block;
  306. margin: 0 auto;
  307. }
  308. .no-data-text{
  309. text-align: center;
  310. font-size:34rpx;
  311. font-family:PingFang-SC-Medium;
  312. font-weight:500;
  313. color:rgba(0,0,0,1);
  314. }
  315. .hottitle{
  316. height: 100rpx;
  317. line-height: 100rpx;
  318. }
  319. .hottitle text{
  320. color: #333;
  321. font-weight: bold;
  322. font-size: 36rpx;
  323. padding-left: 30rpx;
  324. }
  325. button::after{ border: none; }
  326. .goback{
  327. position: fixed;
  328. right: 50rpx;
  329. bottom: 60rpx;
  330. width:100rpx!important;
  331. height:100rpx;
  332. z-index: 100;
  333. background:rgba(255,255,255,1);
  334. line-height: 95rpx;
  335. border:1rpx solid rgba(227,227,227,1);
  336. border-radius:50%;
  337. }
  338. .goback image{
  339. position: absolute;
  340. width: 60rpx;
  341. left: 0;
  342. right: 0;
  343. top: 0;
  344. bottom: 0;
  345. margin: auto;
  346. }
  347. .remainInventory{
  348. background: #ccc;
  349. }