.login{ position: relative; min-height: 100vh; z-index: 1; //background: #4564DC; .welcome{ position: absolute; z-index: -1; top:0; width: 100%; padding: 200px 80px 300px 80px; .bg{ position: absolute; z-index: -1; top: 0; left: 0; width: 100vw; height: 48vh; } .welcomeTitle{ font-size: 60px; color: white; font-weight: bolder; line-height: 60px; padding-bottom: 20px; } } .loginContent{ position: relative; margin: 316px 50px 0 50px; background: #ffffff; padding: 100px 30px 227px 30px; border-radius: 30px; box-shadow: 0 3px 23px 1px #999999; .loginItem{ display: flex; flex-flow: row nowrap; align-items: center; padding-bottom: 10px; border-bottom: 1px #dac3c3 solid; margin-bottom: 100px; .usernameContent{ position: relative; } } .rememberPassword{ margin-bottom: 100px; display: flex; justify-content: flex-end; margin-top: -70px; font-size: 26px; } .usernameListContent{ position: relative; .usernameList{ position: absolute; z-index: 100; left: 0; right: 0; top: -100px; background: white; padding: 30px 20px; box-shadow: -1px 5px 18px -8px #000; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; .usernameItem{ display: flex; flex-flow: row nowrap; align-items: center; margin-bottom: 25px; .value{ padding-left: 15px; color: #c6c4c4; .name{ font-size: 20px; font-weight: bold; } .password{ font-size: 20px; padding-top: 8px; font-weight: bold; } } } } } .tips{ color: #3067d4; padding-top: 20px; font-size: 25px; padding-left: 10px; } .company{ position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #aeafb1; padding-top: 20px; font-size: 18px; margin-top: auto; } } .lxy-nav-bar__center{ position: absolute; left: 50px; font-family: cursive; font-size: 38px; letter-spacing: 6px; } }