.scanContainer { display: flex; flex-direction: column; align-items: center; background-color: #ededed; } .header { display: flex; align-items: center; width: max-content; justify-content: space-between; position: fixed; top: 5%; left: 0; height: 35px; z-index: 999; padding-left: 10px; padding-right: 20px ; background-color: rgba(255, 255, 255, 0.5); border-radius: 0 40rpx 40rpx 0; } .header image{ width: 25px; height: 25px; } .background { width: 100%; height: 50vh; } .scan-box{ background-color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; width: 90%; border-radius: 5%; position: absolute; top: 45%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .login-container{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; max-width: 400px; /* 最大宽度 */ padding: 3%; margin: 5% 0% 3%; box-sizing: border-box; /* 确保宽度包含 padding */ } .user-icon { flex-grow: 1; /* display: flex; flex-direction: row; align-items: center; flex-grow: 10; */ } .user-border-unlogin{ display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 100rpx; height: 100rpx; border: #d81e07 solid 1rpx; background-color: #ebebeb; margin-right: 5%; } .user-border-unlogin image { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 3%; } .user-icon-login { width: 100rpx; height: 100rpx; border-radius: 50%; } .user-tip { display: flex; height: 100%; flex-direction: column; justify-content: space-between; flex-grow: 5; } .toOtherPage{ flex-grow: 2; display: flex; align-items: center; justify-content: center; } .line{ width: 100%; height: 6rpx; background-color: #d81e07; padding: 0; margin: 0; } .scan-container { display: flex; width: 100%; flex-direction: column; align-items: center; margin: 5% 0% 5%; text-align: center; } .scan-image-box{ display: flex; justify-content: center; align-items: center; width: 230rpx; height: 230rpx; } .scan-bg-1{ position: absolute; width: 230rpx; height: 230rpx; border-radius: 50%; background: #fed3d4; } .scan-bg-2{ position: absolute; width: 210rpx; height: 210rpx; border-radius: 50%; background: #f2635d; } .scan-bg-3{ position: absolute; width: 200rpx; height: 200rpx; border-radius: 50%; background: #d81e07; } .scan-container image { position: absolute; width: 120rpx; height: 120rpx; } .scan-tip-title{ display: flex; justify-content: center; align-items: center; width: 90%; margin: 8% 0%; } .title-line{ position: absolute; width: 80%; height: 3rpx; background-color: #e5e5e5; } .scan-tip-title-text{ position: absolute; width: 30%; font-weight: 600; background-color: #FFFFFF; font-size: larger; } .scan-tip-text{ font-size: small; color: #808080; }