92 lines
1.6 KiB
CSS
92 lines
1.6 KiB
CSS
|
/* 整体布局 */
|
||
|
|
*{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;
|
||
|
|
}
|