index.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. .codeDetail {
  2. width: 100vw;
  3. min-height: 100vh;
  4. background-color: rgb(247, 247, 247);
  5. .detail-top {
  6. width: 100%;
  7. height: 100%;
  8. position: relative;
  9. z-index: 999;
  10. @include flex(center);
  11. .back-icon {
  12. position: absolute;
  13. left: 0;
  14. top: 50%;
  15. transform: translateY(-50%);
  16. }
  17. .shop-name {
  18. color: #000;
  19. font-size: 32rpx;
  20. }
  21. }
  22. .seize {
  23. width: 100%;
  24. height: 16rpx;
  25. background-color: #ffffff;
  26. }
  27. .container {
  28. width: 100%;
  29. padding: 32rpx 72rpx 0;
  30. box-sizing: border-box;
  31. position: relative;
  32. .code-image {
  33. position: relative;
  34. z-index: -1111;
  35. }
  36. .img-box {
  37. /* position: absolute;
  38. top: 32rpx;
  39. z-index: 9999;
  40. left: 50%;
  41. transform: translateX(-50%); */
  42. height: 908rpx;
  43. display: block;
  44. }
  45. .text {
  46. margin-top: 16rpx;
  47. text-align: center;
  48. margin-bottom: 32rpx;
  49. font-size: 28rpx;
  50. color: #3d3d3d;
  51. }
  52. .btn {
  53. margin: 0 auto;
  54. width: 332rpx;
  55. height: 96rpx;
  56. color: #ffffff;
  57. background-color: #fe4b1e;
  58. text-align: center;
  59. line-height: 96rpx;
  60. border-radius: 16rpx;
  61. font-size: 28rpx;
  62. }
  63. }
  64. .illustrate {
  65. position: fixed;
  66. left: 50%;
  67. transform: translateX(-50%);
  68. bottom: 80rpx;
  69. color: #ef530e;
  70. font-size: 28rpx;
  71. .illustrate-box {
  72. @include flex(center, null, 9rpx);
  73. margin-bottom: 20rpx;
  74. }
  75. }
  76. .use-illustrate {
  77. width: 100%;
  78. border-radius: 16rpx 16rpx 0 0;
  79. height: 394rpx;
  80. padding: 48rpx 32rpx 0 32rpx;
  81. box-sizing: border-box;
  82. .use-title {
  83. font-size: 32rpx;
  84. color: rgba(0, 0, 0, 0.9);
  85. font-weight: 600;
  86. margin-bottom: 32rpx;
  87. text-align: center;
  88. }
  89. .use-text {
  90. font-size: 28rpx;
  91. color: rgba(0, 0, 0, 0.4);
  92. }
  93. .use-btn {
  94. width: 100%;
  95. height: 96rpx;
  96. line-height: 96rpx;
  97. text-align: center;
  98. font-weight: 500;
  99. font-size: 32rpx;
  100. color: #ffffff;
  101. border-radius: 16rpx;
  102. background-color: #fe4b1e;
  103. margin-top: 48rpx;
  104. }
  105. }
  106. .pay-way {
  107. width: 100%;
  108. height: 428rpx;
  109. border-radius: 16rpx 16rpx 0 0;
  110. padding: 48rpx 32rpx 0 32rpx;
  111. box-sizing: border-box;
  112. .pay-title {
  113. font-size: 32rpx;
  114. color: rgba(0, 0, 0, 0.9);
  115. font-weight: 600;
  116. margin-bottom: 52rpx;
  117. text-align: center;
  118. }
  119. .pay-more {
  120. width: 100%;
  121. @include flex(center, null, 32rpx);
  122. flex-wrap: wrap;
  123. .more-box {
  124. width: 206rpx;
  125. @include flex(flex-start, null, 16rpx);
  126. image {
  127. width: 40rpx;
  128. height: 40rpx;
  129. display: block;
  130. }
  131. text {
  132. color: #3d3d3d;
  133. font-size: 28rpx;
  134. }
  135. }
  136. }
  137. .pay-btn {
  138. width: 100%;
  139. height: 96rpx;
  140. line-height: 96rpx;
  141. text-align: center;
  142. font-weight: 500;
  143. font-size: 32rpx;
  144. color: #ffffff;
  145. border-radius: 16rpx;
  146. background-color: #fe4b1e;
  147. margin-top: 48rpx;
  148. }
  149. }
  150. }