<template>
  <div class="company">
    <div class="info">
      <div v-for="item in company" :key="item.name">
        <p>{{item.name}}</p>
        <m-count class="count" :value="item.value" /> <span class="unit">人</span>
      </div>
    </div>
    <div class="rate">
      <div v-for="item in list" :key="item.name">
        <img :src="require(`@/assets/images/${item.icon}`)" :alt="item.name" />
        {{item.name}}
        <p><m-count class="count" :value="item.value" />%</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Company',
  data() {
    return {
      list: [
        {name: '证件齐全', value: 65, icon: 'company1.png'},
        {name: '场地租赁', value: 73, icon: 'company2.png'},
      ],
      company: [
        {name: '机关团体', value: 25},
        {name: '企业单位', value: 4711},
        {name: '事业单位', value: 56},
        {name: '其他', value: 6841},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.company
  .info
    height .4rem
    background-image url(../../assets/images/four.png)
    background-size 100% 100%
    display flex
    align-items center
    margin-bottom .1rem
    >div
      flex 1
      text-align center
      padding-left .05rem
      &:nth-of-type(2)
        margin-left .1rem
      p
        color $fontColor
      .unit
        $unit()
      .count
        font-size .12rem
  .rate
    display flex
    >div
      flex 1
      display flex
      align-items center
      img
        width .12rem
        height @width
        margin-right .05rem
      p
        color $color-yellow
        margin-left .1rem
        .count
          font-size .13rem
</style>
