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.

901 lines
13 KiB

  1. @import "../app.wxss";
  2. page {
  3. background: #f4f5f9;
  4. }
  5. .outSide {
  6. position: fixed;
  7. top: 0;
  8. left: 0;
  9. width: 100%;
  10. height: 100%;
  11. background-color: #00000059;
  12. }
  13. .showPrivacy {
  14. position: fixed;
  15. width: 520rpx;
  16. background-color: #fff;
  17. left: 50%;
  18. top: 50%;
  19. transform: translate(-50%, -50%);
  20. padding: 60rpx 40rpx;
  21. border-radius: 20rpx;
  22. box-shadow: #00000047 2px 1px 2px 2px;
  23. }
  24. .showPrivacy .title {
  25. text-align: center;
  26. }
  27. .showPrivacy .content {
  28. text-indent: 2em;
  29. margin: 30rpx 0;
  30. }
  31. .showPrivacy button {
  32. width: 350rpx;
  33. }
  34. .showPrivacy button.agree {
  35. margin-bottom: 25rpx;
  36. }
  37. .showPrivacy button.check {
  38. background-color: #ffffff00;
  39. font-size: 21rpx;
  40. text-decoration: underline;
  41. padding: 0;
  42. }
  43. .showPrivacy button.check::after {
  44. border: none;
  45. }
  46. .showPrivacy .delete {
  47. position: absolute;
  48. top: 15rpx;
  49. right: 15rpx;
  50. width: 65rpx;
  51. height: 65rpx;
  52. }
  53. .temp {
  54. width: 100rpx;
  55. height: 100rpx;
  56. background-color: darkcyan
  57. }
  58. .userName {
  59. max-width: 200rpx;
  60. font-size: 28rpx;
  61. color: #292723;
  62. float: left;
  63. overflow: hidden;
  64. white-space: nowrap;
  65. text-overflow: ellipsis;
  66. }
  67. .xia {
  68. width: 24rpx;
  69. height: 14rpx;
  70. margin: auto 10rpx;
  71. display: block;
  72. position: absolute;
  73. top: 0;
  74. left: 0;
  75. right: 0;
  76. bottom: 0;
  77. /* margin: auto; */
  78. }
  79. .goSqunar {
  80. display: flex;
  81. justify-content: space-around;
  82. }
  83. .goSqunar1 {
  84. display: flex;
  85. justify-content: center;
  86. }
  87. .title {
  88. font-size: 32rpx;
  89. font-family: OPPOSans;
  90. font-weight: bold;
  91. }
  92. .title1 {
  93. max-width: 320rpx;
  94. font-size: 32rpx;
  95. font-family: OPPOSans;
  96. font-weight: bold;
  97. text-overflow: ellipsis;
  98. white-space: nowrap;
  99. overflow: hidden;
  100. }
  101. .squareMore {
  102. width: 24rpx;
  103. /* height: 15rpx; */
  104. }
  105. /* .marketName{
  106. } */
  107. .f {
  108. float: left;
  109. }
  110. .r {
  111. float: right;
  112. }
  113. .vgrade {
  114. /* width: 40rpx; */
  115. height: 26rpx;
  116. float: left;
  117. margin: 10rpx;
  118. background: linear-gradient(180deg, #d5a56e, #e9d0aa);
  119. border-radius: 16rpx 0 16rpx 0;
  120. color: #fff;
  121. line-height: 26rpx;
  122. font-size: 24rpx;
  123. padding: 4rpx 10rpx;
  124. }
  125. .integralNum {
  126. float: left;
  127. font-family: OPPOSans;
  128. font-weight: bold;
  129. color: #be8b50;
  130. font-size: 26rpx;
  131. }
  132. .color_box1 {
  133. background-color: #fff;
  134. background-image: url('https://formall.oss-accelerate.aliyuncs.com/cimg/v20211214/home_top_bnt.png');
  135. background-size: 100% 100%;
  136. border-radius: 0 0 40rpx 40rpx;
  137. overflow: hidden;
  138. background-repeat: no-repeat;
  139. }
  140. .color_box {
  141. /* padding-top: 20rpx; */
  142. /* background-image: linear-gradient(#DC143C, #F4F5F9); */
  143. background-color: #f4f5f9;
  144. }
  145. .underlingImg {
  146. width: 30rpx;
  147. height: 60rpx;
  148. font-size: 30prx;
  149. float: left;
  150. /* margin-top: 20rpx; */
  151. }
  152. .underlingName {
  153. float: left;
  154. line-height: 30rpx;
  155. color: #a6a6a6;
  156. /* margin-top: 20rpx; */
  157. margin-bottom: 20rpx;
  158. margin-left: 5rpx;
  159. }
  160. .index-position {
  161. background: rgba(0, 0, 0, 0.5);
  162. height: 88rpx;
  163. position: absolute;
  164. top: 0;
  165. width: 100%;
  166. font-family: PingFangSC-Semibold;
  167. font-size: 30rpx;
  168. color: #fff;
  169. letter-spacing: 0.75rpx;
  170. z-index: 9;
  171. line-height: 88rpx;
  172. overflow: hidden;
  173. }
  174. .red {
  175. position: absolute;
  176. width: 13rpx;
  177. height: 13rpx;
  178. border-radius: 50%;
  179. background: red;
  180. right: -50rpx;
  181. top: 19rpx;
  182. left: 0;
  183. margin: auto;
  184. display: none;
  185. }
  186. page {
  187. width: 100%;
  188. height: auto !important;
  189. overflow-x: hidden;
  190. }
  191. .txt {
  192. margin-left: 20rpx;
  193. }
  194. .game-entry {
  195. position: fixed;
  196. right: 27rpx;
  197. bottom: 443rpx;
  198. width: 120rpx;
  199. margin: 37rpx auto 0;
  200. z-index: 10;
  201. }
  202. .gameimg {
  203. display: block;
  204. width: 100%;
  205. }
  206. .underling {
  207. padding: 10rpx 30rpx;
  208. }
  209. .userinfo {
  210. width: 690rpx;
  211. height: 96rpx;
  212. border-radius: 16rpx;
  213. display: flex;
  214. justify-content: space-between;
  215. margin: 0 auto 30rpx auto;
  216. }
  217. .userinfo1 {
  218. width: 690rpx;
  219. height: 96rpx;
  220. border-radius: 16rpx;
  221. display: flex;
  222. justify-content: space-between;
  223. margin: 0 auto;
  224. }
  225. .infoLeft {
  226. height: 100%;
  227. border-radius: 12rpx;
  228. background: #fff;
  229. }
  230. .section {
  231. padding: 0 20rpx;
  232. justify-content: space-around;
  233. text-align: center;
  234. margin-top: 25rpx;
  235. margin-bottom: 30rpx;
  236. }
  237. .sellsection {
  238. margin-bottom: 37rpx;
  239. padding: 0 38rpx;
  240. }
  241. .section>view,
  242. .sellsection>view {
  243. width: 25%;
  244. display: inline-block;
  245. position: relative;
  246. }
  247. .section>view image,
  248. .sellsection>view image {
  249. display: block;
  250. margin: 0 auto;
  251. }
  252. .section>view image {
  253. width: 55rpx;
  254. height: 55rpx;
  255. margin-top: 20rpx;
  256. margin-bottom: 14rpx;
  257. }
  258. .sellsection>view image {
  259. width: 159rpx;
  260. height: 134rpx;
  261. }
  262. .section text {
  263. font-size: 24rpx;
  264. color: rgba(51, 51, 51, 1);
  265. display: block;
  266. margin-top: 0rpx;
  267. }
  268. .showQrcode {
  269. position: fixed;
  270. top: 0;
  271. left: 0;
  272. right: 0;
  273. bottom: 0;
  274. z-index: 1000;
  275. background: rgba(0, 0, 0, 0.6);
  276. }
  277. .qrcode image {
  278. margin: 15rpx 20rpx 15rpx;
  279. z-index: 100;
  280. }
  281. .qrcode1 image {
  282. margin: 15rpx 20rpx 15rpx;
  283. z-index: 100;
  284. }
  285. .showQrcode {
  286. position: fixed;
  287. top: 0;
  288. left: 0;
  289. right: 0;
  290. bottom: 0;
  291. z-index: 1000;
  292. background: rgba(0, 0, 0, 0.6);
  293. }
  294. .canvas-box {
  295. position: fixed;
  296. width: 500rpx;
  297. overflow: hidden;
  298. left: 0;
  299. top: 200rpx;
  300. right: 0;
  301. margin: auto;
  302. background: #fff;
  303. border-radius: 16rpx;
  304. z-index: 100;
  305. padding-bottom: 30rpx;
  306. }
  307. .showQrcode text {
  308. display: none;
  309. text-align: center;
  310. font-size: 28rpx;
  311. }
  312. .button {
  313. width: 414rpx;
  314. text-align: center;
  315. margin: 0 auto;
  316. height: 80rpx;
  317. line-height: 80rpx;
  318. background: rgba(255, 255, 255, 1);
  319. border-radius: 10rpx;
  320. font-size: 32rpx;
  321. color: rgba(2, 192, 255, 1);
  322. overflow: hidden;
  323. }
  324. .memberIds {
  325. padding-top: 30rpx;
  326. font-size: 30rpx;
  327. }
  328. .search {
  329. background: rgba(2, 192, 255, 1);
  330. height: 50rpx;
  331. }
  332. .searchbar {
  333. position: relative;
  334. width: 685rpx;
  335. height: 76rpx;
  336. margin: 0 auto;
  337. text-align: center;
  338. }
  339. .searchbar image {
  340. width: 40rpx;
  341. }
  342. .searchbar text {
  343. font-size: 28rpx;
  344. line-height: 50rpx;
  345. color: #fff;
  346. display: inline-block;
  347. }
  348. .user-avatar {
  349. width: 80rpx;
  350. height: 80rpx;
  351. border-radius: 50%;
  352. overflow: hidden;
  353. float: left;
  354. margin: 10rpx 10rpx;
  355. }
  356. .user-avatar image {
  357. display: block;
  358. width: 100%;
  359. height: 100%;
  360. }
  361. .user-avatar1 {
  362. width: 80rpx;
  363. height: 80rpx;
  364. border-radius: 50%;
  365. overflow: hidden;
  366. float: left;
  367. margin: 0 10rpx;
  368. }
  369. .user-avatar1 open-data {
  370. display: block;
  371. width: 100%;
  372. height: 100%;
  373. }
  374. .user-data {
  375. letter-spacing: 0.64rpx;
  376. line-height: 46rpx;
  377. font-size: 30rpx;
  378. color: #333;
  379. background: #fff;
  380. margin-top: 10rpx;
  381. margin-bottom: 26rpx;
  382. float: right;
  383. display: flex;
  384. flex-direction: column;
  385. }
  386. .user-data1 {
  387. letter-spacing: 0.64rpx;
  388. line-height: 46rpx;
  389. font-size: 30rpx;
  390. color: #333;
  391. background: #fff;
  392. /* margin-top: 10rpx; */
  393. margin-bottom: 26rpx;
  394. float: right;
  395. display: flex;
  396. flex-direction: column;
  397. }
  398. .nameBox open-data {
  399. float: left;
  400. }
  401. .chengzhangBox {
  402. height: 32rpx;
  403. line-height: 26rpx;
  404. border-radius: 9px 9px 9px 0px;
  405. font-family: PingFangSC-Regular;
  406. font-weight: 400;
  407. color: rgba(255, 255, 255, 1);
  408. float: left;
  409. margin-top: 8rpx;
  410. margin-left: 10rpx;
  411. }
  412. .chengzhang {
  413. font-size: 22rpx;
  414. font-weight: 400;
  415. color: #fff;
  416. height: 22rpx;
  417. line-height: 22rpx;
  418. padding: 0 8rpx;
  419. }
  420. .integral {
  421. margin-left: 70rpx;
  422. }
  423. .jifen {
  424. display: inline-block;
  425. height: 34rpx;
  426. color: #999;
  427. font-size: 24rpx;
  428. line-height: 34rpx;
  429. }
  430. .jifenNumber {
  431. color: #d18b4c;
  432. font-size: 34rpx;
  433. line-height: 34rpx;
  434. margin-left: 10rpx;
  435. font-weight: bold;
  436. }
  437. .view {
  438. display: flex;
  439. font-size: 24rpx;
  440. color: #999;
  441. }
  442. .view>.score {
  443. margin-left: 9rpx;
  444. color: #333;
  445. font-size: 30rpx;
  446. margin-right: 23rpx;
  447. font-family: PingFang-SC-Bold;
  448. }
  449. .qrcode1 {
  450. width: 106rpx;
  451. height: 96rpx;
  452. border-radius: 12rpx;
  453. }
  454. .qrcode {
  455. width: 106rpx;
  456. height: 96rpx;
  457. background: #fff;
  458. border-radius: 12rpx;
  459. }
  460. .qrcodeimg {
  461. width: 68rpx !important;
  462. height: 68rpx !important;
  463. }
  464. .leftimg {
  465. position: absolute;
  466. right: 40rpx;
  467. top: 60rpx;
  468. margin-top: -7rpx;
  469. width: 14rpx;
  470. height: 26rpx;
  471. }
  472. .duihuanimg {
  473. display: block;
  474. width: 48rpx;
  475. margin-top: 6rpx;
  476. }
  477. .product {
  478. width: 710rpx;
  479. margin: 30rpx auto 10rpx;
  480. border-radius: 16rpx;
  481. overflow: hidden;
  482. }
  483. .product image {
  484. display: block;
  485. width: 100%;
  486. }
  487. .textBox {
  488. width: 400rpx;
  489. height: 100%;
  490. float: left;
  491. margin-left: 10rpx;
  492. }
  493. .textBox .name {
  494. width: 400rpx;
  495. font-size: 28rpx;
  496. color: #3c3c3c;
  497. margin-top: 20rpx;
  498. }
  499. .textBox .title {
  500. width: 400rpx;
  501. font-size: 20rpx;
  502. color: #a6a6a6;
  503. margin-top: 10rpx;
  504. }
  505. .product .gift {
  506. width: 88rpx;
  507. height: 88rpx;
  508. float: left;
  509. margin-top: 30rpx;
  510. margin-left: 15rpx;
  511. }
  512. .next image {
  513. width: 26rpx;
  514. height: 40rpx;
  515. }
  516. .gift image {
  517. width: 88rpx;
  518. height: 76rpx;
  519. }
  520. .product .next {
  521. width: 32rpx;
  522. height: 60rpx;
  523. float: right;
  524. margin-top: 40rpx;
  525. margin-right: 26rpx;
  526. }
  527. #rushtobyCard {
  528. margin-top: 30rpx;
  529. }
  530. .signin {
  531. width: 542rpx;
  532. height: 94rpx;
  533. position: fixed;
  534. top: 0;
  535. left: 0;
  536. right: 0;
  537. z-index: 10000000;
  538. margin: auto;
  539. }
  540. .signin open-data {
  541. position: absolute;
  542. width: 90rpx;
  543. left: 0;
  544. top: 0;
  545. bottom: 0;
  546. height: 94rpx;
  547. margin: auto;
  548. border-radius: 50%;
  549. overflow: hidden;
  550. }
  551. .signin text {
  552. display: block;
  553. background: rgba(0, 0, 0, 0.5);
  554. font-size: 28rpx;
  555. height: 80rpx;
  556. width: 100%;
  557. line-height: 80rpx;
  558. color: #d6d5d5;
  559. text-indent: 4em;
  560. border-radius: 60rpx;
  561. margin-top: 7rpx;
  562. }
  563. .remainchengzhangzhi {
  564. display: block;
  565. color: #a6a6a6;
  566. font-size: 22rpx;
  567. margin-top: 5rpx;
  568. height: 30rpx;
  569. line-height: 30rpx;
  570. float: left;
  571. margin-left: 10rpx;
  572. width: 255rpx;
  573. overflow: hidden;
  574. text-overflow: ellipsis;
  575. white-space: nowrap;
  576. }
  577. progress {
  578. width: 200rpx;
  579. border-radius: 60rpx;
  580. overflow: hidden;
  581. float: left;
  582. margin-top: 10rpx;
  583. }
  584. .channelBox {
  585. width: 688rpx;
  586. /* height: 220rpx; */
  587. margin: 20rpx auto;
  588. display: flex;
  589. flex-wrap: wrap;
  590. /* justify-content: space-between; */
  591. background: #f4f5f9;
  592. }
  593. .kjBox {
  594. width: 25%;
  595. height: 118rpx;
  596. font-size: 24rpx;
  597. color: #a6a6a6;
  598. margin-top: 10rpx;
  599. text-align: center;
  600. }
  601. .kjBox1 {
  602. width: 25%;
  603. height: 118rpx;
  604. font-size: 24rpx;
  605. color: #a6a6a6;
  606. margin-top: 10rpx;
  607. text-align: center;
  608. }
  609. .kjBox .img {
  610. width: 60rpx;
  611. height: 60rpx;
  612. margin: auto;
  613. }
  614. .kjBox1 .img {
  615. width: 80rpx;
  616. height: 80rpx;
  617. margin: auto;
  618. }
  619. .text {
  620. margin: 0 auto;
  621. }
  622. .toutiao {
  623. width: 710rpx;
  624. height: 128rpx;
  625. line-height: 128rpx;
  626. margin: 0 auto;
  627. background: #fff;
  628. box-shadow: 0px 6rpx 16rpx 0px rgba(236, 238, 243, 1);
  629. border-radius: 12rpx;
  630. margin-top: 18rpx;
  631. margin-bottom: 18rpx;
  632. position: relative;
  633. }
  634. .toutiao1 {
  635. width: 710rpx;
  636. height: 128rpx;
  637. margin: 0 auto;
  638. background: #fff;
  639. box-shadow: 0px 6rpx 16rpx 0px rgba(236, 238, 243, 1);
  640. border-radius: 12rpx;
  641. margin-top: 18rpx;
  642. margin-bottom: 18rpx;
  643. display: flex;
  644. justify-content: space-between;
  645. }
  646. .xianshi {
  647. display: flex;
  648. flex-direction: column;
  649. justify-content: center;
  650. align-content: center;
  651. font-size: 30rpx;
  652. padding: 20rpx;
  653. }
  654. .xianshi>text {
  655. height: 40rpx;
  656. }
  657. .xianshi>text:nth-child(1) {
  658. font-size: 30rpx;
  659. font-family: PingFangSC;
  660. font-weight: 500;
  661. }
  662. .xianshi>text:nth-child(2) {
  663. margin-top: 10rpx;
  664. height: 28rpx;
  665. font-size: 20rpx;
  666. font-family: PingFangSC;
  667. font-weight: 400;
  668. color: rgba(166, 166, 166, 1);
  669. line-height: 28rpx;
  670. }
  671. .xsCon {
  672. width: 300rpx;
  673. display: flex;
  674. justify-content: flex-end;
  675. overflow: hidden;
  676. }
  677. .igBox {
  678. height: 100%;
  679. width: 100rpx;
  680. display: flex;
  681. flex-direction: column;
  682. justify-content: center;
  683. align-content: center;
  684. }
  685. .igBoxm {
  686. height: 100%;
  687. width: 100rpx;
  688. display: flex;
  689. flex-direction: column;
  690. text-align: center;
  691. }
  692. .imageH {
  693. height: 50rpx !important;
  694. width: 50rpx !important;
  695. border-radius: 50%;
  696. margin: 15rpx auto;
  697. margin-bottom: 15rpx;
  698. }
  699. .more {
  700. height: 70rpx !important;
  701. width: 70rpx !important;
  702. margin: 0 auto;
  703. }
  704. .imTit {
  705. height: 14px;
  706. font-size: 10px;
  707. font-family: PingFangSC;
  708. font-weight: 400;
  709. color: rgba(60, 60, 60, 1);
  710. line-height: 14px;
  711. width: 100%;
  712. overflow: hidden;
  713. text-overflow: ellipsis;
  714. white-space: nowrap;
  715. text-align: center;
  716. }
  717. .toutiao view:nth-child(2) {
  718. font-size: 26rpx;
  719. font-family: PingFangSC-Regular;
  720. font-weight: 400;
  721. color: rgba(60, 60, 60, 1);
  722. float: left;
  723. width: 500rpx;
  724. overflow: hidden;
  725. text-overflow: ellipsis;
  726. white-space: nowrap;
  727. }
  728. .toutiao view:nth-child(2) text:nth-child(1) {
  729. color: red;
  730. }
  731. .toutiao view:nth-child(2) text:nth-child(2) {
  732. text-decoration: line-through;
  733. color: red;
  734. }
  735. .toutiao .imgBox {
  736. width: 64rpx;
  737. height: 64rpx;
  738. float: left;
  739. margin: 5rpx 0 5rpx 20rpx;
  740. }
  741. .toutiao image {
  742. width: 48rpx;
  743. height: 38rpx;
  744. margin: auto;
  745. }
  746. .toutiao .qg {
  747. width: 80rpx;
  748. height: 44rpx;
  749. line-height: 44rpx;
  750. border-radius: 18rpx;
  751. border: 2rpx solid;
  752. position: absolute;
  753. top: 0;
  754. bottom: 0;
  755. right: 20rpx;
  756. margin: auto;
  757. font-size: 24rpx;
  758. font-family: PingFangSC-Medium;
  759. font-weight: 500;
  760. color: #fd782d;
  761. text-align: center;
  762. }
  763. i-tabs i-tabs-scroll {
  764. background: #f4f5f9 !important;
  765. }
  766. .integralBox {
  767. width: 110rpx;
  768. height: 110rpx;
  769. bottom: 500rpx;
  770. right: 20rpx;
  771. position: fixed;
  772. z-index: 1000000;
  773. }
  774. .integralBox1 {
  775. width: 140rpx;
  776. height: 140rpx;
  777. bottom: 500rpx;
  778. right: 20rpx;
  779. position: fixed;
  780. z-index: 1000000;
  781. }