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>
|