实现目标:采用for循环取数组中的数据,结合flex布局生成多个盒子,减少代码冗余。
实现效果:
实现方法:
1.template中:这里涉及到图片的添加,直接采用img标签,以及背景图片的添加,是采用:style="`background: url(${item.img})`"的形式。
<div class="box">
<div class="box-content" v-for="(item, index) in statistic" :key="index" :style="`background: url(${item.img})`">
<div style="display: flex; height: 69.5px">
<img :src="item.image" alt="" class="box-img" />
<div style="display: style">
<div class="box-title">{{ item.name }}</div>
<div style="display: flex">
<div class="box-num">{{ item.num }}</div>
<div class="box-unit">万</div>
</div>
</div>
</div>
<div style="display: flex" class="box-num-day">
<div style="margin-right: 15px">今日 {{ item.todayNum }}</div>
<div>/</div>
<div style="margin-left: 15px">昨日 {{ item.yesterdayNum }}</div>
</div>
</div>
</div>
2.script的data中:
statistic: [
{ name: '王俊凯', img: require('@/assets/images/xxx/BG.png'), image: require('@/assets/images/xxxx/rair1.png'), num: '8080', todayNum: '12', yesterdayNum: '12' },
{ name: '王 源', img: require('@/assets/images/xxxx/BG.png'), image: require('@/assets/images/xxxx/rair2.png'), num: '8081', todayNum: '12', yesterdayNum: '12' },
{ name: '易烊千玺', img: require('@/assets/images/xxxxx/BG.png'), image: require('@/assets/images/xxxx/rair3.png'), num: '8082', todayNum: '12', yesterdayNum: '12' }
],
3.style中:
.box {
display: flex;
flex: 1;
position: fixed;
top: 21%;
left: 33%;
width: 807px;
height: 105px;
.box-content {
width: 184px;
height: 105px;
margin-right: 80px;
.box-title {
padding: 10px 0 0 15px;
height: 30px;
line-height: 30px;
color: #c2dbff;
font-size: 16px;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
font-weight: 400;
}
.box-img {
display: flex;
width: 36px;
height: 36px;
margin: 22px 0 0 20px;
}
.box-num {
font-size: 19px;
font-family: Zen Dots, Zen Dots-Regular;
font-weight: 700;
color: #ffffff;
padding-left: 15px;
width: 75px;
box-sizing: border-box;
}
.box-unit {
font-size: 12px;
font-family: Source Sans Pro, Source Sans Pro-Regular;
font-weight: 400;
text-align: LEFT;
color: #ffffff;
margin: auto;
}
.box-num-day {
font-size: 12px;
font-family: Source Sans Pro, Source Sans Pro-Regular;
font-weight: 400;
text-align: CENTER;
color: rgba(255, 255, 255, 0.7);
margin: 5px 20px 5px 23px;
}
}
}