ouyangxq
805675f8db
- 拆分应用工厂、业务服务与路由，保留原有 HTTP/SSE 和存储入口 - 分离页面资源，重排客服工作台并完善响应式导航、草稿和附件交互 - 整理维护脚本、请求示例和贡献指南，移除启动脚本中的密钥配置 - 上传文件改为仅本地保留，补充隔离的后端与前端回归验证 验证：46 项 Python 测试通过，含 14 个已有子测试；12 个 Node 前端场景通过。
58 lines
4.5 KiB
CSS
58 lines
4.5 KiB
CSS
/* Split welcome and sign-in card, with a compact mobile fallback. */
|
|
.auth-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 36px; background: #edf2f8; }
|
|
.auth-shell { width: min(1050px, 100%); min-height: 620px; display: grid; grid-template-columns: 1.08fr 1fr; overflow: hidden; border: 1px solid #dde5ef; border-radius: 19px; box-shadow: 0 24px 75px rgba(31, 53, 87, .1); background: white; }
|
|
.auth-story { position: relative; display: flex; flex-direction: column; padding: 38px 40px; background: #17345e; color: white; overflow: hidden; }
|
|
.auth-story::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
|
|
.auth-story > * { position: relative; }
|
|
.auth-story .brand { color: white; }
|
|
.auth-story .brand-mark { background: #315c9c; }
|
|
.auth-story .brand-caption { color: #a9bedb; }
|
|
.story-copy { margin-top: 65px; }
|
|
.story-copy .eyebrow { color: #a7c3eb; font-size: 11px; }
|
|
.story-copy h1 { font-size: 30px; font-weight: 550; line-height: 1.55; letter-spacing: -.03em; margin: 15px 0 14px; }
|
|
.story-copy > p { color: #b9cbe3; font-size: 13px; line-height: 1.95; max-width: 340px; }
|
|
.service-points { display: grid; gap: 17px; margin-top: 34px; }
|
|
.service-point { display: flex; align-items: flex-start; gap: 12px; }
|
|
.service-point > span { width: 29px; height: 29px; border: 1px solid #49658b; color: #c8d9f0; border-radius: 8px; display: grid; place-items: center; font-size: 13px; }
|
|
.service-point strong { display: block; color: #eaf2ff; font-size: 12px; font-weight: 550; }
|
|
.service-point p { color: #aebfd8; font-size: 11px; margin-top: 2px; }
|
|
.route-line { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 40px; font-size: 11px; color: #afc6e5; }
|
|
.route-line i { height: 1px; flex: 1; background: #506e97; position: relative; }
|
|
.route-line i::after { content: ""; position: absolute; right: 0; top: -2px; border-radius: 50%; width: 5px; height: 5px; background: #96b6e2; }
|
|
.auth-content { display: flex; flex-direction: column; justify-content: center; padding: 48px 50px 28px; }
|
|
.box { width: 100%; max-width: 330px; margin: auto; }
|
|
.box .eyebrow { margin-bottom: 10px; }
|
|
.box h2 { color: var(--text); font-size: 27px; font-weight: 650; letter-spacing: -.03em; }
|
|
.login-description { font-size: 12px; color: var(--muted); margin: 9px 0 30px; line-height: 1.8; }
|
|
.field-label { display: block; color: var(--secondary); font-size: 12px; font-weight: 550; margin: 18px 0 8px; }
|
|
.field-wrap { position: relative; }
|
|
.field-wrap svg { position: absolute; left: 13px; top: 14px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
|
|
.box input { width: 100%; height: 45px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: white; padding: 10px 13px 10px 40px; outline: none; font-size: 13px; }
|
|
.box input:focus { border-color: #8ba7e8; box-shadow: 0 0 0 3px var(--brand-soft); }
|
|
.box input::placeholder { color: var(--muted); }
|
|
.box input[aria-invalid="true"] { border-color: #df8d98; }
|
|
#loginButton { display: block; width: 100%; height: 44px; border: 0; border-radius: 8px; background: var(--brand); color: white; font-size: 13px; font-weight: 600; margin-top: 24px; box-shadow: 0 4px 12px rgba(49,95,213,.16); }
|
|
#loginButton:hover { background: var(--brand-hover); }
|
|
.err { color: var(--danger); background: var(--danger-soft); border-radius: 7px; font-size: 12px; line-height: 1.7; padding: 9px 11px; margin-top: 14px; }
|
|
.login-back { display: block; text-align: center; font-size: 12px; color: var(--muted); text-decoration: none; margin-top: 20px; }
|
|
.login-back:hover { color: var(--brand-text); }
|
|
.auth-footer { color: var(--muted); text-align: center; font-size: 10px; margin-top: 30px; }
|
|
.mobile-brand { display: none; }
|
|
@media (max-width: 900px) {
|
|
.auth-page { padding: 24px; }
|
|
.auth-shell { min-height: 590px; grid-template-columns: 1fr 1fr; }
|
|
.auth-story { padding: 30px; }
|
|
.story-copy h1 { font-size: 27px; }
|
|
.story-copy { margin-top: 50px; }
|
|
.auth-content { padding: 38px 30px 25px; }
|
|
}
|
|
@media (max-width: 650px) {
|
|
.auth-page { padding: 20px; }
|
|
.auth-shell { display: block; max-width: 430px; min-height: 0; border-radius: 14px; }
|
|
.auth-story { display: none; }
|
|
.auth-content { padding: 30px 28px 22px; }
|
|
.mobile-brand { display: flex; margin-bottom: 38px; }
|
|
.box h2 { font-size: 25px; }
|
|
.auth-footer { margin-top: 35px; }
|
|
}
|