C端小程序
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

606 lignes
11 KiB

  1. page{
  2. position: relative;
  3. height: auto!important;
  4. background:#F4F5F9;
  5. /* background-image:url('https://s3.cn-northwest-1.amazonaws.com.cn/iformall-net/cimg/barginlistbg.jpg'); */
  6. background-size: cover;
  7. background-repeat: no-repeat;
  8. }
  9. .list{
  10. padding: 0 32rpx;
  11. }
  12. .listitem .fl {
  13. width: 142rpx;
  14. height: 142rpx!important;
  15. border-radius: 10rpx;
  16. /* overflow: hidden; */
  17. margin-top:10rpx;
  18. /* word-wrap: break-word;
  19. word-break: break-all; */
  20. display: block;
  21. }
  22. .listitem .icon{
  23. width: 140rpx;
  24. height: 116rpx;
  25. position: absolute;
  26. top: 0;
  27. right: 30rpx;
  28. }
  29. .listitem .ri {
  30. margin-left: 26rpx;
  31. width: 305rpx;
  32. }
  33. .ri text{
  34. display: block;
  35. text-align: left;
  36. }
  37. .ri .txt01 {
  38. width: 100%;
  39. font-size:32rpx;
  40. color: rgba(51, 51, 51, 1);
  41. line-height: 44rpx;
  42. white-space: nowrap;
  43. text-overflow: ellipsis;
  44. overflow: hidden;
  45. font-weight: bold;
  46. /* margin-top: 10rpx; */
  47. }
  48. .ri .txt02 {
  49. width: 100%;
  50. white-space: nowrap;
  51. text-overflow: ellipsis;
  52. overflow: hidden;
  53. font-size: 24rpx;
  54. color: rgba(140, 140, 140, 1);
  55. }
  56. .ri .txt03 {
  57. /* margin-left: 10rpx; */
  58. display: inline-block!important;
  59. font-size:24rpx;
  60. text-decoration:line-through;
  61. color:rgba(140,140,140,1);
  62. }
  63. .ri .txt04 {
  64. width: 100%;
  65. font-size:26rpx;
  66. color:rgba(253,131,45,1);
  67. line-height:44rpx;
  68. height: 48rpx;
  69. }
  70. .frImg{
  71. height: 78rpx;
  72. width: 78rpx;
  73. position: absolute;
  74. right: 0;
  75. top: 0;
  76. }
  77. .frImg text{
  78. height:78rpx;
  79. width:78rpx;
  80. transform:rotate(45deg);
  81. color:#FFFFFF;
  82. font-size:16rpx;
  83. position:absolute;
  84. text-align:center;
  85. line-height:53rpx;
  86. top:0;
  87. left:0;
  88. }
  89. .money{
  90. display: inline-block!important;
  91. font-size:40rpx;
  92. font-weight:500;
  93. color:rgba(253,131,45,1);
  94. width:150rpx;
  95. margin-top: 10rpx;
  96. overflow:hidden;
  97. white-space: nowrap;
  98. text-overflow: ellipsis;
  99. }
  100. .listitem{
  101. position: relative;
  102. padding: 21rpx;
  103. background: #fff;
  104. border-radius: 20rpx;
  105. margin-bottom: 30rpx;
  106. margin-top: 30rpx;
  107. }
  108. .line{
  109. padding:0,16rpx;
  110. border: .5px dashed #E1E1E1;
  111. }
  112. .pt_progress{
  113. padding:0,16rpx;
  114. line-height: 56rpx;
  115. height: 56rpx;
  116. color: #FD782D;
  117. }
  118. .msg{
  119. float: right;
  120. font-size: 28rpx;
  121. margin-top: 8rpx;
  122. }
  123. progress{
  124. display:inline-block;
  125. border-radius:60rpx;
  126. overflow:hidden;
  127. width: 380rpx;
  128. }
  129. .botton{
  130. position: absolute;
  131. right: 18rpx;
  132. text-align: center;
  133. bottom: 40rpx;
  134. width:140rpx;
  135. height:52rpx;
  136. line-height:52rpx;
  137. background:linear-gradient(130deg,rgba(50,177,252,1) 0%,rgba(47,108,255,1) 100%);
  138. border-radius:24rpx;
  139. font-size:26rpx;
  140. color:rgba(255,255,255,1);
  141. }
  142. .botton1{
  143. position: absolute;
  144. right: 34rpx;
  145. text-align: center;
  146. top: 96rpx;
  147. width:140rpx;
  148. height:52rpx;
  149. line-height:52rpx;
  150. background:linear-gradient(90deg,rgba(255,182,20,1) 0%,rgba(255,111,3,1) 100%);
  151. /* background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(255,111,3,1) 100%); */
  152. border-radius:24rpx;
  153. font-size:26rpx;
  154. color:rgba(255,255,255,1);
  155. }
  156. .botton02{
  157. background: #ccc!important;
  158. }
  159. .botton2{
  160. position: absolute;
  161. right: 36rpx;
  162. text-align: center;
  163. top: 96rpx;
  164. border-radius:24rpx;
  165. font-size:26rpx;
  166. line-height:48rpx;
  167. color:rgba(255,255,255,1);
  168. width:140rpx;
  169. height:48rpx;
  170. background:linear-gradient(130deg,rgba(50,177,252,1) 0%,rgba(47,108,255,1) 100%);
  171. }
  172. .botton3{
  173. position: absolute;
  174. right: 36rpx;
  175. text-align: center;
  176. top: 96rpx;
  177. line-height:48rpx;
  178. border-radius:24rpx;
  179. font-size:26rpx;
  180. color:rgba(255,255,255,1);
  181. width:140rpx;
  182. height:48rpx;
  183. background:linear-gradient(130deg,rgba(50,177,252,1) 0%,rgba(47,108,255,1) 100%);
  184. }
  185. /* .buttonfix{
  186. position: fixed;
  187. height: 95rpx;
  188. line-height: 95rpx;
  189. bottom: 0;
  190. left: 0;
  191. right: 0;
  192. display: flex;
  193. flex: 2;
  194. background: #fff;
  195. border-top:1rpx solid #C6C6C6;
  196. justify-content: space-around;
  197. text-align: center;
  198. } */
  199. .buttonfix > view{
  200. text-align: center;
  201. font-size: 32rpx;
  202. flex: 1;
  203. }
  204. .active1{
  205. color: #02C0FF!important;
  206. }
  207. .line{
  208. border-left:1rpx solid #C6C6C6;
  209. box-sizing:border-box;
  210. -moz-box-sizing:border-box;
  211. -webkit-box-sizing:border-box;
  212. }
  213. .page{
  214. padding-bottom: 100rpx;
  215. position: relative;
  216. }
  217. .mr{
  218. height: 40rpx;
  219. line-height: 40rpx;
  220. }
  221. .market {
  222. width: 100%;
  223. height: 100%;
  224. /* background: #f5f5f5; */
  225. }
  226. .tabs {
  227. width: 100% !important;
  228. height: 88rpx;
  229. text-align: center;
  230. position: fixed;
  231. top: 0;
  232. left: 0;
  233. right: 0;
  234. z-index: 100000;
  235. }
  236. .i-tab {
  237. width: 25% !important;
  238. display: inline-block;
  239. }
  240. .section {
  241. position: relative;
  242. }
  243. .mms {
  244. position: relative;
  245. width: 690rpx;
  246. height: 197rpx !important;
  247. background: #fff;
  248. padding: 30rpx 0 0;
  249. margin: 0 auto 40rpx;
  250. border-radius: 16rpx;
  251. border-top: 8rpx solid #02b7ff;
  252. box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.10);
  253. }
  254. .detail_msg {
  255. display: flex;
  256. padding-bottom: 26rpx;
  257. }
  258. .expiretime {
  259. display: block;
  260. width: 100%;
  261. text-align: left;
  262. text-indent: 1em;
  263. height:54rpx;
  264. line-height:54rpx;
  265. font-size: 26rpx;
  266. color: #333;
  267. letter-spacing: 0;
  268. }
  269. .liness {
  270. display: block;
  271. width: 100%;
  272. }
  273. .logo {
  274. width: 60rpx;
  275. height: 60rpx;
  276. border: 1px solid #f8f8f8;
  277. border-radius: 50rpx;
  278. display: block;
  279. margin-left: 20rpx;
  280. }
  281. .logo image {
  282. width: 60rpx;
  283. height: 60rpx;
  284. border-radius: 50%;
  285. }
  286. .info view:nth-child(1) {
  287. display: flex;
  288. justify-content: space-between;
  289. padding: 0 2%;
  290. }
  291. .info {
  292. width: 100%;
  293. }
  294. .info view:nth-child(1) text {
  295. font-size: 32rpx;
  296. line-height: 32rpx;
  297. height: 32rpx;
  298. color: #333;
  299. letter-spacing: 0;
  300. width: 400rpx;
  301. display: inline-block;
  302. white-space: nowrap;
  303. text-overflow: ellipsis;
  304. overflow: hidden;
  305. }
  306. .info view:nth-child(2) {
  307. padding-left: 2%;
  308. font-size: 22rpx;
  309. color: #333;
  310. letter-spacing: 0;
  311. margin-top: 6rpx;
  312. display: inline-block;
  313. white-space: nowrap;
  314. text-overflow: ellipsis;
  315. overflow: hidden;
  316. width: 400rpx;
  317. }
  318. .info view:nth-child(3) {
  319. margin-left: 20rpx;
  320. }
  321. .btns {
  322. position: absolute;
  323. right: 30rpx;
  324. top: 38rpx;
  325. width: 120rpx;
  326. height: 48rpx;
  327. line-height: 48rpx;
  328. text-align: center;
  329. border: 2rpx solid #02c0ff;
  330. border-radius: 60rpx;
  331. color: #02c0ff;
  332. font-size: 28rpx;
  333. }
  334. .active {
  335. color: #fff;
  336. background: #02c0ff;
  337. }
  338. .txt1 {
  339. font-size: 26rpx;
  340. color: #333;
  341. letter-spacing: 0;
  342. }
  343. .nocoupon image {
  344. width: 300rpx;
  345. display: block;
  346. margin: 3% auto 0;
  347. }
  348. .txt001 {
  349. display: block;
  350. line-height: 48rpx;
  351. font-size: 34rpx;
  352. color: #333;
  353. letter-spacing: 0;
  354. text-align: center;
  355. }
  356. .txt002 {
  357. display: block;
  358. margin-top: 1%;
  359. font-size: 28rpx;
  360. color: #999;
  361. letter-spacing: 0;
  362. line-height: 40rpx;
  363. text-align: center;
  364. }
  365. .top{
  366. width: 710rpx;
  367. height: 260rpx;
  368. background: #fff;
  369. border-radius: 16rpx;
  370. overflow: hidden;
  371. margin: 30rpx auto 0;
  372. }
  373. .nocoupon button {
  374. background: #00c0ff;
  375. color: #fff;
  376. font-style: 30rpx;
  377. width: 100%;
  378. border-radius: 60rpx;
  379. }
  380. .loading {
  381. text-align: center;
  382. height: 80rpx;
  383. line-height: 80rpx;
  384. font-size: 26rpx;
  385. color: #fff;
  386. }
  387. .loading image {
  388. width: 60rpx;
  389. height: 60rpx;
  390. vertical-align: middle;
  391. margin-right: 10rpx;
  392. }
  393. .active {
  394. opacity: 0.6;
  395. }
  396. .nav {
  397. position: absolute;
  398. bottom: 3.3%;
  399. left: 0;
  400. right: 0;
  401. margin: auto;
  402. width: 670rpx;
  403. border-radius: 60rpx;
  404. background: #02c0ff;
  405. font-size: 32px;
  406. color: #fff;
  407. text-align: center;
  408. line-height: 32px;
  409. }
  410. .sendImg{
  411. position: absolute;
  412. width: 100rpx;
  413. top:109rpx;
  414. right:72rpx;
  415. }
  416. .no-data01{
  417. width: 690rpx;
  418. padding-top: 174rpx;
  419. height: calc(100vh - 460rpx);
  420. background: #fff;
  421. margin: 0 auto;
  422. border-radius:15rpx;
  423. box-sizing: border-box;
  424. margin-top: 20rpx;
  425. }
  426. .no-data{
  427. width: 690rpx;
  428. padding-top: 174rpx;
  429. height: calc(100vh - 300rpx);
  430. background: #fff;
  431. margin: 0 auto;
  432. border-radius:15rpx;
  433. box-sizing: border-box;
  434. margin-top:20rpx;
  435. }
  436. .no-data01 image{
  437. width: 261rpx;
  438. height: 272rpx;
  439. display: block;
  440. margin: 0 auto;
  441. }
  442. .no-data image{
  443. width: 261rpx;
  444. height: 272rpx;
  445. display: block;
  446. margin: 0 auto;
  447. }
  448. .no-data-text{
  449. text-align: center;
  450. font-size:34rpx;
  451. font-family:PingFang-SC-Medium;
  452. font-weight:500;
  453. color:rgba(0,0,0,1);
  454. }
  455. .dingdan {
  456. margin-top: 33rpx;
  457. }
  458. .dingdan text:nth-of-type(1) {
  459. display: block;
  460. font-size: 34rpx;
  461. color: #333;
  462. letter-spacing: 0;
  463. text-align: center;
  464. }
  465. .dingdan text:nth-of-type(2) {
  466. display: block;
  467. font-size: 28rpx;
  468. color: #999;
  469. letter-spacing: 0;
  470. text-align: center;
  471. }
  472. .dingdan image {
  473. display: block;
  474. width: 300rpx;
  475. height: 300rpx;
  476. margin: 0 auto 16rpx;
  477. }
  478. .again{
  479. position: relative;
  480. width: 686rpx;
  481. height: 168rpx;
  482. }
  483. .banner{
  484. margin-bottom:20rpx;
  485. background:none!important;
  486. border-radius:16rpx;
  487. }
  488. .banner .bannerbg image{
  489. display: none!important;
  490. height: 0!important;
  491. overflow: hidden;
  492. }
  493. .bottom{
  494. width: 100%;
  495. height: 100rpx;
  496. position: fixed;
  497. bottom: 0;
  498. /* background:rgba(243,69,58,1); */
  499. color: #fff;
  500. overflow: hidden;
  501. }
  502. .bottom-left{
  503. width: 50%;
  504. float: left;
  505. margin-left: -1rpx;
  506. text-align: center;
  507. line-height: 100rpx;
  508. font-size:30rpx;
  509. font-family:PingFang-SC-Medium;
  510. font-weight:500;
  511. opacity: 1;
  512. background:linear-gradient(130deg,#32B1FC,#2F6CFF);
  513. color: #FFFEFE;
  514. }
  515. .bottom-leftQ{
  516. width: 50%;
  517. float: left;
  518. margin-left: -1rpx;
  519. text-align: center;
  520. line-height: 100rpx;
  521. font-size:30rpx;
  522. font-family:PingFang-SC-Medium;
  523. font-weight:500;
  524. opacity: 1;
  525. background:#FFFFFF;
  526. color: #3C3C3C;
  527. }
  528. .bottom-right{
  529. width: 50%;
  530. float: left;
  531. text-align: center;
  532. line-height: 100rpx;
  533. font-size:30rpx;
  534. font-family:PingFang-SC-Medium;
  535. font-weight:500;
  536. opacity: 1;
  537. background:linear-gradient(130deg,#32B1FC,#2F6CFF);
  538. color: #FFFEFE;
  539. }
  540. .bottom-rightQ{
  541. width: 50%;
  542. float: left;
  543. text-align: center;
  544. line-height: 100rpx;
  545. font-size:30rpx;
  546. font-family:PingFang-SC-Medium;
  547. font-weight:500;
  548. opacity: 1;
  549. background:#FFFFFF;
  550. color: #3C3C3C;
  551. }
  552. button::after{ border: none; }
  553. .goback{
  554. position: fixed;
  555. right: 50rpx;
  556. bottom: 60rpx;
  557. width:100rpx!important;
  558. height:100rpx;
  559. z-index: 100;
  560. background:rgba(255,255,255,1);
  561. line-height: 95rpx;
  562. border:1rpx solid rgba(227,227,227,1);
  563. border-radius:50%;
  564. }
  565. .goback image{
  566. position: absolute;
  567. width: 60rpx;
  568. left: 0;
  569. right: 0;
  570. top: 0;
  571. bottom: 0;
  572. margin: auto;
  573. }