<template>
  <div class="people">
    <div class="person" v-for="(data,i) in list" :key="i" :style="calcWidth()">
      <img :src="require(`@/assets/images/${data.img}`)" />
      <div>
        <p>{{data.title}}</p>
        <span>{{data.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmergencyCommand',
  methods: {
    calcWidth() {
      return {
        width: (100 / this.list.length) + '%'
      }
    }
  },
  computed: {
    list() {
      return this.$store.state.commandList
    }
  },
}
</script>

<style lang="stylus" scoped>
.people
  width 100%
  height 100%
  display flex
  // justify-content space-around
  .person
    display flex
    align-items center
    >img
      width 2.5rem
      height @width
      margin-right 0.5rem
    >div
      p
        font-size 0.9rem
        color $fontColor
      span
        font-weight bold
</style>
