Hugging Face's logo

Spaces:
maomaobj
/
nongye6
Running

App Files Community
maomaobj commited on
Commit
ca36ba8
·
verified ·
1 Parent(s): 8d37a9e

头图部分的图高度不够，没有撑满整个头图区域 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +598 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nongye6
3
- emoji: 📉
4
  colorFrom: gray
5
- colorTo: gray
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: nongye6
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: yellow
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,598 @@
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
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Noto Sans SC', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero-slide {
18
+ background: linear-gradient(135deg, rgba(173, 216, 230, 0.8) 0%, rgba(144, 238, 144, 0.8) 100%);
19
+ }
20
+
21
+ .card-hover:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
24
+ }
25
+
26
+ .scroll-container {
27
+ scrollbar-width: thin;
28
+ scrollbar-color: #4ade80 #f0f0f0;
29
+ }
30
+
31
+ .scroll-container::-webkit-scrollbar {
32
+ height: 6px;
33
+ }
34
+
35
+ .scroll-container::-webkit-scrollbar-track {
36
+ background: #f0f0f0;
37
+ border-radius: 10px;
38
+ }
39
+
40
+ .scroll-container::-webkit-scrollbar-thumb {
41
+ background-color: #4ade80;
42
+ border-radius: 10px;
43
+ }
44
+
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-50">
48
+ <!-- 顶部导航栏 -->
49
+ <header class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
50
+ <div class="container mx-auto px-4">
51
+ <div class="flex justify-between items-center h-16">
52
+ <!-- Logo -->
53
+ <div class="flex-shrink-0 flex items-center">
54
+ <i class="fas fa-leaf text-green-600 text-2xl mr-2"></i>
55
+
56
+ <span class="flex items-center ml-2">
57
+
58
+ <span class="font-semibold text-xl bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">农业技能服务平台</span>
59
+ </span>
60
+ </div>
61
+
62
+ <!-- 桌面导航 -->
63
+ <div class="hidden md:flex items-center space-x-8">
64
+ <nav class="flex space-x-6">
65
+ <a href="#" class="text-green-700 font-medium border-b-2 border-green-700 pb-1 px-1">首页</a>
66
+ <a href="#" class="text-gray-600 hover:text-green-700 transition px-1">技能大赛</a>
67
+ <a href="#" class="text-gray-600 hover:text-green-700 transition px-1">技能培训</a>
68
+ <a href="#" class="text-gray-600 hover:text-green-700 transition px-1">政策解读</a>
69
+ <a href="#" class="text-gray-600 hover:text-green-700 transition px-1">活动展示</a>
70
+ <a href="#" class="text-gray-600 hover:text-green-700 transition px-1">技能资源</a>
71
+ </nav>
72
+ <a href="#" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition">个人中心</a>
73
+ </div>
74
+
75
+ <!-- 移动端菜单按钮 -->
76
+ <div class="md:hidden flex items-center">
77
+ <button id="menu-toggle" class="text-gray-500 hover:text-gray-900 focus:outline-none">
78
+ <i class="fas fa-bars text-2xl"></i>
79
+ </button>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ </header>
85
+
86
+ <!-- 主要内容区 -->
87
+ <main class="mt-20">
88
+ <!-- 头图轮播区域 -->
89
+ <section class="relative">
90
+ <div class="carousel-container relative overflow-hidden h-[500px]">
91
+ <div class="carousel-slides flex transition-transform duration-500 ease-in-out h-full">
92
+ <!-- 轮播图1 -->
93
+ <div class="hero-slide min-w-full flex items-center px-8 md:px-16 h-full">
94
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
95
+ <div class="md:w-1/2 mb-8 md:mb-0">
96
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">2023全国农业技能大赛报名中</h2>
97
+ <p class="text-gray-700 mb-6">汇聚农业精英，展示专业技能，赢取丰厚奖励！报名截止日期：2023年12月31日</p>
98
+ <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full font-medium transition">马上报名</button>
99
+ </div>
100
+ <div class="md:w-1/2 h-full flex items-center">
101
+ <img src="https://via.placeholder.com/800x500?text=农业技能大赛"class="rounded-lg shadow-xl w-full h-auto max-h-[400px] object-cover">
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- 轮播图2 -->
107
+ <div class="hero-slide min-w-full flex items-center px-8 md:px-16 bg-gradient-to-r from-blue-100 to-green-100 h-full">
108
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
109
+ <div class="md:w-1/2 mb-8 md:mb-0">
110
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">现代农业技术培训课程</h2>
111
+ <p class="text-gray-700 mb-6">学习最新农业技术，提升专业技能，助力乡村振兴！理论与实践相结合的教学模式</p>
112
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-medium transition">立即查看</button>
113
+ </div>
114
+ <div class="md:w-1/2 h-full flex items-center">
115
+ <img src="https://via.placeholder.com/800x500?text=农业技术培训"class="rounded-lg shadow-xl w-full h-auto max-h-[400px] object-cover">
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- 轮播图3 -->
121
+ <div class="hero-slide min-w-full flex items-center px-8 md:px-16 bg-gradient-to-r from-green-100 to-yellow-100 h-full">
122
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
123
+ <div class="md:w-1/2 mb-8 md:mb-0">
124
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">最新农业扶持政策发布</h2>
125
+ <p class="text-gray-700 mb-6">2023年农业补贴政策、贷款优惠、技术支持等一揽子扶持措施解读</p>
126
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white px-6 py-3 rounded-full font-medium transition">政策详情</button>
127
+ </div>
128
+ <div class="md:w-1/2 h-full flex items-center">
129
+ <img src="https://via.placeholder.com/800x500?text=农业政策" alt="农业政策" class="rounded-lg shadow-xl w-full h-auto max-h-[400px] object-cover">
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- 轮播指示器 -->
137
+ <div class="absolute bottom-6 left-0 right-0 flex justify-center space-x-2">
138
+ <button class="carousel-indicator w-3 h-3 rounded-full bg-white border border-gray-300 focus:outline-none" data-index="0"></button>
139
+ <button class="carousel-indicator w-3 h-3 rounded-full bg-white border border-gray-300 focus:outline-none" data-index="1"></button>
140
+ <button class="carousel-indicator w-3 h-3 rounded-full bg-white border border-gray-300 focus:outline-none" data-index="2"></button>
141
+ </div>
142
+
143
+ <!-- 轮播导航按钮 -->
144
+ <button class="carousel-prev absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 text-gray-800 p-2 rounded-full shadow-md hover:bg-opacity-100 transition">
145
+ <i class="fas fa-chevron-left"></i>
146
+ </button>
147
+ <button class="carousel-next absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 text-gray-800 p-2 rounded-full shadow-md hover:bg-opacity-100 transition">
148
+ <i class="fas fa-chevron-right"></i>
149
+ </button>
150
+ </section>
151
+
152
+ <!-- 信息分区卡片区域 -->
153
+ <section class="py-12 bg-white">
154
+ <div class="container mx-auto px-4">
155
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">农业技能服务</h2>
156
+
157
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
158
+ <!-- 卡片1 -->
159
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
160
+ <div class="p-6">
161
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
162
+ <i class="fas fa-trophy text-blue-600 text-2xl"></i>
163
+ </div>
164
+ <h3 class="text-xl font-semibold text-gray-800 text-center mb-2">技能大赛</h3>
165
+ <p class="text-gray-600 text-center">参与各类农业技能竞赛，展示专业能力</p>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- 卡片2 -->
170
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
171
+ <div class="p-6">
172
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto">
173
+ <i class="fas fa-chalkboard-teacher text-green-600 text-2xl"></i>
174
+ </div>
175
+ <h3 class="text-xl font-semibold text-gray-800 text-center mb-2">技能培训</h3>
176
+ <p class="text-gray-600 text-center">专业农业技术培训课程，提升职业技能</p>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- 卡片3 -->
181
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
182
+ <div class="p-6">
183
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4 mx-auto">
184
+ <i class="fas fa-file-alt text-yellow-600 text-2xl"></i>
185
+ </div>
186
+ <h3 class="text-xl font-semibold text-gray-800 text-center mb-2">农业政策</h3>
187
+ <p class="text-gray-600 text-center">最新农业扶持政策解读与申报指南</p>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- 卡片4 -->
192
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
193
+ <div class="p-6">
194
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto">
195
+ <i class="fas fa-calendar-alt text-purple-600 text-2xl"></i>
196
+ </div>
197
+ <h3 class="text-xl font-semibold text-gray-800 text-center mb-2">技能活动</h3>
198
+ <p class="text-gray-600 text-center">农业技能交流活动与行业展会信息</p>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- 卡片5 -->
203
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
204
+ <div class="p-6">
205
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4 mx-auto">
206
+ <i class="fas fa-medal text-red-600 text-2xl"></i>
207
+ </div>
208
+ <h3 class="text-xl font-semibold text-gray-800 text-center mb-2">优秀案例</h3>
209
+ <p class="text-gray-600 text-center">农业技能应用成功案例与经验分享</p>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- 卡片6 -->
214
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
215
+ <div class="p-6">
216
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto">
217
+ <i class="fas fa-briefcase text-indigo-600 text-2xl"></i>
218
+ </div>
219
+ <h3 class="text-xl font-semibold text-gray-800 text-center mb-2">岗位推荐</h3>
220
+ <p class="text-gray-600 text-center">农业技术岗位招聘与人才对接服务</p>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- 卡片7 -->
225
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
226
+ <div class="p-6">
227
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-4 mx-auto">
228
+ <i class="fas fa-video text-pink-600 text-2xl"></i>
229
+ </div>
230
+ <h3 class="text-xl font-semibold text-gray-800 text-center mb-2">视频教程</h3>
231
+ <p class="text-gray-600 text-center">农业技术操作视频与在线教学资源</p>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- 卡片8 -->
236
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
237
+ <div class="p-6">
238
+ <div class="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-4 mx-auto">
239
+ <i class="fas fa-book text-teal-600 text-2xl"></i>
240
+ </div>
241
+ <h3 class="text-xl font-semibold text-gray-800 text-center mb-2">农业智库</h3>
242
+ <p class="text-gray-600 text-center">农业技术资料库与专家咨询服务</p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- 推荐内容信息流 -->
250
+ <section class="py-12 bg-gray-50">
251
+ <div class="container mx-auto px-4">
252
+ <!-- 热门培训 -->
253
+ <div class="mb-16">
254
+ <div class="flex justify-between items-center mb-6">
255
+ <h2 class="text-2xl font-bold text-gray-800">热门培训</h2>
256
+ <a href="#" class="text-green-600 hover:text-green-800 font-medium">查看全部 <i class="fas fa-arrow-right ml-1"></i></a>
257
+ </div>
258
+
259
+ <div class="relative">
260
+ <div class="scroll-container overflow-x-auto pb-6">
261
+ <div class="flex space-x-6 w-max">
262
+ <!-- 培训卡片1 -->
263
+ <div class="w-72 bg-white rounded-lg shadow-md overflow-hidden flex-shrink-0">
264
+ <img src="https://via.placeholder.com/400x200?text=现代农业技术" alt="现代农业技术" class="w-full h-40 object-cover">
265
+ <div class="p-4">
266
+ <h3 class="font-bold text-lg text-gray-800 mb-2">现代农业种植技术培训</h3>
267
+ <div class="flex items-center text-gray-600 mb-3">
268
+ <i class="far fa-calendar-alt mr-2"></i>
269
+ <span>2023.11.15-11.20</span>
270
+ </div>
271
+ <div class="flex items-center text-gray-600 mb-4">
272
+ <i class="fas fa-map-marker-alt mr-2"></i>
273
+ <span>北京市农业技术推广中心</span>
274
+ </div>
275
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md transition">立即报名</button>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- 培训卡片2 -->
280
+ <div class="w-72 bg-white rounded-lg shadow-md overflow-hidden flex-shrink-0">
281
+ <img src="https://via.placeholder.com/400x200?text=智慧农业" alt="智慧农业" class="w-full h-40 object-cover">
282
+ <div class="p-4">
283
+ <h3 class="font-bold text-lg text-gray-800 mb-2">智慧农业与物联网技术</h3>
284
+ <div class="flex items-center text-gray-600 mb-3">
285
+ <i class="far fa-calendar-alt mr-2"></i>
286
+ <span>2023.12.01-12.05</span>
287
+ </div>
288
+ <div class="flex items-center text-gray-600 mb-4">
289
+ <i class="fas fa-map-marker-alt mr-2"></i>
290
+ <span>上海市农业科学院</span>
291
+ </div>
292
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md transition">立即报名</button>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- 培训卡片3 -->
297
+ <div class="w-72 bg-white rounded-lg shadow-md overflow-hidden flex-shrink-0">
298
+ <img src="https://via.placeholder.com/400x200?text=有机农业" alt="有机农业" class="w-full h-40 object-cover">
299
+ <div class="p-4">
300
+ <h3 class="font-bold text-lg text-gray-800 mb-2">有机农业与生态种植</h3>
301
+ <div class="flex items-center text-gray-600 mb-3">
302
+ <i class="far fa-calendar-alt mr-2"></i>
303
+ <span>2024.01.10-01.15</span>
304
+ </div>
305
+ <div class="flex items-center text-gray-600 mb-4">
306
+ <i class="fas fa-map-marker-alt mr-2"></i>
307
+ <span>广��省农业技术推广站</span>
308
+ </div>
309
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md transition">立即报名</button>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- 精彩赛事 -->
318
+ <div class="mb-16">
319
+ <div class="flex justify-between items-center mb-6">
320
+ <h2 class="text-2xl font-bold text-gray-800">精彩赛事</h2>
321
+ <a href="#" class="text-green-600 hover:text-green-800 font-medium">查看全部 <i class="fas fa-arrow-right ml-1"></i></a>
322
+ </div>
323
+
324
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
325
+ <!-- 大赛视频 -->
326
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
327
+ <div class="relative pt-[56.25%]">
328
+ <img src="https://via.placeholder.com/800x450?text=大赛视频" alt="大赛视频" class="absolute top-0 left-0 w-full h-full object-cover">
329
+ <div class="absolute inset-0 flex items-center justify-center">
330
+ <button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center hover:bg-opacity-100 transition">
331
+ <i class="fas fa-play text-green-600 text-2xl"></i>
332
+ </button>
333
+ </div>
334
+ </div>
335
+ <div class="p-6">
336
+ <h3 class="text-xl font-bold text-gray-800 mb-3">2023全国农业技能大赛精彩回顾</h3>
337
+ <p class="text-gray-600 mb-4">来自全国各地的农业技能人才同台竞技，展示现代农业技术的创新应用</p>
338
+ <div class="flex justify-between items-center">
339
+ <span class="text-sm text-gray-500"><i class="far fa-eye mr-1"></i> 2.5万次观看</span>
340
+ <button class="text-green-600 hover:text-green-800 font-medium">查看详情</button>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- 选手风采 -->
346
+ <div>
347
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">选手风采</h3>
348
+ <div class="grid grid-cols-2 gap-4">
349
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
350
+ <img src="https://via.placeholder.com/300x200?text=选手1" alt="选手风采" class="w-full h-32 object-cover">
351
+ <div class="p-3">
352
+ <p class="text-sm font-medium text-gray-800 truncate">设施农业组冠军 张明</p>
353
+ </div>
354
+ </div>
355
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
356
+ <img src="https://via.placeholder.com/300x200?text=选手2" alt="选手风采" class="w-full h-32 object-cover">
357
+ <div class="p-3">
358
+ <p class="text-sm font-medium text-gray-800 truncate">智慧农业组冠军 李华</p>
359
+ </div>
360
+ </div>
361
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
362
+ <img src="https://via.placeholder.com/300x200?text=选手3" alt="选手风采" class="w-full h-32 object-cover">
363
+ <div class="p-3">
364
+ <p class="text-sm font-medium text-gray-800 truncate">有机农业组冠军 王芳</p>
365
+ </div>
366
+ </div>
367
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
368
+ <img src="https://via.placeholder.com/300x200?text=选手4" alt="选手风采" class="w-full h-32 object-cover">
369
+ <div class="p-3">
370
+ <p class="text-sm font-medium text-gray-800 truncate">农业机械组冠军 赵强</p>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- 政策速览 -->
379
+ <div>
380
+ <div class="flex justify-between items-center mb-6">
381
+ <h2 class="text-2xl font-bold text-gray-800">政策速览</h2>
382
+ <a href="#" class="text-green-600 hover:text-green-800 font-medium">查看全部 <i class="fas fa-arrow-right ml-1"></i></a>
383
+ </div>
384
+
385
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
386
+ <!-- 政策1 -->
387
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition">
388
+ <div class="p-5">
389
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
390
+ <i class="fas fa-file-invoice-dollar text-blue-600 text-xl"></i>
391
+ </div>
392
+ <h3 class="text-lg font-bold text-gray-800 mb-2">2023年农业补贴政策</h3>
393
+ <p class="text-gray-600 text-sm mb-4">明确各类农业补贴标准与申请流程，支持新型农业经营主体发展...</p>
394
+ <div class="flex justify-between items-center">
395
+ <span class="text-xs text-gray-500">2023-10-15</span>
396
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">查看详情</button>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- 政策2 -->
402
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition">
403
+ <div class="p-5">
404
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
405
+ <i class="fas fa-hand-holding-usd text-green-600 text-xl"></i>
406
+ </div>
407
+ <h3 class="text-lg font-bold text-gray-800 mb-2">农业贷款优惠政策</h3>
408
+ <p class="text-gray-600 text-sm mb-4">金融机构对农业经营主体提供低息贷款，最高可贷500万元...</p>
409
+ <div class="flex justify-between items-center">
410
+ <span class="text-xs text-gray-500">2023-09-28</span>
411
+ <button class="text-green-600 hover:text-green-800 text-sm font-medium">查看详情</button>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <!-- 政策3 -->
417
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition">
418
+ <div class="p-5">
419
+ <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
420
+ <i class="fas fa-seedling text-yellow-600 text-xl"></i>
421
+ </div>
422
+ <h3 class="text-lg font-bold text-gray-800 mb-2">农业技术推广支持</h3>
423
+ <p class="text-gray-600 text-sm mb-4">加强农业技术推广体系建设，支持农业科技成果转化应用...</p>
424
+ <div class="flex justify-between items-center">
425
+ <span class="text-xs text-gray-500">2023-11-05</span>
426
+ <button class="text-yellow-600 hover:text-yellow-800 text-sm font-medium">查看详情</button>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </section>
434
+ </main>
435
+
436
+ <!-- 页面底部 -->
437
+ <footer class="bg-gray-800 text-white py-12">
438
+ <div class="container mx-auto px-4">
439
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
440
+ <!-- 关于我们 -->
441
+ <div>
442
+ <h3 class="text-lg font-semibold mb-4">关于我们</h3>
443
+ <p class="text-gray-400 mb-4">农业技能服务平台致力于为农业从业者提供技能培训、政策解读、赛事活动等全方位服务。</p>
444
+ <div class="flex space-x-4">
445
+ <a href="#" class="text-gray-400 hover:text-white transition">
446
+ <i class="fab fa-weixin text-xl"></i>
447
+ </a>
448
+ <a href="#" class="text-gray-400 hover:text-white transition">
449
+ <i class="fab fa-weibo text-xl"></i>
450
+ </a>
451
+ <a href="#" class="text-gray-400 hover:text-white transition">
452
+ <i class="fab fa-qq text-xl"></i>
453
+ </a>
454
+ </div>
455
+ </div>
456
+
457
+ <!-- 快速链接 -->
458
+ <div>
459
+ <h3 class="text-lg font-semibold mb-4">快速链接</h3>
460
+ <ul class="space-y-2">
461
+ <li><a href="#" class="text-gray-400 hover:text-white transition">首页</a></li>
462
+ <li><a href="#" class="text-gray-400 hover:text-white transition">技能大赛</a></li>
463
+ <li><a href="#" class="text-gray-400 hover:text-white transition">技能培训</a></li>
464
+ <li><a href="#" class="text-gray-400 hover:text-white transition">政策解读</a></li>
465
+ <li><a href="#" class="text-gray-400 hover:text-white transition">活动展示</a></li>
466
+ </ul>
467
+ </div>
468
+
469
+ <!-- 联系我们 -->
470
+ <div>
471
+ <h3 class="text-lg font-semibold mb-4">联系我们</h3>
472
+ <ul class="space-y-2">
473
+ <li class="flex items-center">
474
+ <i class="fas fa-phone-alt text-gray-400 mr-2"></i>
475
+ <span class="text-gray-400">400-123-4567</span>
476
+ </li>
477
+ <li class="flex items-center">
478
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
479
+ <span class="text-gray-400">service@nyjn.com</span>
480
+ </li>
481
+ <li class="flex items-center">
482
+ <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
483
+ <span class="text-gray-400">北京市朝阳区农业科技园A座</span>
484
+ </li>
485
+ </ul>
486
+ </div>
487
+
488
+ <!-- 微信公众号 -->
489
+ <div>
490
+ <h3 class="text-lg font-semibold mb-4">微信公众号</h3>
491
+ <img src="https://via.placeholder.com/150x150?text=扫码关注" alt="微信公众号" class="w-32 h-32 mb-2">
492
+ <p class="text-gray-400 text-sm">扫码关注获取最新资讯</p>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500 text-sm">
497
+ <p>© 2023 农业技能服务平台 版权所有</p>
498
+ <p class="mt-2">备案号：京ICP备12345678号-1</p>
499
+ </div>
500
+ </div>
501
+ </footer>
502
+
503
+ <script>
504
+ // 轮播图功能
505
+ const carouselSlides = document.querySelector('.carousel-slides');
506
+ const carouselIndicators = document.querySelectorAll('.carousel-indicator');
507
+ const carouselPrev = document.querySelector('.carousel-prev');
508
+ const carouselNext = document.querySelector('.carousel-next');
509
+
510
+ let currentIndex = 0;
511
+ const slideCount = document.querySelectorAll('.hero-slide').length;
512
+
513
+ function updateCarousel() {
514
+ carouselSlides.style.transform = `translateX(-${currentIndex * 100}%)`;
515
+
516
+ // 更新指示器状态
517
+ carouselIndicators.forEach((indicator, index) => {
518
+ if (index === currentIndex) {
519
+ indicator.classList.add('bg-green-600', 'border-green-600');
520
+ indicator.classList.remove('bg-white');
521
+ } else {
522
+ indicator.classList.remove('bg-green-600', 'border-green-600');
523
+ indicator.classList.add('bg-white');
524
+ }
525
+ });
526
+ }
527
+
528
+ // 自动轮播
529
+ let autoSlide = setInterval(() => {
530
+ currentIndex = (currentIndex + 1) % slideCount;
531
+ updateCarousel();
532
+ }, 5000);
533
+
534
+ // 重置自动轮播计时器
535
+ function resetAutoSlide() {
536
+ clearInterval(autoSlide);
537
+ autoSlide = setInterval(() => {
538
+ currentIndex = (currentIndex + 1) % slideCount;
539
+ updateCarousel();
540
+ }, 5000);
541
+ }
542
+
543
+ // 上一张
544
+ carouselPrev.addEventListener('click', () => {
545
+ currentIndex = (currentIndex - 1 + slideCount) % slideCount;
546
+ updateCarousel();
547
+ resetAutoSlide();
548
+ });
549
+
550
+ // 下一张
551
+ carouselNext.addEventListener('click', () => {
552
+ currentIndex = (currentIndex + 1) % slideCount;
553
+ updateCarousel();
554
+ resetAutoSlide();
555
+ });
556
+
557
+ // 指示器点击
558
+ carouselIndicators.forEach(indicator => {
559
+ indicator.addEventListener('click', () => {
560
+ currentIndex = parseInt(indicator.dataset.index);
561
+ updateCarousel();
562
+ resetAutoSlide();
563
+ });
564
+ });
565
+
566
+ // 横滑滚动效果
567
+ const scrollContainers = document.querySelectorAll('.scroll-container');
568
+
569
+ scrollContainers.forEach(container => {
570
+ let isDown = false;
571
+ let startX;
572
+ let scrollLeft;
573
+
574
+ container.addEventListener('mousedown', (e) => {
575
+ isDown = true;
576
+ startX = e.pageX - container.offsetLeft;
577
+ scrollLeft = container.scrollLeft;
578
+ });
579
+
580
+ container.addEventListener('mouseleave', () => {
581
+ isDown = false;
582
+ });
583
+
584
+ container.addEventListener('mouseup', () => {
585
+ isDown = false;
586
+ });
587
+
588
+ container.addEventListener('mousemove', (e) => {
589
+ if(!isDown) return;
590
+ e.preventDefault();
591
+ const x = e.pageX - container.offsetLeft;
592
+ const walk = (x - startX) * 2;
593
+ container.scrollLeft = scrollLeft - walk;
594
+ });
595
+ });
596
+ </script>
597
+ <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=maomaobj/nongye6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
598
+ </html>