5G-Loading-Bay-Web/src/views/login/Login.scss

.login-container {
    width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  //   background-image: url('https://via.placeholder.com/1920x1080?text=铁路货车背景图');
  background-image: url("@/assets/login/big_bg.png");
 

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  .bg-login-title {
    width: 100%;
    height: 45px;
    background-image: url("@/assets/login/title.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto 72px;
  }

  .login-box {
    background-image: url("@/assets/login/login_bg.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 630px;
    height: 455px;
    position: relative;
    padding: 20px 0;

    .title {
      width: 424px;
      height: 70px;
      color: #87ceeb;
      text-align: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28px;
      letter-spacing: 2px;
      color: #e9f6ff;
      position: relative;
      background-image: url("@/assets/login/login_title.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      gap: 20px;
      margin: 0 auto 48px;
      .left-arrow,
      .right-arrow {
        width: 31px;
        height: 15px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }

      .left-arrow {
        left: 120px;
        background-image: url("@/assets/login/right_arrow.png");
      }

      .right-arrow {
        right: -30px;
        background-image: url("@/assets/login/left_arrow.png");
      }
    }

    .login-form {
      width: 400px;
      margin: 0 auto;
      .el-form-item--large {
        margin-bottom: 20px;
      }
      .input-group {
        display: flex;
        align-items: center;
        overflow: hidden;
        width: 100%;
        background: #03366b;
        box-shadow: inset 2px 2px 4px 0px #105890,
          inset -2px -2px 4px 0px #105890;
        border-radius: 4px;
        border: 1px solid #105890;

        .el-input__wrapper {
          background-color: transparent;
          border: none;
          box-shadow: none;
          padding: 0;
          height: 48px;
          font-size: 14px;
        }

        .input-icon {
          margin: 0 12px;
          width: 20px;
          height: 20px;
          background: rgba(58, 145, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .custom-input {
          .el-input__inner {
            background: transparent;
            border: none;
            color: white;
            height: 48px;
            &::placeholder {
              color: #7b96b2;
            }
          }
        }
      }
      .remember-item {
        margin: 0 0 40px;
        .el-form-item--large .el-form-item__content {
          line-height: 22px;
        }
        .el-checkbox.el-checkbox--large {
          height: 22px;
        }
        .el-checkbox__label {
          color: #ffffff;
          line-height: 22px;
        }

        .el-checkbox.el-checkbox--large .el-checkbox__inner {
          height: 16px;
          width: 16px;
        }
        .el-checkbox__inner:after {
          left: 5px;
          top: 2px;
        }
      }

      .login-btn {
        width: 400px;
        height: 48px;
        background: linear-gradient(180deg, #2589ff 0%, #46a9ed 100%);
        border-radius: 4px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 25px;
        letter-spacing: 2px;
         border-radius: 4px;
        &:hover {
          background: linear-gradient(135deg, #1976d2, #42a5f5);
        }
      }
    }
  }
}