recordlist.wxss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873
  1. @import "template/template.wxss";
  2. page {
  3. padding-bottom: 200rpx;
  4. }
  5. .container {
  6. background: #f1f1f1;
  7. }
  8. .banner-box {
  9. height: 600rpx;
  10. width: 100%;
  11. }
  12. .banner-box .slide-image {
  13. width: 100%;
  14. height: 100%;
  15. }
  16. .banner-box swiper {
  17. height: 100%;
  18. }
  19. .goods-state-box {
  20. width: 100%;
  21. margin-bottom: 15rpx;
  22. background: #fff;
  23. }
  24. .goods-state-title-box {
  25. height: 108rpx;
  26. }
  27. .goods-state-title-box #title-position {
  28. position: fixed;
  29. top: 0;
  30. z-index: 999;
  31. }
  32. .goods-state-box .goods-state-title {
  33. background: #fb752c;
  34. width: 100%;
  35. padding: 2rpx 0;
  36. position: relative;
  37. }
  38. .goods-state-box .goods-state-title::after {
  39. content: "";
  40. display: block;
  41. clear: both;
  42. }
  43. .goods-state-box .goods-state-title .goods-state-time {
  44. float: left;
  45. }
  46. .goods-state-box .goods-state-title .goods-state-time text {
  47. float: left;
  48. text-align: center;
  49. display: block;
  50. color: #fb752c;
  51. font-size: 40rpx;
  52. line-height: 104rpx;
  53. background: #fff;
  54. padding: 0 20rpx;
  55. }
  56. .goods-state-box .goods-state-title .triangle {
  57. float: left;
  58. border-left: 60rpx solid #fff;
  59. border-top: 52rpx solid transparent;
  60. border-bottom: 52rpx solid transparent;
  61. }
  62. .goods-state-box .goods-state-title .goods-time-down {
  63. float: left;
  64. color: #fff;
  65. font-size: 50rpx;
  66. line-height: 100rpx;
  67. margin-left: 40rpx;
  68. }
  69. .goods-state-box .goods-state-title .goods-state-price {
  70. color: #fff;
  71. padding-right: 25rpx;
  72. position: absolute;
  73. top: 50%;
  74. right: 0;
  75. margin-top: -40rpx;
  76. }
  77. .goods-state-box .goods-state-title .goods-state-price .goods-state-price-text1 {
  78. font-size: 60rpx;
  79. font-weight: 600;
  80. }
  81. .goods-state-box .goods-state-title .goods-state-market {
  82. color: #fff;
  83. float: left;
  84. padding: 11rpx;
  85. margin-top: 30rpx;
  86. }
  87. .goods-state-box .goods-state-title .goods-state-market text {
  88. display: block;
  89. font-size: 28rpx;
  90. }
  91. .goods-state-box .goods-news, .statement {
  92. border-bottom: 1px solid #f1f1f1;
  93. padding: 10rpx 25rpx;
  94. height: 50rpx;
  95. }
  96. .goods-state-box .goods-info {
  97. border-bottom: 1px solid #f1f1f1;
  98. padding: 20rpx 25rpx;
  99. }
  100. .goods-info::after {
  101. content: '';
  102. display: block;
  103. clear: both;
  104. }
  105. .goods-state-box .goods-info text {
  106. font-size: 40rpx;
  107. display: block;
  108. }
  109. .goods-info text {
  110. float: left;
  111. width: 80%;
  112. }
  113. .btn::after {
  114. border: none;
  115. }
  116. .btn {
  117. width: 50rpx;
  118. height: 50rpx;
  119. /*
  120. width: 20%;
  121. height: 50rpx;
  122. */
  123. padding: 0;
  124. background: #fff;
  125. float: right;
  126. }
  127. .btn image {
  128. float: left;
  129. /*
  130. width: 100%;
  131. height: 100%;
  132. */
  133. width: 50rpx;
  134. height: 50rpx;
  135. }
  136. .goods-price {
  137. padding: 20rpx 0 0 20rpx;
  138. position: relative;
  139. clear: both;
  140. }
  141. .goods-price::after {
  142. content: '';
  143. display: block;
  144. clear: both;
  145. }
  146. .goods-price .goods-state-market {
  147. position: absolute;
  148. bottom: 6rpx;
  149. }
  150. .goods-price .goods-price-state {
  151. float: left;
  152. margin-left: 145rpx;
  153. }
  154. .goods-price .goods-time-remind {
  155. position: absolute;
  156. right: 0;
  157. width: 110rpx;
  158. margin-right: 20rpx;
  159. border-left: 2rpx solid #eee;
  160. padding: 10rpx 0 45rpx 20rpx;
  161. }
  162. .goods-price .goods-time-remind #clock {
  163. width: 50rpx;
  164. height: 50rpx;
  165. font-size: 0;
  166. margin: 0 auto;
  167. display: block;
  168. }
  169. .goods-price .goods-time-remind button::after {
  170. border: none;
  171. }
  172. .goods-price .goods-time-remind button {
  173. position: absolute;
  174. top: 0;
  175. padding: 0;
  176. line-height: 40rpx;
  177. border-radius: 0;
  178. font-size: 24rpx;
  179. color: #f29220;
  180. background: none;
  181. z-index: 99;
  182. padding-top: 60rpx;
  183. }
  184. .goods-takePartIn::after {
  185. content: '';
  186. display: block;
  187. clear: both;
  188. }
  189. .goods-takePartIn {
  190. border-bottom: 1px solid #f1f1f1;
  191. padding: 0 20rpx 20rpx 20rpx;
  192. }
  193. .goods-takePartIn text {
  194. font-size: 28rpx;
  195. color: #999;
  196. padding: 0 20rpx;
  197. float: left;
  198. }
  199. .goods-takePartIn .serial-num {
  200. float: right;
  201. }
  202. .goods-takePartIn .serial-num text {
  203. padding: 0;
  204. color: #333;
  205. }
  206. .goods-state-price-text1 {
  207. font-size: 50rpx;
  208. color: #e22;
  209. }
  210. .goods-state-box .goods-news:after {
  211. content: "";
  212. display: block;
  213. clear: both;
  214. }
  215. .goods-state-box .goods-news image {
  216. width: 50rpx;
  217. height: 50rpx;
  218. float: left;
  219. margin-right: 10rpx;
  220. }
  221. .goods-state-box .goods-news view {
  222. float: left;
  223. line-height: 50rpx;
  224. }
  225. .goods-state-box .goods-news view text {
  226. font-size: 24rpx;
  227. display: block;
  228. float: left;
  229. }
  230. .auctioneer {
  231. width: 100%;
  232. border-bottom: 1px solid #f1f1f1;
  233. position: relative;
  234. }
  235. .auctioneer navigator {
  236. box-sizing: border-box;
  237. width: 100%;
  238. padding: 20rpx 0 20rpx 20rpx;
  239. }
  240. navigator::after {
  241. content: '';
  242. display: block;
  243. clear: both;
  244. }
  245. .auctioneer .auctioneer-img {
  246. float: left;
  247. width: 100rpx;
  248. height: 100rpx;
  249. }
  250. .auctioneer .auctioneer-img image {
  251. width: 100%;
  252. height: 100%;
  253. border-radius: 50%;
  254. background: #fb752c;
  255. }
  256. .auctioneer .auctioneer-info {
  257. width: 600rpx;
  258. float: left;
  259. padding-left: 20rpx;
  260. padding-top: 30rpx;
  261. position: relative;
  262. }
  263. .auctioneer .auctioneer-name::after {
  264. content: '';
  265. display: block;
  266. clear: both;
  267. }
  268. .auctioneer .auctioneer-info .auctioneer-name text {
  269. font-size: 30rpx;
  270. }
  271. .auctioneer .auctioneer-info text {
  272. font-size: 28rpx;
  273. }
  274. .auctioneer .auctioneer-info .auctioneer-company {
  275. font-size: 24rpx;
  276. color: #999;
  277. margin-top: 10rpx;
  278. display: block;
  279. }
  280. .auctioneer .auctioneer-info .auctioneer-name text {
  281. float: left;
  282. }
  283. .auctioneer .auctioneer-info .auctioneer-name .sign {
  284. font-size: 20rpx;
  285. color: #2abf01;
  286. border: 1px solid #2abf01;
  287. background: #efffea;
  288. margin-left: 15rpx;
  289. margin-top: 4rpx;
  290. padding: 0 5rpx;
  291. }
  292. .follow {
  293. width: 50rpx;
  294. height: 50rpx;
  295. position: absolute;
  296. top: 32%;
  297. right: 20rpx;
  298. }
  299. .follow image {
  300. width: 100%;
  301. height: 100%;
  302. }
  303. .statement text {
  304. font-size: 22rpx;
  305. color: #666;
  306. text-align: center;
  307. display: block;
  308. line-height: 50rpx;
  309. }
  310. .bidrecord-box {
  311. background: #fff;
  312. width: 100%;
  313. margin-bottom: 15rpx;
  314. }
  315. .bidrecord-box navigator {
  316. padding: 20rpx;
  317. border-bottom: 1px solid #f1f1f1;
  318. }
  319. .bidrecord-box navigator::after {
  320. content: "";
  321. display: block;
  322. clear: both;
  323. }
  324. .bidrecord-box navigator image {
  325. width: 40rpx;
  326. height: 40rpx;
  327. float: left;
  328. }
  329. .bidrecord-box navigator text {
  330. font-size: 28rpx;
  331. float: left;
  332. margin-left: 10rpx;
  333. line-height: 40rpx;
  334. }
  335. .bidrecord-box navigator .arrow {
  336. float: right;
  337. }
  338. .lines-box .lines {
  339. padding: 10rpx 20rpx;
  340. }
  341. .lines-box .lines::after {
  342. content: "";
  343. display: block;
  344. clear: both;
  345. }
  346. .lines-box .lines image {
  347. width: 50rpx;
  348. height: 50rpx;
  349. float: left;
  350. margin-right: 20rpx;
  351. margin-top: 15rpx;
  352. }
  353. .lines-box .lines text {
  354. font-size: 30rpx;
  355. float: left;
  356. line-height: 80rpx;
  357. margin-right: 20rpx;
  358. }
  359. .lines-box .textColor text {
  360. color: #fb752c;
  361. }
  362. .lines-box .lines .price {
  363. float: right;
  364. }
  365. .lines-box-tips {
  366. padding: 20rpx;
  367. }
  368. .lines-box-tips text {
  369. line-height: 200rpx;
  370. color: #999;
  371. text-align: center;
  372. display: block;
  373. }
  374. .msg-box {
  375. width: 100%;
  376. padding: 20rpx;
  377. box-sizing: border-box;
  378. background: #fff;
  379. margin-bottom: 15rpx;
  380. }
  381. .msg-box::after {
  382. content: "";
  383. display: block;
  384. clear: "";
  385. }
  386. .msg-box text {
  387. font-size: 26rpx;
  388. float: left;
  389. }
  390. .guild-box {
  391. width: 100%;
  392. background: #fff;
  393. margin-bottom: 15rpx;
  394. }
  395. .guild-box .guild-title {
  396. padding: 20rpx;
  397. border-bottom: 1px solid #f1f1f1;
  398. }
  399. .guild-box .guild-title::after {
  400. content: "";
  401. display: block;
  402. clear: both;
  403. }
  404. .guild-box .guild-title image {
  405. width: 40rpx;
  406. height: 40rpx;
  407. float: left;
  408. margin-right: 10rpx;
  409. }
  410. .guild-box .guild-title text {
  411. font-size: 26rpx;
  412. float: left;
  413. }
  414. .guild-box .guild-content {
  415. padding: 20rpx;
  416. }
  417. .guild-box .guild-content .guild-promise {
  418. width: 95%;
  419. padding: 10rpx;
  420. border-radius: 30rpx;
  421. background: #fff3ec;
  422. margin: 0 auto 10rpx;
  423. }
  424. .guild-box .guild-content .guild-promise::after {
  425. content: "";
  426. display: block;
  427. clear: both;
  428. }
  429. .guild-box .guild-content .guild-promise view {
  430. width: 25%;
  431. float: left;
  432. flex-direction: row;
  433. justify-content: center;
  434. }
  435. .guild-box .guild-content .guild-promise view::after {
  436. content: "";
  437. display: block;
  438. clear: both;
  439. }
  440. .guild-box .guild-content .guild-promise image {
  441. width: 35rpx;
  442. height: 35rpx;
  443. float: left;
  444. margin-right: 5rpx;
  445. margin-left: 15rpx;
  446. }
  447. .guild-box .guild-content .guild-promise text {
  448. font-size: 24rpx;
  449. float: left;
  450. color: #fb752c;
  451. }
  452. .guild-box .guild-content .guild-auction-info::after {
  453. content: "";
  454. display: block;
  455. clear: both;
  456. }
  457. .guild-box .guild-content .guild-auction-info .info-left-box {
  458. float: left;
  459. }
  460. .guild-box .guild-content .guild-auction-info .info-right-box {
  461. float: right;
  462. }
  463. .guild-box .guild-content .guild-auction-info .info-key {
  464. width: 100rpx;
  465. margin-right: 20rpx;
  466. }
  467. .guild-box .guild-content .guild-auction-info text {
  468. font-size: 24rpx;
  469. display: inline-block;
  470. }
  471. .guild-box .guild-content .guild-auction-info .info-left-box text {
  472. text-align: left;
  473. }
  474. .guild-box .guild-content .guild-auction-info .info-right-box text {
  475. text-align: left;
  476. }
  477. .guild-box .guild-content .guild-auction-info .info-left-box .info-val,
  478. .guild-box .guild-content .guild-auction-info .info-right-box .info-val {
  479. color: #999;
  480. }
  481. .share-box {
  482. width: 100%;
  483. }
  484. .share-box .share-tab {
  485. background: #fff;
  486. border-bottom: 1px solid #f1f1f1;
  487. }
  488. .share-box .share-tab::after {
  489. content: "";
  490. display: block;
  491. clear: both;
  492. }
  493. .share-box .share-tab view {
  494. float: left;
  495. width: 33.33333%;
  496. text-align: center;
  497. }
  498. .share-box .share-tab view text {
  499. font-size: 28rpx;
  500. padding: 20rpx 10rpx;
  501. display: inline-block;
  502. }
  503. .share-box .share-tab .textstyle text {
  504. color: #fb752c;
  505. border-bottom: 6rpx solid #fb752c;
  506. }
  507. .bidders-btn::after {
  508. content: '';
  509. display: block;
  510. clear: both;
  511. }
  512. .bidders-btn {
  513. width: 100%;
  514. background: #fb752c;
  515. z-index: 9999;
  516. position: fixed;
  517. bottom: 0;
  518. left: 0;
  519. }
  520. .bidders-btn navigator {
  521. width: 100%;
  522. height: 100%;
  523. text-align: center;
  524. }
  525. .bidders-btn navigator text {
  526. color: #fff;
  527. line-height: 100rpx;
  528. font-weight: 600;
  529. }
  530. .bidon::after {
  531. content: '';
  532. display: block;
  533. clear: both;
  534. }
  535. .bidon {
  536. width: 100%;
  537. height: 100%;
  538. background: #DCDCDC;
  539. padding: 10rpx;
  540. box-sizing: border-box;
  541. }
  542. .bid::after {
  543. content: '';
  544. display: block;
  545. clear: both;
  546. }
  547. .bid {
  548. height: 100%;
  549. float: left;
  550. box-sizing: border-box;
  551. border: 1rpx solid #fff;
  552. }
  553. .bid button:after {
  554. border: none;
  555. }
  556. .bid button {
  557. float: left;
  558. display: block;
  559. color: #fff;
  560. background: #333;
  561. border-radius: 0;
  562. width: 80rpx;
  563. height: 80rpx;
  564. line-height: 72rpx;
  565. padding: 0;
  566. border: none;
  567. }
  568. .bid input {
  569. float: left;
  570. height: 80rpx;
  571. width: 350rpx;
  572. background: #333;
  573. border-left: 1rpx solid #fff;
  574. border-right: 1rpx solid #fff;
  575. text-align: center;
  576. color: #fc4343;
  577. }
  578. .sub-price {
  579. float: right;
  580. width: 200rpx;
  581. margin-left: 10rpx;
  582. height: 100%;
  583. box-sizing: border-box;
  584. }
  585. .sub-price buttom::after {
  586. border: none;
  587. }
  588. .sub-price button {
  589. background: #e22;
  590. border-radius: 0;
  591. margin: 0;
  592. line-height: 76rpx;
  593. color: #fff;
  594. height: 84rpx;
  595. }
  596. .offer-count::after {
  597. content: '';
  598. display: block;
  599. clear: both;
  600. }
  601. .offer-count {
  602. text-align: center;
  603. color: #fff;
  604. font-size: 28rpx;
  605. background: #666;
  606. margin-bottom: 10rpx;
  607. padding: 15rpx 20rpx;
  608. }
  609. .offer-count .offer-count-left {
  610. float: left;
  611. }
  612. .offer-count .offer-count-right {
  613. float: right;
  614. }
  615. .end {
  616. text-align: center;
  617. background: #666;
  618. color: #fff;
  619. }
  620. .end text {
  621. line-height: 100rpx;
  622. }
  623. .not-auction {
  624. text-align: center;
  625. background: #fc4343;
  626. color: #fff;
  627. }
  628. .not-auction text {
  629. line-height: 100rpx;
  630. }
  631. .d-back-home {
  632. position: fixed;
  633. width: 80rpx;
  634. height: 80rpx;
  635. right: 30rpx;
  636. bottom: 166rpx;
  637. z-index: 10000;
  638. border-radius: 50%;
  639. background: #fff;
  640. }
  641. .mask {
  642. width: 100%;
  643. height: 100%;
  644. background: rgba(0, 0, 0, 0.3);
  645. position: fixed;
  646. top: 0;
  647. left: 0;
  648. text-align: center;
  649. }
  650. .mask view {
  651. margin-top: 40%;
  652. position: relative;
  653. }
  654. .mask view button {
  655. position: absolute;
  656. background: #fff;
  657. width: 280rpx;
  658. height: 80rpx;
  659. border-radius: 40rpx;
  660. font-size: 32rpx;
  661. color: #c75c21;
  662. left: 50%;
  663. margin-left: -140rpx;
  664. bottom: 40rpx;
  665. line-height: 80rpx;
  666. }
  667. .red-packet {
  668. background: rgba(0, 0, 0, 0.3);
  669. width: 100%;
  670. height: 100%;
  671. position: absolute;
  672. top: 0;
  673. left: 0;
  674. }
  675. .red-packet image {
  676. position: absolute;
  677. width: 524rpx;
  678. height: 632rpx;
  679. top: 50%;
  680. left: 50%;
  681. margin-left: -262rpx;
  682. margin-top: -316rpx;
  683. }
  684. .red-packet .close {
  685. position: absolute;
  686. left: 50%;
  687. top: 50%;
  688. margin-top: -310rpx;
  689. margin-left: 210rpx;
  690. z-index: 10;
  691. }
  692. .red-packet .btn {
  693. position: absolute;
  694. top: 50%;
  695. left: 50%;
  696. margin-top: 190rpx;
  697. margin-left: -254rpx;
  698. width: 600rpx;
  699. background: none;
  700. }
  701. .red-packet .btn::after {
  702. content: '';
  703. display: block;
  704. clear: both;
  705. }
  706. .red-packet .btn button::before {
  707. border: none;
  708. }
  709. .red-packet .btn button {
  710. width: 200rpx;
  711. height: 80rpx;
  712. float: left;
  713. margin-left: 30rpx;
  714. background: #fff;
  715. border-radius: 40rpx;
  716. font-size: 30rpx;
  717. color: #f8c323;
  718. }
  719. .red-packet text {
  720. width: 100%;
  721. position: absolute;
  722. top: 50%;
  723. margin-top: -110rpx;
  724. text-align: center;
  725. color: #e12e2e;
  726. font-weight: 600;
  727. font-size: 42rpx;
  728. }
  729. button[disabled] {
  730. color: #fff !important;
  731. background-color: #fab6b6 !important;
  732. border-color: #fab6b6 !important;
  733. }