<template>
  <div>
    <!--管网建设-->
    <net-work class="border construction"></net-work>
    <!--管网运行-->
    <supply-gas class="border gasvalue"></supply-gas>
    <!--巡线-->
    <line-inspection class="border lineinspection"></line-inspection>
    <!--管网隐患-->
    <net-danger class="border netdanger"></net-danger>
  </div>
</template>

<script>
  export default {
    name: "NetHome",
    data() {
      return {
        loaddata: 0
      }
    },
    watch: {
      'loaddata': {
        deep: true,
        handler() {
	console.log(this.loaddata,'加载次数')
          if (this.loaddata > 0) {
            this.$parent.initdatashow = false
          }
        },
        immediate: true
      }
    },
  }
</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: 1.5px 11px, 11px 1.5px;
    background-color: rgba(1, 207, 242, 0.05);
  }
  /*管网建设*/
  .construction {
    position: absolute;
    top: 5%;
    left: 2%;
    width: 23%;
    height: 40.8%;
  }
  /*管网运行*/
  .gasvalue {
    position: absolute;
    top: 5%;
    left: 25.6%;
    width: 23%;
    height: 40.8%;
  }
  /*巡线*/
  .lineinspection {
    position: absolute;
    top: 48%;
    left: 2%;
    width: 23%;
    height: 41.8%;
  }
  /*管网隐患*/
  .netdanger {
    position: absolute;
    top: 48%;
    left: 25.6%;
    width: 23%;
    height: 41.8%;
  }
</style>
