scan.wxss 3.1 KB

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