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