charge_miniapp/unpackage/dist/dev/mp-weixin/components/zs-half-ring-progress/half-ring-progress.wxss

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