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.

473 rader
8.2 KiB

  1. /* pages/spellGroup/spellGroup.wxss */
  2. .topbg {
  3. margin-bottom: 30rpx;
  4. width:100%;
  5. height:234rpx;
  6. background:linear-gradient(180deg,rgba(253,131,45,1) 0%,rgba(254,74,22,1) 100%);
  7. }
  8. .topbg-top{
  9. width:100%;
  10. height: 50%;
  11. display: inline-block
  12. }
  13. .topbg-btom{
  14. width:100%;
  15. height: 50%;
  16. }
  17. .user-avatar {
  18. width: 20%;
  19. height: 100%;
  20. float: left;
  21. }
  22. .user-box {
  23. width: 82rpx;
  24. height: 82rpx;
  25. border-radius: 50%;
  26. overflow: hidden;
  27. margin: 26rpx 0 0 60rpx;
  28. }
  29. .user-avatar open-data {
  30. display: block;
  31. width: 100%;
  32. height: 100%;
  33. }
  34. .name{
  35. float: left;
  36. color: #FFFFFF;
  37. font-size:32rpx;
  38. font-family:PingFangSC-Medium;
  39. font-weight:500;
  40. margin:0 20rpx;
  41. }
  42. .usre_level{
  43. width:70rpx;
  44. height:32rpx;
  45. background:linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  46. border-radius:9px 9px 9px 0px;
  47. font-family:PingFangSC-Regular;
  48. font-weight:400;
  49. color:rgba(255,255,255,1);
  50. line-height:32rpx;
  51. float: left;
  52. margin-top: 8rpx;
  53. overflow: hidden;
  54. }
  55. .chengzhang {
  56. font-size: 24rpx;
  57. font-weight: 400;
  58. color: #FFFFFF;
  59. margin-left: 10rpx;
  60. }
  61. .myName{
  62. float: left;
  63. font-size: 32rpx;
  64. height: 100%;
  65. width:35%;
  66. margin-top:36rpx;
  67. }
  68. .view{
  69. /* margin-top:25rpx; */
  70. display: block;
  71. margin: 60rpx 0 0 20rpx;
  72. }
  73. progress{
  74. width:214rpx;
  75. height: 6rpx;
  76. border-radius:60rpx;
  77. overflow:hidden;
  78. }
  79. .msg{
  80. float: left;
  81. font-size:10px!important;
  82. font-family:PingFangSC-Regular;
  83. font-weight:400;
  84. color:rgba(255,255,255,1);
  85. width: 30%;
  86. height: 100%;
  87. margin-top:80rpx;
  88. }
  89. .btoml{
  90. float: left;
  91. height: 100%;
  92. width: 60%;
  93. }
  94. .jifen{
  95. font-size: 20rpx;
  96. font-weight: 500;
  97. color: #FFFFFF;
  98. width: 500rpx;
  99. height:30rpx;
  100. position: absolute;
  101. top: 294rpx;
  102. left:70rpx;
  103. }
  104. .jifen image{
  105. width: 10rpx;
  106. height: 22rpx;
  107. }
  108. .topbg .score{
  109. font-size: 40rpx;
  110. font-weight: 500;
  111. position: absolute;
  112. top:240rpx;
  113. left:70rpx;
  114. color: #FFFFFF;
  115. }
  116. .qrcode{
  117. width: 84rpx;
  118. height: 84rpx;
  119. float: right;
  120. margin-right: 48rpx;
  121. }
  122. .qrcode image {
  123. margin: auto;
  124. width: 84rpx;
  125. }
  126. page {
  127. height: auto;
  128. overflow: auto;
  129. background: #f7f7f7;
  130. /* background-image: url('https://s3.cn-northwest-1.amazonaws.com.cn/iformall-net/cimg/spell-bg.png'); */
  131. background-size: cover;
  132. background-repeat: no-repeat;
  133. }
  134. .content-box{
  135. height: auto;
  136. padding-bottom: 200rpx;
  137. }
  138. .loading {
  139. text-align: center;
  140. height: 80rpx;
  141. line-height: 80rpx;
  142. font-size: 26rpx;
  143. color: #666;
  144. }
  145. .loading image {
  146. width: 60rpx;
  147. height: 60rpx;
  148. vertical-align: middle;
  149. margin-right: 10rpx;
  150. }
  151. .banner{
  152. margin-bottom: 20rpx;
  153. background: none;
  154. border-radius: 16rpx;
  155. }
  156. .banner .bg {
  157. display: block;
  158. width: 100%;
  159. }
  160. image{
  161. padding: 0;
  162. margin: 0;
  163. }
  164. .banner .bannerbg image{
  165. display: none!important;
  166. height: 0;
  167. overflow: hidden;
  168. }
  169. .bannerimg {
  170. display: block;
  171. width: 710rpx;
  172. height: 260rpx;
  173. border-radius: 15rpx;
  174. margin: -132rpx auto 0;
  175. }
  176. .banner .index-slide-view {
  177. margin: -132rpx auto 0;
  178. }
  179. .top{
  180. position: absolute;
  181. top: 30rpx;
  182. width: 710rpx;
  183. height: 260rpx;
  184. background: #fff;
  185. left: 20rpx;
  186. border-radius: 16rpx;
  187. overflow: hidden;
  188. }
  189. .content .sepll-list{
  190. width: 714rpx;
  191. height: 230rpx;
  192. background: #fff;
  193. border-radius: 30rpx;
  194. margin: 0 auto 30rpx;
  195. }
  196. .content .spell-bot{
  197. width: 674rpx;
  198. float: left;
  199. font-size: 24rpx;
  200. height: 60rpx;
  201. line-height: 60rpx;
  202. border-top: 1rpx #E1E1E1 dashed;
  203. margin: 0 20rpx;
  204. }
  205. .spell-bot .botMsg{
  206. width: 40%;
  207. height: 100%;
  208. float: left;
  209. /* margin-left: 20rpx; */
  210. color: #A6A6A6;
  211. overflow: hidden;
  212. text-overflow:ellipsis;
  213. white-space: nowrap;
  214. }
  215. .spell-bot .botNum{
  216. width: 40%;
  217. height: 100%;
  218. float: right;
  219. text-align: right;
  220. margin-right: 24rpx;
  221. color: #FD782D;
  222. }
  223. .content .spell-left{
  224. width: 170rpx;
  225. height: 170rpx;
  226. float: left;
  227. }
  228. .content .spell-left image{
  229. width: 120rpx;
  230. height: 120rpx;
  231. margin: 25rpx;
  232. border-radius: 8rpx;
  233. }
  234. .content .spell-center{
  235. float: left;
  236. width: 380rpx;
  237. height: 170rpx;
  238. }
  239. .content .tilte{
  240. margin-top: 20rpx;
  241. font-size:32rpx;
  242. font-family:PingFang-SC-Bold;
  243. font-weight:bold;
  244. color:#3C3C3C;
  245. line-height:44rpx;
  246. padding-top: 16rpx;
  247. overflow: hidden;
  248. text-overflow:ellipsis;
  249. white-space: nowrap;
  250. }
  251. .content .remark{
  252. width:304rpx;
  253. font-size:24rpx;
  254. font-family:PingFang-SC-Medium;
  255. font-weight:500;
  256. color:rgba(140,140,140,1);
  257. line-height:44rpx;
  258. overflow: hidden;
  259. text-overflow:ellipsis;
  260. white-space: nowrap;
  261. }
  262. .content .spell-num{
  263. width: 95rpx;
  264. border:1px solid rgba(255,50,50,1);
  265. border-radius:10rpx;
  266. font-size:24rpx;
  267. font-family:PingFang-SC-Medium;
  268. font-weight:500;
  269. color:rgba(255,50,50,1);
  270. line-height:30rpx;
  271. margin: 10rpx 0;
  272. text-align: center;
  273. }
  274. .content .price{
  275. overflow: hidden;
  276. margin-top: 20rpx;
  277. }
  278. .content .price01{
  279. font-size:40rpx;
  280. font-family:PingFang-SC-Medium;
  281. font-weight:500;
  282. color:#FD832D;
  283. line-height:44rpx;
  284. }
  285. .content .price02{
  286. display: inline;
  287. font-size: 24rpx;
  288. font-family:PingFang-SC-Medium;
  289. font-weight:500;
  290. text-decoration:line-through;
  291. color:rgba(140,140,140,1);
  292. }
  293. .content .price-num{
  294. display: inline;
  295. }
  296. .content .price-unit{
  297. display: inline;
  298. font-size:24rpx;
  299. margin-right: 10rpx;
  300. }
  301. .content .spell-right{
  302. float: right;
  303. width: 156rpx;
  304. }
  305. .right-button{
  306. width:140rpx;
  307. height:52rpx;
  308. font-size:26rpx;
  309. background:linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  310. border-radius:20rpx;
  311. font-family:PingFang-SC-Medium;
  312. font-weight:500;
  313. text-align: center;
  314. color:rgba(255,255,255,1);
  315. line-height:52rpx;
  316. margin: 88rpx 24rpx 0 0;
  317. margin-top: 90rpx;
  318. }
  319. .right-text{
  320. font-size:22rpx;
  321. font-family:PingFang-SC-Medium;
  322. font-weight:500;
  323. color:rgba(140,140,140,1);
  324. line-height:60rpx;
  325. text-align: center;
  326. }
  327. .bottom{
  328. width: 690rpx;
  329. height: 85rpx;
  330. position: fixed;
  331. bottom: 26rpx;
  332. left: 30rpx;
  333. /* background:rgba(243,69,58,1); */
  334. border:1px solid rgba(255, 222, 67, 1);
  335. border-radius:40px;
  336. color: #fff;
  337. overflow: hidden;
  338. }
  339. .bottom-left{
  340. width: 50%;
  341. float: left;
  342. margin-left: -1rpx;
  343. text-align: center;
  344. line-height: 85rpx;
  345. font-size:30rpx;
  346. font-family:PingFang-SC-Medium;
  347. font-weight:500;
  348. color:rgba(255,253,245,1);
  349. border-right:1px solid rgba(255, 222, 67, 1);
  350. opacity: 1;
  351. }
  352. .bottom-right{
  353. width: 50%;
  354. float: left;
  355. text-align: center;
  356. line-height: 85rpx;
  357. font-size:30rpx;
  358. font-family:PingFang-SC-Medium;
  359. font-weight:500;
  360. color:rgba(255,253,245,1);
  361. opacity: 1;
  362. }
  363. .spell-bottom{
  364. overflow: hidden;
  365. }
  366. .spell-top{
  367. height: auto;
  368. margin: 0 30rpx;
  369. overflow: hidden;
  370. box-sizing: border-box;
  371. border-bottom: 1rpx solid #EEEEEE;
  372. }
  373. .spell-top-left{
  374. float: left;
  375. width: 60%;
  376. }
  377. .spell-top-right{
  378. float: left;
  379. width: 40%;
  380. }
  381. .top-title{
  382. display: inline;
  383. font-size:24rpx;
  384. font-family:PingFang-SC-Medium;
  385. font-weight:500;
  386. color:rgba(51,51,51,1);
  387. line-height:64rpx;
  388. }
  389. .top-num{
  390. display: inline;
  391. font-size:24rpx;
  392. font-family:PingFang-SC-Medium;
  393. font-weight:500;
  394. color:#FF3232;
  395. line-height:64rpx;
  396. padding-left: 8rpx;
  397. }
  398. .spell-top-right{
  399. text-align: right;
  400. font-size:26rpx;
  401. font-family:PingFang-SC-Medium;
  402. font-weight:500;
  403. color:rgba(255,50,50,1);
  404. line-height:64rpx;
  405. }
  406. .no-data01{
  407. width: 690rpx;
  408. padding-top: 174rpx;
  409. height: calc(100vh - 460rpx);
  410. background: #fff;
  411. margin: 0 auto;
  412. border-radius:15rpx;
  413. box-sizing: border-box;
  414. margin-top: 20rpx;
  415. }
  416. .no-data{
  417. width: 690rpx;
  418. padding-top: 174rpx;
  419. height: calc(100vh - 160rpx);
  420. background: #fff;
  421. margin: 0 auto;
  422. border-radius:15rpx;
  423. box-sizing: border-box;
  424. margin-top:20rpx;
  425. }
  426. .no-data01 image{
  427. width: 261rpx;
  428. height: 272rpx;
  429. display: block;
  430. margin: 0 auto;
  431. }
  432. .no-data image{
  433. width: 261rpx;
  434. height: 272rpx;
  435. display: block;
  436. margin: 0 auto;
  437. }
  438. .no-data-text{
  439. text-align: center;
  440. font-size:34rpx;
  441. font-family:PingFang-SC-Medium;
  442. font-weight:500;
  443. color:rgba(0,0,0,1);
  444. }
  445. button::after{ border: none; }
  446. .goback{
  447. position: fixed;
  448. right: 50rpx;
  449. bottom: 60rpx;
  450. width:100rpx!important;
  451. height:100rpx;
  452. z-index: 100;
  453. background:rgba(255,255,255,1);
  454. line-height: 95rpx;
  455. border:1rpx solid rgba(227,227,227,1);
  456. border-radius:50%;
  457. }
  458. .goback image{
  459. position: absolute;
  460. width: 60rpx;
  461. left: 0;
  462. right: 0;
  463. top: 0;
  464. bottom: 0;
  465. margin: auto;
  466. }
  467. .remainInventory{
  468. background: #ccc;
  469. }