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

.blue {
  color: #36a2ff;
  cursor: pointer;
}

.grey {
  color: #ffffff;
  opacity: 0.6;
}

.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background-image: radial-gradient(closest-side at 50% 55%,#03447c, #02325c, #002046);
  background: radial-gradient(
    closest-side at 50% 55%,
    #004988 0%,
    #00122d 100%
  );
  display: flex;
  flex-direction: column;
}

.menu {
  height: 56px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 17px;
  background: url("../../../assets/images/navbg.png") no-repeat;
  background-size: 100% 115%;
  position: relative;

  .libox {
    width: 35%;
    display: flex;
    justify-content: center;
    li {
      // flex: 1;
      box-sizing: border-box;
      padding: 0 20px;
      height: 52px;
      line-height: 52px;
      text-align: center;
      cursor: pointer;
      font-family: sybold;
      color: #ebfaff;
    }
  }
}

.boxleft {
  position: absolute;
  left: 24px;
  top: 16px;

  img {
    width: 154px;
  }
}

.boxright {
  position: absolute;
  right: 24px;
  top: 12px;
  display: flex;
  align-items: center;

  span {
    font-size: 16px;
    color: #ffffff;
    opacity: 0.6;
  }

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

.backbtn {
  position: absolute;
  left: 205px;
  bottom: 6px;

  button {
    width: 64px;
    height: 32px;
    background: rgba(0, 129, 255, 0.3);
    border: 1px solid #36a2ff;
    border-radius: 0px;
    color: #91ccff;
  }
}

.warningnumber {
  position: absolute;
  left: 20px;
  top: 0;
  display: flex;
  align-items: flex-start;

  img {
    margin-bottom: 30px;
  }

  .num {
    font-size: 50px;
    text-shadow: 0px 0px 6px #8df;
    color: white;
    font-weight: 600;
    margin-top: -5px;
  }

  .today {
    font-size: 19px;
    font-family: titlefont;
    color: #d0eaff;
    margin-top: 11px;
    margin-left: 10px;
  }
}

.content {
  flex: 1;
  overflow: hidden;
}

.router-link-active {
  // background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, #1c8199 50%, rgba(35, 153, 255, 0) 100%);

  background: linear-gradient(
    270deg,
    rgba(35, 153, 255, 0) 0%,
    #36a2ff 50%,
    rgba(35, 153, 255, 0) 100%
  );
}

// 适配125%
@media screen and (max-height: 750px) {
  .menu {
    height: 42px;
    font-size: 14px;

    .libox {
      li {
        height: 42px;
        line-height: 42px;
      }
    }
  }

  .boxleft {
    left: 30px;
    top: 12px;

    img {
      width: 125px;
    }
  }

  .boxright {
    right: 24px;
    top: 13px;

    span {
      font-size: 13px;
      opacity: 0.6;
    }

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

  .backbtn {
    left: 176px;
    bottom: 3px;

    button {
      width: 46px;
      height: 25px;
      line-height: 25px;
      font-size: 10px;
      text-align: center;
      padding: 0;
    }
  }
}

// 适配150%
@media screen and (max-height: 600px) {
  .menu {
    height: 32px;
    font-size: 8px;

    .libox {

      li {
        height: 32px;
        line-height: 32px;
      }
    }
  }

  .boxleft {
    left: 24px;
    top: 8px;

    img {
      width: 105px;
    }
  }

  .boxright {
    right: 24px;
    top: 10px;

    span {
      font-size: 8px;
      opacity: 0.6;
    }

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

  .backbtn {
    left: 156px;
    bottom: 0px;

    button {
      width: 46px;
      height: 25px;
      line-height: 25px;
      font-size: 8px;
      text-align: center;
      padding: 0;
    }
  }
}