Files

365 lines
16 KiB
HTML
Raw Normal View History

2026-01-24 18:01:27 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>江苏城市足球联赛2025赛季 | 苏超联赛第一季</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Oswald:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚽</text></svg>">
</head>
<body>
<!-- 加载动画 -->
<div class="loader">
<div class="loader-content">
<div class="football"></div>
<div class="loader-text">加载中...</div>
</div>
</div>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="nav-brand">
<div class="logo">
<div class="logo-ball"></div>
<span class="logo-text">苏超联赛</span>
</div>
<div class="league-name">江苏城市足球联赛2025赛季</div>
</div>
<div class="nav-menu">
<a href="#home" class="nav-link active">首页</a>
<a href="#teams" class="nav-link">球队</a>
<a href="#fixtures" class="nav-link">赛程</a>
<a href="#standings" class="nav-link">积分榜</a>
<a href="#stats" class="nav-link">数据</a>
<a href="#news" class="nav-link">新闻</a>
</div>
<div class="nav-actions">
<button class="btn-theme-toggle">
<i class="fas fa-moon"></i>
</button>
<button class="btn-menu-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</nav>
<!-- 主内容区 -->
<main>
<!-- 英雄区域 -->
<section id="home" class="hero">
<div class="hero-background">
<div class="hero-gradient"></div>
<div class="hero-pattern"></div>
<div class="hero-ball-animation"></div>
</div>
<div class="container">
<div class="hero-content">
<div class="hero-badge">
<span class="badge-season">2025赛季</span>
<span class="badge-league">苏超联赛第一季</span>
</div>
<h1 class="hero-title">
<span class="title-line">江苏城市</span>
<span class="title-line highlight">足球联赛</span>
</h1>
<p class="hero-subtitle">
江苏省首个城市间职业足球联赛汇集12支精英球队点燃2025赛季战火
</p>
<div class="hero-stats">
<div class="stat-item">
<div class="stat-number">12</div>
<div class="stat-label">参赛球队</div>
</div>
<div class="stat-item">
<div class="stat-number">132</div>
<div class="stat-label">场比赛</div>
</div>
<div class="stat-item">
<div class="stat-number">26</div>
<div class="stat-label">比赛周</div>
</div>
<div class="stat-item">
<div class="stat-number">1</div>
<div class="stat-label">冠军荣耀</div>
</div>
</div>
<div class="hero-actions">
<a href="#fixtures" class="btn btn-primary">
<i class="fas fa-calendar-alt"></i>
查看赛程
</a>
<a href="#standings" class="btn btn-secondary">
<i class="fas fa-trophy"></i>
积分榜
</a>
</div>
</div>
<div class="hero-visual">
<div class="stadium-visual">
<div class="stadium-field"></div>
<div class="stadium-stands"></div>
<div class="stadium-players">
<div class="player player-1"></div>
<div class="player player-2"></div>
<div class="player player-3"></div>
</div>
<div class="stadium-ball"></div>
</div>
</div>
</div>
<div class="hero-scroll">
<div class="scroll-indicator">
<div class="scroll-line"></div>
</div>
</div>
</section>
<!-- 下一场比赛 -->
<section class="next-match">
<div class="container">
<div class="section-header">
<h2 class="section-title">下一场比赛</h2>
<div class="section-subtitle">即将开始的精彩对决</div>
</div>
<div class="match-card">
<div class="match-date">
<div class="match-day">周六</div>
<div class="match-date-number">25</div>
<div class="match-month">一月</div>
<div class="match-time">19:30</div>
</div>
<div class="match-teams">
<div class="team team-home">
<div class="team-logo logo-nanjing"></div>
<div class="team-name">南京城联</div>
<div class="team-record">8胜 3平 2负</div>
</div>
<div class="match-vs">
<div class="vs-text">VS</div>
<div class="match-info">
<div class="match-venue">南京奥体中心</div>
<div class="match-round">第12轮</div>
</div>
</div>
<div class="team team-away">
<div class="team-logo logo-suzhou"></div>
<div class="team-name">苏州雄狮</div>
<div class="team-record">7胜 4平 2负</div>
</div>
</div>
<div class="match-actions">
<button class="btn btn-outline">
<i class="fas fa-bell"></i>
设置提醒
</button>
<button class="btn btn-primary">
<i class="fas fa-ticket-alt"></i>
购票
</button>
</div>
</div>
</div>
</section>
<!-- 球队展示 -->
<section id="teams" class="teams-section">
<div class="container">
<div class="section-header">
<h2 class="section-title">参赛球队</h2>
<div class="section-subtitle">12支城市代表队的荣耀之战</div>
</div>
<div class="teams-grid">
<!-- 球队卡片将通过JS动态生成 -->
</div>
</div>
</section>
<!-- 积分榜 -->
<section id="standings" class="standings-section">
<div class="container">
<div class="section-header">
<h2 class="section-title">积分榜</h2>
<div class="section-subtitle">2025赛季实时排名</div>
</div>
<div class="standings-container">
<div class="standings-table">
<table>
<thead>
<tr>
<th>排名</th>
<th>球队</th>
<th>场次</th>
<th></th>
<th></th>
<th></th>
<th>进球</th>
<th>失球</th>
<th>净胜球</th>
<th>积分</th>
</tr>
</thead>
<tbody>
<!-- 积分榜数据将通过JS动态生成 -->
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- 赛程表 -->
<section id="fixtures" class="fixtures-section">
<div class="container">
<div class="section-header">
<h2 class="section-title">赛程表</h2>
<div class="section-subtitle">2025赛季完整赛程</div>
</div>
<div class="fixtures-tabs">
<div class="tabs">
<button class="tab active" data-round="all">全部赛程</button>
<button class="tab" data-round="next">即将比赛</button>
<button class="tab" data-round="recent">最近赛果</button>
</div>
<div class="fixtures-list">
<!-- 赛程数据将通过JS动态生成 -->
</div>
</div>
</div>
</section>
<!-- 数据统计 -->
<section id="stats" class="stats-section">
<div class="container">
<div class="section-header">
<h2 class="section-title">数据统计</h2>
<div class="section-subtitle">球员与球队数据排行榜</div>
</div>
<div class="stats-tabs">
<div class="stats-tab-nav">
<button class="stats-tab active" data-tab="scorers">射手榜</button>
<button class="stats-tab" data-tab="assists">助攻榜</button>
<button class="stats-tab" data-tab="teams">球队数据</button>
</div>
<div class="stats-content">
<div class="stats-tab-content active" id="scorers">
<!-- 射手榜数据 -->
</div>
<div class="stats-tab-content" id="assists">
<!-- 助攻榜数据 -->
</div>
<div class="stats-tab-content" id="teams">
<!-- 球队数据 -->
</div>
</div>
</div>
</div>
</section>
<!-- 新闻动态 -->
<section id="news" class="news-section">
<div class="container">
<div class="section-header">
<h2 class="section-title">新闻动态</h2>
<div class="section-subtitle">联赛最新资讯</div>
</div>
<div class="news-grid">
<!-- 新闻卡片将通过JS动态生成 -->
</div>
</div>
</section>
<!-- 底部 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<div class="logo">
<div class="logo-ball"></div>
<span class="logo-text">苏超联赛</span>
</div>
<div class="footer-description">
江苏城市足球联赛2025赛季官方网站
</div>
<div class="footer-social">
<a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
<a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-link"><i class="fab fa-douyin"></i></a>
<a href="#" class="social-link"><i class="fab fa-bilibili"></i></a>
</div>
</div>
<div class="footer-links">
<div class="footer-column">
<h3 class="footer-title">联赛信息</h3>
<a href="#" class="footer-link">关于联赛</a>
<a href="#" class="footer-link">联赛章程</a>
<a href="#" class="footer-link">组织机构</a>
<a href="#" class="footer-link">合作伙伴</a>
</div>
<div class="footer-column">
<h3 class="footer-title">球迷服务</h3>
<a href="#" class="footer-link">票务信息</a>
<a href="#" class="footer-link">球迷社区</a>
<a href="#" class="footer-link">官方商店</a>
<a href="#" class="footer-link">联系我们</a>
</div>
<div class="footer-column">
<h3 class="footer-title">媒体中心</h3>
<a href="#" class="footer-link">新闻发布</a>
<a href="#" class="footer-link">媒体资料</a>
<a href="#" class="footer-link">采访申请</a>
<a href="#" class="footer-link">摄影图库</a>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="copyright">
&copy; 2025 江苏城市足球联赛. 保留所有权利.
</div>
<div class="footer-legal">
<a href="#" class="legal-link">隐私政策</a>
<a href="#" class="legal-link">使用条款</a>
<a href="#" class="legal-link">Cookie政策</a>
</div>
</div>
</div>
</footer>
</main>
<!-- JavaScript文件 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="js/data.js"></script>
<script src="js/main.js"></script>
</body>
</html>