live.wxss 11 KB

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