123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- .scanContainer {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .header {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- height: 44px;
- line-height: 44px;
- text-align: left;
- background-color: #fff;
- border-bottom: 1px solid #e5e5e5;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- z-index: 999;
- padding-left: 20px;
- }
- .background {
- width: 100%;
- height: 50vh;
- }
- .login-container {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- position: absolute;
- top: 50%; /* 定位在父容器中间 */
- left: 50%; /* 水平居中 */
- transform: translate(-50%, -50%); /* 平移以实现居中 */
- width: 90%; /* 适当宽度,避免溢出 */
- max-width: 400px; /* 最大宽度 */
- padding: 3%;
- background-color: #fff;
- border-radius: 8px;
- z-index: 1;
- box-sizing: border-box; /* 确保宽度包含 padding */
- }
- .user-icon {
- display: flex;
- flex-direction: row;
- align-items: center;
- flex-grow: 10;
- }
- .user-tip {
- display: flex;
- height: 100%;
- flex-direction: column;
- justify-content: space-between;
- }
- .user-icon image {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- margin-right: 3%;
- }
- .login-container button {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 33%;
- height: 33%;
- color: #fff;
- font-size: 28rpx;
- background-color: #15803d;
- font-weight: 549;
- }
- .order-tip {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .order-tip image {
- width: 100%;
- height: 100%;
- }
- .order-tip text {
- font-size: small;
- font-weight: 600;
- }
- .scan-container {
- display: flex;
- width: 100%;
- flex-direction: column;
- align-items: center;
- margin-top: 100rpx;
- text-align: center;
- background-color: #fff;
- padding: 20px;
- border-radius: 8px;
- }
- .scan-container image {
- width: 120px;
- height: 120px;
- border-radius: 50%;
- }
- .scan-container text {
- margin-top: 10px;
- font-size: 16px;
- color: #333;
- }
- /* 背景图 */
- gas-station-background {
- width: 100%;
- height: 50vh; /* 占据屏幕高度的一半 */
- object-fit: cover;
- position: relative;
- z-index: 0;
- }
|