85 lines
2.7 KiB
Vue
85 lines
2.7 KiB
Vue
<template>
|
||
<div id="board_peo">
|
||
<span class="total">感应数量：{{ total }}人/次</span>
|
||
<div class="perviews">
|
||
<div class="perview" v-for="(item,index) in induction" :key="index">
|
||
<img :src="item.img"/>
|
||
<span class="name">{{item.name}}</span>
|
||
<span class="time">{{item.time}}</span>
|
||
<span class="point">{{item.point}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: "BoardPeo",
|
||
data() {
|
||
return {
|
||
total: 2000,
|
||
induction:[
|
||
{img:require("../assets/images/peo_perview0.png"),name:"王小二",time:"13:15",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview1.png"),name:"王小二",time:"15:15",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview0.png"),name:"王小二",time:"13:15",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview1.png"),name:"王小二",time:"11:17",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview0.png"),name:"王小二",time:"13:15",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview1.png"),name:"王小二",time:"13:19",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview0.png"),name:"王小二",time:"11:15",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview1.png"),name:"王小二",time:"13:15",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview0.png"),name:"王小二",time:"12:35",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview1.png"),name:"王小二",time:"13:15",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview0.png"),name:"王小二",time:"14:25",point:"东风小区南门"},
|
||
{img:require("../assets/images/peo_perview1.png"),name:"王小二",time:"16:18",point:"东风小区南门"},
|
||
]
|
||
};
|
||
},
|
||
methods: {},
|
||
mounted() {},
|
||
};
|
||
</script>
|
||
<style>
|
||
#board_peo {
|
||
width: 480px;
|
||
height: 370px;
|
||
background: url("../assets/images/right_pane_bd1_bg.png") no-repeat;
|
||
background-size: contain;
|
||
margin-top: 10px;
|
||
}
|
||
#board_peo .total {
|
||
float: right;
|
||
color: #01d6d8;
|
||
font-size: 14px;
|
||
margin-top: 15px;
|
||
margin-right: 35px;
|
||
}
|
||
#board_peo .perviews {
|
||
float: left;
|
||
padding-left: 3px;
|
||
padding-top: 14px;
|
||
width: 100%;
|
||
}
|
||
#board_peo .perview {
|
||
float: left;
|
||
width: 100px;
|
||
height: 94px;
|
||
margin-left: 12px;
|
||
margin-top: 6px;
|
||
padding:1px;
|
||
border: #01d6d8 solid 1px;
|
||
font-size: 10px;
|
||
color:white;
|
||
}
|
||
|
||
#board_peo .name {
|
||
float: left;
|
||
margin-left: 2px;
|
||
}
|
||
#board_peo .time {
|
||
float: right;
|
||
margin-right: 2px;
|
||
}
|
||
#board_peo .point {
|
||
float: left;
|
||
margin-left: 2px;
|
||
}
|
||
</style> |