Project-Annex/login/src/views/NewNav/style.scss

$base_fontSize: 100;
@function rem($px) {
  @return $px / $base_fontSize * 1rem;
}
.nav-wrap {
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #000000 0%, #132037 100%);
  overflow: hidden;
  position: relative;
  .top {
    position: relative;
    z-index: 101;
    padding-top: rem(67);
    .lfet-right {
      padding: 0 rem(100) 0 rem(100);
      display: flex;
      justify-content: space-between;
      text-align: center;
      position: relative;
      top: rem(-25);
      .tenantName {
        color: RGBA(254, 254, 254, 1);
        padding: 0 rem(20);
        height: rem(49);
        line-height: rem(49);
        font-size: rem(20);
        box-sizing: border-box;
        border: 1px solid RGBA(71, 81, 98, 1);
        border-radius: rem(10);
        margin-right: rem(20);
        cursor: pointer;
      }
    }
  }
  .logo {
    width: rem(120);
    height: rem(36);
    background: url(../../assets/img/nav/logo.png);
    background-size: 100% 100%;
    z-index: 11;
  }
  .logout {
    width: rem(49);
    height: rem(49);
    background: url(../../assets/img/btn_switch.png);
    background-size: 100% 100%;
    z-index: 11;
  }

  .top_png {
    width: 100%;
    width: rem(1458);
    margin: auto;
    height: rem(58);
    // transform: translateX(-50%);
    animation-name: opacityAni;
    background: url(../../assets/img/nav/img_toubu.png);
    background-size: cover;
    opacity: 0;
    animation-delay: 0.668s;
    animation-duration: 0.834s;
    animation-fill-mode: forwards;
    p {
      font-size: rem(24);
      font-family: PingFang SC;
      font-weight: 600;
      color: #ffffff;
      background: linear-gradient(1deg, #a8c4f5 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      top: rem(-10);
      text-align: center;
    }
  }
  .bottom_png {
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: rem(83);
    // height: 4.3vw;
    background: #010305;
    & > span {
      display: block;
      width: 100%;
      height: rem(83);
      // height: 4.3vw;
      animation-name: opacityAni;
      background: url(../../assets/img/nav/img_dibu.png);
      background-size: cover;
      opacity: 0;
      animation-delay: 0.668s;
      animation-duration: 0.834s;
      animation-fill-mode: forwards;
    }
  }
  .bg-earth {
    position: absolute;
    width: rem(1500);
    height: rem(600);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }
  .nav-title {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: rem(381);
    height: rem(153);
    img {
      width: rem(150);
      height: rem(40);
    }
    .dot_icon {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      margin-top: rem(10);
      p {
        font-size: rem(36);
        font-weight: 600;
        font-family: PingFang SC;
        color: #ffffff;
        text-align: center;
      }
      .icon-blue-rect {
        display: inline-block;
        margin: 0 rem(10);
        width: rem(6);
        height: rem(6);
        background: linear-gradient(-80deg, #2a68e6 0%, #2887f2 100%);
        border-radius: rem(6);
        vertical-align: super;
      }
    }
  }
  .nav-content {
    display: grid;
    // 左右距离30 一列3等分
    row-gap: rem(30);
    column-gap: rem(30);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    .item {
      width: rem(480);
      height: rem(180);
      background: RGBA(32, 40, 57, 1);
      border-radius: rem(10);
      border: 1px solid transparent;
      position: relative;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      &:hover {
        border-color: #ffffff;
        .left-label {
          opacity: 1;
        }
        .item-cenText .contents {
          opacity: 1;
          .subtitle {
            color: #0eaeff;
          }
        }
        .right-img {
          opacity: 0.7;
        }
        .img {
          display: none;
        }
        .imghover {
          display: block;
        }
      }
      .imghover {
        display: none;
      }
      .item-cenText {
        margin: rem(43) 0 0 rem(56);
        display: flex;
        .img,
        .imghover {
          width: rem(82);
          height: rem(92);
        }
        .contents {
          margin-left: rem(48);
          font-size: rem(24);
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          opacity: 0.8;
          .subtitle {
            font-size: rem(12);
            margin-top: rem(10);
            color: #748ba8;
            white-space: nowrap;
          }
        }
      }
      .right-img {
        background: url("../../assets/img/nav/img6.png") no-repeat;
        background-size: cover;
        width: rem(90);
        height: rem(180);
        opacity: 0.2;
      }

      .left-label {
        width: rem(6);
        height: rem(50);
        background: #ffffff;
        opacity: 0.3;
        border-radius: 0px rem(4) rem(4) 0px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .item.unOwner {
      opacity: 0.3;
      cursor: no-drop;
      animation-name: opacityAni2;
      &:hover {
        border-color: transparent;
        .left-label {
          opacity: 0.3;
        }
        .item-cenText .contents {
          opacity: 0.8;
          .subtitle {
            color: #748ba8;
          }
        }
        .right-img {
          opacity: 0.2;
        }
        .img {
          display: block;
        }
        .imghover {
          display: none;
        }
      }
    }
  }
}
@keyframes opacityAni {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@keyframes opacityAni2 {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 0.3;
  }
}