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.

466 rivejä
8.0 KiB

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