
<template>
  <div class="supervision">
    <div class="people">
      <p>
        检察人员
        <span>[{{$store.state.supervisionPeopleList.length}}]</span>
      </p>
      <div class="person" v-for="(data,i) in $store.state.supervisionPeopleList" :key="i">
        <img :src="require(`@/assets/images/${data.img}`)" alt="">
        <p>{{data.name}}</p>
      </div>
    </div>
    <div class="community">
      <p>检察小区</p>
      <div v-for="(data,i) in $store.state.supervisionCommunityList" :key="i">
        <p>{{data.title}}</p>
      </div>
    </div>
    <div class="situation">
      <p>检察情况</p>
      <div>
        <img :src="require(`@/assets/images/modify.png`)">
        <div v-for="(data,i) in $store.state.supervisionSituationList" :key="i">
          <p>整改单</p>
          <span>{{data.successNum}}/{{data.num}}</span>
          <a-progress class="progress" strokeColor="#00f2ff" :percent="data.successNum/data.num*100" :showInfo="false" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'supervision'

}
</script>

<style lang="stylus" scoped>
.supervision
  display flex
  width 100%
  height 100%
  flex-wrap wrap
  align-items flex-start
  .people
    width 100%
    display flex
    flex-wrap wrap
    >p
      width 100%
      color #fff
      font-weight 700
      >span
        color $edgeColor
    .person
      width 20%
      display flex
      align-items center
      color $fontColor
      margin-top .5rem
      >img
        width 1rem
        height 1rem
        margin 0 .2rem
  .community
    width 100%
    display flex
    align-items center
    justify-content center
    flex-wrap wrap
    >p
      width 100%
      color #fff
      font-weight 700
      margin-bottom 1rem
    >div
      width 30%
      border-left 2px solid yellow
      margin .3rem
      padding 0 .3rem
  .situation
    width 100%
    >p
      width 100%
      color #fff
      font-weight 700
    >div
      width 100%
      margin-top 1rem
      display flex
      align-items flex-start
      img
        width 2.5rem
        height 2.5rem
        margin 0 0.5rem
      div
        width 100%
        display flex
        align-items center
        flex-wrap wrap
        >p
          width 50%
        >span
          font-size 1.2rem
          text-align right
          width 50%
        .progress
          flex 1
</style>
