feat: 重构学员端登录页面——专业移动端H5登录体验
LoginPanel.vue 完全重写: - 品牌标题区:绿色圆角图标+主标题+副标题+装饰盾牌 - 表单卡片:白色圆角卡片承载手机号+短信验证码 - 图形验证码按需弹出:点击发送验证码时弹出模态弹窗 - 用户协议:自定义checkbox+协议弹窗(Tab切换) - 倒计时持久化:localStorage按手机号存储,刷新不重置 - Toast提示:发送成功/失败/登录错误 - 辅助入口:收不到验证码/登录遇到问题弹窗 - 底部安全说明:盾牌图标+信任提示 - 输入过滤:只允许数字,16px字号防iOS缩放 - 响应式:最大420px居中,safe-area适配 styles.css:移除旧登录样式,保留全局基础
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -51,167 +51,11 @@ button {
|
||||
color: #557066;
|
||||
}
|
||||
|
||||
/* ── 登录页使用组件内 scoped 样式,全局仅保留基础重置 ── */
|
||||
.login-panel {
|
||||
height: 100%;
|
||||
padding: 72px 24px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f3faf7 100%);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
background: #0f8b6f;
|
||||
color: #ffffff;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.login-panel h1 {
|
||||
margin: 10px 0 0;
|
||||
font-size: 28px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.login-panel p {
|
||||
margin: 0 0 18px;
|
||||
color: #5f746c;
|
||||
}
|
||||
|
||||
.login-panel label {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
color: #40524b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-panel input,
|
||||
.composer textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #cad8d2;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
color: #17211d;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.login-panel input {
|
||||
height: 48px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.login-panel input:focus,
|
||||
.composer textarea:focus {
|
||||
border-color: #0f8b6f;
|
||||
box-shadow: 0 0 0 3px rgba(15, 139, 111, 0.12);
|
||||
}
|
||||
|
||||
.code-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 92px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.captcha-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 128px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.captcha-image {
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #cad8d2;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.captcha-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.captcha-image span {
|
||||
color: #5f746c;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.primary,
|
||||
.secondary,
|
||||
.send-btn,
|
||||
.stop-btn,
|
||||
.new-session-btn {
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.primary {
|
||||
height: 50px;
|
||||
margin-top: 8px;
|
||||
background: #0f8b6f;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: #e5f3ef;
|
||||
color: #0f735d;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.52;
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
min-height: 20px;
|
||||
color: #657970;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dialog-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(12, 24, 20, 0.42);
|
||||
}
|
||||
|
||||
.dialog-box {
|
||||
width: min(100%, 320px);
|
||||
padding: 22px;
|
||||
border-radius: 18px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 18px 48px rgba(15, 31, 26, 0.22);
|
||||
}
|
||||
|
||||
.dialog-box strong {
|
||||
display: block;
|
||||
color: #17211d;
|
||||
font-size: 18px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.dialog-box p {
|
||||
margin: 10px 0 18px;
|
||||
color: #51655d;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.dialog-box .primary {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
|
||||
Reference in New Issue
Block a user