vue3 可视化数据大屏项目开发 中,数据大屏ui界面会设置一些底座效果用来衬托数据,今天整理一下自己开发过的数据大屏实例。以便于后期会遇到类似效果可以直接复用。
组件使用到了数字滚动效果以及wowjs入场动画效果 。让页面看起来更灵动。
更多底座效果
组件代码
<template>
<div class="cardBody">
<div class="cardBodyItem wow" :data-wow-delay="item.delay+'s'" :class="item.animate" v-for="(item,index) in list"
:key="index">
<div class="num">
<numcard :number="item.num"></numcard>
<span>个</span>
</div>
<div class="title">{{ item.title }}</div>
<div class="icon" ref="icon">
<img :src="item.icon" alt="">
</div>
</div>
</div>
</template>
<script>
import WOW from "wow.js";
import numcard from "@/components/numcard/numcard.vue";
import icon1 from './assets/dizuo1.png'
import icon2 from './assets/dizuo2.png'
import icon3 from './assets/dizuo3.png'
export default {
name: "title",
data() {
return {
list: [{
title: '法律法规文件',
num: 3116,
icon: icon1,
animate: 'fadeInUp',
delay: 0.5
}, {
title: '食品标准',
num: 2903,
icon: icon2,
animate: 'fadeInDown',
delay: 0.5
}, {
title: '不合格案例',
num: 103,
icon: icon3,
animate: 'fadeInUp',
delay: 0.5
},]
}
},
components: {numcard},
watch: {},
mounted() {
var that = this;
var wow = new WOW({
boxClass: "wow",
animateClass: "animated",
offset: 0,
mobile: true,
live: true,
scrollContainer: null,
resetAnimation: true,
});
wow.init();
},
}
</script>
<style lang="scss" scoped>
.cardBody {
position: relative;
width: calc(100% - 0px);
margin: 0 auto;
height: calc(100% - 10px);
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.cardBodyItem {
width: 33.33%;
height: calc(100% - 10px);
margin-top: 10px;
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
.title {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #FFFFFF;
z-index: 13;
margin-bottom: -10px;
margin-top: -10px;
}
.num {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
margin-top: -10px;
position: relative;
z-index: 12;
span {
font-size: 12px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #7989A6;
margin-left: 5px;
margin-top: 5px;
}
}
:deep(.num) {
.real-time-num {
font-size: 26px;
font-family: DIN;
font-weight: normal;
color: #FFFFFF;
width: auto;
}
.real-time-num-item {
text-shadow: 0 0 8px rgba(66, 163, 236, 1.00);
}
}
.icon {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
height: 60px;
position: relative;
z-index: 1;
margin-top: -20px;
img {
height: 59px;
}
}
}
}
</style>
实例代码
代码基于vue3 vite js node.js 开发 请确保有相关的开发经验