可视化数据大屏 项目卡片效果,图标数字加文字描述。
效果截图
演示地址:
## 效果代码
<template>
<div class="pageCard">
<div class="pageCardItem1">
<div class="numCard2">
<numcard :number="256"></numcard>
</div>
<p>兼职</p>
<img src="./assets/icon_user.png" alt="">
</div>
<div class="pageCardItem2">
<div class="numCard1">
<numcard :number="376"></numcard>
</div>
<p>网格员总数</p>
</div>
<div class="pageCardItem1">
<div class="numCard2">
<numcard :number="120"></numcard>
</div>
<p>专职</p>
<img src="./assets/icon_user2.png" alt="">
</div>
</div>
</template>
<script>
import WOW from "wow.js";
import numcard from "@/components/numcard/numcard.vue";
export default {
name: "title",
data() {
return {}
},
components: {
numcard,
},
props: {
title: {
type: String,
default() {
return '';
}
},
icon: {
type: String,
default() {
return '';
}
},
},
watch: {},
methods: {},
}
</script>
<style lang="scss" scoped>
.pageCard {
width: calc(100% - 40px);
margin: auto;
position: relative;
height: 100%;
background: url("./assets/dizuo.png") center center no-repeat;
background-size: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.pageCardItem1 {
width: 33.33%;
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
img {
height: 30px;
}
}
.pageCardItem2 {
width: 33.33%;
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
p{
font-size: 16px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #94B9D4;
}
}
}
:deep(.numCard2) {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
height: 30px;
line-height: 30px;
align-content: flex-start;
.real-time-num {
width: auto;
font-size: 26px;
color: rgba(255, 255, 255, 1);
}
.real-time-num-item {
font-size: 22px;
font-family: DIN-Bold;
font-weight: 500;
color: #FFFFFF;
}
}
:deep(.numCard1) {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
height: 30px;
line-height: 30px;
align-content: flex-start;
.real-time-num {
width: auto;
font-size: 26px;
color: rgba(255, 255, 255, 1);
}
.real-time-num-item {
font-size: 32px;
font-family: MiSans;
font-weight: 600;
text-shadow:0 0 20px #3d6c9f;
color: #FFFFFF;
}
}
</style>