<template>
  <div class="command">
    <div v-for="item in list" :key="item.label">
      <div><img :src="require(`@/assets/images/${item.img}`)" /></div>
      <div>
        <p>{{item.label}}</p>
        <p>{{item.name}}</p>
      </div>
    </div>
    <img class="img" src="@/assets/images/command3.png" />
  </div>
</template>

<script>
export default {
  name: 'Command',
  data() {
    return {
      list: [
        {
          img: 'command1.png',
          label: '值班长',
          name: '倪萍',
        },
        {
          img: 'command2.png',
          label: '副值班长',
          name: '李铭',
        },
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.command
  display flex
  justify-content space-between
  align-items center
  .img
    width .3rem
    height @width
  >div
    width 40%
    height 100%
    display flex
    >div
      &:first-child
        flex 1
        background #1E4063
        $flex-center()
        >img
          width 80%
      &:last-child
        flex 1.2
        background $cardBg
        display flex
        flex-direction column
        justify-content space-around
        padding-left .1rem
        >p
          &:first-child
            color $fontColor
          &:last-child
            font-size .11rem

</style>
