hsxtxxcykcds2026-frontend/frontend/prototype/login.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>沪苏协同新兴产业科创大赛报名系统</title>
  <link rel="icon" type="image/png" href="/favicon.png?v=20260829c">
  <link rel="stylesheet" href="./assets/prototype.css" />
</head>
<body class="login-page-wls">
  <div class="login-page-wls__wrap">
    <div class="login-page-wls__inner">
      <aside class="login-page-wls__brand" aria-label="系统说明">
        <div class="login-page-wls__logo" aria-hidden="true">
          <svg viewBox="0 0 100 100" width="72" height="72" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <defs>
              <linearGradient id="loginPetalGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#55c6e9" />
                <stop offset="45%" stop-color="#109bd3" />
                <stop offset="100%" stop-color="#087db4" />
              </linearGradient>
              <path
                id="loginPetal"
                d="M50 50
                   C46.2 44.2 44.2 34.5 46.2 27.2
                   C47.3 23.6 48.6 21.2 50 20.2
                   C51.4 21.2 52.7 23.6 53.8 27.2
                   C55.8 34.5 53.8 44.2 50 50Z"
              />
            </defs>
            <g fill="url(#loginPetalGrad)" stroke="#087db4" stroke-width="0.35" stroke-linejoin="round">
              <use href="#loginPetal" />
              <use href="#loginPetal" transform="rotate(90 50 50)" />
              <use href="#loginPetal" transform="rotate(180 50 50)" />
              <use href="#loginPetal" transform="rotate(270 50 50)" />
            </g>
            <circle cx="50" cy="50" r="3.6" fill="#5c6068" stroke="#fdfcfc" stroke-width="0.65" />
          </svg>
        </div>
        <div class="login-page-wls__mark">
          <div class="login-page-wls__mark-cn">2026江苏省新消费创新创业大赛</div>
        </div>
        <h1 class="login-page-wls__title">
          <span class="login-page-wls__title-main">2026江苏省新消费创新创业大赛报名系统</span>
        </h1>
        <p class="login-page-wls__slogan">汇聚创新力量，赋能新消费未来</p>
      </aside>

      <section class="login-page-wls__panel">
        <div class="login-page-wls__card">
          <h2 class="login-page-wls__card-title">欢迎登录</h2>
          <form id="loginForm" class="login-page-wls__form" novalidate>
            <input
              type="tel"
              class="login-page-wls__input"
              name="mobile"
              autocomplete="tel"
              placeholder="手机号"
              required
              pattern="^1[3-9]\d{9}$"
            />
            <div class="login-page-wls__code-row">
              <input
                type="text"
                class="login-page-wls__input login-page-wls__input-code"
                name="captcha"
                autocomplete="one-time-code"
                placeholder="验证码"
                required
              />
              <button type="button" class="login-page-wls__code-btn">获取验证码</button>
            </div>
            <button type="submit" class="login-page-wls__submit">登录</button>
            <div class="login-page-wls__quick-entry" aria-label="快捷演示入口">
              <a class="login-page-wls__quick-link" href="./layout.html?role=user">用户端入口</a>
              <span class="login-page-wls__quick-sep">|</span>
              <a class="login-page-wls__quick-link" href="./layout.html?role=reviewer">评审端入口</a>
              <span class="login-page-wls__quick-sep">|</span>
              <a class="login-page-wls__quick-link" href="./layout.html?role=admin">管理端入口</a>
            </div>
          </form>
        </div>
      </section>
    </div>

    <footer class="login-page-wls__footer">
      <p class="login-page-wls__copyright">版权所有：2026江苏省新消费创新创业大赛</p>
    </footer>
  </div>

  <script>
    const form = document.getElementById("loginForm");
    const codeBtn = document.querySelector(".login-page-wls__code-btn");
    codeBtn.addEventListener("click", function () {
      codeBtn.textContent = "已发送";
      codeBtn.disabled = true;
      setTimeout(() => {
        codeBtn.textContent = "获取验证码";
        codeBtn.disabled = false;
      }, 1500);
    });
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      if (!form.checkValidity()) {
        form.classList.add("login-page-wls__form--invalid");
        return;
      }
      form.classList.remove("login-page-wls__form--invalid");
      window.location.href = "./layout.html?role=user";
    });
  </script>
</body>
</html>