赛事手册 - 运动会管理系�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; color: #333; } .container { max-width: 1000px; margin: 0 auto; padding: 20px; } header { text-align: center; margin-bottom: 30px; } h1 { color: #2c3e50; font-size: 2rem; margin-bottom: 10px; } .back-link { display: inline-block; margin-bottom: 20px; color: #3498db; text-decoration: none; font-weight: bold; } .back-link:hover { text-decoration: underline; } .manual-container { background: white; border-radius: 10px; padding: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .manual-title { font-size: 1.8rem; color: #2c3e50; margin-bottom: 20px; text-align: center; } .manual-content { line-height: 1.8; font-size: 1.1rem; } .manual-content h2 { color: #3498db; margin: 20px 0 10px; font-size: 1.5rem; } .manual-content h3 { color: #2980b9; margin: 15px 0 8px; font-size: 1.3rem; } .manual-content p { margin-bottom: 15px; } .manual-content ul, .manual-content ol { margin-left: 20px; margin-bottom: 15px; } .manual-content li { margin-bottom: 8px; } .manual-content table { width: 100%; border-collapse: collapse; margin: 20px 0; } .manual-content th, .manual-content td { padding: 12px; border: 1px solid #ddd; text-align: left; } .manual-content th { background-color: #f8f9fa; font-weight: bold; color: #2c3e50; } .last-updated { margin-top: 30px; text-align: right; color: #7f8c8d; font-style: italic; } /* Responsive design */ @media (max-width: 768px) { .container { margin: 10px; padding: 0; } .manual-container { padding: 20px; } h1 { font-size: 1.8rem; } .manual-title { font-size: 1.5rem; } } </style> </head> <body> <div class="container"> <header> <a href="index.html" class="back-link">�?返回首页</a> <h1>📖 赛事手册</h1> <p>运动会详细规则和赛程安排</p> </header> <div class="manual-container"> <h2 class="manual-title" id="manualTitle">赛事手册</h2> <div class="manual-content" id="manualContent"> <p>正在加载赛事手册内容...</p> </div> <div class="last-updated" id="lastUpdated"></div> </div> </div> <script> // API base URL const API_BASE = '/api'; // Elements const manualTitle = document.getElementById('manualTitle'); const manualContent = document.getElementById('manualContent'); const lastUpdated = document.getElementById('lastUpdated'); // Load manual content from API async function loadManual() { try { const response = await fetch(`${API_BASE}/manual`); const data = await response.json(); if (response.ok) { manualTitle.textContent = data.title; manualContent.innerHTML = data.content; lastUpdated.textContent = `最后更新：${new Date(data.updated_at).toLocaleString()}`; } else { manualContent.innerHTML = '<p>加载赛事手册失败，请稍后重试</p>'; } } catch (error) { manualContent.innerHTML = '<p>网络错误，无法加载赛事手�?/p>'; console.error('Error loading manual:', error); } } // Initialize page loadManual(); </script> </body> </html>