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.

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