抖音c端
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

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