scan.wxss 3.2 KB

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