.slide-container { position: relative; overflow: hidden; border-radius: 40px; background-color: #f5f5f5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* 已滑动区域样式 */ .slide-progress { position: absolute; top: 0; left: 0; background-color: #29e77c; /* 滑动过的区域颜色 */ z-index: 1; transition: background-color 0.3s ease; } /* 成功状态下的滑动区域颜色 */ .slide-container.success .slide-progress { background-color: #00c775; /* 验证成功后的颜色 */ } .slide-track { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; } .track-text { font-size: 14px; color: #666; } .slide-container.success .track-text { color: #fff; } .slide-block { position: absolute; top: 0; background-color: #fff; border-radius: 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); z-index: 3; touch-action: none; } .block-icon { color: #00c775; } /* eaffea */ /* 52c41a */