.slide-container { position: relative; overflow: hidden; border-radius: 40px; background-color: #f5f5f5; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) inset; transition: background-color 0.3s; } /* 已滑动区域样式 */ .slide-progress { position: absolute; top: 0; left: 0; background-color: #eaffea; /* 滑动过的区域颜色 */ z-index: 1; border-top-right-radius:100rpx; border-bottom-right-radius:100rpx; 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; margin-top: 3rpx; 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; }