vue3数据可视化大屏项目开发中，做过很多底座的效果，今天整理一下，希望将来可以节省时间直接复用。

动态效果

今天整理的数字底座效果是四种颜色，蓝绿黄红四种颜色的底座，四种颜色的数组，数字有滚动动画，圆形底座，底座上有图标装饰，图标使用的是iconfont，可以更换为自己的图标。

部分代码展示

<template>
  <div class="item1Body">
    <icon></icon>
    <div class="item1Bodyr">
      <div class="item1BodyrNum">
        <gsapNum :number="66"></gsapNum>
        <span>%</span>
      </div>
      <p>类型3</p>
    </div>
  </div>
</template>

<script>
import gsapNum from "@/components/gsapNum/index.vue";
import icon from './icon/index.vue'

export default {
  components: {
    icon,
    gsapNum
  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.item1Body {
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .item1Bodyr {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    margin-left: 16px;
    height: 82px;

    p {
      font-size: 16px;
      font-family: MiSans;
      font-weight: 400;
      color: #CCD9E5;
      margin-top: 10px;
    }

    .item1BodyrNum {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      span {
        font-size: 13px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #FFFFFF;
        margin-left: 12px;
        margin-top: 5px;
      }
    }

    :deep(.item1BodyrNum) {

      .gsapNum {
        font-size: 26px;
        font-family: Digital;
        font-weight: normal;
        color: rgba(255, 216, 0, 1);
        text-shadow: 0 0 10px rgba(255, 216, 0, 1), 0 0 20px rgba(255, 216, 0, 1), 0 0 30px rgba(255, 216, 0, 1);
      }
    }
  }
}
</style>

更多底座效果

vue3 数据可视化大屏底座效果实例集合

实例代码

代码基于vue3 vite js node.js 开发 请确保有相关的开发经验