抖音小程序C端
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

980 行
14 KiB

  1. @import "../../../app.ttss";
  2. button::after {
  3. border: none;
  4. }
  5. page {
  6. height: auto !important;
  7. background: #f4f5f9;
  8. }
  9. .order {
  10. width: 100%;
  11. padding-bottom: 40rpx;
  12. overflow: hidden;
  13. }
  14. .success {
  15. vertical-align: middle;
  16. width: 40rpx;
  17. margin-right: 10rpx;
  18. float: left;
  19. }
  20. .tips {
  21. width: 92%;
  22. height: 70rpx;
  23. background: #d4a971;
  24. color: #fff;
  25. padding: 20rpx 4% 0;
  26. }
  27. .tipsX {
  28. width: 92%;
  29. height: 70rpx;
  30. background: #2c8dff;
  31. color: #fff;
  32. padding: 20rpx 4% 0;
  33. }
  34. .merchantName {
  35. color: #3c3c3c !important;
  36. /* margin-left: 160rpx; */
  37. font-size: 28rpx;
  38. float: left;
  39. margin-left: 30rpx;
  40. height: 100%;
  41. line-height: 90rpx;
  42. }
  43. .tips view:nth-child(2) {
  44. font-size: 32rpx;
  45. padding-left: 16rpx;
  46. width: 100%;
  47. }
  48. .tips view:nth-child(1) {
  49. width: 100%;
  50. height: 32rpx;
  51. background: #fff;
  52. border-radius: 50%;
  53. color: #00c0ff;
  54. text-align: center;
  55. font-size: 28rpx;
  56. }
  57. .msg text:nth-child(1) {
  58. width: 90%;
  59. font-size: 28rpx;
  60. float: left;
  61. }
  62. .msg text:nth-child(2) {
  63. font-size: 24rpx;
  64. float: left;
  65. margin-left: 35rpx;
  66. }
  67. .section {
  68. /* margin-top: 2%; */
  69. background: #fff;
  70. }
  71. .detail_msg {
  72. width: 92%;
  73. display: flex;
  74. margin: 0 4%;
  75. margin-top: 10rpx;
  76. padding-bottom: 42rpx;
  77. border-bottom: 1rpx solid #eee;
  78. }
  79. .logo {
  80. display: block;
  81. width: 120rpx;
  82. height: 120rpx;
  83. border-radius: 16rpx;
  84. }
  85. .logo image {
  86. width: 120rpx;
  87. height: 120rpx;
  88. border-radius: 16rpx;
  89. }
  90. .sectionTit {
  91. padding-top: 30rpx;
  92. width: 92%;
  93. margin: 0 4%;
  94. font-size: 30rpx;
  95. color: #3c3c3c;
  96. }
  97. /* .info view:nth-child(1) {
  98. padding: 0 4%;
  99. width: 80%;
  100. overflow: hidden;
  101. text-overflow: ellipsis;
  102. white-space: nowrap;
  103. } */
  104. .info {
  105. width: 100%;
  106. position: relative;
  107. }
  108. .infoArrow {
  109. position: absolute;
  110. right: 26rpx;
  111. width: 20rpx;
  112. margin: auto;
  113. bottom: 90rpx;
  114. }
  115. /* .info view:nth-child(1) text {
  116. font-size: 30rpx;
  117. color: #000;
  118. letter-spacing: 0;
  119. } */
  120. /* .info view:nth-child(1) text:nth-child(2) {
  121. color: #ffae00;
  122. font-size: 24rpx;
  123. } */
  124. /* .info view:nth-child(2), .info view:nth-child(3) {
  125. font-size: 24rpx;
  126. padding-left: 4%;
  127. color: #919191;
  128. letter-spacing: 0;
  129. } */
  130. /* .info view:nth-child(2) text, .info view:nth-child(3) text {
  131. font-size: 22rpx;
  132. color: #b8b8b8;
  133. } */
  134. .payment {
  135. width: 92%;
  136. height: 120rpx;
  137. line-height: 120rpx;
  138. padding: 0 4%;
  139. display: flex;
  140. justify-content: space-between;
  141. border-bottom: 20rpx solid #ededed;
  142. }
  143. .payment view:nth-child(2) text:nth-child(1) {
  144. font-size: 36rpx;
  145. color: #ff3434;
  146. font-weight: bold;
  147. }
  148. .payment view:nth-child(2) text:nth-child(2) {
  149. font-size: 24rpx;
  150. color: #b4b4b4;
  151. padding-left: 18rpx;
  152. text-decoration: line-through;
  153. }
  154. .dhCode {
  155. position: relative;
  156. height: 96rpx;
  157. line-height: 96rpx;
  158. border-bottom: 1rpx solid #f4f5f9;
  159. padding-left: 5%;
  160. padding-right: 5%;
  161. }
  162. .classif {
  163. background: #fff;
  164. width: 100%;
  165. margin-top: 20rpx;
  166. }
  167. .wuliu {
  168. height: 96rpx;
  169. line-height: 96rpx;
  170. border-bottom: 1rpx solid #f4f5f9;
  171. padding-left: 5%;
  172. padding-right: 5%;
  173. overflow: hidden;
  174. }
  175. .left {
  176. float: left;
  177. }
  178. .sign {
  179. width: 160rpx;
  180. height: 60rpx;
  181. line-height: 60rpx;
  182. text-align: center;
  183. background-color: #00c0ff;
  184. color: #fff;
  185. border-radius: 12rpx;
  186. margin: 40rpx auto;
  187. padding: 12rpx 20rpx;
  188. font-size: 28rpx;
  189. }
  190. .left {
  191. float: left;
  192. font-size: 26rpx;
  193. color: #a6a6a6;
  194. }
  195. .copeCode {
  196. float: left;
  197. margin: 20rpx 10rpx;
  198. padding: 10rpx;
  199. height: 30rpx;
  200. line-height: 30rpx;
  201. border-radius: 8rpx;
  202. color: #df3502;
  203. border:1rpx #a6a6a6 solid;
  204. font-size: 28rpx;
  205. }
  206. .goInquire {
  207. float: left;
  208. margin: 20rpx 10rpx;
  209. padding: 10rpx;
  210. height: 30rpx;
  211. line-height: 30rpx;
  212. border:1rpx #a6a6a6 solid;
  213. border-radius: 8rpx;
  214. color: #3cc51f;
  215. font-size: 28rpx;
  216. }
  217. /*
  218. .classifShop{
  219. background: #FFFFFF;
  220. width: 100%;
  221. margin-top: 20rpx;
  222. padding-bottom: 20rpx;
  223. }
  224. .classifShop >view{
  225. font-size: 28rpx;
  226. color: #A6A6A6;
  227. position: relative;
  228. display: flex;
  229. justify-content: space-between;
  230. padding-left: 5%;
  231. padding-right: 5%;
  232. margin-bottom: 20rpx;
  233. }
  234. .classifShop >view:nth-child(1){
  235. height: 88rpx!important;
  236. line-height:94rpx;
  237. } */
  238. .classif > view:nth-child(2), .classif > view:nth-child(3) {
  239. position: relative;
  240. height: 94rpx;
  241. line-height: 94rpx;
  242. display: flex;
  243. justify-content: space-between;
  244. padding-left: 5%;
  245. padding-right: 5%;
  246. /* border-bottom: 1rpx solid #eee; */
  247. }
  248. .classif > view text:nth-child(2) {
  249. font-size: 28rpx;
  250. /* color: #3c3c3c; */
  251. }
  252. .classif > view text:nth-child(1) {
  253. font-size: 28rpx;
  254. color: #a6a6a6;
  255. float: left;
  256. }
  257. .classif > view:nth-child(1) {
  258. display: block;
  259. }
  260. .classif > view:nth-child(6) text:nth-child(2) {
  261. color: #666;
  262. }
  263. .spcode {
  264. position: absolute;
  265. right: 70rpx;
  266. bottom: 0;
  267. top: 0;
  268. margin: auto;
  269. width: 50rpx;
  270. z-index: 1;
  271. }
  272. .rArrow {
  273. position: absolute;
  274. right: 26rpx;
  275. height: 20rpx;
  276. width: 20rpx;
  277. margin: auto;
  278. bottom: 30rpx;
  279. }
  280. /*mask*/
  281. .drawer_screen {
  282. position: absolute;
  283. width: 100%;
  284. height: 100%;
  285. top: 0;
  286. left: 0;
  287. z-index: 1000;
  288. background: #000;
  289. opacity: 0.5;
  290. overflow: hidden;
  291. }
  292. .drawer_box {
  293. width: 650rpx;
  294. position: fixed;
  295. overflow: hidden;
  296. top: 50%;
  297. left: 0;
  298. z-index: 1001;
  299. margin: -150px 50rpx 0 50rpx;
  300. border-radius: 3px;
  301. }
  302. .drawer_title {
  303. padding: 15px;
  304. font: 20px "microsoft yahei";
  305. text-align: center;
  306. }
  307. .drawer_content {
  308. height: 210px;
  309. overflow-y: scroll; /*超出父盒子高度可滚动*/
  310. }
  311. .btn_ok {
  312. padding: 10px;
  313. font: 20px "microsoft yahei";
  314. text-align: center;
  315. border-top: 1px solid #e8e8ea;
  316. color: #3cc51f;
  317. }
  318. .top {
  319. padding-top: 8px;
  320. }
  321. .bottom {
  322. padding-bottom: 8px;
  323. }
  324. .title {
  325. height: 30px;
  326. line-height: 30px;
  327. width: 160rpx;
  328. text-align: center;
  329. display: inline-block;
  330. font: 300 28rpx/30px "microsoft yahei";
  331. }
  332. .input_base {
  333. border: 2rpx solid #ccc;
  334. padding-left: 10rpx;
  335. margin-right: 50rpx;
  336. }
  337. .input_h30 {
  338. height: 30px;
  339. line-height: 30px;
  340. }
  341. .input_h60 {
  342. height: 60px;
  343. }
  344. .input_view {
  345. font: 12px "microsoft yahei";
  346. background: #fff;
  347. color: #000;
  348. line-height: 30px;
  349. }
  350. input {
  351. font: 12px "microsoft yahei";
  352. background: #fff;
  353. color: #000;
  354. }
  355. radio {
  356. margin-right: 20px;
  357. }
  358. .grid {
  359. display: -webkit-box;
  360. display: box;
  361. }
  362. .col-0 {
  363. -webkit-box-flex: 0;
  364. box-flex: 0;
  365. }
  366. .col-1 {
  367. -webkit-box-flex: 1;
  368. box-flex: 1;
  369. }
  370. .fl {
  371. float: left;
  372. color: #3c3c3c !important;
  373. }
  374. .fr {
  375. float: left;
  376. }
  377. .clearfix:after {
  378. content: ".";
  379. display: block;
  380. height: 0;
  381. clear: both;
  382. visibility: hidden;
  383. }
  384. .panel {
  385. width: 600rpx;
  386. border-radius: 10rpx;
  387. background-color: #fff;
  388. margin: 30rpx auto 0;
  389. padding: 30rpx 0;
  390. position: relative;
  391. z-index: 10000000000;
  392. }
  393. .pane2 {
  394. background: #fff;
  395. opacity: 0.6;
  396. }
  397. .pane2 image {
  398. width: 500rpx;
  399. display: block;
  400. margin: 40rpx auto 0;
  401. }
  402. .barcode {
  403. height: 100rpx;
  404. width: 500rpx;
  405. margin: 0 auto;
  406. }
  407. .barnum {
  408. width: 88%;
  409. height: 46rpx;
  410. line-height: 46rpx;
  411. font-size: 32rpx;
  412. text-align: center;
  413. letter-spacing: 2rpx;
  414. white-space: nowrap;
  415. color: #999;
  416. }
  417. .barnum text {
  418. color: #333;
  419. }
  420. .barcode > canvas {
  421. width: 500rpx;
  422. height: 100rpx;
  423. }
  424. .qrcode {
  425. height: 340rpx;
  426. display: flex;
  427. flex-direction: column;
  428. justify-content: flex-end;
  429. align-items: center;
  430. }
  431. .qrcode > canvas {
  432. width: 350rpx;
  433. height: 350rpx;
  434. }
  435. .left {
  436. float: left;
  437. }
  438. .right {
  439. float: right;
  440. }
  441. .RMB {
  442. color: #fd782d !important;
  443. font-size: 24rpx !important;
  444. float: right;
  445. }
  446. .jine {
  447. color: #fd782d !important;
  448. font-size: 36rpx !important;
  449. font-weight: 400 !important;
  450. float: right;
  451. margin-left: 10rpx;
  452. }
  453. .jine1 {
  454. color: #b8b8b8 !important;
  455. font-size: 30rpx !important;
  456. font-weight: 400 !important;
  457. }
  458. .buy-view {
  459. /* background: #fff; */
  460. position: fixed;
  461. padding-top: 30rpx;
  462. height: 94rpx;
  463. bottom: 0;
  464. left: 0;
  465. right: 0;
  466. z-index: 100;
  467. padding-bottom: 30rpx;
  468. }
  469. .buy {
  470. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  471. height: 94rpx;
  472. width: 670rpx;
  473. margin: 0 auto;
  474. color: #fff;
  475. font-size: 32rpx;
  476. line-height: 94rpx;
  477. border-radius: 61rpx;
  478. }
  479. .buyX {
  480. background: linear-gradient(180deg, #cc9a60 0%, #dfbf8e 100%);
  481. height: 94rpx;
  482. width: 670rpx;
  483. margin: 0 auto;
  484. color: #fff;
  485. font-size: 32rpx;
  486. line-height: 94rpx;
  487. border-radius: 61rpx;
  488. }
  489. .salePriceStr{
  490. color: #999;
  491. letter-spacing: 0;
  492. padding-left: 4%;
  493. overflow: hidden;
  494. }
  495. .subTitle{
  496. font-size: 22rpx;
  497. color: #b8b8b8;
  498. padding-left: 4%;
  499. letter-spacing: 0;
  500. }
  501. .xidanTiem{
  502. padding-left: 4%;
  503. color: #b8b8b8;
  504. letter-spacing: 0;
  505. font-size: 22rpx;
  506. }
  507. .rmb {
  508. color: #d5af67 ;
  509. font-size: 24rpx ;
  510. line-height: 40rpx ;
  511. float: left ;
  512. }
  513. .pri01 {
  514. font-size: 36rpx ;
  515. color: #d5af67 ;
  516. letter-spacing: 0 ;
  517. line-height: 40rpx ;
  518. float: left ;
  519. }
  520. .throgh {
  521. text-decoration: line-through ;
  522. margin-left: 10rpx ;
  523. color: #999 ;
  524. height: 32rpx ;
  525. line-height: 45rpx ;
  526. float: left;
  527. font-size: 26rpx;
  528. }
  529. .active {
  530. opacity: 0.6;
  531. }
  532. .game-entry {
  533. width: 690rpx;
  534. height: 140rpx;
  535. margin: 20rpx auto 0;
  536. }
  537. .gameimg {
  538. display: block;
  539. width: 100%;
  540. height: 140rpx;
  541. }
  542. /*
  543. .merchantVoList {
  544. width: 100%;
  545. }
  546. .merchantVoList .tel {
  547. width: 50rpx;
  548. height: 50rpx;
  549. float: right;
  550. z-index: 10;
  551. margin-top: 30rpx;
  552. } */
  553. .btns {
  554. background: #00c0ff;
  555. height: 94rpx;
  556. width: 670rpx;
  557. margin: 0 auto 30rpx;
  558. color: #fff;
  559. font-size: 36rpx;
  560. line-height: 94rpx;
  561. border-radius: 61rpx;
  562. }
  563. /* .merchantImgUrl{
  564. width: 90rpx;
  565. float: left;
  566. border-radius: 10rpx;
  567. z-index: 10;
  568. margin: 0 auto;
  569. } */
  570. .support-tansfer {
  571. width: 690rpx;
  572. border-radius: 50rpx;
  573. margin-top: 60rpx;
  574. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%) !important;
  575. }
  576. .share {
  577. width: 40rpx;
  578. height: 40rpx;
  579. margin-right: 20rpx;
  580. }
  581. .showT {
  582. width: 100%;
  583. height: 100vh;
  584. background-color: rgba(0, 0, 0, 0.1);
  585. position: fixed;
  586. top: 0;
  587. left: 0;
  588. overflow: hidden;
  589. }
  590. .titleBxo {
  591. width: 70%;
  592. margin: 300rpx auto;
  593. background-color: #fff;
  594. border-radius: 12rpx;
  595. overflow: hidden;
  596. }
  597. .titleBxo .text {
  598. margin: 40rpx auto 20rpx auto;
  599. text-align: center;
  600. font-size: 36rpx;
  601. }
  602. .titleBxo .p {
  603. margin-top: 10rpx auto 30rpx auto;
  604. font-size: 22rpx;
  605. text-align: center;
  606. }
  607. .btnBox {
  608. overflow: hidden;
  609. margin-top: 40rpx;
  610. margin-bottom: 20rpx;
  611. display: flex;
  612. justify-content: space-around;
  613. }
  614. .le {
  615. width: 40%;
  616. height: 60rpx;
  617. line-height: 60rpx;
  618. border-radius: 10rpx;
  619. background-color: #00c0ff;
  620. text-align: center;
  621. color: #fff;
  622. }
  623. .ri {
  624. width: 40%;
  625. height: 60rpx;
  626. line-height: 60rpx;
  627. border-radius: 10rpx;
  628. text-align: center;
  629. border: 1rpx solid #919191;
  630. }
  631. .childList {
  632. padding-left: 5%;
  633. padding-right: 5%;
  634. overflow: hidden;
  635. }
  636. .childTitle {
  637. font-size: 28rpx;
  638. color: #a6a6a6;
  639. margin-top: 20rpx;
  640. }
  641. .childItme {
  642. border-radius: 12rpx;
  643. overflow: hidden;
  644. background-color: #fff;
  645. margin: 20rpx;
  646. }
  647. .orderName {
  648. margin: 20rpx;
  649. font-size: 26rpx;
  650. }
  651. .chaildDetBox {
  652. margin: 20rpx;
  653. overflow: hidden;
  654. }
  655. .chaildImg {
  656. float: left;
  657. width: 100rpx;
  658. height: 100rpx;
  659. border-radius: 10rpx;
  660. }
  661. .childDataBox {
  662. float: left;
  663. width: 50%;
  664. margin-left: 20rpx;
  665. }
  666. .childPriceStr {
  667. font-size: 24rpx;
  668. color: #919191;
  669. letter-spacing: 0;
  670. margin-left: 20rpx;
  671. }
  672. .groupTextBox{
  673. background: #fff;
  674. overflow: hidden;
  675. padding-bottom: 10rpx;
  676. }
  677. .groupTitleBox{
  678. background: #fff;
  679. }
  680. .groupTitle{
  681. color: #333;
  682. letter-spacing: 0;
  683. font-size: 30rpx;
  684. height: 50rpx;
  685. line-height: 50rpx;
  686. width: 92%;
  687. margin: 0 auto;
  688. font-weight: bold;
  689. }
  690. .groupTitleS{
  691. color: #333;
  692. letter-spacing: 0;
  693. font-size: 28rpx;
  694. height: 50rpx;
  695. line-height: 50rpx;
  696. width: 90%;
  697. margin: 0 auto;
  698. /* font-weight: bold; */
  699. }
  700. .groupDetailsBox{
  701. width: 90%;
  702. margin: 0 auto;
  703. }
  704. .groupTiemBox{
  705. color: #333333;
  706. overflow: hidden;
  707. }
  708. .groupTiemName{
  709. float: left;
  710. font-size: 26rpx;
  711. /* color: #a6a6a6; */
  712. }
  713. .groupTiemPay{
  714. float: right;
  715. font-size: 26rpx;
  716. /* color: #a6a6a6; */
  717. }
  718. .yuandian{
  719. background-color: #333333;
  720. width: 4rpx;
  721. height: 4rpx;
  722. border-radius: 50%;
  723. margin: 16rpx 8rpx 0 0;
  724. float: left;
  725. }
  726. .notes {
  727. width: 100%;
  728. background: #fff;
  729. padding-bottom: 30rpx;
  730. }
  731. .notesH{
  732. width: 92%;
  733. font-weight: bold;
  734. font-size: 32rpx;
  735. color: #3c3c3c;
  736. margin: 10rpx auto;
  737. padding-top: 10rpx;
  738. }
  739. .timeText{
  740. color: #333;
  741. letter-spacing: 0;
  742. font-size: 14px;
  743. height: 25px;
  744. line-height: 25px;
  745. width: 92%;
  746. margin: 10rpx auto;
  747. }
  748. .Hchild{
  749. width: 92%;
  750. margin: 0 auto;
  751. color: #333;
  752. letter-spacing: 0;
  753. font-size: 12px;
  754. letter-spacing: 0;
  755. line-height: 21px;
  756. display: block;
  757. }
  758. .notesText{
  759. width: 92%;
  760. margin: 0 auto;
  761. color: #333;
  762. letter-spacing: 0;
  763. font-size: 24rpx;
  764. letter-spacing: 0;
  765. line-height: 42rpx;
  766. display: block;
  767. }
  768. .panel{
  769. position: relative;
  770. }
  771. .closeRq{
  772. position: absolute;
  773. width: 420rpx;
  774. height: 420rpx;
  775. line-height: 420rpx;
  776. text-align: center;
  777. background-color: rgba(0, 0, 0, 0.8);
  778. left: 50%; top: 50%;
  779. transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
  780. z-index: 10000000;
  781. color: #fff;
  782. font-size: 38rpx;
  783. }
  784. .updataRqCode{
  785. width: 80rpx !important;
  786. height: 80rpx !important;
  787. margin-top: calc(50%-80rpx) !important;
  788. margin-left: calc(50%-80rpx) !important;
  789. display: inline-block !important;
  790. }
  791. .upDataRq{
  792. position: absolute;
  793. width: 100%;
  794. text-align: center;
  795. height: 80rpx;
  796. color: #fff ;
  797. top: 20%;
  798. left: 0;
  799. }
  800. .coedTiem{
  801. text-align: center;
  802. /* color: rgba(253,131,45,1); */
  803. margin-bottom: 20rpx;
  804. }
  805. .zhuangtai{
  806. margin-top: 20rpx;
  807. width: 100%;
  808. background-color: #fff;
  809. }
  810. .panel, .zhuangtai image {
  811. width:500rpx;
  812. display:block;
  813. border-radius:10rpx;
  814. margin:0 auto;
  815. padding:0;
  816. z-index:10000;
  817. overflow: hidden;
  818. }
  819. .panel{
  820. position: relative;
  821. }
  822. .goRefund{
  823. border: 1rpx solid #d4a971;
  824. border-radius: 50rpx;
  825. color: #3c3c3c;
  826. padding: 6rpx 12rpx;
  827. float: right;
  828. text-align: center;
  829. font-size: 24rpx;
  830. margin-right: 26rpx;
  831. }
  832. .evaluate{
  833. width: 80%;
  834. margin: 20rpx auto;
  835. background-color: #d4a971;
  836. color: #fff;
  837. font-size: 32rpx;
  838. text-align: center;
  839. padding: 10rpx 0 ;
  840. border-radius: 25rpx;
  841. }
  842. .serviceBox{
  843. margin: 40rpx auto;
  844. overflow: hidden;
  845. border: #d4a971 1px solid;
  846. border-radius: 24rpx;
  847. text-align: center;
  848. padding: 6rpx;
  849. font-size: 26rpx;
  850. color: #d4a971;
  851. width: 240rpx;
  852. }
  853. .serviceImg{
  854. width: 30rpx;
  855. height: 30rpx;
  856. float: left;
  857. margin-left: 20rpx;
  858. margin-top: 6rpx;
  859. }
  860. .serviceText{
  861. float: left;
  862. margin-left: 10rpx;
  863. }
  864. .explainText{
  865. margin-top: 20rpx;
  866. text-align: center;
  867. font-size: 24rpx;
  868. color: #b8b8b8;
  869. }