.wave { position: fixed; width: 50%; height: 100%; left: 0; bottom: 0; z-index: -1; width: 50%; height: 100%; float: left; justify-content: center; background: url('@/assets/login/bg.png') no-repeat left center; background-size: cover; } .logo1{ padding:40px; } .login-container { width: 100vw; height: 100vh; max-width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 18rem; padding: 0 2rem; } .img { display: flex; justify-content: flex-end; align-items: center; } .img img { width: 500px; } .login-box { display: flex; align-items: center; text-align: center; overflow: hidden; } .login-form { width: 360px; } .avatar { width: 350px; height: 80px; } .login-form h2 { text-transform: uppercase; margin: 15px 0; color: #999; font: bold 200% Consolas, Monaco, monospace; } @media screen and (max-width: 1180px) { .login-container { grid-gap: 9rem; } .login-form { width: 290px; } .login-form h2 { font-size: 2.4rem; margin: 8px 0; } .img img { width: 360px; } .avatar { width: 280px; height: 80px; } } @media screen and (max-width: 968px) { .wave { display: none; } .img { display: none; } .login-container { grid-template-columns: 1fr; } .login-box { justify-content: center; } }