/* 整体布局 */ *{margin:0;padding:0;box-sizing:border-box;font-family:'PingFang SC','Helvetica Neue',Arial,sans-serif;} body{ height:100vh; display:flex; align-items:center; justify-content:center; background:#d5d1e8; /* 柔和紫色背景 */ } .container{ width:90%;max-width:420px; } .login-form{ background:#fff; padding:36px 28px; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.08); } .login-form h2{ font-size:24px; font-weight:600; text-align:center; margin-bottom:32px; } /* 输入框组 */ .input-group{ position:relative; margin-bottom:26px; } .input-group input{ width:100%; padding:14px 16px; font-size:16px; border:2px solid #aaa3; border-radius:10px; outline:none; transition:border .25s; } .input-group input:focus{ border-color:#1296ff; } .input-group label{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#999; pointer-events:none; transition:all .25s; } /* 上浮效果 */ .input-group input:focus + label, .input-group input:not(:placeholder-shown) + label{ top:0; transform:translateY(-50%) scale(.86); background:#fff; padding:0 4px; color:#1296ff; } /* 登录按钮 */ button[type="submit"]{ width:100%; padding:14px 0; font-size:18px; font-weight:600; color:#fff; background:#1296ff; border:none; border-radius:10px; cursor:pointer; transition:opacity .25s; } button[type="submit"]:hover{opacity:.9;} .error-message{ margin-top:18px; font-size:14px; color:#e02424; text-align:center; display:none; }