抖音c端
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

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