<template>
  <div id="cmp1">
    <div class="d-flex pt-2 pl-2">
      <span style="color:#5cd9e8">
        <icon name="align-left"></icon>
      </span>
      <span class="fs-xl text mx-2">今日重点预警人数</span>
    </div>
    <div class="content">
      <div class="box" v-for="item,index in headData" :key="index">
        <div class="item">
          <div class="head">{{item.title}}</div>
          <dv-digital-flop :config="item.number" style="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Echart from '../../common/echart'
  import centerRight2 from "../../components/centerRight2";
  export default{
    components:{
      Echart,
      centerRight2
    },
    data(){
      return{
        headData:[{
          title:'前科',
            number: {
              number: [34],
              content: "{nt}",
              textAlign:'center',
              style:{
                fill:'#09dbfe'
              }
            },

        },{
          title:'在逃',
            number: {
              number: [6],
              content: "{nt}",
              textAlign:'center',
              style:{
                fill:'#09dbfe'
              }
            }
        },{
          title:'涉毒',
            number: {
              number: [6],
              content: "{nt}",
              textAlign:'center',
              style:{
                fill:'#09dbfe'
              }
            }
        },{
          title:'上访',
            number: {
              number: [12],
              content: "{nt}",
              textAlign:'center',
              style:{
                fill:'#09dbfe'
              }
            }
        },{
          title:'涉恐',
            number: {
              number: [2],
              content: "{nt}",
              textAlign:'center',
              style:{
                fill:'#09dbfe'
              }
            }
        },{
          title:'涉稳',
            number: {
              number: [54],
              content: "{nt}",
              textAlign:'center',
              style:{
                fill:'#09dbfe'
              }
            }
        },{
          title:'精神病',
            number: {
              number: [67],
              content: "{nt}",
              textAlign:'center',
              style:{
                fill:'#09dbfe'
              }
            }
        },{
          title:'其他',
            number: {
              number: [32],
              content: "{nt}",
              textAlign:'center',
              style:{
                fill:'#09dbfe'
              }
            }
        }]
      }
    },
    mounted() {

    },
    methods:{

    }
  }
</script>

<style lang="less" scoped="scoped">
  #cmp1{
    width: 100%;
    height: 3rem;
    position: relative;
    .content{
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      top: .4rem;
      .box{
        width: 25%;
      }
      .item{
        display: flex;
        flex-direction: column;
        text-align: center;
        box-sizing: border-box;
        padding: .1rem .1rem 0 .1rem;
        margin: .1rem;
        border: 1px solid #0852e5;
        // box-shadow: 0 0 10px 2px #0852e5 inset;
        // background: rgba(8,82,229,.2);
        // background: linear-gradient(to right,#0852e5,rgba(8,82,229,.1));
        .head{
          color: #fff;
        }
      }

    }
  }
</style>
