| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>世界足球联赛 | 西甲 英超 德甲 意甲 积分榜 比分直播</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| |
| |
| .live-indicator { |
| position: relative; |
| padding-left: 1.5rem; |
| } |
| |
| .live-indicator::before { |
| content: ""; |
| position: absolute; |
| left: 0; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 12px; |
| height: 12px; |
| background-color: #ef4444; |
| border-radius: 50%; |
| animation: pulse 1.5s infinite; |
| } |
| |
| |
| .league-logo:hover { |
| transform: scale(1.05); |
| transition: transform 0.3s ease; |
| } |
| |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| transition: all 0.3s ease; |
| } |
| |
| |
| .custom-scrollbar::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| border-radius: 10px; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 10px; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| |
| .video-thumbnail:hover .play-icon { |
| opacity: 1; |
| transform: scale(1.1); |
| } |
| |
| .play-icon { |
| opacity: 0.8; |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <nav class="bg-green-800 text-white shadow-lg sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-futbol text-2xl"></i> |
| <a href="#" class="text-xl font-bold">世界足球联赛</a> |
| </div> |
| |
| <div class="hidden md:flex space-x-6"> |
| <a href="#standings" class="hover:text-green-200 transition">积分榜</a> |
| <a href="#fixtures" class="hover:text-green-200 transition">赛程</a> |
| <a href="#live" class="hover:text-green-200 transition">比分直播</a> |
| <a href="#interviews" class="hover:text-green-200 transition">球星访谈</a> |
| <a href="#ucl" class="hover:text-green-200 transition">欧冠精华</a> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="md:hidden text-xl" id="mobile-menu-button"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <div class="hidden md:block"> |
| <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded transition"> |
| <i class="fas fa-user mr-2"></i>登录 |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="md:hidden hidden mt-4 pb-2" id="mobile-menu"> |
| <a href="#standings" class="block py-2 hover:bg-green-700 px-2 rounded transition">积分榜</a> |
| <a href="#fixtures" class="block py-2 hover:bg-green-700 px-2 rounded transition">赛程</a> |
| <a href="#live" class="block py-2 hover:bg-green-700 px-2 rounded transition">比分直播</a> |
| <a href="#interviews" class="block py-2 hover:bg-green-700 px-2 rounded transition">球星访谈</a> |
| <a href="#ucl" class="block py-2 hover:bg-green-700 px-2 rounded transition">欧冠精华</a> |
| <button class="w-full bg-green-600 hover:bg-green-700 px-4 py-2 rounded transition mt-2"> |
| <i class="fas fa-user mr-2"></i>登录 |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <header class="bg-gradient-to-r from-green-700 to-green-900 text-white py-16"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">世界顶级足球联赛</h1> |
| <p class="text-xl md:text-2xl mb-8">实时积分榜、赛程预告、比分直播和独家内容</p> |
| |
| <div class="flex flex-wrap justify-center gap-4 mb-8"> |
| <div class="league-logo bg-white rounded-full p-3 shadow-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LaLiga.svg/1200px-LaLiga.svg.png" alt="La Liga" class="w-16 h-16"> |
| </div> |
| <div class="league-logo bg-white rounded-full p-3 shadow-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/zh/f/f2/Premier_League_Logo.svg" alt="Premier League" class="w-16 h-16"> |
| </div> |
| <div class="league-logo bg-white rounded-full p-3 shadow-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Bundesliga_logo_%282017%29.svg/1200px-Bundesliga_logo_%282017%29.svg.png" alt="Bundesliga" class="w-16 h-16"> |
| </div> |
| <div class="league-logo bg-white rounded-full p-3 shadow-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Serie_A_logo_%282019%29.svg/1200px-Serie_A_logo_%282019%29.svg.png" alt="Serie A" class="w-16 h-16"> |
| </div> |
| <div class="league-logo bg-white rounded-full p-3 shadow-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/0c/UEFA_Champions_League_anthem%2C_performed_by_the_Chorus_of_the_Academy_of_St_Martin_in_the_Fields.ogg/1200px-UEFA_Champions_League_anthem%2C_performed_by_the_Chorus_of_the_Academy_of_St_Martin_in_the_Fields.ogg.jpg" alt="UCL" class="w-16 h-16 rounded-full"> |
| </div> |
| </div> |
| |
| <div class="max-w-2xl mx-auto bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-6 shadow-lg"> |
| <h3 class="text-xl font-semibold mb-4">今日焦点赛事</h3> |
| <div class="flex justify-between items-center"> |
| <div class="text-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Barcelona" class="w-16 h-16 mx-auto mb-2"> |
| <p class="font-medium">巴塞罗那</p> |
| </div> |
| <div class="text-center"> |
| <div class="text-2xl font-bold">VS</div> |
| <div class="text-sm mt-2">20:00 GMT+8</div> |
| </div> |
| <div class="text-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Real Madrid" class="w-16 h-16 mx-auto mb-2"> |
| <p class="font-medium">皇家马德里</p> |
| </div> |
| </div> |
| <button class="mt-4 bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-full transition"> |
| <i class="fas fa-play mr-2"></i>观看直播 |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section id="standings" class="mb-16"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">联赛积分榜</h2> |
| <div class="flex space-x-2"> |
| <button class="px-4 py-2 bg-green-700 text-white rounded-l-lg">全部</button> |
| <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 transition">西甲</button> |
| <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 transition">英超</button> |
| <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 transition">德甲</button> |
| <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 transition rounded-r-lg">意甲</button> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="bg-blue-900 text-white px-4 py-3 flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LaLiga.svg/1200px-LaLiga.svg.png" alt="La Liga" class="w-8 h-8 mr-2"> |
| <h3 class="font-bold">西甲积分榜</h3> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead class="bg-gray-100"> |
| <tr> |
| <th class="px-4 py-2 text-left">排名</th> |
| <th class="px-4 py-2 text-left">球队</th> |
| <th class="px-4 py-2">场次</th> |
| <th class="px-4 py-2">积分</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">1</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Barcelona" class="w-6 h-6 mr-2"> |
| 巴塞罗那 |
| </td> |
| <td class="px-4 py-3 text-center">28</td> |
| <td class="px-4 py-3 text-center font-bold">71</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">2</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Real Madrid" class="w-6 h-6 mr-2"> |
| 皇家马德里 |
| </td> |
| <td class="px-4 py-3 text-center">28</td> |
| <td class="px-4 py-3 text-center font-bold">68</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">3</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Atletico" class="w-6 h-6 mr-2"> |
| 马德里竞技 |
| </td> |
| <td class="px-4 py-3 text-center">28</td> |
| <td class="px-4 py-3 text-center font-bold">60</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">4</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Real Sociedad" class="w-6 h-6 mr-2"> |
| 皇家社会 |
| </td> |
| <td class="px-4 py-3 text-center">28</td> |
| <td class="px-4 py-3 text-center font-bold">54</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">5</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Betis" class="w-6 h-6 mr-2"> |
| 皇家贝蒂斯 |
| </td> |
| <td class="px-4 py-3 text-center">28</td> |
| <td class="px-4 py-3 text-center font-bold">48</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="px-4 py-3 bg-gray-50 text-center"> |
| <a href="#" class="text-blue-600 hover:underline">查看完整积分榜 →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="bg-purple-900 text-white px-4 py-3 flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/zh/f/f2/Premier_League_Logo.svg" alt="Premier League" class="w-8 h-8 mr-2"> |
| <h3 class="font-bold">英超积分榜</h3> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead class="bg-gray-100"> |
| <tr> |
| <th class="px-4 py-2 text-left">排名</th> |
| <th class="px-4 py-2 text-left">球队</th> |
| <th class="px-4 py-2">场次</th> |
| <th class="px-4 py-2">积分</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">1</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Arsenal" class="w-6 h-6 mr-2"> |
| 阿森纳 |
| </td> |
| <td class="px-4 py-3 text-center">30</td> |
| <td class="px-4 py-3 text-center font-bold">72</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">2</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Man City" class="w-6 h-6 mr-2"> |
| 曼城 |
| </td> |
| <td class="px-4 py-3 text-center">29</td> |
| <td class="px-4 py-3 text-center font-bold">70</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">3</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Man Utd" class="w-6 h-6 mr-2"> |
| 曼联 |
| </td> |
| <td class="px-4 py-3 text-center">29</td> |
| <td class="px-4 py-3 text-center font-bold">59</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">4</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Tottenham" class="w-6 h-6 mr-2"> |
| 热刺 |
| </td> |
| <td class="px-4 py-3 text-center">30</td> |
| <td class="px-4 py-3 text-center font-bold">53</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">5</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Newcastle" class="w-6 h-6 mr-2"> |
| 纽卡斯尔 |
| </td> |
| <td class="px-4 py-3 text-center">29</td> |
| <td class="px-4 py-3 text-center font-bold">50</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="px-4 py-3 bg-gray-50 text-center"> |
| <a href="#" class="text-blue-600 hover:underline">查看完整积分榜 →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="bg-red-800 text-white px-4 py-3 flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Bundesliga_logo_%282017%29.svg/1200px-Bundesliga_logo_%282017%29.svg.png" alt="Bundesliga" class="w-8 h-8 mr-2"> |
| <h3 class="font-bold">德甲积分榜</h3> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead class="bg-gray-100"> |
| <tr> |
| <th class="px-4 py-2 text-left">排名</th> |
| <th class="px-4 py-2 text-left">球队</th> |
| <th class="px-4 py-2">场次</th> |
| <th class="px-4 py-2">积分</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">1</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Bayern" class="w-6 h-6 mr-2"> |
| 拜仁慕尼黑 |
| </td> |
| <td class="px-4 py-3 text-center">27</td> |
| <td class="px-4 py-3 text-center font-bold">61</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">2</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Dortmund" class="w-6 h-6 mr-2"> |
| 多特蒙德 |
| </td> |
| <td class="px-4 py-3 text-center">27</td> |
| <td class="px-4 py-3 text-center font-bold">56</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">3</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Union Berlin" class="w-6 h-6 mr-2"> |
| 柏林联合 |
| </td> |
| <td class="px-4 py-3 text-center">27</td> |
| <td class="px-4 py-3 text-center font-bold">54</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">4</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Leipzig" class="w-6 h-6 mr-2"> |
| 莱比锡 |
| </td> |
| <td class="px-4 py-3 text-center">27</td> |
| <td class="px-4 py-3 text-center font-bold">50</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">5</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Leverkusen" class="w-6 h-6 mr-2"> |
| 勒沃库森 |
| </td> |
| <td class="px-4 py-3 text-center">27</td> |
| <td class="px-4 py-3 text-center font-bold">48</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="px-4 py-3 bg-gray-50 text-center"> |
| <a href="#" class="text-blue-600 hover:underline">查看完整积分榜 →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="bg-green-700 text-white px-4 py-3 flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Serie_A_logo_%282019%29.svg/1200px-Serie_A_logo_%282019%29.svg.png" alt="Serie A" class="w-8 h-8 mr-2"> |
| <h3 class="font-bold">意甲积分榜</h3> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead class="bg-gray-100"> |
| <tr> |
| <th class="px-4 py-2 text-left">排名</th> |
| <th class="px-4 py-2 text-left">球队</th> |
| <th class="px-4 py-2">场次</th> |
| <th class="px-4 py-2">积分</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">1</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Napoli" class="w-6 h-6 mr-2"> |
| 那不勒斯 |
| </td> |
| <td class="px-4 py-3 text-center">29</td> |
| <td class="px-4 py-3 text-center font-bold">74</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">2</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Lazio" class="w-6 h-6 mr-2"> |
| 拉齐奥 |
| </td> |
| <td class="px-4 py-3 text-center">29</td> |
| <td class="px-4 py-3 text-center font-bold">61</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">3</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Inter" class="w-6 h-6 mr-2"> |
| 国际米兰 |
| </td> |
| <td class="px-4 py-3 text-center">29</td> |
| <td class="px-4 py-3 text-center font-bold">57</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">4</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Milan" class="w-6 h-6 mr-2"> |
| AC米兰 |
| </td> |
| <td class="px-4 py-3 text-center">29</td> |
| <td class="px-4 py-3 text-center font-bold">56</td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="px-4 py-3 font-bold">5</td> |
| <td class="px-4 py-3 flex items-center"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Roma" class="w-6 h-6 mr-2"> |
| 罗马 |
| </td> |
| <td class="px-4 py-3 text-center">29</td> |
| <td class="px-4 py-3 text-center font-bold">53</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="px-4 py-3 bg-gray-50 text-center"> |
| <a href="#" class="text-blue-600 hover:underline">查看完整积分榜 →</a> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="fixtures" class="mb-16"> |
| <h2 class="text-2xl font-bold mb-6">近期赛程</h2> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="border-b"> |
| <div class="flex overflow-x-auto custom-scrollbar"> |
| <button class="px-6 py-3 font-medium border-b-2 border-blue-600 text-blue-600">全部</button> |
| <button class="px-6 py-3 font-medium hover:text-blue-600">西甲</button> |
| <button class="px-6 py-3 font-medium hover:text-blue-600">英超</button> |
| <button class="px-6 py-3 font-medium hover:text-blue-600">德甲</button> |
| <button class="px-6 py-3 font-medium hover:text-blue-600">意甲</button> |
| <button class="px-6 py-3 font-medium hover:text-blue-600">欧冠</button> |
| </div> |
| </div> |
| |
| <div class="divide-y"> |
| |
| <div class="p-4 hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="text-sm text-gray-500">4月15日 周六 20:00</div> |
| <div class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">西甲 第30轮</div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center w-1/3 justify-end"> |
| <span class="font-medium mr-2">巴塞罗那</span> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Barcelona" class="w-8 h-8"> |
| </div> |
| <div class="px-4 text-center"> |
| <div class="text-xl font-bold">VS</div> |
| <button class="mt-1 text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700 transition">设置提醒</button> |
| </div> |
| <div class="flex items-center w-1/3"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Real Madrid" class="w-8 h-8 mr-2"> |
| <span class="font-medium">皇家马德里</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="text-sm text-gray-500">4月16日 周日 23:30</div> |
| <div class="text-sm bg-purple-100 text-purple-800 px-2 py-1 rounded">英超 第31轮</div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center w-1/3 justify-end"> |
| <span class="font-medium mr-2">阿森纳</span> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Arsenal" class="w-8 h-8"> |
| </div> |
| <div class="px-4 text-center"> |
| <div class="text-xl font-bold">VS</div> |
| <button class="mt-1 text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700 transition">设置提醒</button> |
| </div> |
| <div class="flex items-center w-1/3"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Man City" class="w-8 h-8 mr-2"> |
| <span class="font-medium">曼城</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="text-sm text-gray-500">4月17日 周一 02:45</div> |
| <div class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded">德甲 第28轮</div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center w-1/3 justify-end"> |
| <span class="font-medium mr-2">拜仁慕尼黑</span> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Bayern" class="w-8 h-8"> |
| </div> |
| <div class="px-4 text-center"> |
| <div class="text-xl font-bold">VS</div> |
| <button class="mt-1 text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700 transition">设置提醒</button> |
| </div> |
| <div class="flex items-center w-1/3"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Dortmund" class="w-8 h-8 mr-2"> |
| <span class="font-medium">多特蒙德</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="text-sm text-gray-500">4月18日 周二 03:00</div> |
| <div class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">欧冠 1/4决赛</div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center w-1/3 justify-end"> |
| <span class="font-medium mr-2">皇家马德里</span> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Real Madrid" class="w-8 h-8"> |
| </div> |
| <div class="px-4 text-center"> |
| <div class="text-xl font-bold">VS</div> |
| <button class="mt-1 text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700 transition">设置提醒</button> |
| </div> |
| <div class="flex items-center w-1/3"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Chelsea" class="w-8 h-8 mr-2"> |
| <span class="font-medium">切尔西</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-4 py-3 bg-gray-50 text-center"> |
| <a href="#" class="text-blue-600 hover:underline">查看更多赛程 →</a> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="live" class="mb-16"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">比分直播</h2> |
| <div class="flex items-center space-x-2"> |
| <span class="live-indicator text-red-600 font-medium">LIVE</span> |
| <span class="text-sm text-gray-500">最后更新: <span id="update-time">刚刚</span></span> |
| <button class="text-blue-600 hover:text-blue-800" id="refresh-btn"> |
| <i class="fas fa-sync-alt"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="border-b"> |
| <div class="flex overflow-x-auto custom-scrollbar"> |
| <button class="px-6 py-3 font-medium border-b-2 border-blue-600 text-blue-600">进行中</button> |
| <button class="px-6 py-3 font-medium hover:text-blue-600">今日</button> |
| <button class="px-6 py-3 font-medium hover:text-blue-600">西甲</button> |
| <button class="px-6 py-3 font-medium hover:text-blue-600">英超</button> |
| <button class="px-6 py-3 font-medium hover:text-blue-600">德甲</button> |
| <button class="px-6 py-3 font-medium hover:text-blue-600">意甲</button> |
| </div> |
| </div> |
| |
| <div class="divide-y"> |
| |
| <div class="p-4 hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="text-sm text-gray-500">西甲 第29轮</div> |
| <div class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded flex items-center"> |
| <span class="w-2 h-2 bg-red-600 rounded-full mr-1 animate-pulse"></span> |
| 比赛中 63' |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center w-1/3 justify-end"> |
| <span class="font-medium mr-2">马德里竞技</span> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Atletico" class="w-8 h-8"> |
| </div> |
| <div class="px-4 text-center"> |
| <div class="text-xl font-bold">2 - 1</div> |
| <a href="#" class="mt-1 text-xs bg-red-600 text-white px-2 py-1 rounded hover:bg-red-700 transition inline-block"> |
| <i class="fas fa-play mr-1"></i>观看直播 |
| </a> |
| </div> |
| <div class="flex items-center w-1/3"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Betis" class="w-8 h-8 mr-2"> |
| <span class="font-medium">皇家贝蒂斯</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="text-sm text-gray-500">英超 第30轮</div> |
| <div class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded flex items-center"> |
| <span class="w-2 h-2 bg-red-600 rounded-full mr-1 animate-pulse"></span> |
| 比赛中 78' |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center w-1/3 justify-end"> |
| <span class="font-medium mr-2">利物浦</span> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Liverpool" class="w-8 h-8"> |
| </div> |
| <div class="px-4 text-center"> |
| <div class="text-xl font-bold">1 - 1</div> |
| <a href="#" class="mt-1 text-xs bg-red-600 text-white px-2 py-1 rounded hover:bg-red-700 transition inline-block"> |
| <i class="fas fa-play mr-1"></i>观看直播 |
| </a> |
| </div> |
| <div class="flex items-center w-1/3"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Arsenal" class="w-8 h-8 mr-2"> |
| <span class="font-medium">阿森纳</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="text-sm text-gray-500">德甲 第27轮</div> |
| <div class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded flex items-center"> |
| <span class="w-2 h-2 bg-red-600 rounded-full mr-1 animate-pulse"></span> |
| 比赛中 52' |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center w-1/3 justify-end"> |
| <span class="font-medium mr-2">多特蒙德</span> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Dortmund" class="w-8 h-8"> |
| </div> |
| <div class="px-4 text-center"> |
| <div class="text-xl font-bold">3 - 0</div> |
| <a href="#" class="mt-1 text-xs bg-red-600 text-white px-2 py-1 rounded hover:bg-red-700 transition inline-block"> |
| <i class="fas fa-play mr-1"></i>观看直播 |
| </a> |
| </div> |
| <div class="flex items-center w-1/3"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Leverkusen" class="w-8 h-8 mr-2"> |
| <span class="font-medium">勒沃库森</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="text-sm text-gray-500">意甲 第29轮</div> |
| <div class="text-sm text-gray-500">比赛结束</div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center w-1/3 justify-end"> |
| <span class="font-medium mr-2">国际米兰</span> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Inter" class="w-8 h-8"> |
| </div> |
| <div class="px-4 text-center"> |
| <div class="text-xl font-bold">0 - 1</div> |
| <a href="#" class="mt-1 text-xs bg-gray-600 text-white px-2 py-1 rounded hover:bg-gray-700 transition inline-block"> |
| <i class="fas fa-clipboard mr-1"></i>比赛报告 |
| </a> |
| </div> |
| <div class="flex items-center w-1/3"> |
| <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Juventus" class="w-8 h-8 mr-2"> |
| <span class="font-medium">尤文图斯</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-4 py-3 bg-gray-50 text-center"> |
| <a href="#" class="text-blue-600 hover:underline">查看更多比分 →</a> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="interviews" class="mb-16"> |
| <h2 class="text-2xl font-bold mb-6">球星访谈</h2> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="relative"> |
| <img src="https://imgresizer.eurosport.com/unsafe/1200x0/filters:format(jpeg)/origin-imgresizer.eurosport.com/2023/03/15/3661322-74045348-2560-1440.jpg" alt="Messi Interview" class="w-full h-48 object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
| <div class="absolute bottom-0 left-0 p-4 text-white"> |
| <span class="bg-blue-600 text-xs px-2 py-1 rounded">独家专访</span> |
| <h3 class="text-lg font-bold mt-1">梅西</h3> |
| </div> |
| <div class="absolute top-0 right-0 m-3 bg-black bg-opacity-50 text-white p-2 rounded-full"> |
| <i class="fas fa-play"></i> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-semibold mb-2">梅西谈世界杯夺冠后的感受</h4> |
| <p class="text-sm text-gray-600 mb-3">阿根廷球星梅西在接受我们独家专访时,分享了世界杯夺冠后的心路历程以及他在巴黎圣日耳曼的未来计划。</p> |
| <div class="flex justify-between items-center text-sm text-gray-500"> |
| <span>2023-04-10</span> |
| <span>15分钟</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="relative"> |
| <img src="https://e0.365dm.com/22/12/768x432/skysports-haaland-manchester-city_5999188.jpg" alt="Haaland Interview" class="w-full h-48 object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
| <div class="absolute bottom-0 left-0 p-4 text-white"> |
| <span class="bg-blue-600 text-xs px-2 py-1 rounded">球员日记</span> |
| <h3 class="text-lg font-bold mt-1">哈兰德</h3> |
| </div> |
| <div class="absolute top-0 right-0 m-3 bg-black bg-opacity-50 text-white p-2 rounded-full"> |
| <i class="fas fa-play"></i> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-semibold mb-2">哈兰德:英超比我想象的更具挑战性</h4> |
| <p class="text-sm text-gray-600 mb-3">曼城前锋哈兰德分享了他适应英超联赛的经历,以及他与瓜迪奥拉的合作关系和对未来的期望。</p> |
| <div class="flex justify-between items-center text-sm text-gray-500"> |
| <span>2023-04-08</span> |
| <span>12分钟</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="relative"> |
| <img src="https://imgresizer.eurosport.com/unsafe/1200x0/filters:format(jpeg)/origin-imgresizer.eurosport.com/2023/02/16/3574563-72784348-2560-1440.jpg" alt="Benzema Interview" class="w-full h-48 object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
| <div class="absolute bottom-0 left-0 p-4 text-white"> |
| <span class="bg-blue-600 text-xs px-2 py-1 rounded">深度对话</span> |
| <h3 class="text-lg font-bold mt-1">本泽马</h3> |
| </div> |
| <div class="absolute top-0 right-0 m-3 bg-black bg-opacity-50 text-white p-2 rounded-full"> |
| <i class="fas fa-play"></i> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h4 class="font-semibold mb-2">本泽马谈金球奖与皇马生涯</h4> |
| <p class="text-sm text-gray-600 mb-3">皇家马德里前锋本泽马回顾了他获得金球奖的历程,以及在伯纳乌的辉煌岁月和对未来的展望。</p> |
| <div class="flex justify-between items-center text-sm text-gray-500"> |
| <span>2023-04-05</span> |
| <span>18分钟</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 text-center"> |
| <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded transition"> |
| 查看更多访谈 <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </section> |
| |
| |
| <section id="ucl" class="mb-16"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">欧冠赛事精华</h2> |
| <a href="#" class="text-blue-600 hover:underline">查看全部 <i class="fas fa-arrow-right ml-1"></i></a> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="relative"> |
| <img src="https://imgresizer.eurosport.com/unsafe/1200x0/filters:format(jpeg)/origin-imgresizer.eurosport.com/2023/04/11/3682505-74227048-2560-1440.jpg" alt="UCL Highlights" class="w-full h-64 md:h-80 object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
| <div class="absolute bottom-0 left-0 p-4 text-white"> |
| <span class="bg-blue-600 text-xs px-2 py-1 rounded">最新集锦</span> |
| <h3 class="text-xl font-bold mt-1">欧冠1/4决赛首回合精华</h3> |
| </div> |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-4 rounded-full play-icon"> |
| <i class="fas fa-play text-2xl"></i> |
| </div> |
| </div> |
| <div class="p-4"> |
| <p class="text-sm text-gray-600 mb-3">观看欧冠1/4决赛首回合的全部精彩瞬间,包括皇家马德里vs切尔西、曼城vs拜仁慕尼黑等焦点战役的进球和关键时刻。</p> |
| <div class="flex justify-between items-center text-sm text-gray-500"> |
| <span>2023-04-12</span> |
| <span>8分钟</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-4"> |
| |
| <div class="flex bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="relative w-1/3"> |
| <img src="https://imgresizer.eurosport.com/unsafe/1200x0/filters:format(jpeg)/origin-imgresizer.eurosport.com/2023/04/11/3682505-74227048-2560-1440.jpg" alt="UCL Highlights" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-30"></div> |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full play-icon"> |
| <i class="fas fa-play"></i> |
| </div> |
| </div> |
| <div class="w-2/3 p-4"> |
| <h4 class="font-semibold mb-1">皇马3-1切尔西 全场集锦</h4> |
| <p class="text-xs text-gray-600 mb-2 line-clamp-2">本泽马梅开二度,维尼修斯精彩助攻,皇马在伯纳乌取得关键胜利。</p> |
| <div class="flex justify-between items-center text-xs text-gray-500"> |
| <span>2023-04-12</span> |
| <span>4分钟</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="relative w-1/3"> |
| <img src="https://imgresizer.eurosport.com/unsafe/1200x0/filters:format(jpeg)/origin-imgresizer.eurosport.com/2023/04/11/3682505-74227048-2560-1440.jpg" alt="UCL Highlights" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-30"></div> |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full play-icon"> |
| <i class="fas fa-play"></i> |
| </div> |
| </div> |
| <div class="w-2/3 p-4"> |
| <h4 class="font-semibold mb-1">曼城2-0拜仁 全场集锦</h4> |
| <p class="text-xs text-gray-600 mb-2 line-clamp-2">哈兰德破门,罗德里世界波,曼城在主场占得先机。</p> |
| <div class="flex justify-between items-center text-xs text-gray-500"> |
| <span>2023-04-11</span> |
| <span>5分钟</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="relative w-1/3"> |
| <img src="https://imgresizer.eurosport.com/unsafe/1200x0/filters:format(jpeg)/origin-imgresizer.eurosport.com/2023/04/11/3682505-74227048-2560-1440.jpg" alt="UCL Highlights" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-30"></div> |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full play-icon"> |
| <i class="fas fa-play"></i> |
| </div> |
| </div> |
| <div class="w-2/3 p-4"> |
| <h4 class="font-semibold mb-1">欧冠1/4决赛最佳进球</h4> |
| <p class="text-xs text-gray-600 mb-2 line-clamp-2">盘点本轮欧冠最精彩的五个进球,包括罗德里和本泽马的精彩破门。</p> |
| <div class="flex justify-between items-center text-xs text-gray-500"> |
| <span>2023-04-13</span> |
| <span>3分钟</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex bg-white rounded-lg shadow-md overflow-hidden card-hover"> |
| <div class="relative w-1/3"> |
| <img src="https://imgresizer.eurosport.com/unsafe/1200x0/filters:format(jpeg)/origin-imgresizer.eurosport.com/2023/04/11/3682505-74227048-2560-1440.jpg" alt="UCL Highlights" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-30"></div> |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full play-icon"> |
| <i class="fas fa-play"></i> |
| </div> |
| </div> |
| <div class="w-2/3 p-4"> |
| <h4 class="font-semibold mb-1">欧冠1/4决赛战术分析</h4> |
| <p class="text-xs text-gray-600 mb-2 line-clamp-2">专家解析四场1/4决赛的战术对决,瓜迪奥拉与图赫尔的博弈。</p> |
| <div class="flex justify-between items-center text-xs text-gray-500"> |
| <span>2023-04-12</span> |
| <span>7分钟</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> |
| <div> |
| <h3 class="text-lg font-bold mb-4">关于我们</h3> |
| <p class="text-gray-400 mb-4">提供全球顶级足球联赛的最新资讯、积分榜、赛程和独家内容。</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">快速链接</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">首页</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">积分榜</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">赛程</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">比分直播</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">球星访谈</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">联赛</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">西甲联赛</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">英超联赛</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">德甲联赛</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">意甲联赛</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">欧冠联赛</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">订阅新闻</h3> |
| <p class="text-gray-400 mb-4">订阅我们的新闻通讯,获取最新足球资讯。</p> |
| <form class="flex"> |
| <input type="email" placeholder="您的邮箱" class="px-4 py-2 w-full rounded-l focus:outline-none text-gray-900"> |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 pt-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 世界足球联赛. 保留所有权利.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition">隐私政策</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">使用条款</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Cookie政策</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.getElementById('refresh-btn').addEventListener('click', function() { |
| const timeElement = document.getElementById('update-time'); |
| timeElement.textContent = '更新中...'; |
| |
| |
| setTimeout(() => { |
| const now = new Date(); |
| timeElement.textContent = now.toLocaleTimeString(); |
| }, 1000); |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| const backToTopButton = document.getElementById('back-to-top'); |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('opacity-0', 'invisible'); |
| backToTopButton.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopButton.classList.remove('opacity-100', 'visible'); |
| backToTopButton.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| |
| document.getElementById('back-to-top').addEventListener('click', function() { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| const leagueTabs = document.querySelectorAll('#standings button:not(:first-child)'); |
| leagueTabs.forEach(tab => { |
| tab.addEventListener('click', function() { |
| |
| alert('切换到 ' + this.textContent + ' 积分榜'); |
| }); |
| }); |
| |
| |
| const videoThumbnails = document.querySelectorAll('.video-thumbnail, .play-icon'); |
| videoThumbnails.forEach(thumbnail => { |
| thumbnail.addEventListener('click', function(e) { |
| e.preventDefault(); |
| alert('视频播放功能将在完整版中实现'); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fenglui/score" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |