<template>
  <div class="work-tips">
    <div class="sum">
      <div v-for="item in sum" :key="item.name">
        <img :src="require(`@/assets/images/${item.img}`)"/>
        <div>
          <p>{{item.name}}</p>
          <p><m-count class="count" :style="`color:${item.color}`" :value="item.value" :decimal="0" /> <span>个</span></p>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <m-scroll :length="list.length" :limit="5">
        <div class="info" v-for="(item, i) in list" :key="i">
          <p>{{item.name}}</p>
          <p>{{item.tips}}</p>
        </div>
      </m-scroll>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkTips',
  data() {
    return {
      sum: [
        {name: '网格数', value: 46, img: 'tips1.png', color: '#fece34'},
        {name: '网格报警数', value: 28, img: 'tips2.png', color: '#ff1e1e'},
        {name: '110非警情数', value: 2, img: 'tips3.png', color: '#ff1e1e'},
      ],
      list: [
        {name: '新江湾尚景园', tips: '车辆停发管理'},
        {name: '新江湾城首府', tips: '占用公共部位'},
        {name: '雍景苑小区', tips: '垃圾分类'},
        {name: '华润新江湾九里', tips: '占用公共部位'},
        {name: '华润新江湾九里', tips: '垃圾分类'},
        {name: '新江湾九里', tips: '占用公共部位'},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.work-tips
  display flex
  flex-direction column
  .sum
    display flex
    justify-content space-between
    margin-bottom .05rem
    >div
      display flex
      align-items center
      padding-left .05rem
      img
        width .25rem
        height @width
        margin-right .05rem
      p
        color $fontColor
      span
        font-size .08rem
        color #aaa
      .count
        font-size .13rem
  .wrapper
    flex 1
    .info
      display flex
      justify-content space-between
      padding .03rem .1rem
      &:nth-child(2n)
        background rgba(10,47,89, .6)
</style>
