| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- .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;
- }
|