.loading-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 9999; background: url('/loading/加载页背景图.jpg') no-repeat center center; background-size: 100% 100%; } .loading-content { width: 230px; max-width: 600px; display: flex; flex-direction: column; align-items: center; margin-top: -70px; } .logo { width: 152px; font-size: 32px; font-weight: bold; margin-bottom: 50px; color: #333; position: relative; } .logo img{ width: 100%; } .truck-container { position: relative; width: 100%; height: 40px; margin-top: -40px; /* 向上移动,与进度条重叠 */ } .progress-container { width: 100%; height: 6px; background-color: rgba(255, 255, 255, 0.37); border-radius: 6px; overflow: hidden; position: relative; margin-bottom: 20px; padding: 2px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); display: flex; align-items: center; /* 保持垂直居中 */ } .progress-bar { height: 4px; /* 保持这个高度 */ background-color: #1087d6; transition: width 0.3s; border-radius: 3px; /* 移除这两行,它们导致了中间扩散效果 */ /* margin: 0 auto; */ /* align-self: center; */ /* 添加这行确保从左边开始 */ margin-left: 0; } .truck { position: absolute; top: -16px; /* 相对于truck-container定位 */ transform: translateX(-90%); /* 改为-90%,让小车更靠左一些 */ transition: left 0.3s; z-index: 10; } .truck img { display: block; width: 80px; height: auto; } .loading-text { font-size: 14px; color: #333; }