scan.wxss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. .scanContainer {
  2. display: flex;
  3. flex-direction: column;
  4. align-items: center;
  5. background-color: #ededed;
  6. }
  7. .header {
  8. display: flex;
  9. align-items: center;
  10. width: max-content;
  11. justify-content: space-between;
  12. position: fixed;
  13. top: 5%;
  14. left: 0;
  15. height: 35px;
  16. z-index: 999;
  17. padding-left: 10px;
  18. padding-right: 20px ;
  19. background-color: rgba(255, 255, 255, 0.5);
  20. border-radius: 0 40rpx 40rpx 0;
  21. }
  22. .header image{
  23. width: 25px;
  24. height: 25px;
  25. }
  26. .background {
  27. width: 100%;
  28. height: 50vh;
  29. }
  30. .scan-box{
  31. background-color: #FFFFFF;
  32. display: flex;
  33. flex-direction: column;
  34. justify-content: center;
  35. align-items: center;
  36. width: 90%;
  37. border-radius: 5%;
  38. position: absolute;
  39. top: 45%;
  40. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  41. }
  42. .lishidingdan{
  43. height: 65rpx;
  44. width: 65rpx;
  45. margin-left: 23rpx;
  46. }
  47. .login-container{
  48. display: flex;
  49. flex-direction: row;
  50. justify-content: space-between;
  51. align-items: center;
  52. width: 100%;
  53. max-width: 400px; /* 最大宽度 */
  54. padding: 3%;
  55. margin: 5% 0% 3%;
  56. box-sizing: border-box; /* 确保宽度包含 padding */
  57. }
  58. .user-icon {
  59. flex-grow: 1;
  60. /* display: flex;
  61. flex-direction: row;
  62. align-items: center;
  63. flex-grow: 10; */
  64. }
  65. .user-border-unlogin{
  66. display: flex;
  67. justify-content: center;
  68. align-items: center;
  69. border-radius: 50%;
  70. width: 100rpx;
  71. height: 100rpx;
  72. border: #fdfdfd solid 1rpx;
  73. background-color: #ebebeb;
  74. margin-right: 5%;
  75. }
  76. .user-border-unlogin image {
  77. width: 100rpx;
  78. height: 100rpx;
  79. border-radius: 50%;
  80. margin-right: 3%;
  81. }
  82. .user-icon-login {
  83. left: 5rpx; top: -9rpx;
  84. width: 100rpx;
  85. height: 100rpx;
  86. border-radius: 50%;
  87. }
  88. .user-tip {
  89. display: flex;
  90. height: 100%;
  91. flex-direction: column;
  92. justify-content: space-between;
  93. flex-grow: 5;
  94. }
  95. .toOtherPage{
  96. flex-grow: 2;
  97. display: flex;
  98. align-items: center;
  99. justify-content: center;
  100. font-size: 25rpx;
  101. }
  102. .line{
  103. width: 100%;
  104. height: 6rpx;
  105. background-color: #c8d6fa;
  106. padding: 0;
  107. margin: 0;
  108. }
  109. .scan-container {
  110. display: flex;
  111. width: 100%;
  112. flex-direction: column;
  113. align-items: center;
  114. margin: 5% 0% 5%;
  115. text-align: center;
  116. }
  117. .scan-image-box{
  118. display: flex;
  119. justify-content: center;
  120. align-items: center;
  121. width: 230rpx;
  122. height: 230rpx;
  123. }
  124. .scan-bg-1{
  125. position: absolute;
  126. width: 230rpx;
  127. height: 230rpx;
  128. border-radius: 50%;
  129. background: #b9d6fa;
  130. }
  131. .scan-bg-2{
  132. position: absolute;
  133. width: 210rpx;
  134. height: 210rpx;
  135. border-radius: 50%;
  136. background: #459ef7;
  137. }
  138. .scan-bg-3{
  139. position: absolute;
  140. width: 200rpx;
  141. height: 200rpx;
  142. border-radius: 50%;
  143. background: #0d7ee7;
  144. }
  145. .scan-container image {
  146. position: absolute;
  147. width: 120rpx;
  148. height: 120rpx;
  149. }
  150. .scan-tip-title{
  151. display: flex;
  152. justify-content: center;
  153. align-items: center;
  154. width: 90%;
  155. margin: 8% 0%;
  156. }
  157. .title-line{
  158. position: absolute;
  159. width: 80%;
  160. height: 3rpx;
  161. background-color: #e5e5e5;
  162. }
  163. .scan-tip-title-text{
  164. position: absolute;
  165. width: 30%;
  166. font-weight: 600;
  167. background-color: #FFFFFF;
  168. font-size: larger;
  169. }
  170. .scan-tip-text{
  171. font-size: small;
  172. color: #808080;
  173. }
  174. .version{
  175. display: flex;
  176. }