效果图

zhuzi.gif

示例代码：

<template>
  <div class="timer">{{ timer }}</div>
  <div class="column_container">
    <div class="speed-of-progress-box">
      <div class="explain-box">
        <div class="explain-value">
          {{ companyStockCase.stockRatio || 0 }}%
        </div>
      </div>
      <div class="wrap" :style="styleFormat(companyStockCase.stockRatio)">
        <div class="box1" :style="itemStyleFormat(companyStockCase.stockRatio, 2)"></div>
        <div class="box2" :style="itemStyleFormat(companyStockCase.stockRatio, 1)"></div>
        <div class="box3" :style="itemStyleFormat(companyStockCase.stockRatio, 3)"></div>
        <div class="box4" :style="itemStyleFormat(companyStockCase.stockRatio, 2)"></div>
        <div class="box5" :style="itemStyleFormat(companyStockCase.stockRatio, 1)"></div>
        <!-- <div class="box6" :style="itemStyleFormat(companyStockCase.stockRatio, 2)"></div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();

const that = proxy;
const timer = ref(that.$moment().format("yyyy-MM-DD HH:mm:ss"));
setInterval(() => {
  timer.value = that.$moment().format("yyyy-MM-DD HH:mm:ss");
}, 1000);

const companyStockCase = reactive({
  stockRatio: 80,
});

function styleFormat(radio) {
  if (radio <= 0) return { height: "1%" };
  if (radio >= 100) return { flex: 1 };
  return { height: `${radio}%` };
}

function itemStyleFormat(radio, type) {
  switch (type) {
    case 1:
      if (radio < 90) {
        return {
          "background-image":
            "linear-gradient(180deg, #FFFAC1 0%, rgba(255,38,15,0) 100%)",
        };
      } else if (radio < 100) {
        return {
          "background-image":
            "linear-gradient(180deg, #FFD764 0%, rgba(255,38,15,0) 100%)",
        };
      }
      return {
        "background-image":
          "linear-gradient(180deg, #FFFAC1 0%, rgba(255,38,15,0) 100%)",
      };
    case 2:
      if (radio < 90) {
        return {
          "background-image":
            "linear-gradient(180deg, #FFFAC1 0%, rgba(255,38,15,0) 100%)",
        };
      } else if (radio < 90) {
        return {
          "background-image":
            "linear-gradient(180deg, #FFFAC1 0%, rgba(255,38,15,0) 100%)",
        };
      }
      return {
        "background-image":
          "linear-gradient(180deg, #FFFAC1 0%, rgba(255,38,15,0) 100%)",
      };
    case 3:
      if (radio < 90) {
        return {
          background: "#FFD18E",
        };
      } else if (radio < 100) {
        return {
          background: "#FFD764",
        };
      }
      return {
        background: "#E6E8FA",
      };
    default:
      return {};
  }
};
</script>

<style lang='scss' scoped>
.timer {
  font-size: 25px;
  color: #ff4a4a;
}

.column_container {
  width: 240px;
  height: 500px;
  // background: linear-gradient(180deg, #7D0005 0%, rgba(130, 0, 8, 0.1368) 100%);
  // background: skyblue;
  display: flex;
  flex-direction: column;
}

.speed-of-progress-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  justify-content: flex-end;

  .explain-box {
    text-align: center;

    .explain-value {
      font-family: Manrope3-Bold;
      font-size: 38px;
      color: #ffffff;
      background: -webkit-linear-gradient(45deg, #FFD764, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 600;
      line-height: 30px;
    }
  }

  .wrap {
    transition: all 0.3s;
    width: 50px;
    height: 1px;
    margin: 50px auto -10px auto;
    position: relative;
    transform: rotateX(-6deg) rotateY(-60deg);
    /* 让wrap盒子变成一个3d空间 */
    transform-style: preserve-3d;
    text-align: center;
    animation: play 5s linear infinite;

    div {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    .box1 {
      // background: red;
      transform: translateZ(25px);
      border: 1px solid #FFD764;
    }

    .box2 {
      // background: orange;
      transform: rotateY(90deg) translateZ(25px);
      border: 1px solid #FFD764;
    }

    .box3 {
      height: 50px;
      // background: yellow;
      transform: rotateX(-90deg);
      background-image: linear-gradient(90deg,
          #ff4a4a 3%,
          rgba(0, 0, 0, 0) 100%);
      top: -100%;
      border: 1px solid #FFD764;
    }

    .box4 {
      // background: green;
      transform: translateZ(-25px);
      border: 1px solid #FFD764;
    }

    .box5 {
      // background: blue;
      transform: rotateY(-90deg) translateZ(25px);
      border: 1px solid #FFD764;
    }

    .box6 {
      height: 50px;
      background: rgb(128, 47, 0);
      transform: rotateX(90deg) translateZ(-200px);
      border: 1px solid #FFD764;
    }

    // &:hover {
    //   animation: play 5s linear infinite;
    // }
    @keyframes play {
      0% {
        transform: rotateX(-10deg) rotateY(0) rotateZ(0);
      }

      100% {
        transform: rotateX(-10deg) rotateY(360deg);
      }
    }
  }
}
</style>