@imgSrc: '@/assets/images/integration/xinyuan/';

.xinyuanVillagePage {
  width: 100%;
  position: relative;
  height: 100%;
  overflow: hidden;
  background: url('@{imgSrc}/新源乡镇.jpg') center/100% 100% no-repeat;


  .integration_content {
    position: absolute;
    left: 197px;
    top: 103px;
    padding-top: 10px;
    height: calc(100% - 113px);
    overflow: hidden;
  }

  .integration_row_col_no {
    // filter: grayscale(100%) brightness(90%);
    cursor: not-allowed;
  }

  .integration_row_col_link {
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }

  .integration_row_col_link:hover {
    filter: brightness(120%);
    transform: translateY(-5px);

  }

  .integration_row1 {
    // background: url('@{imgSrc}/运营总览.jpg') center center no-repeat;
    display: flex;

    &_col1 {
      width: 183px;
      height: 180px;
    }

    &_col2 {
      width: 309px;
      // height: 180px;
      margin-left: 12px;
    }
  }

  .integration_row2 {
    display: flex;
  }

  .integration_col1 {
    &_title {
      width: 590px;
      height: 49px;
      background: url('@{imgSrc}/厂站管理title.png') center/100% 100% no-repeat;
      text-align: center;
      line-height: 68px;
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;

    }

    &_list {
      display: grid;
      grid-template-columns: 149px 149px 149px 149px;
      grid-template-rows: 109px 109px;

      &_item {
        text-align: center;
        background: url('@{imgSrc}/厂站管理bg.png') center/100% 100% no-repeat;

        img {
          width: 52px;
          height: 52px;
        }

        &_label {
          margin-top: 14px;
          font-weight: bold;
          font-size: 15px;
          color: #FFFFFF;
          line-height: 1;
        }
      }
    }
  }

  .integration_col2 {
    margin-left: 5px;

    &_title {
      width: 297px;
      height: 49px;
      background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat;
      text-align: center;
      line-height: 68px;
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;

    }

    &_list {
      display: grid;
      grid-template-columns: 146px 146px;
      grid-template-rows: 74px 74px;

      &_item {
        text-align: center;
        background: url('@{imgSrc}/管网运维bg.png') center/100% 100% no-repeat;

        img {
          width: 52px;
          height: 52px;
        }

        &_label {
          margin-top: -10px;
          font-weight: bold;
          font-size: 15px;
          color: #FFFFFF;
          line-height: 1;
        }
      }

      &_item[name='管网巡检'] {
        width: 298px;
        height: 64px;
        background: url('@{imgSrc}/管网巡检bg.png') center/100% 100% no-repeat;
        display: flex;
        align-items: center;

        img {
          margin: -3px 43px 0 51px;
        }

        &_label {
          margin-top: 0;

        }
      }
    }
  }

  .integration_col3 {
    margin-left: 10px;

    &_title {
      width: 297px;
      height: 49px;
      background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat;
      text-align: center;
      line-height: 68px;
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;

    }

    &_list {
      display: grid;
      grid-template-columns: 149px 149px;
      grid-template-rows: 109px 109px;

      &_item {
        text-align: center;
        background: url('@{imgSrc}/业务中心bg.png') center/100% 100% no-repeat;

        img {
          width: 52px;
          height: 52px;
        }

        &_label {
          margin-top: 14px;
          font-weight: bold;
          font-size: 15px;
          color: #FFFFFF;
          line-height: 1;
        }
      }

      &_item[name='报装管理'] {
        filter: grayscale(80%) brightness(90%);
      }
    }
  }

  .integration_col4 {
    margin-left: 10px;

    &_title {
      width: 297px;
      height: 49px;
      background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat;
      text-align: center;
      line-height: 68px;
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;

    }

    &_list {
      display: grid;
      grid-template-columns: 149px 149px;
      grid-template-rows: 109px 109px;

      &_item {
        text-align: center;
        background: url('@{imgSrc}/党建管理bg.png') center/100% 100% no-repeat;

        img {
          width: 52px;
          height: 52px;
        }

        &_label {
          margin-top: 14px;
          font-weight: bold;
          font-size: 15px;
          color: #FFFFFF;
          line-height: 1;
        }
      }

    }
  }

  .integration_col5_list_item {
    position: absolute;

    &_label {
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;
    }
  }

  .integration_col5_list_item[name='物联接入'] {
    width: 235px;
    height: 120px;
    background: url('@{imgSrc}/物联接入.png') center/100% 100% no-repeat;
    left: 33px;
    top: 514px;

    .integration_col5_list_item_label {
      padding: 28px 0 0 25px;
      line-height: 1;
    }
  }

  .integration_col5_list_item[name='平台接入'] {
    width: 231px;
    height: 123px;
    background: url('@{imgSrc}/平台接入.png') center/100% 100% no-repeat;
    left: 355px;
    top: 572px;

    .integration_col5_list_item_label {
      padding: 28px 0 0 25px;
      line-height: 1;
    }
  }

  .integration_col5_list_item[name='视频接入'] {
    width: 228px;
    height: 122px;
    background: url('@{imgSrc}/视频接入.png') center/100% 100% no-repeat;
    left: 918px;
    top: 572px;

    .integration_col5_list_item_label {
      padding: 28px 0 0 124px;
      line-height: 1;
    }
  }

  .integration_col5_list_item[name='门禁接入'] {
    width: 236px;
    height: 123px;
    background: url('@{imgSrc}/门禁接入.png') center/100% 100% no-repeat;
    left: 1234px;
    top: 512px;

    .integration_col5_list_item_label {
      padding: 28px 0 0 133px;
      line-height: 1;
    }
  }
}


.hide {
  visibility: hidden;
}


& :global {
  .xinyuanVillagePage {
    .anticon {
      vertical-align: 0.125em;
    }
  }
}