Sinopec-Anxin/src/app/pages/gis-home/gis-home.component.scss

.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 500;
  //   background: radial-gradient(
  //     rgba(255, 255, 255, 0) 0%,
  //     rgba(6, 24, 50, 0.6) 50%,
  //     rgb(5, 26, 56) 100%
  //   );
  background: radial-gradient(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(6, 24, 50, 0.6),
    rgba(6, 24, 50, 1)
  );
}
#mapDiv {
  width: 100%;
  height: 100%;
}

.leftBox,
.rightBox {
  width: 430px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding-top: 20px;
  padding-bottom: 10px;
}
.leftBox {
  left: 20px;
  .left1 {
    height: 38%;
  }
  .left2 {
    height: 29%;
  }
  .left3 {
    height: 29%;
  }
}
.rightBox {
  right: 20px;
  .right1 {
    height: 25%;
  }
  .right2 {
    height: 34%;
  }
  .right3 {
    height: 38%;
  }
}

.cardItem {
  background-image: url(../../../assets/gismap/cardbg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    position: relative;
  }
}

.accessList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 12px 35px 12px 12px;
  .accessitem {
    width: 50%;
    display: flex;
    align-items: center;
    .img {
      margin-left: 20%;
      margin-right: 12px;
    }
    .namebox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .name {
        font-size: 16px;
        // font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #ffffff;
      }
      .value {
        font-size: 20px;
        font-family: DINPro;
        font-weight: bold;
        color: #479ffe;
      }
    }
  }
}

#echartleft1,
#echartleft2,
#echartleft3,
#echartright1 {
  width: 100%;
  height: 100%;
}

#echartright2 {
  width: 100%;
  height: 60%;
}

#echartright3 {
  width: 100%;
  height: 45%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.unitList {
  position: absolute;
  left: 24%;
  top: 2%;
  z-index: 500;
}

.secretkey {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 5px;
  height: 5px;
  cursor: pointer;
  z-index: 999;
}