充电样式完成

project/biaopin/dv/weiyang/comps/chargingPercent.vue

@@ -0,0 +1,95 @@
+<script>
+import ValueUnit from "./valueUnit.vue";
+
+export default {
+  name: "chargingPercent",
+  components: {ValueUnit},
+  props: ["label", "value"],
+  computed: {
+    renderPosition() {
+      const offset = Math.round(120 * this.value / 100)
+      return {
+        '--offset-percent': `${offset}px`
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="chargingPercent">
+    {{ label }}
+    <value-unit :value="value" unit="%" color="#fff"/>
+    <div class="wave mar-8" :style="renderPosition"/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.chargingPercent {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+
+  &:before {
+    display: block;
+    content: " ";
+    border: 3px solid #2CD4C8;
+    border-radius: 50%;
+    width: 128px;
+    height: 128px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 2px 2px 8px 0 #2CD4C833, -2px -2px 8px 0 #2CD4C833, 2px -2px 8px 0 #2CD4C833, -2px 2px 8px 0 #2CD4C833;
+  }
+
+  .wave {
+    position: absolute;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    z-index: -1;
+    --offset-percent: 0;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 360px;
+      height: 360px;
+      left: 50%;
+      bottom: calc(-620px + var(--offset-percent));
+      background-color: rgba(255, 255, 255, .1);
+      border-radius: 45%;
+      transform: translate(-50%, -70%) rotate(0);
+      animation: rotate 6s linear infinite;
+      z-index: 10;
+    }
+
+    &::after {
+      border-radius: 47%;
+      background: radial-gradient(circle at center, rgba(44, 212, 200, 0.9) 50%, #ffffff00 100%);
+      transform: translate(-50%, -70%) rotate(0);
+      animation: rotate 10s linear -5s infinite;
+      z-index: 20;
+    }
+  }
+}
+
+@keyframes rotate {
+  50% {
+    transform: translate(-50%, -73%) rotate(180deg);
+  }
+  100% {
+    transform: translate(-50%, -70%) rotate(360deg);
+  }
+}
+</style>