抖音c端
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

867 строки
13 KiB

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