ShouBo3_houTai/src/pages/Login/index.module.scss

.Login {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/loginBac.jpg");
  background-size: 100% 100%;

  :global {


    .mainRight {
      position: absolute;
      right: 0px;
      top: 0;
      width: 530px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.70);
      backdrop-filter: blur(6px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

        .LogoImg{
          position: absolute;
          top: 90px;
          left: 80px;
          &>img{
            width: 300px;
          }
        }

        .inputBox {
          margin: 40px 0 80px;
          width: 100%;

          input::-webkit-input-placeholder {
            /* WebKit browsers */
            color: rgba(255,255,255,.6);
          }

          input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: rgba(255,255,255,.6);
          }

          input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: rgba(255,255,255,.6);
          }

          input:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: rgba(255,255,255,.6);
          }


          .inputBoxRow {
            width: 370px;
            margin: 30px auto;

            .ant-input-suffix .ant-input-password-icon {
              color: #fff;
              font-size: 22px;
            }
          }

          .inputBoxRow2 {
            position: relative;

            .loginCode {
              z-index: 110;
              cursor: pointer;
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
            }
          }

          .ant-input-prefix {
            margin-right: 10px;

            .anticon {
              padding-right: 10px;
              width: 36px;
              height: 36px;

              svg {
                width: 100%;
                height: 100%;
              }
            }
          }

          .ant-input {
            font-size: 18px;
            width: 45%;
            height: 60px;
            line-height: 60px;
            background-clip: content-box;
          }

          input:-webkit-autofill {
            font-size: 18px !important;
            -webkit-text-fill-color: #fff !important;
            background-image: none;
            -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; //填充阴影，可以用来遮住背景色
            background-color: transparent;
            transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间

          }

          .ant-input-affix-wrapper {
            background-color: transparent;
            padding: 0 11px;
            width: 100%;
            height: 60px;
            border: none;
            border-bottom: 1px solid #fff;
            border-radius: 0;
            color: #fff;

            .ant-input {
              background-color: transparent;
              width: 100%;
              height: 60px;
              color: #fff;
            }
          }

          .ant-input-affix-wrapper-focused {
            box-shadow: none
          }
        }

        .loginBtn {

          .ant-btn {
            color: #fff;
            background-color: var(--themeColor);
            border-radius: 25px;
            font-size:18px;
            width: 375px;
            height: 50px;
          }
        }

    }
  }
}