|
@@ -0,0 +1,479 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="zh-CN">
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8" />
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
+ <title>山峡一体化门户 · 登录页 Demo(扫码 + 账号密码)</title>
|
|
|
|
|
+ <style>
|
|
|
|
|
+ :root {
|
|
|
|
|
+ --primary: #10b981;
|
|
|
|
|
+ --primary-dark: #059669;
|
|
|
|
|
+ --primary-bg: #ecfdf5;
|
|
|
|
|
+ --text: #1e293b;
|
|
|
|
|
+ --muted: #64748b;
|
|
|
|
|
+ --border: #e5e7eb;
|
|
|
|
|
+ --danger: #dc2626;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ * { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
|
+
|
|
|
|
|
+ body {
|
|
|
|
|
+ font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
|
|
|
+ color: var(--text);
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .page {
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 24px 200px 56px 24px;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ background:
|
|
|
|
|
+ linear-gradient(120deg, rgba(15, 23, 42, 0.35), rgba(5, 150, 105, 0.25)),
|
|
|
|
|
+ radial-gradient(ellipse at 20% 30%, #86efac 0%, transparent 50%),
|
|
|
|
|
+ linear-gradient(135deg, #0f766e 0%, #134e4a 40%, #1e293b 100%);
|
|
|
|
|
+ background-size: cover;
|
|
|
|
|
+ background-position: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .page::before {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: 0;
|
|
|
|
|
+ background:
|
|
|
|
|
+ url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-opacity='0.06'%3E%3Cpath d='M0 0h60v60H0z'/%3E%3Cpath stroke='%23fff' stroke-width='1' d='M0 30h60M30 0v60'/%3E%3C/g%3E%3C/svg%3E");
|
|
|
|
|
+ opacity: 0.5;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .login-card {
|
|
|
|
|
+ width: 400px;
|
|
|
|
|
+ padding: 28px 28px 20px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.72);
|
|
|
|
|
+ backdrop-filter: blur(12px);
|
|
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.35);
|
|
|
|
|
+ box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .brand {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .brand-mark {
|
|
|
|
|
+ width: 180px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ background: linear-gradient(90deg, var(--primary), var(--primary-dark));
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ letter-spacing: 2px;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .brand h1 {
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .brand .hint {
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ min-height: 20px;
|
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tabs {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tab {
|
|
|
|
|
+ appearance: none;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ padding: 12px 8px;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ font-family: inherit;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tab:hover { color: var(--primary); }
|
|
|
|
|
+
|
|
|
|
|
+ .tab.active {
|
|
|
|
|
+ color: var(--primary-dark);
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tab.active::after {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 16%;
|
|
|
|
|
+ right: 16%;
|
|
|
|
|
+ bottom: -1px;
|
|
|
|
|
+ height: 2px;
|
|
|
|
|
+ background: var(--primary);
|
|
|
|
|
+ border-radius: 2px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .panel { display: none; }
|
|
|
|
|
+ .panel.active { display: block; }
|
|
|
|
|
+
|
|
|
|
|
+ .qr-box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ padding-top: 4px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .qr-frame {
|
|
|
|
|
+ width: 200px;
|
|
|
|
|
+ height: 200px;
|
|
|
|
|
+ border: 1px solid var(--border);
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .qr-frame svg { width: 168px; height: 168px; }
|
|
|
|
|
+
|
|
|
|
|
+ .qr-overlay {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: 0;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.88);
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 16px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .qr-overlay.show { display: flex; }
|
|
|
|
|
+
|
|
|
|
|
+ .qr-status {
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ min-height: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .qr-status.error { color: var(--danger); }
|
|
|
|
|
+ .qr-status.ok { color: var(--primary-dark); }
|
|
|
|
|
+
|
|
|
|
|
+ .btn {
|
|
|
|
|
+ appearance: none;
|
|
|
|
|
+ border: 1px solid var(--border);
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ color: var(--text);
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ padding: 0 16px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 6px;
|
|
|
|
|
+ font-family: inherit;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn:hover { border-color: var(--primary); color: var(--primary-dark); }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-primary {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 48px;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-primary:hover { opacity: 0.92; }
|
|
|
|
|
+
|
|
|
|
|
+ .field {
|
|
|
|
|
+ margin-bottom: 18px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .field label {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .input {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 44px;
|
|
|
|
|
+ border: 1px solid var(--border);
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ padding: 0 14px;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
+ font-family: inherit;
|
|
|
|
|
+ color: var(--text);
|
|
|
|
|
+ outline: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .input:focus {
|
|
|
|
|
+ border-color: var(--primary);
|
|
|
|
|
+ box-shadow: 0 0 0 3px var(--primary-bg);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .footer {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ letter-spacing: 1px;
|
|
|
|
|
+ z-index: 2;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* Demo controls */
|
|
|
|
|
+ .demo-bar {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ left: 20px;
|
|
|
|
|
+ top: 20px;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ width: min(360px, calc(100vw - 40px));
|
|
|
|
|
+ background: rgba(15, 23, 42, 0.88);
|
|
|
|
|
+ color: #e2e8f0;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ padding: 14px 16px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ backdrop-filter: blur(8px);
|
|
|
|
|
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-bar h2 {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-bar p {
|
|
|
|
|
+ color: #94a3b8;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-actions {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-actions button {
|
|
|
|
|
+ appearance: none;
|
|
|
|
|
+ border: 1px solid #334155;
|
|
|
|
|
+ background: #1e293b;
|
|
|
|
|
+ color: #e2e8f0;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ padding: 6px 10px;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ font-family: inherit;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-actions button:hover {
|
|
|
|
|
+ border-color: var(--primary);
|
|
|
|
|
+ color: #a7f3d0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @media (max-width: 768px) {
|
|
|
|
|
+ .page {
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding: 72px 16px 64px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .login-card { width: min(400px, 100%); }
|
|
|
|
|
+
|
|
|
|
|
+ .demo-bar {
|
|
|
|
|
+ left: 12px;
|
|
|
|
|
+ right: 12px;
|
|
|
|
|
+ width: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body>
|
|
|
|
|
+ <aside class="demo-bar">
|
|
|
|
|
+ <h2>登录页交互 Demo</h2>
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 默认「微信扫码」优先;可切换到「账号密码」。左侧按钮可模拟扫码各状态(仅演示,无真实接口)。
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <div class="demo-actions">
|
|
|
|
|
+ <button type="button" data-sim="creating">生成中</button>
|
|
|
|
|
+ <button type="button" data-sim="pending">待扫码</button>
|
|
|
|
|
+ <button type="button" data-sim="scanned">已扫码</button>
|
|
|
|
|
+ <button type="button" data-sim="success">登录成功</button>
|
|
|
|
|
+ <button type="button" data-sim="expired">已过期</button>
|
|
|
|
|
+ <button type="button" data-sim="failed">失败</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </aside>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="page">
|
|
|
|
|
+ <div class="login-card">
|
|
|
|
|
+ <div class="brand">
|
|
|
|
|
+ <div class="brand-mark">山峡化工</div>
|
|
|
|
|
+ <h1>山峡一体化门户</h1>
|
|
|
|
|
+ <p class="hint" id="subtitle">微信扫一扫,授权手机号后自动登录</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="tabs" role="tablist">
|
|
|
|
|
+ <button type="button" class="tab active" data-tab="wechat" role="tab">微信扫码</button>
|
|
|
|
|
+ <button type="button" class="tab" data-tab="password" role="tab">账号密码</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="panel active" id="panel-wechat" role="tabpanel">
|
|
|
|
|
+ <div class="qr-box">
|
|
|
|
|
+ <div class="qr-frame">
|
|
|
|
|
+ <!-- Decorative QR placeholder -->
|
|
|
|
|
+ <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
|
|
|
+ <rect width="100" height="100" fill="#fff"/>
|
|
|
|
|
+ <rect x="8" y="8" width="28" height="28" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="14" y="14" width="16" height="16" fill="#fff"/>
|
|
|
|
|
+ <rect x="18" y="18" width="8" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="64" y="8" width="28" height="28" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="70" y="14" width="16" height="16" fill="#fff"/>
|
|
|
|
|
+ <rect x="74" y="18" width="8" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="8" y="64" width="28" height="28" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="14" y="70" width="16" height="16" fill="#fff"/>
|
|
|
|
|
+ <rect x="18" y="74" width="8" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="44" y="8" width="8" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="56" y="20" width="8" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="44" y="32" width="8" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="44" y="44" width="12" height="12" fill="#10b981"/>
|
|
|
|
|
+ <rect x="64" y="44" width="8" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="80" y="44" width="8" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="44" y="64" width="8" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="56" y="72" width="8" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="72" y="64" width="20" height="8" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="72" y="80" width="8" height="12" fill="#0f172a"/>
|
|
|
|
|
+ <rect x="88" y="72" width="4" height="20" fill="#0f172a"/>
|
|
|
|
|
+ </svg>
|
|
|
|
|
+ <div class="qr-overlay" id="qrOverlay"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="qr-status" id="qrStatus">请使用微信扫一扫</p>
|
|
|
|
|
+ <button type="button" class="btn" id="refreshBtn">↻ 刷新二维码</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="panel" id="panel-password" role="tabpanel">
|
|
|
|
|
+ <form id="pwdForm" onsubmit="return false;">
|
|
|
|
|
+ <div class="field">
|
|
|
|
|
+ <label for="username">用户名</label>
|
|
|
|
|
+ <input class="input" id="username" type="text" placeholder="请输入用户名" autocomplete="username" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="field">
|
|
|
|
|
+ <label for="password">密码</label>
|
|
|
|
|
+ <input class="input" id="password" type="password" placeholder="请输入密码" autocomplete="current-password" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <button type="button" class="btn btn-primary" id="loginBtn">登 录</button>
|
|
|
|
|
+ </form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="footer">
|
|
|
|
|
+ Copyright © 2025–2026 山峡化工有限公司 All Rights Reserved.
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ const subtitle = document.getElementById('subtitle')
|
|
|
|
|
+ const qrStatus = document.getElementById('qrStatus')
|
|
|
|
|
+ const qrOverlay = document.getElementById('qrOverlay')
|
|
|
|
|
+ const tabs = document.querySelectorAll('.tab')
|
|
|
|
|
+ const panels = {
|
|
|
|
|
+ wechat: document.getElementById('panel-wechat'),
|
|
|
|
|
+ password: document.getElementById('panel-password')
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const statusMap = {
|
|
|
|
|
+ creating: { text: '正在生成二维码…', cls: '', overlay: '生成中…' },
|
|
|
|
|
+ pending: { text: '请使用微信扫一扫', cls: '', overlay: '' },
|
|
|
|
|
+ scanned: { text: '已扫码,请在手机上确认授权', cls: 'ok', overlay: '已扫码\n请在手机确认' },
|
|
|
|
|
+ success: { text: '登录成功,正在跳转…', cls: 'ok', overlay: '✓ 登录成功' },
|
|
|
|
|
+ expired: { text: '二维码已过期,请刷新后重扫', cls: 'error', overlay: '已过期\n请刷新' },
|
|
|
|
|
+ failed: { text: '扫码登录失败,请刷新后重试', cls: 'error', overlay: '登录失败' }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function setQrStatus(key) {
|
|
|
|
|
+ const conf = statusMap[key] || statusMap.pending
|
|
|
|
|
+ qrStatus.textContent = conf.text
|
|
|
|
|
+ qrStatus.className = 'qr-status' + (conf.cls ? ' ' + conf.cls : '')
|
|
|
|
|
+ if (conf.overlay) {
|
|
|
|
|
+ qrOverlay.textContent = conf.overlay
|
|
|
|
|
+ qrOverlay.classList.add('show')
|
|
|
|
|
+ } else {
|
|
|
|
|
+ qrOverlay.classList.remove('show')
|
|
|
|
|
+ qrOverlay.textContent = ''
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function switchTab(name) {
|
|
|
|
|
+ tabs.forEach((t) => t.classList.toggle('active', t.dataset.tab === name))
|
|
|
|
|
+ Object.keys(panels).forEach((k) => panels[k].classList.toggle('active', k === name))
|
|
|
|
|
+ subtitle.textContent =
|
|
|
|
|
+ name === 'wechat'
|
|
|
|
|
+ ? '微信扫一扫,授权手机号后自动登录'
|
|
|
|
|
+ : '请输入账号密码登录系统'
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ tabs.forEach((tab) => {
|
|
|
|
|
+ tab.addEventListener('click', () => switchTab(tab.dataset.tab))
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ document.querySelectorAll('[data-sim]').forEach((btn) => {
|
|
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
|
|
+ switchTab('wechat')
|
|
|
|
|
+ setQrStatus(btn.dataset.sim)
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ document.getElementById('refreshBtn').addEventListener('click', () => {
|
|
|
|
|
+ setQrStatus('creating')
|
|
|
|
|
+ setTimeout(() => setQrStatus('pending'), 600)
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ document.getElementById('loginBtn').addEventListener('click', () => {
|
|
|
|
|
+ const u = document.getElementById('username').value.trim()
|
|
|
|
|
+ const p = document.getElementById('password').value.trim()
|
|
|
|
|
+ if (!u || !p) {
|
|
|
|
|
+ alert('请输入用户名和密码(Demo 仅做前端校验)')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ alert('Demo:账号密码登录成功(不会真实请求后端)')
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ setQrStatus('pending')
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|