268 lines
8.4 KiB
HTML
268 lines
8.4 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="data:,">
|
|
<title>管理端登录原型</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
:root {
|
|
color-scheme: light;
|
|
--ink: #18201d;
|
|
--muted: #5b6862;
|
|
--line: #cfd7d3;
|
|
--surface: #ffffff;
|
|
--canvas: #f3f5f4;
|
|
--brand: #0b6b50;
|
|
--brand-dark: #07513d;
|
|
--danger: #a62f2f;
|
|
--focus: #1a73b8;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
min-width: 280px;
|
|
color: var(--ink);
|
|
background: var(--canvas);
|
|
font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
letter-spacing: 0;
|
|
}
|
|
button, input { font: inherit; }
|
|
button, input { min-height: 44px; }
|
|
button:focus-visible, input:focus-visible {
|
|
outline: 3px solid rgba(26, 115, 184, .28);
|
|
outline-offset: 2px;
|
|
}
|
|
.prototype {
|
|
position: fixed;
|
|
inset: 0 0 auto;
|
|
z-index: 10;
|
|
min-height: 32px;
|
|
padding: 6px 16px;
|
|
color: #fff;
|
|
background: #24312c;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.shell {
|
|
min-height: 100vh;
|
|
padding-top: 32px;
|
|
display: grid;
|
|
grid-template-rows: 58px 1fr;
|
|
}
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 clamp(18px, 5vw, 48px);
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--surface);
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 16px;
|
|
font-weight: 750;
|
|
}
|
|
.brand-mark {
|
|
width: 26px;
|
|
height: 26px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #fff;
|
|
background: var(--brand);
|
|
border-radius: 5px;
|
|
font-size: 13px;
|
|
}
|
|
main {
|
|
width: min(100% - 32px, 420px);
|
|
margin: 0 auto;
|
|
padding: clamp(40px, 10vh, 96px) 0 48px;
|
|
}
|
|
.panel {
|
|
padding: clamp(22px, 6vw, 32px);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--surface);
|
|
box-shadow: 0 8px 24px rgba(31, 47, 40, .06);
|
|
}
|
|
h1 { margin: 0 0 4px; font-size: 24px; line-height: 1.25; }
|
|
.lead { margin: 0 0 24px; color: var(--muted); }
|
|
.field { margin-top: 16px; }
|
|
label { display: block; margin-bottom: 6px; font-weight: 650; }
|
|
input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid #9eaaa4;
|
|
border-radius: 5px;
|
|
color: var(--ink);
|
|
background: #fff;
|
|
}
|
|
.password-wrap { position: relative; }
|
|
.password-wrap input { padding-right: 72px; }
|
|
.reveal {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
min-height: 36px;
|
|
padding: 0 10px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
color: var(--brand-dark);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-weight: 650;
|
|
}
|
|
.error-summary {
|
|
display: none;
|
|
margin: 18px 0 0;
|
|
padding: 10px 12px;
|
|
border-left: 4px solid var(--danger);
|
|
background: #fff1f1;
|
|
color: #762222;
|
|
}
|
|
.field-error { min-height: 20px; margin: 4px 0 0; color: var(--danger); font-size: 13px; }
|
|
.submit {
|
|
width: 100%;
|
|
margin-top: 18px;
|
|
border: 1px solid var(--brand);
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
background: var(--brand);
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
}
|
|
.submit:hover { background: var(--brand-dark); }
|
|
.submit:disabled { cursor: wait; opacity: .7; }
|
|
.demo-tools {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 18px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.demo-tools button {
|
|
min-height: 38px;
|
|
padding: 7px 10px;
|
|
border: 1px solid #9eaaa4;
|
|
border-radius: 5px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
color: #34423c;
|
|
}
|
|
.hint { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
|
|
@media (max-width: 420px) {
|
|
.prototype { padding-inline: 2px; font-size: 10px; white-space: nowrap; }
|
|
header { padding-inline: 16px; }
|
|
main { width: min(100% - 24px, 420px); padding-top: 28px; }
|
|
.panel { padding: 20px 16px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="prototype">PROTOTYPE - 仅供确认布局和交互，不是生产实现</div>
|
|
<div class="shell">
|
|
<header>
|
|
<div class="brand"><span class="brand-mark" aria-hidden="true">采</span>采购任务管理</div>
|
|
</header>
|
|
<main>
|
|
<section class="panel" aria-labelledby="page-title">
|
|
<h1 id="page-title">管理端登录</h1>
|
|
<p class="lead">使用采购管理员账号继续</p>
|
|
<form id="login-form" novalidate>
|
|
<div id="summary" class="error-summary" role="alert" tabindex="-1"></div>
|
|
<div class="field">
|
|
<label for="account">账号</label>
|
|
<input id="account" name="account" autocomplete="username" autofocus>
|
|
<p id="account-error" class="field-error"></p>
|
|
</div>
|
|
<div class="field">
|
|
<label for="password">密码</label>
|
|
<div class="password-wrap">
|
|
<input id="password" name="password" type="password" autocomplete="current-password">
|
|
<button class="reveal" id="reveal" type="button" aria-controls="password" aria-pressed="false">显示</button>
|
|
</div>
|
|
<p id="password-error" class="field-error"></p>
|
|
</div>
|
|
<button class="submit" id="submit" type="submit">登录</button>
|
|
</form>
|
|
<div class="demo-tools" aria-label="原型状态">
|
|
<button type="button" data-state="credentials">账号错误</button>
|
|
<button type="button" data-state="network">网络错误</button>
|
|
<button type="button" data-state="expired">会话过期</button>
|
|
<button type="button" data-state="reset">重置</button>
|
|
</div>
|
|
<p class="hint">原型状态按钮用于确认错误文案和焦点，不代表生产功能。</p>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<script>
|
|
const form = document.querySelector('#login-form');
|
|
const account = document.querySelector('#account');
|
|
const password = document.querySelector('#password');
|
|
const submit = document.querySelector('#submit');
|
|
const summary = document.querySelector('#summary');
|
|
const accountError = document.querySelector('#account-error');
|
|
const passwordError = document.querySelector('#password-error');
|
|
|
|
function clearErrors() {
|
|
summary.style.display = 'none';
|
|
summary.textContent = '';
|
|
accountError.textContent = '';
|
|
passwordError.textContent = '';
|
|
}
|
|
|
|
function showSummary(message) {
|
|
summary.textContent = message;
|
|
summary.style.display = 'block';
|
|
summary.focus();
|
|
}
|
|
|
|
form.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
clearErrors();
|
|
if (!account.value.trim() || !password.value) {
|
|
if (!account.value.trim()) accountError.textContent = '请输入账号。';
|
|
if (!password.value) passwordError.textContent = '请输入密码。';
|
|
showSummary('请检查并补全必填项。');
|
|
(!account.value.trim() ? account : password).focus();
|
|
return;
|
|
}
|
|
submit.disabled = true;
|
|
submit.textContent = '正在登录…';
|
|
window.setTimeout(() => {
|
|
submit.disabled = false;
|
|
submit.textContent = '登录';
|
|
showSummary('原型：登录成功后进入任务列表。');
|
|
}, 650);
|
|
});
|
|
|
|
document.querySelector('#reveal').addEventListener('click', (event) => {
|
|
const showing = password.type === 'text';
|
|
password.type = showing ? 'password' : 'text';
|
|
event.currentTarget.textContent = showing ? '显示' : '隐藏';
|
|
event.currentTarget.setAttribute('aria-pressed', String(!showing));
|
|
});
|
|
|
|
document.querySelector('.demo-tools').addEventListener('click', (event) => {
|
|
const state = event.target.dataset.state;
|
|
if (!state) return;
|
|
clearErrors();
|
|
if (state === 'credentials') showSummary('账号或密码不正确。');
|
|
if (state === 'network') {
|
|
password.value = '';
|
|
showSummary('网络连接失败，密码已清空。请检查网络后重试。');
|
|
}
|
|
if (state === 'expired') showSummary('登录已过期，请重新登录后继续访问原页面。');
|
|
if (state === 'reset') {
|
|
account.value = '';
|
|
password.value = '';
|
|
account.focus();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|