| <!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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'agri-green': '#2e7d32', |
| 'agri-light-green': '#4caf50', |
| 'agri-blue': '#29b6f6', |
| 'agri-light-blue': '#e1f5fe', |
| 'agri-yellow': '#ffd54f', |
| 'agri-light-yellow': '#fff8e1' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Sans SC', sans-serif; |
| background-color: #f5f5f5; |
| padding-bottom: 80px; |
| overflow-y: hidden; |
| } |
| |
| .swiper-container { |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .swiper-wrapper { |
| display: flex; |
| transition: transform 0.5s ease; |
| } |
| |
| .swiper-slide { |
| flex: 0 0 100%; |
| } |
| |
| .swiper-pagination { |
| position: absolute; |
| bottom: 10px; |
| left: 0; |
| right: 0; |
| display: flex; |
| justify-content: center; |
| gap: 6px; |
| } |
| |
| .swiper-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background-color: rgba(255,255,255,0.5); |
| } |
| |
| .swiper-dot.active { |
| background-color: white; |
| } |
| |
| .card-shadow { |
| box-shadow: 0 4px 12px rgba(0,0,0,0.05); |
| } |
| |
| .scroll-container { |
| overflow-x: auto; |
| white-space: nowrap; |
| scrollbar-width: none; |
| } |
| |
| .scroll-container::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .nav-item.active { |
| color: #2e7d32; |
| } |
| |
| .nav-item.active i { |
| color: #2e7d32; |
| } |
| |
| #scrollToTopBtn { |
| z-index: 999; |
| } |
| #scrollToTopBtn:hover { |
| background-color: #43a047; |
| transform: translateY(-2px); |
| } |
| </style> |
| </head> |
| <body> |
| |
| |
| |
| <header class="fixed top-0 left-0 right-0 bg-white z-50 shadow-sm py-3 px-4 flex justify-between items-center transition-all duration-300"> |
| <h1 id="headerTitle" class="text-xl font-bold text-agri-green opacity-0 translate-y-2 transition-all duration-300">农业技能服务平台</h1> |
| <a href="#" class="text-agri-green"> |
| <i class="fas fa-user-circle text-2xl"></i> |
| </a> |
| </header> |
|
|
| <main class="mt-16"> |
| |
| <section class="swiper-container mx-4 mt-4 rounded-2xl overflow-hidden"> |
| <div class="swiper-wrapper"> |
| |
| <div class="swiper-slide relative"> |
| <div class="h-48 bg-gradient-to-r from-agri-green to-agri-blue flex items-center justify-center"> |
| <div class="text-center text-white px-4"> |
| <h2 class="text-xl font-bold mb-2">2023全国农业技能大赛火热报名中</h2> |
| <p class="text-sm mb-4">展示农业技能，赢取丰厚奖励</p> |
| <button class="bg-white text-agri-green px-6 py-2 rounded-full font-bold">立即报名</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="swiper-slide relative"> |
| <div class="h-48 bg-gradient-to-r from-agri-blue to-agri-green flex items-center justify-center"> |
| <div class="text-center text-white px-4"> |
| <h2 class="text-xl font-bold mb-2">现代农业技术培训课程</h2> |
| <p class="text-sm mb-4">掌握前沿技术，提升专业技能</p> |
| <button class="bg-white text-agri-blue px-6 py-2 rounded-full font-bold">查看课程</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="swiper-slide relative"> |
| <div class="h-48 bg-gradient-to-r from-agri-light-green to-agri-yellow flex items-center justify-center"> |
| <div class="text-center text-white px-4"> |
| <h2 class="text-xl font-bold mb-2">2023农业补贴政策解读</h2> |
| <p class="text-sm mb-4">了解最新政策，享受政府支持</p> |
| <button class="bg-white text-agri-green px-6 py-2 rounded-full font-bold">政策详情</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="swiper-pagination"> |
| <div class="swiper-dot active"></div> |
| <div class="swiper-dot"></div> |
| <div class="swiper-dot"></div> |
| </div> |
| </section> |
|
|
| |
| <section class="mx-4 mt-6"> |
| <div class="grid grid-cols-3 gap-4"> |
| |
| <a href="#" class="flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-agri-light-blue flex items-center justify-center mb-2"> |
| <i class="fas fa-trophy text-2xl text-agri-blue"></i> |
| </div> |
| <span class="text-sm font-medium text-gray-700">技能大赛</span> |
| </a> |
| |
| |
| <a href="#" class="flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-agri-light-blue flex items-center justify-center mb-2"> |
| <i class="fas fa-book-open text-2xl text-agri-blue"></i> |
| </div> |
| <span class="text-sm font-medium text-gray-700">技能培训</span> |
| </a> |
| |
| |
| <a href="#" class="flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-agri-light-blue flex items-center justify-center mb-2"> |
| <i class="fas fa-file-alt text-2xl text-agri-blue"></i> |
| </div> |
| <span class="text-sm font-medium text-gray-700">政策解读</span> |
| </a> |
| |
| |
| <a href="#" class="flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-agri-light-yellow flex items-center justify-center mb-2"> |
| <i class="fas fa-calendar-alt text-2xl text-amber-500"></i> |
| </div> |
| <span class="text-sm font-medium text-gray-700">活动展示</span> |
| </a> |
| |
| |
| <a href="#" class="flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-agri-light-yellow flex items-center justify-center mb-2"> |
| <i class="fas fa-video text-2xl text-amber-500"></i> |
| </div> |
| <span class="text-sm font-medium text-gray-700">视频教程</span> |
| </a> |
| |
| |
| <a href="#" class="flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-agri-light-yellow flex items-center justify-center mb-2"> |
| <i class="fas fa-briefcase text-2xl text-amber-500"></i> |
| </div> |
| <span class="text-sm font-medium text-gray-700">岗位推荐</span> |
| </a> |
| |
| |
| <a href="#" class="flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-chart-line text-2xl text-green-500"></i> |
| </div> |
| <span class="text-sm font-medium text-gray-700">数据填报</span> |
| </a> |
| |
| |
| <a href="#" class="flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-clipboard-list text-2xl text-green-500"></i> |
| </div> |
| <span class="text-sm font-medium text-gray-700">我的报名</span> |
| </a> |
| |
| |
| <a href="#" class="flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-award text-2xl text-green-500"></i> |
| </div> |
| <span class="text-sm font-medium text-gray-700">我的证书</span> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="mx-4 mt-8"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-bold text-gray-800">培训推荐</h2> |
| <a href="#" class="text-sm text-agri-blue">更多 <i class="fas fa-angle-right"></i></a> |
| </div> |
| |
| <div class="space-y-4"> |
| |
| <div class="bg-white rounded-xl card-shadow overflow-hidden"> |
| <div class="flex"> |
| <div class="w-1/3 bg-gray-200 h-28 bg-contain bg-center bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80')"></div> |
| <div class="w-2/3 p-3"> |
| <h3 class="font-bold text-gray-800 mb-1">现代农业种植技术</h3> |
| <div class="flex items-center text-sm text-gray-500 mb-1"> |
| <i class="fas fa-map-marker-alt mr-1"></i> |
| <span>山东济南</span> |
| </div> |
| <div class="flex items-center text-sm text-gray-500 mb-2"> |
| <i class="fas fa-calendar-alt mr-1"></i> |
| <span>2023-10-15 至 2023-10-20</span> |
| </div> |
| <button class="bg-agri-green text-white text-sm px-4 py-1 rounded-full">查看详情</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl card-shadow overflow-hidden"> |
| <div class="flex"> |
| <div class="w-1/3 bg-gray-200 h-28 bg-contain bg-center bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80')"></div> |
| <div class="w-2/3 p-3"> |
| <h3 class="font-bold text-gray-800 mb-1">农产品电商运营实战</h3> |
| <div class="flex items-center text-sm text-gray-500 mb-1"> |
| <i class="fas fa-map-marker-alt mr-1"></i> |
| <span>浙江杭州</span> |
| </div> |
| <div class="flex items-center text-sm text-gray-500 mb-2"> |
| <i class="fas fa-calendar-alt mr-1"></i> |
| <span>2023-11-05 至 2023-11-08</span> |
| </div> |
| <button class="bg-agri-green text-white text-sm px-4 py-1 rounded-full">查看详情</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl card-shadow overflow-hidden"> |
| <div class="flex"> |
| <div class="w-1/3 bg-gray-200 h-28 bg-contain bg-center bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1604357209793-fca5dca89f61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80')"></div> |
| <div class="w-2/3 p-3"> |
| <h3 class="font-bold text-gray-800 mb-1">智慧农业与物联网应用</h3> |
| <div class="flex items-center text-sm text-gray-500 mb-1"> |
| <i class="fas fa-map-marker-alt mr-1"></i> |
| <span>江苏南京</span> |
| </div> |
| <div class="flex items-center text-sm text-gray-500 mb-2"> |
| <i class="fas fa-calendar-alt mr-1"></i> |
| <span>2023-12-01 至 2023-12-05</span> |
| </div> |
| <button class="bg-agri-green text-white text-sm px-4 py-1 rounded-full">查看详情</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mx-4 mt-8"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-bold text-gray-800">政策速递</h2> |
| <a href="#" class="text-sm text-agri-blue">更多 <i class="fas fa-angle-right"></i></a> |
| </div> |
| |
| <div class="bg-white rounded-xl card-shadow p-4"> |
| <div class="space-y-3"> |
| |
| <a href="#" class="flex items-start"> |
| <div class="bg-agri-blue text-white rounded-lg w-10 h-10 flex items-center justify-center mr-3 flex-shrink-0"> |
| <i class="fas fa-file-alt"></i> |
| </div> |
| <div> |
| <h3 class="font-medium text-gray-800 mb-1">2023年农业补贴政策新变化</h3> |
| <p class="text-sm text-gray-500 line-clamp-2">农业农村部发布最新农业补贴政策，重点支持绿色农业、智慧农业和特色农产品发展...</p> |
| </div> |
| </a> |
| |
| |
| <a href="#" class="flex items-start"> |
| <div class="bg-agri-green text-white rounded-lg w-10 h-10 flex items-center justify-center mr-3 flex-shrink-0"> |
| <i class="fas fa-file-alt"></i> |
| </div> |
| <div> |
| <h3 class="font-medium text-gray-800 mb-1">乡村振兴人才支持计划</h3> |
| <p class="text-sm text-gray-500 line-clamp-2">国家推出乡村振兴人才专项计划，提供培训补贴和创业支持，助力乡村人才发展...</p> |
| </div> |
| </a> |
| |
| |
| <a href="#" class="flex items-start"> |
| <div class="bg-amber-500 text-white rounded-lg w-10 h-10 flex items-center justify-center mr-3 flex-shrink-0"> |
| <i class="fas fa-file-alt"></i> |
| </div> |
| <div> |
| <h3 class="font-medium text-gray-800 mb-1">农产品质量安全新规</h3> |
| <p class="text-sm text-gray-500 line-clamp-2">新修订的农产品质量安全法将于2024年1月1日起实施，加强农产品全过程监管...</p> |
| </div> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mx-4 mt-8"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-bold text-gray-800">风采展示</h2> |
| <a href="#" class="text-sm text-agri-blue">更多 <i class="fas fa-angle-right"></i></a> |
| </div> |
| |
| <div class="scroll-container pb-4"> |
| <div class="inline-flex space-x-4"> |
| |
| <div class="w-32 inline-block"> |
| <div class="bg-gray-200 rounded-xl w-32 h-32 mb-2"></div> |
| <p class="text-sm font-medium text-gray-800 truncate">2022技能大赛冠军</p> |
| <p class="text-xs text-gray-500">李明 - 山东</p> |
| </div> |
| |
| |
| <div class="w-32 inline-block"> |
| <div class="bg-gray-200 rounded-xl w-32 h-32 mb-2"></div> |
| <p class="text-sm font-medium text-gray-800 truncate">优秀农技推广员</p> |
| <p class="text-xs text-gray-500">张华 - 江苏</p> |
| </div> |
| |
| |
| <div class="w-32 inline-block"> |
| <div class="bg-gray-200 rounded-xl w-32 h-32 mb-2"></div> |
| <p class="text-sm font-medium text-gray-800 truncate">乡村创业之星</p> |
| <p class="text-xs text-gray-500">王芳 - 浙江</p> |
| </div> |
| |
| |
| <div class="w-32 inline-block"> |
| <div class="bg-gray-200 rounded-xl w-32 h-32 mb-2"></div> |
| <p class="text-sm font-medium text-gray-800 truncate">智慧农业先锋</p> |
| <p class="text-xs text-gray-500">赵强 - 河南</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-3 px-8 flex justify-around"> |
| <a href="#" class="nav-item active flex flex-col items-center text-agri-green"> |
| <i class="fas fa-home text-xl"></i> |
| <span class="text-xs mt-1">首页</span> |
| </a> |
| <a href="#" class="nav-item flex flex-col items-center text-gray-500"> |
| <i class="fas fa-user text-xl"></i> |
| <span class="text-xs mt-1">我的</span> |
| </a> |
| <a href="#" class="nav-item flex flex-col items-center text-gray-500"> |
| <i class="fas fa-question-circle text-xl"></i> |
| <span class="text-xs mt-1">帮助</span> |
| </a> |
| </footer> |
|
|
| |
| <button id="scrollToTopBtn" class="fixed bottom-20 right-4 bg-agri-green text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-opacity duration-300"> |
| <i class="fas fa-arrow-up text-xl"></i> |
| </button> |
|
|
| <script> |
| |
| const scrollToTopBtn = document.getElementById('scrollToTopBtn'); |
| |
| const headerTitle = document.getElementById('headerTitle'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 100) { |
| scrollToTopBtn.classList.remove('opacity-0', 'invisible'); |
| scrollToTopBtn.classList.add('opacity-100', 'visible'); |
| headerTitle.classList.remove('opacity-0', 'translate-y-2'); |
| headerTitle.classList.add('opacity-100', 'translate-y-0'); |
| } else { |
| scrollToTopBtn.classList.add('opacity-0', 'invisible'); |
| scrollToTopBtn.classList.remove('opacity-100', 'visible'); |
| headerTitle.classList.add('opacity-0', 'translate-y-2'); |
| headerTitle.classList.remove('opacity-100', 'translate-y-0'); |
| } |
| }); |
| |
| scrollToTopBtn.addEventListener('click', () => { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const wrapper = document.querySelector('.swiper-wrapper'); |
| const slides = document.querySelectorAll('.swiper-slide'); |
| const dots = document.querySelectorAll('.swiper-dot'); |
| let currentIndex = 0; |
| const slideCount = slides.length; |
| |
| |
| setInterval(() => { |
| currentIndex = (currentIndex + 1) % slideCount; |
| updateSlider(); |
| }, 3000); |
| |
| |
| function updateSlider() { |
| wrapper.style.transform = `translateX(-${currentIndex * 100}%)`; |
| |
| |
| dots.forEach((dot, index) => { |
| if (index === currentIndex) { |
| dot.classList.add('active'); |
| } else { |
| dot.classList.remove('active'); |
| } |
| }); |
| } |
| |
| |
| let startX = 0; |
| let isDragging = false; |
| |
| wrapper.addEventListener('touchstart', (e) => { |
| startX = e.touches[0].clientX; |
| isDragging = true; |
| }); |
| |
| wrapper.addEventListener('touchmove', (e) => { |
| if (!isDragging) return; |
| const currentX = e.touches[0].clientX; |
| const diff = startX - currentX; |
| |
| |
| if (Math.abs(diff) > 50) { |
| if (diff > 0 && currentIndex < slideCount - 1) { |
| currentIndex++; |
| } else if (diff < 0 && currentIndex > 0) { |
| currentIndex--; |
| } |
| updateSlider(); |
| isDragging = false; |
| } |
| }); |
| |
| wrapper.addEventListener('touchend', () => { |
| isDragging = false; |
| }); |
| }); |
| </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=maomaobj/nongye7" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
