| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- .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 */
|