css实现圈+箭头，箭头贴着圆的切线

公司需要实现类似的一个页面，我就想着把每一个球都封装成一个组件
问题来了，实现一个静态的组件比较容易，但为了让组件更灵活，我希望能给组件传一个角度，箭头就会根据相应的角度显示

一开始我的思路是这样，让箭头贴着圆外线，将旋转中心设置到圆心上，但无论如何，transform-origin似乎只能设置在红色方块内，于是换了思路

我直接将红色的方块网上定位，旋转点就可以设置在圆心上，在红色方块外部在包一层div将红色部分往下移。需求基本实现

<template>
  <div class="ball">
    <div class="title">沼液</div>
    <div class="circle flex justify-cen align-cen">
      <div class="scale">环比：<span>10%</span></div>
      <div class="num">50000ml</div>
    </div>
    <div class="indicate" :style="`transform: rotate(${rotateNnum}deg);`">
      <div class="line">
        <div class="arrow"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const props = defineProps({
  rotateNnum : {
    type: Number,
    default: 0,
  }
})
const overallData = ref([]);
onMounted(() => {});
</script>

<style scoped lang="less">
@keyframes pan {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2rem);
  }
  to {
    transform: translateY(0rem);
  }
}
.ball {
  width: 5rem;
  height: 6rem;
  position: relative;
  > .title {
    line-height: 1rem;
    text-align: center;
    color: #7fc6ec;
    font-size: 0.75rem;
  }
  > .circle {
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    border: 2px solid #0febec;
    flex-direction: column;
    .scale {
      color: #218abe;
      font-size: 0.7rem;
      > span {
        color: red;
      }
    }
    .num {
      font-size: 0.8rem;
      color: #fff;
      margin-top: 0.4rem;
    }
  }
  > .indicate {
    position: absolute;
    width: 1rem;
    height: 10rem;
    bottom: -7.5rem;
    left: calc(50% - 0.5rem);
    transform-origin: 50% top;
    transform: rotate(0deg);
    .line {
      position: absolute;
      width: 100%;
      height: 10rem;
      background-color: red;
      top: 2.5rem;
      .arrow {
        width: 1rem;
        height: 2rem;
        position: absolute;
        top: 2rem;
        background-color: green;
        animation: pan 1s infinite ease;
      }
    }
  }
}
</style>

我说的可能不是很清楚，可以直接将代码拿去看，有问题可以私信交流