C端小程序
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

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