vue3 数据大屏项目开发中，需要一些底座效果，今天整理的是vue3 数据可视化大屏多色底座效果

介绍

四个角由线条组成，自上而下背景渐变色 中间依次为数字(数字滚动效果) 底座 以及标题 还有进度条。

实例代码

<template>
  <div class="container" :class="item.class">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
    <div class="line4"></div>
    <div class="containerNum">
      <div class="nums">
        <numcard :number="item.num"></numcard>
      </div>
      <img :src="item.icon" alt="">
      <span class="title">{{ item.title }}</span>
    </div>
    <div class="progresss">
      <el-progress :percentage="10" :color="item.color"/>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import numcard from "@/components/numcard/numcard.vue";

export default {
  name: "title",
  data() {
    return {
      show: false,
    }
  },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: {numcard},
  watch: {},
  mounted() {
    var that = this;
  },
  methods: {},
}
</script>

<style lang="scss" scoped>


.container {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(180deg, rgba(54, 255, 243, 0) 0%, rgba(#36FFF3, 0.3) 100%);
  border-top: 1px solid rgba(54, 255, 243, 0.5);
  border-bottom: 1px solid rgba(54, 255, 243, 0.5);
  box-sizing: border-box;

  :deep(.nums) {
    .real-time-num {
      width: auto;
    }

    .real-time-num .real-time-num-item > div {
      font-size: 28px;
      font-family: DIN-Bold;
      font-weight: bold;
      background: linear-gradient(360deg, #04CEF7 0%, #00FFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  :deep(.progresss) {
    width: calc(100% - 12px - 12px);
    margin-left: 12px;
    margin-top: 3px;

    .el-progress-bar__outer {
      background: rgba(54, 255, 243, 0.2);
    }

    .el-progress__text {
      font-size: 12px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      min-width: 10px;
    }
  }

  .line1 {
    width: 15px;
    height: 2px;
    background: #36FFF3;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: absolute;
    top: -2px;
    left: 0;
  }

  .line3 {
    width: 15px;
    height: 2px;
    background: #36FFF3;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: absolute;
    bottom: -2px;
    left: 0;
  }

  .line4 {
    width: 15px;
    height: 2px;
    background: #36FFF3;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: absolute;
    bottom: -2px;
    right: 0;
  }

  .line2 {
    width: 15px;
    height: 2px;
    background: #36FFF3;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    right: 0;
    position: absolute;
    top: -2px;
  }

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

    .nums {
      position: absolute;
      margin-top: -20px;
    }

    img {
      margin-top: 10px;
    }

    .title {
      font-size: 14px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
    }
  }
}

.container2 {
  background: linear-gradient(180deg, rgba(54, 255, 243, 0) 0%, rgba(254, 229, 0, 0.3) 100%);
  border-top: 1px solid rgba(254, 229, 0, 0.5);
  border-bottom: 1px solid rgba(254, 229, 0, 0.5);

  :deep(.nums) {

    .real-time-num .real-time-num-item > div {
      background: linear-gradient(360deg, #FE9800 0%, #FEE500 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  :deep(.progresss) {
    .el-progress-bar__outer {
      background: rgba(254, 229, 0, 0.2);
    }
  }

  .line1 {
    background: rgba(254, 229, 0, 1);
  }

  .line3 {
    background: rgba(254, 229, 0, 1);
  }

  .line4 {
    background: rgba(254, 229, 0, 1);
  }

  .line2 {
    background: rgba(254, 229, 0, 1);
  }
}

.container3 {
  background: linear-gradient(180deg, rgba(54, 255, 243, 0) 0%, rgba(2, 255, 134, 0.3) 100%);
  border-top: 1px solid rgba(2, 255, 134, 0.5);
  border-bottom: 1px solid rgba(2, 255, 134, 0.5);

  :deep(.nums) {
    .real-time-num .real-time-num-item > div {
      background: linear-gradient(360deg, #00C14D 0%, #02FF86 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  :deep(.progresss) {
    .el-progress-bar__outer {
      background: rgba(2, 255, 134, 0.2);
    }
  }

  .line1 {
    background: rgba(2, 255, 134, 0.87);
  }

  .line3 {
    background: rgba(2, 255, 134, 0.87);
  }

  .line4 {
    background: rgba(2, 255, 134, 0.87);
  }

  .line2 {
    background: rgba(2, 255, 134, 0.87);
  }
}
</style>

使用

<template>
  <div class="itemOutBody">
    <div class="itemOutBodyInner" v-for="(item,index) in list" :key="index">
      <item :item="item"></item>
    </div>
  </div>
</template>

<script>

import item from './item.vue'
import icon1 from './assets/icon1.png'
import icon2 from './assets/icon2.png'
import icon3 from './assets/icon3.png'

export default {
  name: "title",
  data() {
    return {
      list: [{
        title: '专业建设',
        num: 125,
        class: 'container1',
        icon: icon1,
        color: 'rgba(54, 255, 243, 1)'
      }, {
        title: '产教融合',
        num: 125,
        class: 'container2',
        icon: icon2,
        color: 'rgba(254, 229, 0, 1)'
      }, {
        title: '师资队伍',
        num: 125,
        class: 'container3',
        icon: icon3,
        color: 'rgba(2, 255, 134, 1)'
      }, {
        title: '人才培养质量',
        num: 125,
        class: 'container2',
        icon: icon2,
        color: 'rgba(254, 229, 0, 1)'

      }, {
        title: '科研与社会服务',
        num: 125,
        class: 'container3',
        icon: icon3,
        color: 'rgba(2, 255, 134, 1)'

      }, {
        title: '办学特色',
        num: 125,
        class: 'container0',
        icon: icon1,
        color: 'rgba(54, 255, 243, 1)'
      }]
    }
  },
  components: {item},
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    }
  },
  watch: {},
  mounted() {
    var that = this;

  },
  methods: {
    getData(e) {
      console.log(e)
      this.$emit('getData', e)
    }
  },
}
</script>
<style lang="scss" scoped>
.itemOutBody {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  position: relative;
  height: calc(100% - 48px);
  margin-top: 48px;
  width: calc(100% - 24px);
  margin-left: 24px;

  .itemOutBodyInner {
    width: calc(33.33% - 16px);
    margin-right: 24px;
    margin-bottom: 20px;
    position: relative;
    height: calc(50% - 6px);
  }

  .itemOutBodyInner:nth-child(4),
  .itemOutBodyInner:nth-child(5),
  .itemOutBodyInner:nth-child(6) {
    margin-bottom: 0;
  }

  .itemOutBodyInner:nth-child(3n) {
    margin-right: 0;
  }
}
</style>

更多底座效果

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

源文件下载

效果代码 vue3 vite js nodejs 14