javascript
复制代码
<template>
<div class="center">
<div class="top">
<div v-for="(i, index) in list" :key="index" class="top-box">
<div class="bubble-box">
<img :src="i.img" alt="" />
<div class="bubbles">
<div
class="bubble"
v-for="item in 10"
:key="item"
:style="{
backgroundColor: i.color,
animationDelay: getRandom() * 2 + 's',
left: getRandom() * 10 + '%',
}"
></div>
</div>
</div>
<div class="text">
<div class="num" :style="{ color: i.numColor }">{{ i.num }}</div>
<div>{{ i.name }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
img: "/img/dataCockpit/center1.png",
num: 1643,
numColor: "#2AD9F2",
name: "名称1",
color: "#aef5da",
},
{
img: "/img/dataCockpit/center2.png",
num: 22,
numColor: "#53EA8C",
name: "名称2",
color: "#9efcff",
},
{
img: "/img/dataCockpit/center3.png",
num: 311,
numColor: "#ffae00",
name: "名称3",
color: "#f5e88a",
},
],
};
},
methods: {
getRandom() {
return (Math.floor(Math.random() * 10) * 100) / 100;
},
},
};
</script>
<style lang="scss" scoped>
.center {
padding-top: 35px;
box-sizing: border-box;
height: 100%;
.top {
background-image: url(/img/dataCockpit/centerTop.png);
width: 856px;
height: 115px;
margin-bottom: 34px;
color: #ffffff;
font-size: 16px;
display: flex;
justify-content: space-between;
padding: 0 70px;
padding-bottom: 36px;
padding-right: 88px;
box-sizing: border-box;
background-size: 100% 100%;
align-items: center;
margin-top: 20px;
&-box {
// position: relative;
// top: -20px;
display: flex;
img {
width: 105px;
// height: 66px;
}
.text {
height: 100%;
padding-left: 15px;
padding-bottom: 10px;
box-sizing: border-box;
// position: relative;
// top: -10px;
.num {
font-size: 36px;
font-weight: bold;
}
}
}
}
.map {
background-image: url(/img/dataCockpit/map.png);
width: 892px;
height: 656px;
background-size: contain;
position: relative;
}
}
@keyframes flying {
0% {
bottom: 15px;
transform: translateX(0);
}
50% {
transform: translateX(50%);
}
100% {
bottom: 200px;
transform: translateX(-50%);
}
}
.bubble-box {
position: relative;
}
.bubbles {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
top: 0;
left: 0;
}
.bubble {
position: absolute;
bottom: 0;
background: #f1f1f1;
border-radius: 50%;
opacity: 0.5;
animation: flying 14s infinite ease-in;
width: 5px;
height: 5px;
filter: blur(1px);
}
</style>