|
|
<!doctype html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>2026江苏省新消费创新创业大赛报名系统原型</title>
|
|
|
<link rel="stylesheet" href="./assets/bootstrap.min.css" />
|
|
|
<link rel="stylesheet" href="./assets/prototype.css" />
|
|
|
</head>
|
|
|
<body class="prototype-page">
|
|
|
<header class="navbar navbar-expand-lg layout-header">
|
|
|
<div class="container-fluid px-4">
|
|
|
<span class="navbar-brand mb-0 prototype-title">2026江苏省新消费创新创业大赛报名系统原型</span>
|
|
|
<div class="dropdown">
|
|
|
<button class="header-user dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
|
<circle cx="12" cy="12" r="9.5" stroke="currentColor" stroke-width="2"></circle>
|
|
|
<circle cx="12" cy="9" r="3.2" fill="currentColor"></circle>
|
|
|
<path d="M6.8 18.2c1.1-2.4 3-3.6 5.2-3.6s4.1 1.2 5.2 3.6" fill="currentColor"></path>
|
|
|
</svg>
|
|
|
<span id="roleBadge" class="header-user-name">王清萍</span>
|
|
|
</button>
|
|
|
<ul class="dropdown-menu dropdown-menu-end header-user-menu">
|
|
|
<li>
|
|
|
<a class="dropdown-item" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#profileModal">
|
|
|
<span class="menu-icon">👤</span>个人信息
|
|
|
</a>
|
|
|
</li>
|
|
|
<li><hr class="dropdown-divider"></li>
|
|
|
<li>
|
|
|
<a class="dropdown-item text-danger" href="./login.html">
|
|
|
<span class="menu-icon">↪</span>退出登录
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<div id="mobileNavSection" class="container-fluid px-4 pt-2 pb-1 d-lg-none">
|
|
|
<div class="mobile-nav-wrap" id="mobileNav">
|
|
|
<button class="mobile-nav-link" data-page="./pages/user-form.html" data-role="user">赛事报名</button>
|
|
|
<button class="mobile-nav-link" data-page="./pages/admin-report.html" data-role="admin">综合看板</button>
|
|
|
<button class="mobile-nav-link" data-page="./pages/admin-list.html" data-role="admin">项目管理</button>
|
|
|
<button class="mobile-nav-link" data-page="./pages/admin-reviewers.html" data-role="admin">评审员管理</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="container-fluid px-4 py-3 layout-main">
|
|
|
<div class="row h-100 g-3">
|
|
|
<aside class="col-12 col-md-3 col-lg-2 layout-sider">
|
|
|
<div class="card h-100">
|
|
|
<div class="card-body">
|
|
|
<div class="nav flex-column gap-2" id="sideNav">
|
|
|
<button class="nav-link text-start" data-page="./pages/user-form.html" data-role="user">赛事报名</button>
|
|
|
<button class="nav-link text-start" data-page="./pages/admin-report.html" data-role="admin">综合看板</button>
|
|
|
<button class="nav-link text-start" data-page="./pages/admin-list.html" data-role="admin">项目管理</button>
|
|
|
<button class="nav-link text-start" data-page="./pages/admin-reviewers.html" data-role="admin">评审员管理</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</aside>
|
|
|
<main class="col-12 col-md-9 col-lg-10">
|
|
|
<iframe class="main-iframe" id="mainFrame" src="./pages/user-form.html" title="主内容区"></iframe>
|
|
|
</main>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<footer id="layoutFooter" class="border-top bg-white text-center py-2 small text-secondary prototype-subtitle">
|
|
|
版权所有：2026江苏省新消费创新创业大赛
|
|
|
</footer>
|
|
|
|
|
|
<div class="modal fade" id="profileModal" tabindex="-1" aria-hidden="true">
|
|
|
<div class="modal-dialog modal-dialog-centered profile-modal-dialog">
|
|
|
<div class="modal-content profile-modal-content">
|
|
|
<div class="modal-header profile-modal-header">
|
|
|
<h5 class="modal-title profile-modal-title">个人信息</h5>
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
|
|
|
</div>
|
|
|
<div class="modal-body profile-modal-body">
|
|
|
<div class="row g-3">
|
|
|
<div class="col-md-6">
|
|
|
<div class="profile-field">
|
|
|
<div class="profile-field-label">姓名</div>
|
|
|
<div class="profile-field-value">王清萍</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<div class="profile-field">
|
|
|
<div class="profile-field-label">手机号</div>
|
|
|
<div class="profile-field-value">13800138000</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<div class="profile-field">
|
|
|
<div class="profile-field-label">单位</div>
|
|
|
<div class="profile-field-value">2026江苏省新消费创新创业大赛组委会</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<div class="profile-field">
|
|
|
<div class="profile-field-label">邮箱</div>
|
|
|
<div class="profile-field-value">wangqp@example.com</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="./assets/bootstrap.bundle.min.js"></script>
|
|
|
<script>
|
|
|
const navButtons = Array.from(
|
|
|
document.querySelectorAll("#sideNav .nav-link, #mobileNav .mobile-nav-link")
|
|
|
);
|
|
|
const frame = document.getElementById("mainFrame");
|
|
|
const role = new URLSearchParams(window.location.search).get("role") || "user";
|
|
|
const roleBadge = document.getElementById("roleBadge");
|
|
|
const isAdmin = role === "admin";
|
|
|
const isReviewer = role === "reviewer";
|
|
|
const isManager = isAdmin || isReviewer;
|
|
|
const defaultPage = isReviewer ? "./pages/admin-list.html?role=reviewer" : (isAdmin ? "./pages/admin-report.html" : "./pages/user-form.html");
|
|
|
const headerEl = document.querySelector(".layout-header");
|
|
|
const mobileNavSection = document.getElementById("mobileNavSection");
|
|
|
const footerEl = document.getElementById("layoutFooter");
|
|
|
|
|
|
roleBadge.textContent = isAdmin ? "管理员" : (isReviewer ? "评审员" : "王清萍");
|
|
|
if (isReviewer) {
|
|
|
document.body.classList.add("reviewer-mode");
|
|
|
}
|
|
|
if (!isManager) {
|
|
|
document.body.classList.add("user-mobile-no-menu");
|
|
|
}
|
|
|
frame.src = defaultPage;
|
|
|
|
|
|
if (isReviewer) {
|
|
|
navButtons.forEach((btn) => {
|
|
|
if (btn.dataset.page === "./pages/admin-list.html") {
|
|
|
btn.textContent = "项目评审";
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function setActive(page) {
|
|
|
navButtons.forEach((btn) => {
|
|
|
btn.classList.toggle("active", btn.dataset.page === page && !btn.classList.contains("d-none"));
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function syncFrameHeight() {
|
|
|
if (isAdmin) {
|
|
|
frame.style.height = "";
|
|
|
frame.style.minHeight = "";
|
|
|
return;
|
|
|
}
|
|
|
const mobileView = window.matchMedia("(max-width: 992px)").matches;
|
|
|
if (!mobileView) {
|
|
|
frame.style.height = "";
|
|
|
frame.style.minHeight = "";
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const headerH = headerEl ? headerEl.offsetHeight : 0;
|
|
|
const navH = mobileNavSection ? mobileNavSection.offsetHeight : 0;
|
|
|
const footerH = footerEl ? footerEl.offsetHeight : 0;
|
|
|
const extraGap = 26;
|
|
|
const available = Math.max(360, window.innerHeight - headerH - navH - footerH - extraGap);
|
|
|
frame.style.height = available + "px";
|
|
|
frame.style.minHeight = available + "px";
|
|
|
}
|
|
|
|
|
|
navButtons.forEach((btn) => {
|
|
|
const forUser = btn.dataset.role === "user";
|
|
|
const forAdmin = btn.dataset.role === "admin";
|
|
|
const isReportEntry = btn.dataset.page === "./pages/admin-report.html";
|
|
|
const isReviewerManageEntry = btn.dataset.page === "./pages/admin-reviewers.html";
|
|
|
if (isManager && forUser) btn.classList.add("d-none");
|
|
|
if (!isManager && forAdmin) btn.classList.add("d-none");
|
|
|
if (isReviewer && (isReportEntry || isReviewerManageEntry)) btn.classList.add("d-none");
|
|
|
btn.addEventListener("click", () => {
|
|
|
const targetPage = isReviewer && forAdmin ? (btn.dataset.page + "?role=reviewer") : btn.dataset.page;
|
|
|
frame.src = targetPage;
|
|
|
setActive(btn.dataset.page);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
setActive(defaultPage);
|
|
|
syncFrameHeight();
|
|
|
window.addEventListener("resize", syncFrameHeight);
|
|
|
window.addEventListener("orientationchange", syncFrameHeight);
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
