请设计一个“农业职业技能鉴定系统”的微信服务号首页界面，适用于参赛选手、农业技术人员等用户群体，风格应专业、简洁、政务化，主要展示政务服务和赛事管理功能，页面需包含以下内容： 1. 顶部横幅区域（Banner）： - 展示农业技能大赛宣传图； - 滚动展示重要通知，如“2025年全国农技大赛报名开始”等。 2. 快捷功能入口区域（图标按钮形式）： - 我要报名 - 查看赛事 - 我的资料 - 通知公告 - 政策文件 - 常见问题 3. 当前赛事模块： - 展示近期进行中的赛事卡片（含赛事名称、时间、地区、报名状态）； - 每个卡片内包含“查看详情”“立即报名”按钮。 4. 信息推送区： - 展示最近推送的政策信息、赛程提醒、资料审核进度等简讯列表； - 每条推送可点击进入详情页。 5. 底部导航栏（四个tab）： - 首页、赛事、消息、我的 设计风格：专业政务风、农业绿色调与蓝色为主，布局简洁清晰，适合在微信中使用，适配移动端操作习惯。 - Initial Deployment
730bb89 verified | <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: { | |
| primary: { | |
| 50: '#eefbf0', | |
| 100: '#d9f6df', | |
| 200: '#b5ecc1', | |
| 300: '#8edfa0', | |
| 400: '#6dd286', | |
| 500: '#3bb85f', | |
| 600: '#2d9a4b', | |
| 700: '#22713a', | |
| 800: '#17582e', | |
| 900: '#0d3a20', | |
| }, | |
| secondary: { | |
| 50: '#edf8ff', | |
| 100: '#d6edff', | |
| 200: '#aed9ff', | |
| 300: '#82c2ff', | |
| 400: '#5da9ff', | |
| 500: '#1c86ff', | |
| 600: '#0d6ef2', | |
| 700: '#0853c0', | |
| 800: '#0b429c', | |
| 900: '#0f3275', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </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: #f9fafb; | |
| padding-bottom: 68px; | |
| } | |
| .notification-scroll { | |
| animation: scroll 15s linear infinite; | |
| } | |
| @keyframes scroll { | |
| 0% { | |
| transform: translateY(100%); | |
| } | |
| 100% { | |
| transform: translateY(-100%); | |
| } | |
| } | |
| .swiper { | |
| overflow: hidden; | |
| position: relative; | |
| height: 38px; | |
| } | |
| .swiper-wrapper { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-700"> | |
| <!-- 顶部banner区域 --> | |
| <div class="w-full relative"> | |
| <img src="https://images.unsplash.com/photo-1536147116438-62679a5e01f2?auto=format&fit=crop&q=80" alt="农业技能大赛宣传图" class="w-full h-40 object-cover"> | |
| <div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-t from-gray-900 to-transparent"></div> | |
| <div class="absolute bottom-3 left-0 w-full px-4 text-white"> | |
| <h1 class="font-bold text-xl">2025全国农业技能大赛</h1> | |
| <p class="text-xs opacity-90">助力乡村振兴 推动农业发展</p> | |
| </div> | |
| </div> | |
| <!-- 通知滚动区域 --> | |
| <div class="bg-white py-2 px-4 flex items-center shadow-sm"> | |
| <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center mr-2"> | |
| <i class="fa-solid fa-bullhorn text-primary-600"></i> | |
| </div> | |
| <div class="swiper overflow-hidden flex-1 h-8"> | |
| <div class="swiper-wrapper notification-scroll"> | |
| <div class="py-1 text-sm">📢 2025年全国农技大赛报名开始，报名截止2025年4月30日</div> | |
| <div class="py-1 text-sm">📢 第五届现代农业职业技能培训报名通道已开启</div> | |
| <div class="py-1 text-sm">📢 关于农业技术资格认证的新政策发布，请及时查看</div> | |
| <div class="py-1 text-sm">📢 重要提示：资格审核结果可在"我的"页面查看</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 快捷功能入口区域 --> | |
| <div class="py-4 bg-white mt-2 px-4 shadow-sm"> | |
| <div class="grid grid-cols-4 gap-4"> | |
| <a href="#" class="flex flex-col items-center text-center"> | |
| <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-2"> | |
| <i class="fa-solid fa-file-lines text-primary-600 text-xl"></i> | |
| </div> | |
| <span class="text-xs">我要报名</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-center"> | |
| <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-2"> | |
| <i class="fa-solid fa-trophy text-primary-600 text-xl"></i> | |
| </div> | |
| <span class="text-xs">查看赛事</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-center"> | |
| <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-2"> | |
| <i class="fa-solid fa-user text-primary-600 text-xl"></i> | |
| </div> | |
| <span class="text-xs">我的资料</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-center"> | |
| <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-2"> | |
| <i class="fa-solid fa-bell text-primary-600 text-xl"></i> | |
| </div> | |
| <span class="text-xs">通知公告</span> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-4 gap-4 mt-4"> | |
| <a href="#" class="flex flex-col items-center text-center"> | |
| <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-2"> | |
| <i class="fa-solid fa-file-contract text-primary-600 text-xl"></i> | |
| </div> | |
| <span class="text-xs">政策文件</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-center"> | |
| <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-2"> | |
| <i class="fa-solid fa-question-circle text-primary-600 text-xl"></i> | |
| </div> | |
| <span class="text-xs">常见问题</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-center"> | |
| <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-2"> | |
| <i class="fa-solid fa-graduation-cap text-primary-600 text-xl"></i> | |
| </div> | |
| <span class="text-xs">技能培训</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-center"> | |
| <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-2"> | |
| <i class="fa-solid fa-book text-primary-600 text-xl"></i> | |
| </div> | |
| <span class="text-xs">知识库</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- 当前赛事模块 --> | |
| <div class="mt-3 bg-white py-4 px-4 shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="font-bold text-base text-gray-800">当前赛事</h2> | |
| <a href="#" class="text-xs text-primary-500 flex items-center"> | |
| 更多 <i class="fa-solid fa-angle-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- 赛事卡片 --> | |
| <div class="border rounded-lg overflow-hidden shadow-sm"> | |
| <div class="p-3"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 bg-primary-50 text-primary-700 text-xs rounded mr-2">报名中</span> | |
| <span class="text-gray-500 text-xs">种植业</span> | |
| </div> | |
| <h3 class="font-semibold mt-1 text-gray-800">2025年春季农作物种植技能大赛</h3> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1464226184884-fa280b87c399?auto=format&fit=crop&q=80" class="w-16 h-16 object-cover rounded"> | |
| </div> | |
| <div class="flex items-center mt-2 text-sm"> | |
| <i class="fa-solid fa-calendar-day text-gray-500 mr-2"></i> | |
| <span>2025-03-15 至 2025-05-20</span> | |
| </div> | |
| <div class="flex items-center mt-2 text-sm"> | |
| <i class="fa-solid fa-location-dot text-gray-500 mr-2"></i> | |
| <span>湖北省武汉市</span> | |
| </div> | |
| <div class="flex mt-3"> | |
| <button class="flex-1 mr-2 py-2 text-xs border border-primary-500 text-primary-500 rounded">查看详情</button> | |
| <button class="flex-1 ml-2 py-2 text-xs bg-primary-500 text-white rounded">立即报名</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 赛事卡片 --> | |
| <div class="border rounded-lg overflow-hidden shadow-sm"> | |
| <div class="p-3"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 bg-green-50 text-green-700 text-xs rounded mr-2">进行中</span> | |
| <span class="text-gray-500 text-xs">养殖业</span> | |
| </div> | |
| <h3 class="font-semibold mt-1 text-gray-800">全国现代畜牧业技术能手选拔赛</h3> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?auto=format&fit=crop&q=80" class="w-16 h-16 object-cover rounded"> | |
| </div> | |
| <div class="flex items-center mt-2 text-sm"> | |
| <i class="fa-solid fa-calendar-day text-gray-500 mr-2"></i> | |
| <span>2025-04-01 至 2025-06-30</span> | |
| </div> | |
| <div class="flex items-center mt-2 text-sm"> | |
| <i class="fa-solid fa-location-dot text-gray-500 mr-2"></i> | |
| <span>内蒙古自治区呼和浩特市</span> | |
| </div> | |
| <div class="flex mt-3"> | |
| <button class="flex-1 mr-2 py-2 text-xs border border-primary-500 text-primary-500 rounded">查看详情</button> | |
| <button class="flex-1 ml-2 py-2 text-xs bg-green-500 text-white rounded">进入赛事</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 信息推送区域 --> | |
| <div class="mt-3 bg-white py-4 px-4 shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="font-bold text-base text-gray-800">系统通知</h2> | |
| <a href="#" class="text-xs text-primary-500 flex items-center"> | |
| 更多 <i class="fa-solid fa-angle-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="space-y-4"> | |
| <a href="#" class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-secondary-100 flex items-center justify-center mr-3"> | |
| <i class="fa-solid fa-file-lines text-secondary-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800 text-sm">新型农业政策解读与扶持措施发布</h3> | |
| <p class="text-gray-500 text-xs mt-1 line-clamp-2">农业农村部最新发布了《关于支持现代农业发展的若干政策》，包括技术推广补贴、人才引进激励等内容...</p> | |
| <p class="text-gray-400 text-xs mt-1">昨天 16:42</p> | |
| </div> | |
| </a> | |
| <a href="#" class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3"> | |
| <i class="fa-solid fa-calendar-check text-yellow-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800 text-sm">您的技能大赛报名申请已审核通过</h3> | |
| <p class="text-gray-500 text-xs mt-1 line-clamp-2">您报名的"2025年春季农作物种植技能大赛"已通过审核，请及时查看赛程安排并做好参赛准备...</p> | |
| <p class="text-gray-400 text-xs mt-1">2025-02-18</p> | |
| </div> | |
| </a> | |
| <a href="#" class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3"> | |
| <i class="fa-solid fa-book text-purple-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800 text-sm">农业技术手册2025更新版已上线</h3> | |
| <p class="text-gray-500 text-xs mt-1 line-clamp-2">最新版农业技术指导手册已完成更新，新增了智慧农业技术指南、绿色种植技术等内容...</p> | |
| <p class="text-gray-400 text-xs mt-1">2025-02-15</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- 底部导航栏 --> | |
| <div class="fixed bottom-0 left-0 right-0 flex bg-white border-t border-gray-200 h-16"> | |
| <a href="#" class="flex-1 flex flex-col items-center justify-center text-primary-500"> | |
| <i class="fa-solid fa-house text-lg"></i> | |
| <span class="text-xs mt-1">首页</span> | |
| </a> | |
| <a href="#" class="flex-1 flex flex-col items-center justify-center text-gray-500"> | |
| <i class="fa-solid fa-trophy text-lg"></i> | |
| <span class="text-xs mt-1">赛事</span> | |
| </a> | |
| <a href="#" class="flex-1 flex flex-col items-center justify-center text-gray-500"> | |
| <i class="fa-solid fa-bell text-lg"></i> | |
| <span class="text-xs mt-1">消息</span> | |
| <span class="absolute top-1 right-1/3 bg-red-500 rounded-full w-4 h-4 text-white text-2xs flex items-center justify-center">5</span> | |
| </a> | |
| <a href="#" class="flex-1 flex flex-col items-center justify-center text-gray-500"> | |
| <i class="fa-solid fa-user text-lg"></i> | |
| <span class="text-xs mt-1">我的</span> | |
| </a> | |
| </div> | |
| <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/nongye2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |