2 lines
3.0 KiB
CSS
2 lines
3.0 KiB
CSS
.login-container{display:flex;min-height:100vh;background:linear-gradient(135deg,#1890ff,#722ed1)}.login-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba%28255,255,255,0.1%29" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url%28%23grid%29"/></svg>');opacity:.3}.login-left{flex:1 1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.brand-content{text-align:center;color:#fff;z-index:1;position:relative;max-width:400px;padding:40px}.brand-logo{margin-bottom:30px}.brand-logo .logo-icon{font-size:60px;margin-bottom:20px;display:block;color:#ffffffe6}.brand-logo .brand-title{font-size:36px;font-weight:700;margin:0;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.brand-subtitle{font-size:20px;font-weight:500;margin-bottom:30px;color:#ffffffe6}.brand-description{margin-bottom:40px}.brand-description p{font-size:16px;line-height:1.6;margin:8px 0;color:#fffc}.brand-features{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px}.brand-features .feature-item{display:flex;flex-direction:column;align-items:center;gap:8px}.brand-features .feature-item .feature-icon{font-size:24px}.brand-features .feature-item span:last-child{font-size:14px;color:#fffc}.login-right{flex:1 1;display:flex;align-items:center;justify-content:center;padding:40px}.login-form-container{width:100%;max-width:400px}.login-header{text-align:center;margin-bottom:40px}.login-header .login-title{font-size:28px;font-weight:600;color:#fff;margin:0 0 8px}.login-header .login-subtitle{font-size:16px;color:#fff;margin:0}.login-form .ant-form-item{margin-bottom:24px}.login-input{height:48px;border-radius:8px;border:1px solid #d9d9d9;font-size:16px}.login-input:hover,.login-input:focus,.login-input.ant-input-focused{border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33}.login-input .input-icon{color:#bfbfbf;font-size:16px}.login-button{height:48px;border-radius:8px;font-size:16px;font-weight:500;background:linear-gradient(135deg,#1890ff,#722ed1);border:none;margin-top:8px}.login-button:hover{background:linear-gradient(135deg,#40a9ff,#9254de);transform:translateY(-1px);box-shadow:0 4px 12px #1890ff4d}.login-button:active{transform:translateY(0)}.login-tips{text-align:center;margin-top:24px;padding:16px;background-color:#f6f8fa;border-radius:8px;border:1px solid #e8e8e8}.login-tips p{margin:0;color:#595959;font-size:14px}.login-footer{text-align:center;margin-top:40px}.login-footer p{color:#8c8c8c;font-size:12px;margin:0}@media (max-width: 768px){.login-container{flex-direction:column}.login-left{flex:none;height:200px;padding:20px}.brand-content{padding:20px}.brand-logo .logo-icon{font-size:40px}.brand-title{font-size:24px}.brand-subtitle{font-size:16px}.brand-description p{font-size:14px}.login-right{flex:1 1;padding:20px}}
|