scan.wxss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. /* page {
  2. background-repeat: no-repeat;
  3. background-size: 100% 100%;
  4. -moz-background-size: 100% 100%;
  5. background-color: #333;
  6. } */
  7. .nav-bar {
  8. --nav-bar-icon-color: #25CDB8;
  9. --nav-bar-text-color: #25CDB8; /* 示例:将文字颜色设置为红色 */
  10. }
  11. .container {
  12. /* --nav-bar-icon-color: black !important; */
  13. display: flex;
  14. flex-direction: column;
  15. align-items: center;
  16. width: 100%;
  17. height: 100vh;
  18. overflow: hidden;
  19. position: relative;
  20. }
  21. .bg-image {
  22. width: 100vw;
  23. display: block;
  24. position: absolute;
  25. top: 0;
  26. left: 0;
  27. z-index: -1;
  28. }
  29. .scan-body {
  30. display: flex;
  31. flex-direction: column;
  32. align-items: center;
  33. width: 100%;
  34. height: 100vh;
  35. }
  36. .nav-bar {
  37. width: 100vw;
  38. background-color: transparent !important;
  39. background: transparent !important;
  40. position: sticky;
  41. top: 0;
  42. left: 0;
  43. }
  44. .scan-content {
  45. display: flex;
  46. flex: 1;
  47. flex-direction: column;
  48. justify-content: center;
  49. align-items: center;
  50. width: 100%;
  51. position: relative;
  52. }
  53. .bg-phone-image {
  54. width: 480rpx;
  55. display: block;
  56. }
  57. .scan-tips {
  58. font-size: 24rpx;
  59. color: #6C6970;
  60. width: 480rpx;
  61. text-align: center;
  62. position: absolute;
  63. left: 135rpx;
  64. top: 740rpx;
  65. }
  66. .scan-btn-box {
  67. position: absolute;
  68. left: 60rpx;
  69. bottom: 250rpx;
  70. width: 630rpx;
  71. height: 90rpx;
  72. display: flex;
  73. border-radius: 45rpx;
  74. flex-direction: row;
  75. align-items: center;
  76. justify-content: center;
  77. background: linear-gradient(315deg, #0ABCA4 0%, rgba(11, 195, 170, 0.8) 100%);
  78. }
  79. .scan-btn-box image {
  80. width: 40rpx;
  81. height: 40rpx;
  82. display: block;
  83. }
  84. .scan-btn-box text {
  85. font-size: 32rpx;
  86. margin-left: 20rpx;
  87. color: #FFFFFF;
  88. }
  89. .scan-btn-box:active {
  90. opacity: 0.7;
  91. }
  92. .bottom-view-privacy {
  93. position: absolute;
  94. left: 0;
  95. bottom: 400rpx;
  96. width: 100vw;
  97. display: flex;
  98. margin-top: 42rpx;
  99. justify-content: center;
  100. flex-direction: row;
  101. flex-wrap: wrap;
  102. align-items: center;
  103. }
  104. .privacy-checkbox {
  105. display: flex;
  106. flex-direction: row;
  107. align-items: center;
  108. }
  109. .privacy-checkbox-icon {
  110. width: 36rpx;
  111. height: 36rpx;
  112. }
  113. .privacy-detail-btn {
  114. font-size: 24rpx;
  115. margin-left: 16rpx;
  116. color: #888888;
  117. }
  118. .privacy-detail-btn_tk {
  119. font-size: 24rpx;
  120. color: #0BC3AA;
  121. }
  122. .tips-box {
  123. display: flex;
  124. flex-direction: column;
  125. align-items: center;
  126. }
  127. .tips-content {
  128. width: 630rpx;
  129. min-height: 566rpx;
  130. background: linear-gradient(180deg, #C7DAFF 0%, #FFFFFF 37%, #FFFFFF 100%);
  131. border-radius: 16rpx 16rpx 16rpx 16rpx;
  132. display: flex;
  133. flex-direction: column;
  134. align-items: center;
  135. }
  136. .tips-contentB {
  137. width: 630rpx;
  138. min-height: 566rpx;
  139. background: linear-gradient(180deg, #CCFFF8 0%, #FFFFFF 37%, #FFFFFF 100%);
  140. border-radius: 16rpx 16rpx 16rpx 16rpx;
  141. display: flex;
  142. flex-direction: column;
  143. align-items: center;
  144. }
  145. .tips-close-btn {
  146. display: flex;
  147. flex-direction: column;
  148. justify-content: center;
  149. align-items: center;
  150. height: 116rpx;
  151. width: 116rpx;
  152. }
  153. .ic-tips {
  154. margin-top: 42rpx;
  155. height: 200rpx;
  156. width: 200rpx;
  157. }
  158. .tips-title {
  159. margin-top: 40rpx;
  160. color: #3E3D44;
  161. font-size: 32rpx;
  162. }
  163. .tips-desc {
  164. width: calc(100% - 72rpx);
  165. margin-top: 30rpx;
  166. margin-left: auto;
  167. margin-right: auto;
  168. margin-bottom: 40rpx;
  169. color: #6C6970;
  170. font-size: 24rpx;
  171. }