<template>
  <div class="people">
    <div class="person" v-for="(i,k) in datas" :key="k">
      <div class="p-left">
       <img :src="require('@/assets/images/icon1.png')" alt="">
       <!-- <img :src="require(`${i.img}`)" alt=""> -->
      </div>
      <div class="p-right">
        <p>{{i.title}}</p>
        <span>{{i.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'emergencyCommand',
  props:{

  },
  data(){
    return{
      datas:[
        {
          title:'指挥长',
          name:'周少华',
          img:'@/assets/images/icon1.png',
        },
        {
          title:'值班长',
          name:'夏毅',
          img:'',
        },
        {
          title:'值班长',
          name:'瞿越方',
          img:'',
        },
      ]


    }
  },
  mounted() {

  },
  methods :{

  },


}
</script>

<style lang="stylus" scoped>
.people
  width 100%
  height 100%
  display flex
  align-items center
.person
  flex 1
  display flex
  background-size cover
  background-position center
  text-align center
  // border 1px solid #ccc
  height 100%
  // margin .3125rem /* 5/16 */
.p-left
  display flex
  align-items: center
  // background-color #ccc
img
  width 3.125rem /* 50/16 */
  height 3.125rem /* 50/16 */
  align-items: center
  margin 5px
.p-right
  // background-color #ccc
  display flex
  flex-direction column
  justify-content center
  text-align left
  p
    font-size .8rem
    color skyblue
  span
    font-size 1.25rem
</style>
