.progress-container.data-v-00ef5f96 { display: flex; justify-content: center; align-items: center; padding: 20rpx; } .ring-wrapper.data-v-00ef5f96 { position: relative; width: 400rpx; height: 200rpx; overflow: hidden; } /* 背景半环样式 */ .ring-bg.data-v-00ef5f96 { position: absolute; top: 0; left: 0; width: 400rpx; height: 400rpx; border-radius: 50%; border: 16rpx solid #97DAFF; box-sizing: border-box; clip: rect(0rpx, 400rpx, 200rpx, 0rpx); } /* 进度半环容器(控制旋转) */ .ring-progress.data-v-00ef5f96 { position: absolute; top: 0; left: 0; width: 400rpx; height: 200rpx; overflow: hidden; transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; } /* 左侧半环(青色) */ .ring-left.data-v-00ef5f96 { position: absolute; top: 0; left: 0; width: 400rpx; height: 400rpx; border-radius: 50%; border: 16rpx solid #8FF8FB; box-sizing: border-box; clip: rect(0rpx, 200rpx, 400rpx, 0rpx); } /* 中间过渡区 */ .ring-middle.data-v-00ef5f96 { position: absolute; top: 0; left: 150rpx; width: 100rpx; height: 400rpx; background: linear-gradient(to right, #8FF8FB, #5EC8FE); clip: rect(0rpx, 100rpx, 200rpx, 0rpx); } /* 右侧半环(蓝色) */ .ring-right.data-v-00ef5f96 { position: absolute; top: 0; left: 0; width: 400rpx; height: 400rpx; border-radius: 50%; border: 16rpx solid #47AEFF; box-sizing: border-box; clip: rect(0rpx, 400rpx, 400rpx, 200rpx); } /* 进度原点(末端圆点) */ .progress-dot.data-v-00ef5f96 { position: absolute; top: 0; left: 50%; width: 28rpx; height: 28rpx; background: #FFFFFF; border: 5rpx solid #47AEFF; border-radius: 50%; -webkit-transform-origin: center 200rpx; transform-origin: center 200rpx; margin-left: -14rpx; margin-top: -14rpx; box-shadow: 0 0 16rpx rgba(71, 174, 255, 0.8); transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; z-index: 10; } /* 中间文字样式 */ .progress-text.data-v-00ef5f96 { position: absolute; top: 65%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .percent.data-v-00ef5f96 { display: block; font-size: 60rpx; font-weight: bold; color: #333; margin-bottom: 10rpx; } .tips.data-v-00ef5f96 { display: block; font-size: 24rpx; color: #666; } /* 高亮文字(如“充电中”) */ .tips text.data-v-00ef5f96 { color: v-bind(themeColor); }