You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

124 lines
5.5 KiB

<!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="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">光联万物&nbsp;&nbsp;创芯未来</div>
</div>
<h1 class="login-page-wls__title">
<span class="login-page-wls__title-main">首届沪苏协同新兴产业科创大赛报名系统</span>
</h1>
</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="快捷演示入口">
<div class="login-page-wls__quick-row">
<a class="login-page-wls__quick-link" href="/admin/c/hsxt/login">参赛报名</a>
<span class="login-page-wls__quick-sep">|</span>
<a class="login-page-wls__quick-link" href="/admin/c/hsxt/audience/login">观众报名</a>
<span class="login-page-wls__quick-sep">|</span>
<a class="login-page-wls__quick-link" href="./pages/admin-checkin-mobile.html">核销入口</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>
<div class="login-page-wls__quick-row login-page-wls__quick-row--english" lang="en" aria-label="English registration portals">
<a class="login-page-wls__quick-link" href="./prototype/login-en.html?role=user">Competition Registration</a>
<span class="login-page-wls__quick-sep">|</span>
<a class="login-page-wls__quick-link" href="./prototype/login-en.html?role=audience">Audience Registration</a>
</div>
</div>
</form>
</div>
</section>
</div>
<footer class="login-page-wls__footer">
<p class="login-page-wls__copyright">© 苏州市人民政府驻上海联络处&nbsp;&nbsp;苏州恒泰</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");
localStorage.setItem("verifiedMobile", form.elements.mobile.value.trim());
window.location.href = "./layout.html?role=user";
});
</script>
</body>
</html>