Hugging Face's logo

Spaces:
fenglui
/
score
Running

App Files Community
fenglui commited on
Commit
6499389
·
verified ·
1 Parent(s): 20521c0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1041 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Score
3
- emoji: 🦀
4
- colorFrom: blue
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: score
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1041 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>世界足球联赛 | 西甲 英超 德甲 意甲 积分榜 比分直播</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* 自定义动画 */
11
+ @keyframes pulse {
12
+ 0%, 100% { opacity: 1; }
13
+ 50% { opacity: 0.5; }
14
+ }
15
+
16
+ .animate-pulse {
17
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
18
+ }
19
+
20
+ /* 直播指示器 */
21
+ .live-indicator {
22
+ position: relative;
23
+ padding-left: 1.5rem;
24
+ }
25
+
26
+ .live-indicator::before {
27
+ content: "";
28
+ position: absolute;
29
+ left: 0;
30
+ top: 50%;
31
+ transform: translateY(-50%);
32
+ width: 12px;
33
+ height: 12px;
34
+ background-color: #ef4444;
35
+ border-radius: 50%;
36
+ animation: pulse 1.5s infinite;
37
+ }
38
+
39
+ /* 联赛标志悬停效果 */
40
+ .league-logo:hover {
41
+ transform: scale(1.05);
42
+ transition: transform 0.3s ease;
43
+ }
44
+
45
+ /* 卡片悬停效果 */
46
+ .card-hover:hover {
47
+ transform: translateY(-5px);
48
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
49
+ transition: all 0.3s ease;
50
+ }
51
+
52
+ /* 自定义滚动条 */
53
+ .custom-scrollbar::-webkit-scrollbar {
54
+ width: 6px;
55
+ height: 6px;
56
+ }
57
+
58
+ .custom-scrollbar::-webkit-scrollbar-track {
59
+ background: #f1f1f1;
60
+ border-radius: 10px;
61
+ }
62
+
63
+ .custom-scrollbar::-webkit-scrollbar-thumb {
64
+ background: #888;
65
+ border-radius: 10px;
66
+ }
67
+
68
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
69
+ background: #555;
70
+ }
71
+
72
+ /* 视频缩略图悬停效果 */
73
+ .video-thumbnail:hover .play-icon {
74
+ opacity: 1;
75
+ transform: scale(1.1);
76
+ }
77
+
78
+ .play-icon {
79
+ opacity: 0.8;
80
+ transition: all 0.3s ease;
81
+ }
82
+ </style>
83
+ </head>
84
+ <body class="bg-gray-50 font-sans">
85
+ <!-- 导航栏 -->
86
+ <nav class="bg-green-800 text-white shadow-lg sticky top-0 z-50">
87
+ <div class="container mx-auto px-4 py-3">
88
+ <div class="flex justify-between items-center">
89
+ <div class="flex items-center space-x-2">
90
+ <i class="fas fa-futbol text-2xl"></i>
91
+ <a href="#" class="text-xl font-bold">世界足球联赛</a>
92
+ </div>
93
+
94
+ <div class="hidden md:flex space-x-6">
95
+ <a href="#standings" class="hover:text-green-200 transition">积分榜</a>
96
+ <a href="#fixtures" class="hover:text-green-200 transition">赛程</a>
97
+ <a href="#live" class="hover:text-green-200 transition">比分直播</a>
98
+ <a href="#interviews" class="hover:text-green-200 transition">球星访谈</a>
99
+ <a href="#ucl" class="hover:text-green-200 transition">欧冠精华</a>
100
+ </div>
101
+
102
+ <div class="flex items-center space-x-4">
103
+ <button class="md:hidden text-xl" id="mobile-menu-button">
104
+ <i class="fas fa-bars"></i>
105
+ </button>
106
+ <div class="hidden md:block">
107
+ <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded transition">
108
+ <i class="fas fa-user mr-2"></i>登录
109
+ </button>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- 移动菜单 -->
115
+ <div class="md:hidden hidden mt-4 pb-2" id="mobile-menu">
116
+ <a href="#standings" class="block py-2 hover:bg-green-700 px-2 rounded transition">积分榜</a>
117
+ <a href="#fixtures" class="block py-2 hover:bg-green-700 px-2 rounded transition">赛程</a>
118
+ <a href="#live" class="block py-2 hover:bg-green-700 px-2 rounded transition">比分直播</a>
119
+ <a href="#interviews" class="block py-2 hover:bg-green-700 px-2 rounded transition">球星访谈</a>
120
+ <a href="#ucl" class="block py-2 hover:bg-green-700 px-2 rounded transition">欧冠精华</a>
121
+ <button class="w-full bg-green-600 hover:bg-green-700 px-4 py-2 rounded transition mt-2">
122
+ <i class="fas fa-user mr-2"></i>登录
123
+ </button>
124
+ </div>
125
+ </div>
126
+ </nav>
127
+
128
+ <!-- 英雄区域 -->
129
+ <header class="bg-gradient-to-r from-green-700 to-green-900 text-white py-16">
130
+ <div class="container mx-auto px-4 text-center">
131
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">世界顶级足球联赛</h1>
132
+ <p class="text-xl md:text-2xl mb-8">实时积分榜、赛程预告、比分直播和独家内容</p>
133
+
134
+ <div class="flex flex-wrap justify-center gap-4 mb-8">
135
+ <div class="league-logo bg-white rounded-full p-3 shadow-lg">
136
+ <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">
137
+ </div>
138
+ <div class="league-logo bg-white rounded-full p-3 shadow-lg">
139
+ <img src="https://upload.wikimedia.org/wikipedia/zh/f/f2/Premier_League_Logo.svg" alt="Premier League" class="w-16 h-16">
140
+ </div>
141
+ <div class="league-logo bg-white rounded-full p-3 shadow-lg">
142
+ <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">
143
+ </div>
144
+ <div class="league-logo bg-white rounded-full p-3 shadow-lg">
145
+ <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">
146
+ </div>
147
+ <div class="league-logo bg-white rounded-full p-3 shadow-lg">
148
+ <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">
149
+ </div>
150
+ </div>
151
+
152
+ <div class="max-w-2xl mx-auto bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-6 shadow-lg">
153
+ <h3 class="text-xl font-semibold mb-4">今日焦点赛事</h3>
154
+ <div class="flex justify-between items-center">
155
+ <div class="text-center">
156
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Barcelona" class="w-16 h-16 mx-auto mb-2">
157
+ <p class="font-medium">巴塞罗那</p>
158
+ </div>
159
+ <div class="text-center">
160
+ <div class="text-2xl font-bold">VS</div>
161
+ <div class="text-sm mt-2">20:00 GMT+8</div>
162
+ </div>
163
+ <div class="text-center">
164
+ <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">
165
+ <p class="font-medium">皇家马德里</p>
166
+ </div>
167
+ </div>
168
+ <button class="mt-4 bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-full transition">
169
+ <i class="fas fa-play mr-2"></i>观看直播
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </header>
174
+
175
+ <!-- 主要内容区域 -->
176
+ <main class="container mx-auto px-4 py-8">
177
+ <!-- 积分榜部分 -->
178
+ <section id="standings" class="mb-16">
179
+ <div class="flex justify-between items-center mb-6">
180
+ <h2 class="text-2xl font-bold">联赛积分榜</h2>
181
+ <div class="flex space-x-2">
182
+ <button class="px-4 py-2 bg-green-700 text-white rounded-l-lg">全部</button>
183
+ <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 transition">西甲</button>
184
+ <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 transition">英超</button>
185
+ <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 transition">德甲</button>
186
+ <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 transition rounded-r-lg">意甲</button>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
191
+ <!-- 西甲积分榜 -->
192
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
193
+ <div class="bg-blue-900 text-white px-4 py-3 flex items-center">
194
+ <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">
195
+ <h3 class="font-bold">西甲积分榜</h3>
196
+ </div>
197
+ <div class="overflow-x-auto">
198
+ <table class="w-full">
199
+ <thead class="bg-gray-100">
200
+ <tr>
201
+ <th class="px-4 py-2 text-left">排名</th>
202
+ <th class="px-4 py-2 text-left">球队</th>
203
+ <th class="px-4 py-2">场次</th>
204
+ <th class="px-4 py-2">积分</th>
205
+ </tr>
206
+ </thead>
207
+ <tbody>
208
+ <tr class="border-b hover:bg-gray-50">
209
+ <td class="px-4 py-3 font-bold">1</td>
210
+ <td class="px-4 py-3 flex items-center">
211
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Barcelona" class="w-6 h-6 mr-2">
212
+ 巴塞罗那
213
+ </td>
214
+ <td class="px-4 py-3 text-center">28</td>
215
+ <td class="px-4 py-3 text-center font-bold">71</td>
216
+ </tr>
217
+ <tr class="border-b hover:bg-gray-50">
218
+ <td class="px-4 py-3 font-bold">2</td>
219
+ <td class="px-4 py-3 flex items-center">
220
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Real Madrid" class="w-6 h-6 mr-2">
221
+ 皇家马德里
222
+ </td>
223
+ <td class="px-4 py-3 text-center">28</td>
224
+ <td class="px-4 py-3 text-center font-bold">68</td>
225
+ </tr>
226
+ <tr class="border-b hover:bg-gray-50">
227
+ <td class="px-4 py-3 font-bold">3</td>
228
+ <td class="px-4 py-3 flex items-center">
229
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Atletico" class="w-6 h-6 mr-2">
230
+ 马德里竞技
231
+ </td>
232
+ <td class="px-4 py-3 text-center">28</td>
233
+ <td class="px-4 py-3 text-center font-bold">60</td>
234
+ </tr>
235
+ <tr class="border-b hover:bg-gray-50">
236
+ <td class="px-4 py-3 font-bold">4</td>
237
+ <td class="px-4 py-3 flex items-center">
238
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Real Sociedad" class="w-6 h-6 mr-2">
239
+ 皇家社会
240
+ </td>
241
+ <td class="px-4 py-3 text-center">28</td>
242
+ <td class="px-4 py-3 text-center font-bold">54</td>
243
+ </tr>
244
+ <tr class="border-b hover:bg-gray-50">
245
+ <td class="px-4 py-3 font-bold">5</td>
246
+ <td class="px-4 py-3 flex items-center">
247
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Betis" class="w-6 h-6 mr-2">
248
+ 皇家贝蒂斯
249
+ </td>
250
+ <td class="px-4 py-3 text-center">28</td>
251
+ <td class="px-4 py-3 text-center font-bold">48</td>
252
+ </tr>
253
+ </tbody>
254
+ </table>
255
+ </div>
256
+ <div class="px-4 py-3 bg-gray-50 text-center">
257
+ <a href="#" class="text-blue-600 hover:underline">查看完整积分榜 →</a>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- 英超积分榜 -->
262
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
263
+ <div class="bg-purple-900 text-white px-4 py-3 flex items-center">
264
+ <img src="https://upload.wikimedia.org/wikipedia/zh/f/f2/Premier_League_Logo.svg" alt="Premier League" class="w-8 h-8 mr-2">
265
+ <h3 class="font-bold">英超积分榜</h3>
266
+ </div>
267
+ <div class="overflow-x-auto">
268
+ <table class="w-full">
269
+ <thead class="bg-gray-100">
270
+ <tr>
271
+ <th class="px-4 py-2 text-left">排名</th>
272
+ <th class="px-4 py-2 text-left">球队</th>
273
+ <th class="px-4 py-2">场次</th>
274
+ <th class="px-4 py-2">积分</th>
275
+ </tr>
276
+ </thead>
277
+ <tbody>
278
+ <tr class="border-b hover:bg-gray-50">
279
+ <td class="px-4 py-3 font-bold">1</td>
280
+ <td class="px-4 py-3 flex items-center">
281
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Arsenal" class="w-6 h-6 mr-2">
282
+ 阿森纳
283
+ </td>
284
+ <td class="px-4 py-3 text-center">30</td>
285
+ <td class="px-4 py-3 text-center font-bold">72</td>
286
+ </tr>
287
+ <tr class="border-b hover:bg-gray-50">
288
+ <td class="px-4 py-3 font-bold">2</td>
289
+ <td class="px-4 py-3 flex items-center">
290
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Man City" class="w-6 h-6 mr-2">
291
+ 曼城
292
+ </td>
293
+ <td class="px-4 py-3 text-center">29</td>
294
+ <td class="px-4 py-3 text-center font-bold">70</td>
295
+ </tr>
296
+ <tr class="border-b hover:bg-gray-50">
297
+ <td class="px-4 py-3 font-bold">3</td>
298
+ <td class="px-4 py-3 flex items-center">
299
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Man Utd" class="w-6 h-6 mr-2">
300
+ 曼联
301
+ </td>
302
+ <td class="px-4 py-3 text-center">29</td>
303
+ <td class="px-4 py-3 text-center font-bold">59</td>
304
+ </tr>
305
+ <tr class="border-b hover:bg-gray-50">
306
+ <td class="px-4 py-3 font-bold">4</td>
307
+ <td class="px-4 py-3 flex items-center">
308
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Tottenham" class="w-6 h-6 mr-2">
309
+ 热刺
310
+ </td>
311
+ <td class="px-4 py-3 text-center">30</td>
312
+ <td class="px-4 py-3 text-center font-bold">53</td>
313
+ </tr>
314
+ <tr class="border-b hover:bg-gray-50">
315
+ <td class="px-4 py-3 font-bold">5</td>
316
+ <td class="px-4 py-3 flex items-center">
317
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Newcastle" class="w-6 h-6 mr-2">
318
+ 纽卡斯尔
319
+ </td>
320
+ <td class="px-4 py-3 text-center">29</td>
321
+ <td class="px-4 py-3 text-center font-bold">50</td>
322
+ </tr>
323
+ </tbody>
324
+ </table>
325
+ </div>
326
+ <div class="px-4 py-3 bg-gray-50 text-center">
327
+ <a href="#" class="text-blue-600 hover:underline">查看完整积分榜 →</a>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- 德甲积分榜 -->
332
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
333
+ <div class="bg-red-800 text-white px-4 py-3 flex items-center">
334
+ <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">
335
+ <h3 class="font-bold">德甲积分榜</h3>
336
+ </div>
337
+ <div class="overflow-x-auto">
338
+ <table class="w-full">
339
+ <thead class="bg-gray-100">
340
+ <tr>
341
+ <th class="px-4 py-2 text-left">排名</th>
342
+ <th class="px-4 py-2 text-left">球队</th>
343
+ <th class="px-4 py-2">场次</th>
344
+ <th class="px-4 py-2">积分</th>
345
+ </tr>
346
+ </thead>
347
+ <tbody>
348
+ <tr class="border-b hover:bg-gray-50">
349
+ <td class="px-4 py-3 font-bold">1</td>
350
+ <td class="px-4 py-3 flex items-center">
351
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Bayern" class="w-6 h-6 mr-2">
352
+ 拜仁慕尼黑
353
+ </td>
354
+ <td class="px-4 py-3 text-center">27</td>
355
+ <td class="px-4 py-3 text-center font-bold">61</td>
356
+ </tr>
357
+ <tr class="border-b hover:bg-gray-50">
358
+ <td class="px-4 py-3 font-bold">2</td>
359
+ <td class="px-4 py-3 flex items-center">
360
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Dortmund" class="w-6 h-6 mr-2">
361
+ 多特蒙德
362
+ </td>
363
+ <td class="px-4 py-3 text-center">27</td>
364
+ <td class="px-4 py-3 text-center font-bold">56</td>
365
+ </tr>
366
+ <tr class="border-b hover:bg-gray-50">
367
+ <td class="px-4 py-3 font-bold">3</td>
368
+ <td class="px-4 py-3 flex items-center">
369
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Union Berlin" class="w-6 h-6 mr-2">
370
+ 柏林联合
371
+ </td>
372
+ <td class="px-4 py-3 text-center">27</td>
373
+ <td class="px-4 py-3 text-center font-bold">54</td>
374
+ </tr>
375
+ <tr class="border-b hover:bg-gray-50">
376
+ <td class="px-4 py-3 font-bold">4</td>
377
+ <td class="px-4 py-3 flex items-center">
378
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Leipzig" class="w-6 h-6 mr-2">
379
+ 莱比锡
380
+ </td>
381
+ <td class="px-4 py-3 text-center">27</td>
382
+ <td class="px-4 py-3 text-center font-bold">50</td>
383
+ </tr>
384
+ <tr class="border-b hover:bg-gray-50">
385
+ <td class="px-4 py-3 font-bold">5</td>
386
+ <td class="px-4 py-3 flex items-center">
387
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Leverkusen" class="w-6 h-6 mr-2">
388
+ 勒沃库森
389
+ </td>
390
+ <td class="px-4 py-3 text-center">27</td>
391
+ <td class="px-4 py-3 text-center font-bold">48</td>
392
+ </tr>
393
+ </tbody>
394
+ </table>
395
+ </div>
396
+ <div class="px-4 py-3 bg-gray-50 text-center">
397
+ <a href="#" class="text-blue-600 hover:underline">查看完整积分榜 →</a>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- 意甲积分榜 -->
402
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
403
+ <div class="bg-green-700 text-white px-4 py-3 flex items-center">
404
+ <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">
405
+ <h3 class="font-bold">意甲积分榜</h3>
406
+ </div>
407
+ <div class="overflow-x-auto">
408
+ <table class="w-full">
409
+ <thead class="bg-gray-100">
410
+ <tr>
411
+ <th class="px-4 py-2 text-left">排名</th>
412
+ <th class="px-4 py-2 text-left">球队</th>
413
+ <th class="px-4 py-2">场次</th>
414
+ <th class="px-4 py-2">积分</th>
415
+ </tr>
416
+ </thead>
417
+ <tbody>
418
+ <tr class="border-b hover:bg-gray-50">
419
+ <td class="px-4 py-3 font-bold">1</td>
420
+ <td class="px-4 py-3 flex items-center">
421
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Napoli" class="w-6 h-6 mr-2">
422
+ 那不勒斯
423
+ </td>
424
+ <td class="px-4 py-3 text-center">29</td>
425
+ <td class="px-4 py-3 text-center font-bold">74</td>
426
+ </tr>
427
+ <tr class="border-b hover:bg-gray-50">
428
+ <td class="px-4 py-3 font-bold">2</td>
429
+ <td class="px-4 py-3 flex items-center">
430
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Lazio" class="w-6 h-6 mr-2">
431
+ 拉齐奥
432
+ </td>
433
+ <td class="px-4 py-3 text-center">29</td>
434
+ <td class="px-4 py-3 text-center font-bold">61</td>
435
+ </tr>
436
+ <tr class="border-b hover:bg-gray-50">
437
+ <td class="px-4 py-3 font-bold">3</td>
438
+ <td class="px-4 py-3 flex items-center">
439
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Inter" class="w-6 h-6 mr-2">
440
+ 国际米兰
441
+ </td>
442
+ <td class="px-4 py-3 text-center">29</td>
443
+ <td class="px-4 py-3 text-center font-bold">57</td>
444
+ </tr>
445
+ <tr class="border-b hover:bg-gray-50">
446
+ <td class="px-4 py-3 font-bold">4</td>
447
+ <td class="px-4 py-3 flex items-center">
448
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Milan" class="w-6 h-6 mr-2">
449
+ AC米兰
450
+ </td>
451
+ <td class="px-4 py-3 text-center">29</td>
452
+ <td class="px-4 py-3 text-center font-bold">56</td>
453
+ </tr>
454
+ <tr class="border-b hover:bg-gray-50">
455
+ <td class="px-4 py-3 font-bold">5</td>
456
+ <td class="px-4 py-3 flex items-center">
457
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Roma" class="w-6 h-6 mr-2">
458
+ 罗马
459
+ </td>
460
+ <td class="px-4 py-3 text-center">29</td>
461
+ <td class="px-4 py-3 text-center font-bold">53</td>
462
+ </tr>
463
+ </tbody>
464
+ </table>
465
+ </div>
466
+ <div class="px-4 py-3 bg-gray-50 text-center">
467
+ <a href="#" class="text-blue-600 hover:underline">查看完整积分榜 →</a>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </section>
472
+
473
+ <!-- 赛程预告部分 -->
474
+ <section id="fixtures" class="mb-16">
475
+ <h2 class="text-2xl font-bold mb-6">近期赛程</h2>
476
+
477
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
478
+ <div class="border-b">
479
+ <div class="flex overflow-x-auto custom-scrollbar">
480
+ <button class="px-6 py-3 font-medium border-b-2 border-blue-600 text-blue-600">全部</button>
481
+ <button class="px-6 py-3 font-medium hover:text-blue-600">西甲</button>
482
+ <button class="px-6 py-3 font-medium hover:text-blue-600">英超</button>
483
+ <button class="px-6 py-3 font-medium hover:text-blue-600">德甲</button>
484
+ <button class="px-6 py-3 font-medium hover:text-blue-600">意甲</button>
485
+ <button class="px-6 py-3 font-medium hover:text-blue-600">欧冠</button>
486
+ </div>
487
+ </div>
488
+
489
+ <div class="divide-y">
490
+ <!-- 比赛1 -->
491
+ <div class="p-4 hover:bg-gray-50 transition">
492
+ <div class="flex justify-between items-center mb-2">
493
+ <div class="text-sm text-gray-500">4月15日 周六 20:00</div>
494
+ <div class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">西甲 第30轮</div>
495
+ </div>
496
+ <div class="flex justify-between items-center">
497
+ <div class="flex items-center w-1/3 justify-end">
498
+ <span class="font-medium mr-2">巴塞罗那</span>
499
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Barcelona" class="w-8 h-8">
500
+ </div>
501
+ <div class="px-4 text-center">
502
+ <div class="text-xl font-bold">VS</div>
503
+ <button class="mt-1 text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700 transition">设置提醒</button>
504
+ </div>
505
+ <div class="flex items-center w-1/3">
506
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Real Madrid" class="w-8 h-8 mr-2">
507
+ <span class="font-medium">皇家马德里</span>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- 比赛2 -->
513
+ <div class="p-4 hover:bg-gray-50 transition">
514
+ <div class="flex justify-between items-center mb-2">
515
+ <div class="text-sm text-gray-500">4月16日 周日 23:30</div>
516
+ <div class="text-sm bg-purple-100 text-purple-800 px-2 py-1 rounded">英超 第31轮</div>
517
+ </div>
518
+ <div class="flex justify-between items-center">
519
+ <div class="flex items-center w-1/3 justify-end">
520
+ <span class="font-medium mr-2">阿森纳</span>
521
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Arsenal" class="w-8 h-8">
522
+ </div>
523
+ <div class="px-4 text-center">
524
+ <div class="text-xl font-bold">VS</div>
525
+ <button class="mt-1 text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700 transition">设置提醒</button>
526
+ </div>
527
+ <div class="flex items-center w-1/3">
528
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Man City" class="w-8 h-8 mr-2">
529
+ <span class="font-medium">曼城</span>
530
+ </div>
531
+ </div>
532
+ </div>
533
+
534
+ <!-- 比赛3 -->
535
+ <div class="p-4 hover:bg-gray-50 transition">
536
+ <div class="flex justify-between items-center mb-2">
537
+ <div class="text-sm text-gray-500">4月17日 周一 02:45</div>
538
+ <div class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded">德甲 第28轮</div>
539
+ </div>
540
+ <div class="flex justify-between items-center">
541
+ <div class="flex items-center w-1/3 justify-end">
542
+ <span class="font-medium mr-2">拜仁慕尼黑</span>
543
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Bayern" class="w-8 h-8">
544
+ </div>
545
+ <div class="px-4 text-center">
546
+ <div class="text-xl font-bold">VS</div>
547
+ <button class="mt-1 text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700 transition">设置提醒</button>
548
+ </div>
549
+ <div class="flex items-center w-1/3">
550
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Dortmund" class="w-8 h-8 mr-2">
551
+ <span class="font-medium">多特蒙德</span>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <!-- 比赛4 -->
557
+ <div class="p-4 hover:bg-gray-50 transition">
558
+ <div class="flex justify-between items-center mb-2">
559
+ <div class="text-sm text-gray-500">4月18日 周二 03:00</div>
560
+ <div class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">欧冠 1/4决赛</div>
561
+ </div>
562
+ <div class="flex justify-between items-center">
563
+ <div class="flex items-center w-1/3 justify-end">
564
+ <span class="font-medium mr-2">皇家马德里</span>
565
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Real Madrid" class="w-8 h-8">
566
+ </div>
567
+ <div class="px-4 text-center">
568
+ <div class="text-xl font-bold">VS</div>
569
+ <button class="mt-1 text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700 transition">设置提醒</button>
570
+ </div>
571
+ <div class="flex items-center w-1/3">
572
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Chelsea" class="w-8 h-8 mr-2">
573
+ <span class="font-medium">切尔西</span>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <div class="px-4 py-3 bg-gray-50 text-center">
580
+ <a href="#" class="text-blue-600 hover:underline">查看更多赛程 →</a>
581
+ </div>
582
+ </div>
583
+ </section>
584
+
585
+ <!-- 比分直播部分 -->
586
+ <section id="live" class="mb-16">
587
+ <div class="flex justify-between items-center mb-6">
588
+ <h2 class="text-2xl font-bold">比分直播</h2>
589
+ <div class="flex items-center space-x-2">
590
+ <span class="live-indicator text-red-600 font-medium">LIVE</span>
591
+ <span class="text-sm text-gray-500">最后更新: <span id="update-time">刚刚</span></span>
592
+ <button class="text-blue-600 hover:text-blue-800" id="refresh-btn">
593
+ <i class="fas fa-sync-alt"></i>
594
+ </button>
595
+ </div>
596
+ </div>
597
+
598
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
599
+ <div class="border-b">
600
+ <div class="flex overflow-x-auto custom-scrollbar">
601
+ <button class="px-6 py-3 font-medium border-b-2 border-blue-600 text-blue-600">进行中</button>
602
+ <button class="px-6 py-3 font-medium hover:text-blue-600">今日</button>
603
+ <button class="px-6 py-3 font-medium hover:text-blue-600">西甲</button>
604
+ <button class="px-6 py-3 font-medium hover:text-blue-600">英超</button>
605
+ <button class="px-6 py-3 font-medium hover:text-blue-600">德甲</button>
606
+ <button class="px-6 py-3 font-medium hover:text-blue-600">意甲</button>
607
+ </div>
608
+ </div>
609
+
610
+ <div class="divide-y">
611
+ <!-- 比赛1 -->
612
+ <div class="p-4 hover:bg-gray-50 transition">
613
+ <div class="flex justify-between items-center mb-2">
614
+ <div class="text-sm text-gray-500">西甲 第29轮</div>
615
+ <div class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded flex items-center">
616
+ <span class="w-2 h-2 bg-red-600 rounded-full mr-1 animate-pulse"></span>
617
+ 比赛中 63'
618
+ </div>
619
+ </div>
620
+ <div class="flex justify-between items-center">
621
+ <div class="flex items-center w-1/3 justify-end">
622
+ <span class="font-medium mr-2">马德里竞技</span>
623
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Atletico" class="w-8 h-8">
624
+ </div>
625
+ <div class="px-4 text-center">
626
+ <div class="text-xl font-bold">2 - 1</div>
627
+ <a href="#" class="mt-1 text-xs bg-red-600 text-white px-2 py-1 rounded hover:bg-red-700 transition inline-block">
628
+ <i class="fas fa-play mr-1"></i>观看直播
629
+ </a>
630
+ </div>
631
+ <div class="flex items-center w-1/3">
632
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Betis" class="w-8 h-8 mr-2">
633
+ <span class="font-medium">皇家贝蒂斯</span>
634
+ </div>
635
+ </div>
636
+ </div>
637
+
638
+ <!-- 比赛2 -->
639
+ <div class="p-4 hover:bg-gray-50 transition">
640
+ <div class="flex justify-between items-center mb-2">
641
+ <div class="text-sm text-gray-500">英超 第30轮</div>
642
+ <div class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded flex items-center">
643
+ <span class="w-2 h-2 bg-red-600 rounded-full mr-1 animate-pulse"></span>
644
+ 比赛中 78'
645
+ </div>
646
+ </div>
647
+ <div class="flex justify-between items-center">
648
+ <div class="flex items-center w-1/3 justify-end">
649
+ <span class="font-medium mr-2">利物浦</span>
650
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Liverpool" class="w-8 h-8">
651
+ </div>
652
+ <div class="px-4 text-center">
653
+ <div class="text-xl font-bold">1 - 1</div>
654
+ <a href="#" class="mt-1 text-xs bg-red-600 text-white px-2 py-1 rounded hover:bg-red-700 transition inline-block">
655
+ <i class="fas fa-play mr-1"></i>观看直播
656
+ </a>
657
+ </div>
658
+ <div class="flex items-center w-1/3">
659
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Arsenal" class="w-8 h-8 mr-2">
660
+ <span class="font-medium">阿森纳</span>
661
+ </div>
662
+ </div>
663
+ </div>
664
+
665
+ <!-- 比赛3 -->
666
+ <div class="p-4 hover:bg-gray-50 transition">
667
+ <div class="flex justify-between items-center mb-2">
668
+ <div class="text-sm text-gray-500">德甲 第27轮</div>
669
+ <div class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded flex items-center">
670
+ <span class="w-2 h-2 bg-red-600 rounded-full mr-1 animate-pulse"></span>
671
+ 比赛中 52'
672
+ </div>
673
+ </div>
674
+ <div class="flex justify-between items-center">
675
+ <div class="flex items-center w-1/3 justify-end">
676
+ <span class="font-medium mr-2">多特蒙德</span>
677
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Dortmund" class="w-8 h-8">
678
+ </div>
679
+ <div class="px-4 text-center">
680
+ <div class="text-xl font-bold">3 - 0</div>
681
+ <a href="#" class="mt-1 text-xs bg-red-600 text-white px-2 py-1 rounded hover:bg-red-700 transition inline-block">
682
+ <i class="fas fa-play mr-1"></i>观看直播
683
+ </a>
684
+ </div>
685
+ <div class="flex items-center w-1/3">
686
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Leverkusen" class="w-8 h-8 mr-2">
687
+ <span class="font-medium">勒沃库森</span>
688
+ </div>
689
+ </div>
690
+ </div>
691
+
692
+ <!-- 比赛4 -->
693
+ <div class="p-4 hover:bg-gray-50 transition">
694
+ <div class="flex justify-between items-center mb-2">
695
+ <div class="text-sm text-gray-500">意甲 第29轮</div>
696
+ <div class="text-sm text-gray-500">比赛结束</div>
697
+ </div>
698
+ <div class="flex justify-between items-center">
699
+ <div class="flex items-center w-1/3 justify-end">
700
+ <span class="font-medium mr-2">国际米兰</span>
701
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Inter" class="w-8 h-8">
702
+ </div>
703
+ <div class="px-4 text-center">
704
+ <div class="text-xl font-bold">0 - 1</div>
705
+ <a href="#" class="mt-1 text-xs bg-gray-600 text-white px-2 py-1 rounded hover:bg-gray-700 transition inline-block">
706
+ <i class="fas fa-clipboard mr-1"></i>比赛报告
707
+ </a>
708
+ </div>
709
+ <div class="flex items-center w-1/3">
710
+ <img src="https://ssl.gstatic.com/onebox/media/sports/logos/0iShHhASp5q1SL4JhtwJiw_96x96.png" alt="Juventus" class="w-8 h-8 mr-2">
711
+ <span class="font-medium">尤文图斯</span>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </div>
716
+
717
+ <div class="px-4 py-3 bg-gray-50 text-center">
718
+ <a href="#" class="text-blue-600 hover:underline">查看更多比分 →</a>
719
+ </div>
720
+ </div>
721
+ </section>
722
+
723
+ <!-- 球星访谈部分 -->
724
+ <section id="interviews" class="mb-16">
725
+ <h2 class="text-2xl font-bold mb-6">球星访谈</h2>
726
+
727
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
728
+ <!-- 访谈1 -->
729
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
730
+ <div class="relative">
731
+ <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">
732
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
733
+ <div class="absolute bottom-0 left-0 p-4 text-white">
734
+ <span class="bg-blue-600 text-xs px-2 py-1 rounded">独家专访</span>
735
+ <h3 class="text-lg font-bold mt-1">梅西</h3>
736
+ </div>
737
+ <div class="absolute top-0 right-0 m-3 bg-black bg-opacity-50 text-white p-2 rounded-full">
738
+ <i class="fas fa-play"></i>
739
+ </div>
740
+ </div>
741
+ <div class="p-4">
742
+ <h4 class="font-semibold mb-2">梅西谈世界杯夺冠后的感受</h4>
743
+ <p class="text-sm text-gray-600 mb-3">阿根廷球星梅西在接受我们独家专访时，分享了世界杯夺冠后的心路历程以及他在巴黎圣日耳曼的未来计划。</p>
744
+ <div class="flex justify-between items-center text-sm text-gray-500">
745
+ <span>2023-04-10</span>
746
+ <span>15分钟</span>
747
+ </div>
748
+ </div>
749
+ </div>
750
+
751
+ <!-- 访谈2 -->
752
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
753
+ <div class="relative">
754
+ <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">
755
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
756
+ <div class="absolute bottom-0 left-0 p-4 text-white">
757
+ <span class="bg-blue-600 text-xs px-2 py-1 rounded">球员日记</span>
758
+ <h3 class="text-lg font-bold mt-1">哈兰德</h3>
759
+ </div>
760
+ <div class="absolute top-0 right-0 m-3 bg-black bg-opacity-50 text-white p-2 rounded-full">
761
+ <i class="fas fa-play"></i>
762
+ </div>
763
+ </div>
764
+ <div class="p-4">
765
+ <h4 class="font-semibold mb-2">哈兰德：英超比我想象的更具挑战性</h4>
766
+ <p class="text-sm text-gray-600 mb-3">曼城前锋哈兰德分享了他适应英超联赛的经历，以及他与瓜迪奥拉的合作关系和对未来的期望。</p>
767
+ <div class="flex justify-between items-center text-sm text-gray-500">
768
+ <span>2023-04-08</span>
769
+ <span>12分钟</span>
770
+ </div>
771
+ </div>
772
+ </div>
773
+
774
+ <!-- 访谈3 -->
775
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
776
+ <div class="relative">
777
+ <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">
778
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
779
+ <div class="absolute bottom-0 left-0 p-4 text-white">
780
+ <span class="bg-blue-600 text-xs px-2 py-1 rounded">深度对话</span>
781
+ <h3 class="text-lg font-bold mt-1">本泽马</h3>
782
+ </div>
783
+ <div class="absolute top-0 right-0 m-3 bg-black bg-opacity-50 text-white p-2 rounded-full">
784
+ <i class="fas fa-play"></i>
785
+ </div>
786
+ </div>
787
+ <div class="p-4">
788
+ <h4 class="font-semibold mb-2">本泽马谈金球奖与皇马生涯</h4>
789
+ <p class="text-sm text-gray-600 mb-3">皇家马德里前锋本泽马回顾了他获得金球奖的历程，以及在伯纳乌的辉煌岁月和对未来的展望。</p>
790
+ <div class="flex justify-between items-center text-sm text-gray-500">
791
+ <span>2023-04-05</span>
792
+ <span>18分钟</span>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+
798
+ <div class="mt-8 text-center">
799
+ <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded transition">
800
+ 查看更多访谈 <i class="fas fa-arrow-right ml-2"></i>
801
+ </a>
802
+ </div>
803
+ </section>
804
+
805
+ <!-- 欧冠精华部分 -->
806
+ <section id="ucl" class="mb-16">
807
+ <div class="flex justify-between items-center mb-6">
808
+ <h2 class="text-2xl font-bold">欧冠赛事精华</h2>
809
+ <a href="#" class="text-blue-600 hover:underline">查看全部 <i class="fas fa-arrow-right ml-1"></i></a>
810
+ </div>
811
+
812
+ <div class="grid md:grid-cols-2 gap-6">
813
+ <!-- 主视频 -->
814
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
815
+ <div class="relative">
816
+ <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">
817
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
818
+ <div class="absolute bottom-0 left-0 p-4 text-white">
819
+ <span class="bg-blue-600 text-xs px-2 py-1 rounded">最新集锦</span>
820
+ <h3 class="text-xl font-bold mt-1">欧冠1/4决赛首回合精华</h3>
821
+ </div>
822
+ <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">
823
+ <i class="fas fa-play text-2xl"></i>
824
+ </div>
825
+ </div>
826
+ <div class="p-4">
827
+ <p class="text-sm text-gray-600 mb-3">观看欧冠1/4决赛首回合的全部精彩瞬间，包括皇家马德里vs切尔西、曼城vs拜仁慕尼黑等焦点战役的进球和关键时刻。</p>
828
+ <div class="flex justify-between items-center text-sm text-gray-500">
829
+ <span>2023-04-12</span>
830
+ <span>8分钟</span>
831
+ </div>
832
+ </div>
833
+ </div>
834
+
835
+ <!-- 副视频列表 -->
836
+ <div class="space-y-4">
837
+ <!-- 视频1 -->
838
+ <div class="flex bg-white rounded-lg shadow-md overflow-hidden card-hover">
839
+ <div class="relative w-1/3">
840
+ <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">
841
+ <div class="absolute inset-0 bg-black bg-opacity-30"></div>
842
+ <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">
843
+ <i class="fas fa-play"></i>
844
+ </div>
845
+ </div>
846
+ <div class="w-2/3 p-4">
847
+ <h4 class="font-semibold mb-1">皇马3-1切尔西 全场集锦</h4>
848
+ <p class="text-xs text-gray-600 mb-2 line-clamp-2">本泽马梅开二度，维尼修斯精彩助攻，皇马在伯纳乌取得关键胜利。</p>
849
+ <div class="flex justify-between items-center text-xs text-gray-500">
850
+ <span>2023-04-12</span>
851
+ <span>4分钟</span>
852
+ </div>
853
+ </div>
854
+ </div>
855
+
856
+ <!-- 视频2 -->
857
+ <div class="flex bg-white rounded-lg shadow-md overflow-hidden card-hover">
858
+ <div class="relative w-1/3">
859
+ <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">
860
+ <div class="absolute inset-0 bg-black bg-opacity-30"></div>
861
+ <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">
862
+ <i class="fas fa-play"></i>
863
+ </div>
864
+ </div>
865
+ <div class="w-2/3 p-4">
866
+ <h4 class="font-semibold mb-1">曼城2-0拜仁 全场集锦</h4>
867
+ <p class="text-xs text-gray-600 mb-2 line-clamp-2">哈兰德破门，罗德里世界波，曼城在主场占得先机。</p>
868
+ <div class="flex justify-between items-center text-xs text-gray-500">
869
+ <span>2023-04-11</span>
870
+ <span>5分钟</span>
871
+ </div>
872
+ </div>
873
+ </div>
874
+
875
+ <!-- 视频3 -->
876
+ <div class="flex bg-white rounded-lg shadow-md overflow-hidden card-hover">
877
+ <div class="relative w-1/3">
878
+ <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">
879
+ <div class="absolute inset-0 bg-black bg-opacity-30"></div>
880
+ <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">
881
+ <i class="fas fa-play"></i>
882
+ </div>
883
+ </div>
884
+ <div class="w-2/3 p-4">
885
+ <h4 class="font-semibold mb-1">欧冠1/4决赛最佳进球</h4>
886
+ <p class="text-xs text-gray-600 mb-2 line-clamp-2">盘点本轮欧冠最精彩的五个进球，包括罗德里和本泽马的精彩破门。</p>
887
+ <div class="flex justify-between items-center text-xs text-gray-500">
888
+ <span>2023-04-13</span>
889
+ <span>3分钟</span>
890
+ </div>
891
+ </div>
892
+ </div>
893
+
894
+ <!-- 视频4 -->
895
+ <div class="flex bg-white rounded-lg shadow-md overflow-hidden card-hover">
896
+ <div class="relative w-1/3">
897
+ <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">
898
+ <div class="absolute inset-0 bg-black bg-opacity-30"></div>
899
+ <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">
900
+ <i class="fas fa-play"></i>
901
+ </div>
902
+ </div>
903
+ <div class="w-2/3 p-4">
904
+ <h4 class="font-semibold mb-1">欧冠1/4决赛战术分析</h4>
905
+ <p class="text-xs text-gray-600 mb-2 line-clamp-2">专家解析四场1/4决赛的战术对决，瓜迪奥拉与图赫尔的博弈。</p>
906
+ <div class="flex justify-between items-center text-xs text-gray-500">
907
+ <span>2023-04-12</span>
908
+ <span>7分钟</span>
909
+ </div>
910
+ </div>
911
+ </div>
912
+ </div>
913
+ </div>
914
+ </section>
915
+ </main>
916
+
917
+ <!-- 页脚 -->
918
+ <footer class="bg-gray-900 text-white py-12">
919
+ <div class="container mx-auto px-4">
920
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
921
+ <div>
922
+ <h3 class="text-lg font-bold mb-4">关于我们</h3>
923
+ <p class="text-gray-400 mb-4">提供全球顶级足球联赛的最新资讯、积分榜、赛程和独家内容。</p>
924
+ <div class="flex space-x-4">
925
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
926
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
927
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
928
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
929
+ </div>
930
+ </div>
931
+
932
+ <div>
933
+ <h3 class="text-lg font-bold mb-4">快速链接</h3>
934
+ <ul class="space-y-2">
935
+ <li><a href="#" class="text-gray-400 hover:text-white transition">首页</a></li>
936
+ <li><a href="#" class="text-gray-400 hover:text-white transition">积分榜</a></li>
937
+ <li><a href="#" class="text-gray-400 hover:text-white transition">赛程</a></li>
938
+ <li><a href="#" class="text-gray-400 hover:text-white transition">比分直播</a></li>
939
+ <li><a href="#" class="text-gray-400 hover:text-white transition">球星访谈</a></li>
940
+ </ul>
941
+ </div>
942
+
943
+ <div>
944
+ <h3 class="text-lg font-bold mb-4">联赛</h3>
945
+ <ul class="space-y-2">
946
+ <li><a href="#" class="text-gray-400 hover:text-white transition">西甲联赛</a></li>
947
+ <li><a href="#" class="text-gray-400 hover:text-white transition">英超联赛</a></li>
948
+ <li><a href="#" class="text-gray-400 hover:text-white transition">德甲联赛</a></li>
949
+ <li><a href="#" class="text-gray-400 hover:text-white transition">意甲联赛</a></li>
950
+ <li><a href="#" class="text-gray-400 hover:text-white transition">欧冠联赛</a></li>
951
+ </ul>
952
+ </div>
953
+
954
+ <div>
955
+ <h3 class="text-lg font-bold mb-4">订阅新闻</h3>
956
+ <p class="text-gray-400 mb-4">订阅我们的新闻通讯，获取最新足球资讯。</p>
957
+ <form class="flex">
958
+ <input type="email" placeholder="您的邮箱" class="px-4 py-2 w-full rounded-l focus:outline-none text-gray-900">
959
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r transition">
960
+ <i class="fas fa-paper-plane"></i>
961
+ </button>
962
+ </form>
963
+ </div>
964
+ </div>
965
+
966
+ <div class="border-t border-gray-800 pt-8">
967
+ <div class="flex flex-col md:flex-row justify-between items-center">
968
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 世界足球联赛. 保留所有权利.</p>
969
+ <div class="flex space-x-6">
970
+ <a href="#" class="text-gray-400 hover:text-white transition">隐私政策</a>
971
+ <a href="#" class="text-gray-400 hover:text-white transition">使用条款</a>
972
+ <a href="#" class="text-gray-400 hover:text-white transition">Cookie政策</a>
973
+ </div>
974
+ </div>
975
+ </div>
976
+ </div>
977
+ </footer>
978
+
979
+ <!-- 返回顶部按钮 -->
980
+ <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">
981
+ <i class="fas fa-arrow-up"></i>
982
+ </button>
983
+
984
+ <script>
985
+ // 移动菜单切换
986
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
987
+ const menu = document.getElementById('mobile-menu');
988
+ menu.classList.toggle('hidden');
989
+ });
990
+
991
+ // 刷新按钮
992
+ document.getElementById('refresh-btn').addEventListener('click', function() {
993
+ const timeElement = document.getElementById('update-time');
994
+ timeElement.textContent = '更新中...';
995
+
996
+ // 模拟刷新延迟
997
+ setTimeout(() => {
998
+ const now = new Date();
999
+ timeElement.textContent = now.toLocaleTimeString();
1000
+ }, 1000);
1001
+ });
1002
+
1003
+ // 返回顶部按钮
1004
+ window.addEventListener('scroll', function() {
1005
+ const backToTopButton = document.getElementById('back-to-top');
1006
+ if (window.pageYOffset > 300) {
1007
+ backToTopButton.classList.remove('opacity-0', 'invisible');
1008
+ backToTopButton.classList.add('opacity-100', 'visible');
1009
+ } else {
1010
+ backToTopButton.classList.remove('opacity-100', 'visible');
1011
+ backToTopButton.classList.add('opacity-0', 'invisible');
1012
+ }
1013
+ });
1014
+
1015
+ document.getElementById('back-to-top').addEventListener('click', function() {
1016
+ window.scrollTo({
1017
+ top: 0,
1018
+ behavior: 'smooth'
1019
+ });
1020
+ });
1021
+
1022
+ // 联赛标签切换
1023
+ const leagueTabs = document.querySelectorAll('#standings button:not(:first-child)');
1024
+ leagueTabs.forEach(tab => {
1025
+ tab.addEventListener('click', function() {
1026
+ // 这里可以添加实际的联赛切换逻辑
1027
+ alert('切换到 ' + this.textContent + ' 积分榜');
1028
+ });
1029
+ });
1030
+
1031
+ // 模拟视频播放
1032
+ const videoThumbnails = document.querySelectorAll('.video-thumbnail, .play-icon');
1033
+ videoThumbnails.forEach(thumbnail => {
1034
+ thumbnail.addEventListener('click', function(e) {
1035
+ e.preventDefault();
1036
+ alert('视频播放功能将在完整版中实现');
1037
+ });
1038
+ });
1039
+ </script>
1040
+ <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>
1041
+ </html>