vue，绘制内部填充圆形（​​带外阴影）的环形

效果：

代码：

<template>
  <div class="circular" :style="{ border: border }">
    <div class="info" :style="{ 'box-shadow': boxShadow }">
      <div class="text">
        <el-row class="textAlign">
          <el-col :span="24">
             <span class="score" :style="{ color: scoreStyle }">12
               <span class="scoreTip">分</span>
             </span>
          </el-col>
          <el-col :span="24"><span class="textTip">安全评分</span></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      score: 19,
      level: 0,
      // 安全评分border样式
      border: "",
      scoreStyle: "",
      boxShadow: "",
    };
  },
  created() {
    if (this.score > 20) {
      this.border = "8px solid #99CC66";
      this.scoreStyle = "#99CC66";
      this.boxShadow = "0px 0px 9px 0px rgba(78, 215, 21, 0.53)";
    } else {
      this.border = "8px solid #d7152a";
      this.scoreStyle = "#d7152a";
      this.boxShadow = "0px 0px 9px 0px rgba(215, 21, 42, 0.53)";
    }
  },
};
</script>

<style lang="scss" scoped>
$color_d7152a: #d7152a;
$color_99CC66: #99cc66;
$text_align_center: center;
.circular {
  width: 136px;
  height: 136px;
  overflow: hidden;
  border: 8px solid $color_d7152a;
  border-radius: 100%;
  .info {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #ffffff;
    border-radius: 100%;
    box-shadow: 0px 0px 9px 0px rgba(215, 21, 42, 0.13);

    .text {
      /*flex 布局*/
      display: flex;
      /*实现垂直居中*/
      align-items: $text_align_center;
      /*实现水平居中*/
      justify-content: $text_align_center;
      height: 100px;
      .textAlign {
        text-align: $text_align_center;
        .textTip {
          color: rgba(0, 0, 0, 0.45);
          line-height: 30px;
          font-size: 14px;
          font-weight: 400;
          margin-top: 5px;
        }
      }
      .score {
        font-size: 22px;
        // color: $color_d7152a;
        font-weight: 500;
        .scoreTip {
          font-size: 14px;
          margin-left: 2px;
        }
      }
    }
  }
}
</style>