<template>
  <div>
    <!--用户数量-->
    <user-number class="border usernumber"></user-number>
    <!--主要用户展示-->
    <user-gas class="border usergas"></user-gas>
    <!--用户数量增长情况-->
    <user-increase class="border userincrease"></user-increase>
    <!--销售额往年同比分析-->
    <sale-proportion  class="border saleproportion"></sale-proportion>
    <!--报建用户分布-->
    <inspec-distri  class="border inspecdistri"></inspec-distri>
    <!--用气分布图-->
    <gas-distri class="border gasdistri"></gas-distri>
  </div>
</template>

<script>
  export default {
    name: "UseHome"
  }
</script>

<style scoped>
  .border {
    padding-top: 0.4%;
    background: linear-gradient(#6fd9d0, #6fd9d0) left top,
    linear-gradient(#6fd9d0, #6fd9d0) left top,
    linear-gradient(#6fd9d0, #6fd9d0) right top,
    linear-gradient(#6fd9d0, #6fd9d0) right top,
    linear-gradient(#6fd9d0, #6fd9d0) left bottom,
    linear-gradient(#6fd9d0, #6fd9d0) left bottom,
    linear-gradient(#6fd9d0, #6fd9d0) right bottom,
    linear-gradient(#6fd9d0, #6fd9d0) right bottom;
    background-repeat: no-repeat;
    background-size: 1px 11px, 11px 1px;
    background-color: rgba(1, 207, 242, 0.05);
  }

  .usernumber {
    position: absolute;
    top: 5%;
    left: 2%;
    width: 21.7%;
    height: 84.8%;
  }

  .usergas {
    position: absolute;
    top: 5%;
    left: 24.5%;
    width:25%;
    height: 37.8%;
  }
.userincrease{
  position: absolute;
  top: 44.8%;
  left: 24.5%;
  width: 25%;
  height: 45%;
}
.saleproportion{
  position: absolute;
  top: 5%;
  left: 50.2%;
  width: 25%;
  height: 52.8%;
}
.inspecdistri{
  position: absolute;
  top: 59.8%;
  left: 50.2%;
  width: 25%;
  height: 30%;
}
.gasdistri{
  position: absolute;
  top: 5%;
  left: 75.9%;
  width: 22.05%;
  height: 84.8%;
}

  /*.gasdistri{*/
  /*position: absolute;*/
  /*top: 5%;*/
  /*left: 75.9%;*/
  /*width: 80%;*/
  /*height: 84.8%;*/
  /*}*/
  /*distributed*/
</style>
