.main-nav { height: 70px; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; padding: 0 30px; } .main-nav .return { } .main-nav .return a i { margin-right: 5px; font-size: 14px; vertical-align: middle; } .main-nav .return a { color: #fff; font-size: 16px; } .blur { filter: blur(15px); position: fixed; top: 0; } .main-login { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: url("../img/login-bg.png") no-repeat center center !important; background-size: 100% 100%; } .login-box { display: flex; align-items: center; justify-content: center; height: calc(100% - 70px); } .login-layout { width: 800px; padding: 0; margin-top: -3%; background: rgba(255, 255, 255, 1); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); border-radius: 10px; overflow: hidden; } .logo { float: left; width: 340px; height: 300px; background: url("../img/login-logo-bg-index.png") no-repeat left center, url("../img//login-logo-bg.png") no-repeat center center; background-size: 93% 89%, 102% 107%; text-align: center; margin-right: 20px; } .logo h2, .logo h3 { font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #ffffff; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.74); } .formTitle { /* display: flex; */ align-items: center; font-size: 18px; color: #336666; font-weight: 700; margin: 15px 0 18px 0; letter-spacing: 4px; } .formTitle img { width: 42px; height: 38px; margin-right: 10px; } .logo .title { margin: 84px 0 5px 0; font-size: 28px; } .logo .sub-title { font-size: 18px; letter-spacing: 3px; } .login-btn-submit { width: 100% !important; background: linear-gradient(180deg, #70ba7b 1%, #70ba7b 100%) !important; border: none !important; box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.1) !important; } .login-btn-submit:hover { width: 100% !important; background: linear-gradient(180deg, #70ba7b 1%, #70ba7b 100%) !important; border: none !important; box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.1) !important; color: #fff !important; } .login-form { overflow: hidden; padding: 20px 36px 20px 22px; text-align: center; } .login-form h4 { font-size: 18px; margin: 16px 0 18px 0; letter-spacing: 2px; color: #fff; text-align: left; text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.6); } .layui-form-item { height: 38px; background-color: #fff; border: 1px solid #f8f8f8; border-radius: 5px; display: flex; align-items: center; margin-bottom: 22px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); } .layui-form-item .layui-icon { font-size: 20px; padding: 0 10px; color: #409eff; } .layui-form-item .layui-input { border: none; font-size: 16px; height: 38px; line-height: 45px; padding-left: 5px; } .layui-submit { margin-top: 10px; width: 100%; color: #fff; background: #409eff; display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; border: 1px solid #409eff; color: #fff; -webkit-appearance: none; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; margin: 0; -webkit-transition: 0.1s; transition: 0.1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 12px 20px; font-size: 14px; border-radius: 4px; letter-spacing: 9px; } .layui-submit:hover { color: #333; } .layui-form-item .layui-input:focus { border-color: #70ba7b !important; } .layui-form-item .layui-input:hover { border-color: #70ba7b !important; } .layui-form-item .layui-icon { color: #70ba7b; } .layui-form-item .layui-input::-webkit-input-placeholder { /* 使用webkit内核的浏览器 */ color: #dcdfe6; } .layui-form-item .layui-input:-moz-placeholder { /* Firefox版本4-18 */ color: #dcdfe6; } .layui-form-item .layui-input::-moz-placeholder { /* Firefox版本19+ */ color: #dcdfe6; } .layui-form-item .layui-input:-ms-input-placeholder { /* IE浏览器 */ color: #dcdfe6; }