ak-fp/src/views/components/TimeDown.vue

<template>
  <svg class="containerrr">
    <circle
      class="progress" :style="'stroke-dashoffset:' + progress" cx="40" cy="40" r="33"
      fill="transparent" stroke="white" stroke-width="4" />
    <text class="ptext" x="40" y="40" fill="white" text-anchor="middle" alignment-baseline="middle">
      {{ maxs }}S
    </text>
  </svg>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      progress: 0,
      maxs: 120
      };
  },
  created() {
    this.timeout();
  },
  methods: {
    timeout() {
      var that = this;
      var p = 220 / that.maxs / 100;
      var t = 0;
      var daojishi = setInterval(() => {
        if (that.maxs > 0) {
          t = t + 1;
          that.progress = p * t;
          var yu = t % 100;
          if (yu == 0) {
            that.maxs--;
          }
        } else {
          clearInterval(daojishi);
        }
      }, 10);
    },
  },
};
</script>

<style scoped lang="scss">
.containerrr {
  position: absolute;
  top: 130px;
  right: 26px;
  z-index: 999;
  margin: auto;
  width: 80px;
  height: 80px;
  background: #2b0180;
  border-radius: 50%;
}

.progress {
  stroke-dasharray: 220, 9000;
}

.ptext {
  font-family: "阿里巴巴普惠体MEDIUM";
  font-size: 19px;
}
</style>