<template>
    <div>
        <div >
            <div class="unit-w">
               <div class="unit " >

                <div v-for="(item,index) in list" :key="index" >
                  <div >
                    <img :src="item.imgs" alt="" >
                    <div class="num ">
                        <span class="num-b">{{ item.num }}</span>
                        <span>栋</span>
                        <div class="title">{{ item.title }}</div>
                    </div>
                   <div class="img"></div>
                  </div>
                </div>
               </div>
               <div ></div>
            </div>
        </div>
    </div>
</template>

<script>
import imga from '../../../assets/images/Frame.png'
import img1 from '../../../assets//images/Frame (1).png'
import img2 from '../../../assets//images/Frame (2).png'
import img3 from '../../../assets//images/Frame (3).png'
 export default {
    data(){
        return{
            list:[
                {
                    title:'重大风险',
                    num:12,
                    unit:'栋',
                    imgs:imga            
                },
                {
                    title:'较大风险',
                    num:78,
                    unit:'栋',
                    imgs:img1            
                },
                {
                    title:'一般风险',
                    num:998,
                    unit:'栋',
                    imgs:img2           
                },
                {
                    title:'低风险',
                    num:1123,
                    unit:'栋',
                    imgs:img3            
                }
            ]
        }
    }
 }
</script>

<style lang="less" scoped>
.unit-w{

    margin: 20px 0;
}
.img{
  width: 100%;
  height: 120px;
background: url('../../../assets/images/rite.png') no-repeat;
background-size: 100% 1005;

}
.unit{
    display: flex;
    justify-content: space-around;
    text-align: center;
    letter-spacing: 1px;
    position: relative;
  .num{
    text-align: center;
    // margin: 20px 0;
    .num-b{
        display: inline-block;
        font-size: 28px;
        margin-left: 20px;
        padding-top: 60px;
    }
  }
  .img{
    position: absolute;
    bottom: -20px;
  }
  .title{
    font-size: 16px;
    margin: 20px 0 10px 20px;
  }
}
</style>