动态class的使用

需求如图：两张图片根据分数值，设置图片背景色的高度，最高100分

对比图

代码如下：

<template>
  <div class="compare-pk">
    <div v-for="(item, index) in list" :key="index" class="pk-item">
      <p>{{ item.name }}</p>
      <p>总分: {{ item.proportion }}</p>
      <div class="icon-crown">
        <a-icon v-show="item.top" type="crown" />
      </div>
      <div class="img-box">
        <div v-if="item.gender == 1" id="man">
          <div class="bgc" :style="{ height: item.proportion + '%' }"></div>
          <div
            class="bgc2"
            :style="{ height: item.proportion * 0.9 + '%' }"
          ></div>
        </div>
        <div v-else id="woman">
          <div class="bgc" :style="{ height: item.proportion + '%' }"></div>
          <div
            class="bgc2"
            :style="{ height: item.proportion * 0.9 + '%' }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComparePk',
  data() {
    return {
      list: [
        {
          name: '张三',
          gender: 1,
          proportion: '40',
          top: false,
        },
        {
          name: '王老大',
          gender: 2,
          proportion: '60',
          top: true,
        },
      ],
    }
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.compare-pk {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;

  .pk-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100%;
    color: orange;
    font-weight: 700;

    .icon-crown {
      width: 30px;
      height: 32px;
      line-height: 30px;
      font-size: 30px;
    }

    .img-box {
      #man {
        position: relative;
        width: 100px;
        height: 220px;
        background-color: #5d5c5c;
        clip-path: path(
          'M 68 18 A 10 10 0 0 0 32 18 A 10 10 0 0 0 68 18 M 12 66 V 66 M 30 40 L 80 40 Q 100 40 100 55 L 100 130 Q 93 140 85 130 L 85 70 L 75 70 L 75 155 L 75 155 L 75 215 Q 65 225 55 215 L 55 120 L 45 120 L 45 215 Q 35 225 25 215 L 25 155 L 25 155 L 25 70 L 15 70 L 15 130 Q 7 140 0 130 L 0 55 Q 0 40 20 40 Z'
        );

        .bgc {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0px;
          background-color: #7380bf;
          transition: height 0.5s;
          // border-radius: 50%;
          animation: spin 5s linear infinite; /* 应用动画 */
        }
        .bgc2 {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0px;
          background-color: #7380bf;
        }
      }

      #woman {
        position: relative;
        width: 100px;
        height: 220px;
        background-color: #5d5c5c;
        clip-path: path(
          'M 68 18 A 10 10 0 0 0 32 18 A 10 10 0 0 0 68 18 M 12 66 V 66 M 30 40 L 70 40 Q 75 40 80 45 L 100 120 Q 95 130 90 120 L 75 70 L 65 70 L 85 155 L 65 155 L 65 215 Q 60 225 55 215 L 55 155 L 45 155 L 45 215 Q 40 225 35 215 L 35 155 L 15 155 L 35 70 L 25 70 L 10 120 Q 5 130 0 120 L 20 45 Q 25 40 30 40 Z'
        );

        .bgc {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0px;
          background-color: #7380bf;
          transition: height 0.5s;
          // border-radius: 50%;
          animation: spin 5s linear infinite; /* 应用动画 */
        }
        .bgc2 {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0px;
          background-color: #7380bf;
        }
      }

      @keyframes spin {
        0% {
          transform: rotateX(0deg);
        }
        100% {
          transform: rotateX(360deg);
        }
      }
    }
  }
}
</style>

其中css中的两个svg图，是用svg绘图工具网址生成的
绘制时，L为直线，Q为曲线。