C端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

393 lines
7.0 KiB

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