shanxia2.0/docs/demos/web-admin-login-wx-qr-demo.html

<!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>