scan.wxss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. .scanContainer {
  2. display: flex;
  3. flex-direction: column;
  4. align-items: center;
  5. }
  6. .header {
  7. position: fixed;
  8. top: 0;
  9. left: 0;
  10. right: 0;
  11. height: 44px;
  12. line-height: 44px;
  13. text-align: left;
  14. background-color: #fff;
  15. border-bottom: 1px solid #e5e5e5;
  16. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  17. z-index: 999;
  18. padding-left: 20px;
  19. }
  20. .background {
  21. width: 100%;
  22. height: 50vh;
  23. }
  24. .login-container {
  25. display: flex;
  26. flex-direction: row;
  27. justify-content: space-between;
  28. position: absolute;
  29. top: 50%; /* 定位在父容器中间 */
  30. left: 50%; /* 水平居中 */
  31. transform: translate(-50%, -50%); /* 平移以实现居中 */
  32. width: 90%; /* 适当宽度,避免溢出 */
  33. max-width: 400px; /* 最大宽度 */
  34. padding: 3%;
  35. background-color: #fff;
  36. border-radius: 8px;
  37. z-index: 1;
  38. box-sizing: border-box; /* 确保宽度包含 padding */
  39. }
  40. .user-icon {
  41. display: flex;
  42. flex-direction: row;
  43. align-items: center;
  44. flex-grow: 10;
  45. }
  46. .user-tip {
  47. display: flex;
  48. height: 100%;
  49. flex-direction: column;
  50. justify-content: space-between;
  51. }
  52. .user-icon image {
  53. width: 40px;
  54. height: 40px;
  55. border-radius: 50%;
  56. margin-right: 3%;
  57. }
  58. .login-container button {
  59. display: flex;
  60. justify-content: center;
  61. align-items: center;
  62. width: 33%;
  63. height: 33%;
  64. color: #fff;
  65. font-size: 28rpx;
  66. background-color: #15803d;
  67. font-weight: 549;
  68. }
  69. .order-tip {
  70. display: flex;
  71. flex-direction: column;
  72. align-items: center;
  73. }
  74. .order-tip image {
  75. width: 100%;
  76. height: 100%;
  77. }
  78. .order-tip text {
  79. font-size: small;
  80. font-weight: 600;
  81. }
  82. .scan-container {
  83. display: flex;
  84. width: 100%;
  85. flex-direction: column;
  86. align-items: center;
  87. margin-top: 100rpx;
  88. text-align: center;
  89. background-color: #fff;
  90. padding: 20px;
  91. border-radius: 8px;
  92. }
  93. .scan-container image {
  94. width: 120px;
  95. height: 120px;
  96. border-radius: 50%;
  97. }
  98. .scan-container text {
  99. margin-top: 10px;
  100. font-size: 16px;
  101. color: #333;
  102. }
  103. /* 背景图 */
  104. gas-station-background {
  105. width: 100%;
  106. height: 50vh; /* 占据屏幕高度的一半 */
  107. object-fit: cover;
  108. position: relative;
  109. z-index: 0;
  110. }