用于显示统计数目的组件

效果图如下：（可以根据需要换图片显示不同的样式）



父组件引用的方式如下：
!
子组件的实现如下：



子组件的css如下：

<style lang="scss">
.circular-part {
  width: auto;
  height: auto;
  margin: 0;
  position: relative;
  cursor: pointer;
}
.circular-part img {
  width: 100%;
  animation: pieRotate 5s linear 0s infinite; // 图片自动旋转pieRotate在scss中实现

.circular-part-text {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title {
  font-size: 22px;
}
.num {
  font-size: 46px;
  font-weight: 700;
  span {
    font-size: 20px;
    color:white;
  }
}
.unit {
  font-size: 22px;
}

</style>

在scss文件中写入动画效果

@keyframes pieRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}