<template>
    <div class="total-base">
      <div class="total-icon">
        <div class="icon" :style="{'background':'url('+ userTotalIcon +') no-repeat','background-size':'100% 100%'}"></div>
      </div>
      <div class="total-content">
        <div class="content-text">{{totalData.title}}</div>
        <div class="content-number">{{totalData.number}}</div>
      </div>
    </div>
</template>

<script>
    export default {
      title: "TotalUserNumbert",
      props:{
        totalData:{
          type:Object,
          default:{
            title:'居民用户',
            number:65412
          }
        },
        userTotalIcon:{
          default: require('../../assets/images/居民用户.png')
        }
      }
    }
</script>

<style lang="less" scoped>
  .total-base{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .total-icon{
      margin-left: 2%;
      width:10%;
      height: 100%;
      background: #182281;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .icon{
        width: 60%;
        height: 60%;
      }
    }
    .total-content{
      margin-left: 1%;
      width: 80%;
      height: 100%;
      background-image: linear-gradient(to right, rgb(20,31,128), rgba(0,65,146,0));
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      font-size: vw(21);
      .content-text{
        width: 50%;
        height: 60%;
        font-size: 6vw;
        color: #fff;
      }
      .content-number{
        width: 40%;
        height: 60%;
        color: #00FFE5;
        font-size: 6vw;
        position: relative;
      }
    }
  }
</style>
