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.

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