这是一个完整的作物天气交互页面，左侧展示八种主要作物列表，点击即可切换右侧的详细生长数据与农事建议。
```json
{
"summary": "重构作物天气板块：左侧竖向排列8种作物，点击切换右侧生长阶段、气象数据和农事建议",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>AgWeather — 精准农业气象，守护每寸耕地</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n :root {\n --color-primary: #cc785c;\n --color-secondary: #5db8a6;\n --color-accent: #e8a55a;\n --color-success: #5db872;\n --color-warning: #d4a017;\n --color-danger: #c64545;\n --color-info: #5db8a6;\n --color-background: #faf9f5;\n --color-foreground: #141413;\n --color-card: #efe9de;\n --color-border: #e6dfd8;\n --color-muted: #6c6a64;\n --color-body: #3d3d3a;\n --color-body-strong: #252523;\n --color-muted-soft: #8e8b82;\n --color-hairline: #e6dfd8;\n --color-hairline-soft: #ebe6df;\n --color-surface-soft: #f5f0e8;\n --color-surface-cream-strong: #e8e0d2;\n --color-surface-dark: #181715;\n --color-surface-dark-elevated: #252320;\n --color-surface-dark-soft: #1f1e1b;\n --color-on-primary: #ffffff;\n --color-on-dark: #faf9f5;\n --color-on-dark-soft: #a09d96;\n --color-primary-active: #a9583e;\n --state-hover: #a9583e;\n --state-focus: #cc785c;\n --dur-micro: 100ms;\n --dur-base: 200ms;\n --dur-expressive: 320ms;\n --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n }\n\n .font-heading { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }\n .font-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n .font-mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; }\n\n .display-xl { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }\n .display-lg { font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }\n .display-md { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }\n .display-sm { font-size: clamp(1.25rem, 1.75vw, 1.75rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }\n .title-lg { font-size: 1.375rem; font-weight: 500; line-height: 1.3; font-family: 'Inter', sans-serif; }\n .title-md { font-size: 1.125rem; font-weight: 500; line-height: 1.4; font-family: 'Inter', sans-serif; }\n .title-sm { font-size: 1rem; font-weight: 500; line-height: 1.4; font-family: 'Inter', sans-serif; }\n .body-md { font-size: 1rem; font-weight: 400; line-height: 1.55; font-family: 'Inter', sans-serif; }\n .body-sm { font-size: 0.875rem; font-weight: 400; line-height: 1.55; font-family: 'Inter', sans-serif; }\n .caption { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; font-family: 'Inter', sans-serif; }\n .caption-uppercase { font-size: 0.75rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'Inter', sans-serif; }\n .code { font-size: 0.875rem; font-weight: 400; line-height: 1.6; font-family: 'JetBrains Mono', ui-monospace, monospace; }\n .nav-link { font-size: 1.05rem; font-weight: 500; line-height: 1.4; font-family: 'Inter', sans-serif; }\n\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1;\n padding: 0.75rem 1.25rem;\n border-radius: 8px;\n height: 40px;\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: all var(--dur-base) var(--ease-standard);\n border: none;\n cursor: pointer;\n text-decoration: none;\n }\n .btn-primary:hover { background-color: var(--state-hover); transform: translateY(-1px); box-shadow: 0 1px 3px rgba(20,20,19,0.08); }\n .btn-primary:focus-visible { outline: 2px solid var(--state-focus); outline-offset: 2px; border-radius: 8px; }\n .btn-primary:active { transform: scale(0.97); }\n\n .btn-secondary {\n background-color: var(--color-background);\n color: var(--color-foreground);\n border: 1px solid var(--color-hairline);\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1;\n padding: 0.75rem 1.25rem;\n border-radius: 8px;\n height: 40px;\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: all var(--dur-base) var(--ease-standard);\n cursor: pointer;\n text-decoration: none;\n }\n .btn-secondary:hover { background-color: var(--color-surface-soft); border-color: var(--color-primary); }\n .btn-secondary:focus-visible { outline: 2px solid var(--state-focus); outline-offset: 2px; border-radius: 8px; }\n .btn-secondary:active { transform: scale(0.97); }\n\n .btn-ghost {\n background-color: transparent;\n color: var(--color-foreground);\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1;\n padding: 0.5rem 0.75rem;\n border-radius: 8px;\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: background-color var(--dur-base) var(--ease-standard);\n border: none;\n cursor: pointer;\n text-decoration: none;\n }\n .btn-ghost:hover { background-color: var(--color-surface-soft); }\n .btn-ghost:focus-visible { outline: 2px solid var(--state-focus); outline-offset: 2px; border-radius: 8px; }\n\n .nav-scrolled { box-shadow: 0 1px 3px rgba(20,20,19,0.06); }\n\n .skip-link {\n position: absolute;\n top: -100%;\n left: 0;\n z-index: 100;\n padding: 0.5rem 1rem;\n background: var(--color-primary);\n color: var(--color-on-primary);\n font-size: 0.875rem;\n font-weight: 500;\n border-radius: 0 0 8px 0;\n transition: top var(--dur-base) var(--ease-standard);\n }\n .skip-link:focus { top: 0; }\n\n .scroll-reveal {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard);\n }\n .scroll-reveal.revealed { opacity: 1; transform: translateY(0); }\n\n .tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 1ms !important;\n scroll-behavior: auto !important;\n }\n }\n html { scroll-behavior: smooth; }\n @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }\n *:focus-visible { outline: 2px solid var(--state-focus); outline-offset: 2px; border-radius: inherit; }\n\n .mobile-menu-open { transform: translateX(0); }\n .mobile-menu-closed { transform: translateX(100%); }\n\n @media (max-width: 768px) {\n .hide-mobile { display: none !important; }\n .show-mobile { display: flex !important; }\n .hero-split { flex-direction: column; }\n .feature-grid { grid-template-columns: 1fr; }\n .pricing-grid { grid-template-columns: 1fr; }\n .footer-grid { grid-template-columns: 1fr; }\n .stats-grid { grid-template-columns: 1fr; gap: 24px; }\n .crop-layout { flex-direction: column; }\n .crop-sidebar { width: 100% !important; max-height: 220px; overflow-x: auto; overflow-y: hidden; display: flex; flex-wrap: nowrap; border-right: none !important; border-bottom: 1px solid var(--color-hairline); }\n .crop-sidebar-inner { display: flex; flex-direction: row; gap: 0; padding: 8px; }\n .crop-item { flex-shrink: 0; min-width: 80px; text-align: center; padding: 10px 12px !important; }\n .crop-item .crop-icon { margin-bottom: 4px; }\n .crop-right { min-height: 400px; }\n }\n @media (min-width: 769px) and (max-width: 1024px) {\n .feature-grid { grid-template-columns: repeat(2, 1fr); }\n .pricing-grid { grid-template-columns: repeat(2, 1fr); }\n .footer-grid { grid-template-columns: repeat(2, 1fr); }\n }\n @media (min-width: 1025px) {\n .hide-desktop { display: none !important; }\n .show-desktop { display: flex !important; }\n }\n\n @media (prefers-color-scheme: dark) {\n :root {\n --color-primary: #d4896e;\n --color-secondary: #6dc4b2;\n --color-accent: #e8b56a;\n --color-background: #181715;\n --color-foreground: #faf9f5;\n --color-card: #252320;\n --color-border: #3d3d3a;\n --color-muted: #a09d96;\n --color-body: #a09d96;\n --color-muted-soft: #6c6a64;\n --color-hairline: #3d3d3a;\n --color-hairline-soft: #3d3d3a;\n --color-surface-soft: #252320;\n --color-surface-dark: #0f0f0d;\n --color-surface-dark-elevated: #1a1917;\n --color-surface-dark-soft: #141312;\n --color-on-primary: #ffffff;\n --color-on-dark: #faf9f5;\n --color-on-dark-soft: #a09d96;\n }\n }\n\n .crop-item {\n cursor: pointer;\n user-select: none;\n transition: all var(--dur-base) var(--ease-standard);\n border-radius: 8px;\n padding: 12px 14px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .crop-item:hover { background-color: var(--color-surface-soft); }\n .crop-item.active {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n }\n .crop-item.active .crop-icon { color: var(--color-on-primary); }\n .crop-item.active .crop-sub { color: rgba(255,255,255,0.7); }\n .crop-icon {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n flex-shrink: 0;\n background-color: var(--color-card);\n color: var(--color-primary);\n transition: all var(--dur-base) var(--ease-standard);\n }\n .crop-item.active .crop-icon {\n background-color: rgba(255,255,255,0.2);\n }\n .crop-sub {\n font-size: 0.7rem;\n color: var(--color-muted-soft);\n transition: color var(--dur-base) var(--ease-standard);\n }\n\n .progress-bar {\n height: 8px;\n border-radius: 4px;\n background: var(--color-hairline);\n overflow: hidden;\n }\n .progress-fill {\n height: 100%;\n border-radius: 4px;\n transition: width 0.6s var(--ease-standard);\n }\n\n .metric-card {\n background-color: var(--color-card);\n border-radius: 10px;\n padding: 14px 16px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n .metric-card .metric-value {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--color-foreground);\n font-family: 'Inter', sans-serif;\n }\n .metric-card .metric-label {\n font-size: 0.75rem;\n color: var(--color-muted);\n font-family: 'Inter', sans-serif;\n }\n\n .stage-indicator {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 14px;\n border-radius: 9999px;\n font-size: 0.8rem;\n font-weight: 500;\n font-family: 'Inter', sans-serif;\n }\n\n .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }\n .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }\n .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--color-muted-soft); border-radius: 3px; }\n .sidebar-scroll::-webkit-scrollbar { width: 4px; }\n .sidebar-scroll::-webkit-scrollbar-track { background: transparent; }\n .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: 2px; }\n\n @keyframes fadeSlideIn {\n 0% { opacity: 0; transform: translateY(12px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n .fade-slide-in {\n animation: fadeSlideIn 0.35s var(--ease-standard) forwards;\n }\n </style>\n</head>\n<body style=\"background-color: var(--color-background); color: var(--color-foreground);\" class=\"font-body\">\n <a href=\"#main\" class=\"skip-link\">跳到主内容</a>\n\n <!-- ===== NAV ===== -->\n <nav id=\"nav\" class=\"fixed top-0 left-0 right-0 z-50\" style=\"background-color: var(--color-background); height: 72px; border-bottom: 1px solid var(--color-hairline);\">\n <div class=\"max-w-[1200px] mx-auto px-4 lg:px-6 h-full flex items-center justify-between\">\n <a href=\"#\" class=\"flex items-center gap-2 flex-shrink-0\" style=\"color: var(--color-foreground);\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"var(--color-primary)\"/>\n <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\" stroke=\"var(--color-primary)\" stroke-width=\"1.5\"/>\n <line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\" stroke=\"var(--color-primary)\" stroke-width=\"1.5\"/>\n <line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\" stroke=\"var(--color-primary)\" stroke-width=\"1.5\"/>\n <line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\" stroke=\"var(--color-primary)\" stroke-width=\"1.5\"/>\n <circle cx=\"12\" cy=\"12\" r=\"8\" stroke=\"var(--color-primary)\" stroke-width=\"0.75\" opacity=\"0.3\"/>\n <circle cx=\"12\" cy=\"12\" r=\"12\" stroke=\"var(--color-primary)\" stroke-width=\"0.5\" opacity=\"0.12\"/>\n </svg>\n <span class=\"font-heading text-2xl\" style=\"letter-spacing: -0.02em;\">AgWeather</span>\n </a>\n\n <div class=\"hide-mobile flex items-center gap-8 lg:gap-10 mx-2 lg:mx-4\">\n <a href=\"#\" class=\"nav-link\" style=\"color: var(--color-foreground); padding: 0.25rem 0; transition: color var(--dur-base) var(--ease-standard);\">首页</a>\n <a href=\"#region-weather\" class=\"nav-link\" style=\"color: var(--color-foreground); padding: 0.25rem 0; transition: color var(--dur-base) var(--ease-standard);\">区域天气</a>\n <a href=\"#crop-weather\" class=\"nav-link nav-link-active\" style=\"color: var(--color-primary); padding: 0.25rem 0; transition: color var(--dur-base) var(--ease-standard);\">作物天气</a>\n <a href=\"#contact\" class=\"nav-link\" style=\"color: var(--color-foreground); padding: 0.25rem 0; transition: color var(--dur-base) var(--ease-standard);\">联系我们</a>\n </div>\n\n <div class=\"hide-mobile flex items-center gap-3 flex-shrink-0\">\n <a href=\"#\" class=\"btn-ghost nav-link\" style=\"font-size: 0.95rem;\">登录</a>\n <a href=\"#cta\" class=\"btn-primary nav-link\" style=\"font-size: 0.95rem;\">免费使用</a>\n </div>\n\n <button class=\"hide-desktop btn-ghost\" aria-label=\"打开菜单\" onclick=\"toggleMobile()\">\n <i class=\"fa-solid fa-bars\" style=\"font-size: 1.375rem;\"></i>\n </button>\n </div>\n\n <div id=\"mobileMenu\" class=\"mobile-menu-closed fixed top-0 right-0 h-full w-[85vw] z-50\" style=\"background-color: var(--color-background); border-left: 1px solid var(--color-hairline); transition: transform var(--dur-expressive) var(--ease-standard);\">\n <div class=\"p-6 pt-20 flex flex-col gap-5\">\n <div class=\"flex items-center justify-between mb-2\">\n <span class=\"font-heading text-2xl\" style=\"letter-spacing: -0.02em;\">AgWeather</span>\n <button class=\"btn-ghost\" onclick=\"toggleMobile()\">\n <i class=\"fa-solid fa-xmark\" style=\"font-size: 1.375rem;\"></i>\n </button>\n </div>\n <hr style=\"border-color: var(--color-hairline);\">\n <a href=\"#\" class=\"nav-link text-lg\" style=\"color: var(--color-foreground);\">首页</a>\n <a href=\"#region-weather\" class=\"nav-link text-lg\" style=\"color: var(--color-foreground);\">区域天气</a>\n <a href=\"#crop-weather\" class=\"nav-link text-lg\" style=\"color: var(--color-primary); font-weight: 600;\">作物天气</a>\n <a href=\"#contact\" class=\"nav-link text-lg\" style=\"color: var(--color-foreground);\">联系我们</a>\n <hr style=\"border-color: var(--color-hairline);\">\n <a href=\"#\" class=\"btn-ghost nav-link text-lg\">登录</a>\n <a href=\"#cta\" class=\"btn-primary nav-link text-lg text-center\">免费使用</a>\n </div>\n </div>\n </nav>\n\n <main id=\"main\" style=\"padding-top: 72px;\">\n\n <!-- ===== HERO ===== -->\n <section class=\"hero-split max-w-[1200px] mx-auto px-6 flex items-center gap-12\" style=\"padding-top: 80px; padding-bottom: 80px; min-height: 90dvh;\">\n <div class=\"flex-1 space-y-6\">\n <span class=\"inline-flex items-center gap-1.5\" style=\"background-color: var(--color-primary); color: var(--color-on-primary); border-radius: 9999px; padding: 6px 14px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;\">\n <i class=\"fa-solid fa-cloud-sun\" style=\"font-size: 0.7rem;\"></i>\n 精准农业气象服务\n </span>\n <h1 class=\"display-xl\" style=\"color: var(--color-foreground);\">\n 让每一场雨\n <br>\n <span style=\"color: var(--color-primary);\">都恰到好处</span>\n </h1>\n <p class=\"body-md\" style=\"color: var(--color-body); max-width: 480px;\">\n AgWeather 为农业量身打造的气象服务平台——结合卫星遥感与地面站数据,提供农田级天气预报、灾害预警与作物生长建议。\n </p>\n <div class=\"flex flex-wrap gap-3 pt-2\">\n <a href=\"#cta\" class=\"btn-primary\" style=\"padding: 0.85rem 1.5rem; font-size: 0.95rem;\">免费注册</a>\n <a href=\"#crop-weather\" class=\"btn-secondary\" style=\"padding: 0.85rem 1.5rem; font-size: 0.95rem;\">查看作物天气</a>\n </div>\n </div>\n\n <div class=\"flex-1\">\n <div class=\"code-window\" style=\"box-shadow: 0 12px 32px rgba(20,20,19,0.1);\">\n <div class=\"code-window-header\">\n <span class=\"code-window-dot\" style=\"background: #ff5f56;\"></span>\n <span class=\"code-window-dot\" style=\"background: #ffbd2e;\"></span>\n <span class=\"code-window-dot\" style=\"background: #27c93f;\"></span>\n <span class=\"code text-xs\" style=\"color: var(--color-on-dark-soft); margin-left: 8px;\">agweather — 作物监测</span>\n </div>\n <div class=\"code-window-body custom-scrollbar\">\n <div class=\"flex items-start justify-between mb-6\">\n <div>\n <p class=\"title-sm\" style=\"color: var(--color-on-dark);\">黑龙江省·建三江农场 · 玉米</p>\n <p class=\"caption\" style=\"color: var(--color-on-dark-soft);\">生长阶段: 拔节期 | 更新于 2026-05-29</p>\n </div>\n <div style=\"color: var(--color-success);\">\n <i class=\"fa-solid fa-circle\" style=\"font-size: 0.75rem;\"></i>\n </div>\n </div>\n\n <div class=\"flex items-end gap-4 mb-6\">\n <span style=\"font-size: 3rem; line-height: 1; font-weight: 400; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; letter-spacing: -0.02em; color: var(--color-on-dark);\">26.3</span>\n <span class=\"display-sm\" style=\"color: var(--color-on-dark-soft);\">°C</span>\n <span class=\"caption ml-auto\" style=\"color: var(--color-on-dark-soft);\">适宜 22-30°C</span>\n </div>\n\n <div class=\"grid gap-3\" style=\"grid-template-columns: 1fr 1fr;\">\n <div style=\"border-top: 1px solid var(--color-surface-dark-elevated); padding-top: 10px;\">\n <p class=\"caption\" style=\"color: var(--color-on-dark-soft);\">土壤湿度</p>\n <div class=\"progress-bar mt-1\" style=\"background: var(--color-surface-dark-elevated);\">\n <div class=\"progress-fill\" style=\"width: 68%; background: var(--color-info);\"></div>\n </div>\n <p class=\"code mt-1\" style=\"color: var(--color-on-dark); font-size: 0.8rem;\">68% · 良好</p>\n </div>\n <div style=\"border-top: 1px solid var(--color-surface-dark-elevated); padding-top: 10px;\">\n <p class=\"caption\" style=\"color: var(--color-on-dark-soft);\">积温进度</p>\n <div class=\"progress-bar mt-1\" style=\"background: var(--color-surface-dark-elevated);\">\n <div class=\"progress-fill\" style=\"width: 52%; background: var(--color-accent);\"></div>\n </div>\n <p class=\"code mt-1\" style=\"color: var(--color-on-dark); font-size: 0.8rem;\">52% · 1800/3500°C</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ===== CROP WEATHER SECTION ===== -->\n <section id=\"crop-weather\" style=\"padding-top: 96px; padding-bottom: 96px; background-color: var(--color-surface-soft);\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"text-center mb-10 scroll-reveal\">\n <h2 class=\"display-lg\" style=\"color: var(--color-foreground);\">作物天气</h2>\n <p class=\"body-md mt-3\" style=\"color: var(--color-body); max-width: 500px; margin-left: auto; margin-right: auto;\">选择作物品种，查看当前生长阶段与气象条件</p>\n </div>\n\n <div class=\"crop-layout flex gap-0 scroll-reveal\" style=\"background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 16px; overflow: hidden; min-height: 520px;\">\n <!-- Left Sidebar -->\n <div class=\"crop-sidebar sidebar-scroll\" style=\"width: 220px; flex-shrink: 0; border-right: 1px solid var(--color-hairline); overflow-y: auto; padding: 12px 0;\">\n <div id=\"cropList\" class=\"crop-sidebar-inner\" style=\"display: flex; flex-direction: column; gap: 2px;\"></div>\n </div>\n\n <!-- Right Content -->\n <div class=\"crop-right flex-1 flex flex-col\">\n <!-- Top: Crop header + stage -->\n <div id=\"cropDetailHeader\" style=\"padding: 24px 28px 16px; border-bottom: 1px solid var(--color-hairline);\">\n <div class=\"flex flex-wrap items-center justify-between gap-4\">\n <div>\n <h3 id=\"cropNameDisplay\" class=\"display-sm\" style=\"color: var(--color-foreground); margin-bottom: 4px;\">玉米</h3>\n <div class=\"flex flex-wrap items-center gap-3\">\n <span id=\"cropStageBadge\" class=\"stage-indicator\" style=\"background-color: var(--color-success); color: white;\">\n <i class=\"fa-solid fa-seedling\" style=\"font-size: 0.7rem;\"></i>\n 拔节期\n </span>\n <span id=\"cropStatusBadge\" class=\"caption\" style=\"color: var(--color-muted);\">\n <i class=\"fa-solid fa-circle\" style=\"color: var(--color-success); font-size: 0.5rem;\"></i>\n 生长正常\n </span>\n </div>\n </div>\n <div class=\"text-right\">\n <p class=\"caption\" style=\"color: var(--color-muted);\">当前气温</p>\n <p id=\"cropTempDisplay\" style=\"font-size: 2rem; font-weight: 400; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; line-height: 1; letter-spacing: -0.02em; color: var(--color-foreground);\">26.3<span style=\"font-size: 0.4em; color: var(--color-muted);\">°C</span></p>\n <p id=\"cropTempRange\" class=\"caption\" style=\"color: var(--color-muted);\">适宜 22-30°C</p>\n </div>\n </div>\n </div>\n\n <!-- Middle: Metrics Grid -->\n <div id=\"cropMetrics\" style=\"padding: 20px 28px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\"></div>\n\n <!-- Bottom: Advice + Chart hint -->\n <div style=\"padding: 16px 28px 24px; border-top: 1px solid var(--color-hairline); margin-top: auto;\">\n <div id=\"cropAdvice\" style=\"background-color: var(--color-card); border-radius: 10px; padding: 16px 20px;\">\n <div class=\"flex items-start gap-3\">\n <i class=\"fa-solid fa-lightbulb\" style=\"color: var(--color-accent); font-size: 1.125rem; margin-top: 2px;\"></i>\n <div>\n <p class=\"title-sm\" style=\"color: var(--color-foreground); margin-bottom: 4px;\">农事建议</p>\n <p id=\"cropAdviceText\" class=\"body-sm\" style=\"color: var(--color-body);\">及时追施拔节肥，注意玉米螟虫害防治，保持土壤墒情。</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ===== CROP DATA PLATFORM ===== -->\n <section style=\"padding-top: 96px; padding-bottom: 96px; background-color: var(--color-surface-dark);\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"flex flex-col lg:flex-row items-center gap-12 scroll-reveal\">\n <div class=\"flex-1 space-y-6\">\n <h2 class=\"display-md\" style=\"color: var(--color-on-dark);\">作物生长模型</h2>\n <p class=\"title-md\" style=\"color: var(--color-on-dark-soft);\">为每类作物计算最佳生长窗口</p>\n <p class=\"body-md\" style=\"color: var(--color-on-dark-soft);\">结合积温、降水与土壤湿度数据，为 8 大主要作物提供播种、灌溉与收获的精准建议。</p>\n <div class=\"flex flex-wrap gap-3 pt-2\">\n <a href=\"#\" class=\"btn-primary\">查看作物日历</a>\n <a href=\"#\" class=\"btn-secondary\" style=\"background-color: var(--color-surface-dark-elevated); color: var(--color-on-dark); border-color: var(--color-surface-dark-elevated);\">了解模型算法</a>\n </div>\n </div>\n <div class=\"flex-1\">\n <div class=\"code-window\" style=\"border: 1px solid var(--color-surface-dark-elevated);\">\n <div class=\"code-window-header\">\n <span class=\"code-window-dot\" style=\"background: #ff5f56;\"></span>\n <span class=\"code-window-dot\" style=\"background: #ffbd2e;\"></span>\n <span class=\"code-window-dot\" style=\"background: #27c93f;\"></span>\n <span class=\"code text-xs\" style=\"color: var(--color-on-dark-soft); margin-left: 8px;\">agweather — 作物模型 API</span>\n </div>\n <div class=\"code-window-body custom-scrollbar\">\n <div class=\"code-line\" style=\"display: flex; gap: 16px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.875rem;\">\n <span style=\"color: var(--color-on-dark-soft); user-select: none; min-width: 24px; text-align: right;\">1</span>\n <span style=\"color: var(--color-on-dark); white-space: pre;\"><span style=\"color: #c792ea;\">import</span> agweather <span style=\"color: #c792ea;\">as</span> aw</span>\n </div>\n <div class=\"code-line\" style=\"display: flex; gap: 16px;\">\n <span style=\"color: var(--color-on-dark-soft); user-select: none; min-width: 24px; text-align: right;\">2</span>\n <span style=\"color: var(--color-on-dark); white-space: pre;\"></span>\n </div>\n <div class=\"code-line\" style=\"display: flex; gap: 16px;\">\n <span style=\"color: var(--color-on-dark-soft); user-select: none; min-width: 24px; text-align: right;\">3</span>\n <span style=\"color: var(--color-on-dark); white-space: pre;\"><span style=\"color: #546e7a; font-style: italic;\"># 获取玉米的生长阶段气象数据</span></span>\n </div>\n <div class=\"code-line\" style=\"display: flex; gap: 16px;\">\n <span style=\"color: var(--color-on-dark-soft); user-select: none; min-width: 24px; text-align: right;\">4</span>\n <span style=\"color: var(--color-on-dark); white-space: pre;\">field = aw.<span style=\"color: #82aaff;\">get_field</span>(lat=<span style=\"color: #f78c6c;\">47.32</span>, lng=<span style=\"color: #f78c6c;\">132.68</span>, crop=<span style=\"color: #c3e88d;\">\"corn\"</span>)</span>\n </div>\n <div class=\"code-line\" style=\"display: flex; gap: 16px;\">\n <span style=\"color: var(--color-on-dark-soft); user-select: none; min-width: 24px; text-align: right;\">5</span>\n <span style=\"color: var(--color-on-dark); white-space: pre;\">advisory = field.<span style=\"color: #82aaff;\">growth_advisory</span>()</span>\n </div>\n <div class=\"code-line\" style=\"display: flex; gap: 16px;\">\n <span style=\"color: var(--color-on-dark-soft); user-select: none; min-width: 24px; text-align: right;\">6</span>\n <span style=\"color: var(--color-on-dark); white-space: pre;\"><span style=\"color: #82aaff;\">print</span>(advisory.summary)</span>\n </div>\n <div class=\"code-line\" style=\"display: flex; gap: 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-surface-dark-elevated);\">\n <span style=\"color: var(--color-success); user-select: none; min-width: 24px; text-align: right;\">></span>\n <span style=\"color: var(--color-success); white-space: pre;\">[玉米·拔节期] 当前长势良好，7日后进入抽雄期</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ===== CONTACT ===== -->\n <section id=\"contact\" style=\"padding-top: 96px; padding-bottom: 96px; background-color: var(--color-card);\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"text-center mb-12 scroll-reveal\">\n <h2 class=\"display-lg\" style=\"color: var(--color-foreground);\">联系我们</h2>\n <p class=\"body-md mt-4\" style=\"color: var(--color-body); max-width: 500px; margin-left: auto; margin-right: auto;\">无论您是种植户、农业企业还是政府单位，我们都很乐意与您交流</p>\n </div>\n <div class=\"grid gap-8\" style=\"grid-template-columns: 1fr 1fr;\">\n <div class=\"space-y-6 scroll-reveal\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-10 h-10 flex items-center justify-center rounded-lg flex-shrink-0\" style=\"background-color: var(--color-primary); color: var(--color-on-primary);\">\n <i class=\"fa-solid fa-envelope\" style=\"font-size: 1rem;\"></i>\n </div>\n <div>\n <h4 class=\"title-sm mb-1\" style=\"color: var(--color-foreground);\">邮箱</h4>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">contact@agweather.com</p>\n </div>\n </div>\n <div class=\"flex items-start gap-4\">\n <div class=\"w-10 h-10 flex items-center justify-center rounded-lg flex-shrink-0\" style=\"background-color: var(--color-primary); color: var(--color-on-primary);\">\n <i class=\"fa-solid fa-phone\" style=\"font-size: 1rem;\"></i>\n </div>\n <div>\n <h4 class=\"title-sm mb-1\" style=\"color: var(--color-foreground);\">电话</h4>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">400-888-AgWeather</p>\n </div>\n </div>\n <div class=\"flex items-start gap-4\">\n <div class=\"w-10 h-10 flex items-center justify-center rounded-lg flex-shrink-0\" style=\"background-color: var(--color-primary); color: var(--color-on-primary);\">\n <i class=\"fa-solid fa-location-dot\" style=\"font-size: 1rem;\"></i>\n </div>\n <div>\n <h4 class=\"title-sm mb-1\" style=\"color: var(--color-foreground);\">地址</h4>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">北京市海淀区中关村科技园 AgWeather 大厦</p>\n </div>\n </div>\n </div>\n <div class=\"scroll-reveal\">\n <form onsubmit=\"event.preventDefault(); alert('感谢您的留言！');\" class=\"space-y-4\">\n <div>\n <label for=\"name2\" class=\"caption\" style=\"color: var(--color-body); display: block; margin-bottom: 4px;\">姓名</label>\n <input type=\"text\" id=\"name2\" placeholder=\"请输入您的姓名\" class=\"w-full\" style=\"background-color: var(--color-background); color: var(--color-foreground); border: 1px solid var(--color-hairline); border-radius: 8px; padding: 10px 14px; height: 40px; font-size: 1rem; font-family: 'Inter', sans-serif;\">\n </div>\n <div>\n <label for=\"email3\" class=\"caption\" style=\"color: var(--color-body); display: block; margin-bottom: 4px;\">邮箱</label>\n <input type=\"email\" id=\"email3\" placeholder=\"请输入您的邮箱\" class=\"w-full\" style=\"background-color: var(--color-background); color: var(--color-foreground); border: 1px solid var(--color-hairline); border-radius: 8px; padding: 10px 14px; height: 40px; font-size: 1rem; font-family: 'Inter', sans-serif;\">\n </div>\n <div>\n <label for=\"msg2\" class=\"caption\" style=\"color: var(--color-body); display: block; margin-bottom: 4px;\">留言</label>\n <textarea id=\"msg2\" rows=\"4\" placeholder=\"请描述您的需求或问题\" class=\"w-full custom-scrollbar\" style=\"background-color: var(--color-background); color: var(--color-foreground); border: 1px solid var(--color-hairline); border-radius: 8px; padding: 10px 14px; font-size: 1rem; font-family: 'Inter', sans-serif; resize: vertical;\"></textarea>\n </div>\n <button type=\"submit\" class=\"btn-primary w-full justify-center\">发送留言</button>\n </form>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ===== FOOTER ===== -->\n <footer style=\"background-color: var(--color-surface-dark); padding-top: 64px; padding-bottom: 64px;\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"footer-grid grid gap-8\" style=\"grid-template-columns: repeat(4, 1fr);\">\n <div>\n <div class=\"flex items-center gap-2 mb-4\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"var(--color-on-dark)\"/>\n <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\" stroke=\"var(--color-on-dark)\" stroke-width=\"1.5\"/>\n <line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\" stroke=\"var(--color-on-dark)\" stroke-width=\"1.5\"/>\n <line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\" stroke=\"var(--color-on-dark)\" stroke-width=\"1.5\"/>\n <line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\" stroke=\"var(--color-on-dark)\" stroke-width=\"1.5\"/>\n </svg>\n <span class=\"title-sm\" style=\"color: var(--color-on-dark);\">AgWeather</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-on-dark-soft);\">精准农业气象服务平台</p>\n </div>\n <div>\n <h4 class=\"caption-uppercase mb-4\" style=\"color: var(--color-on-dark-soft);\">产品</h4>\n <ul class=\"space-y-2 body-sm\" style=\"color: var(--color-on-dark-soft);\">\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">气象监测</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">灾害预警</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">作物模型</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">数据 API</a></li>\n </ul>\n </div>\n <div>\n <h4 class=\"caption-uppercase mb-4\" style=\"color: var(--color-on-dark-soft);\">公司</h4>\n <ul class=\"space-y-2 body-sm\" style=\"color: var(--color-on-dark-soft);\">\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">关于我们</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">新闻</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">加入我们</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">合作伙伴</a></li>\n </ul>\n </div>\n <div>\n <h4 class=\"caption-uppercase mb-4\" style=\"color: var(--color-on-dark-soft);\">资源</h4>\n <ul class=\"space-y-2 body-sm\" style=\"color: var(--color-on-dark-soft);\">\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">帮助中心</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">API 文档</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">社区论坛</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">服务状态</a></li>\n </ul>\n </div>\n </div>\n <div class=\"flex flex-col sm:flex-row justify-between items-center gap-4 mt-12 pt-8\" style=\"border-top: 1px solid var(--color-surface-dark-elevated);\">\n <div class=\"flex flex-wrap gap-4 body-sm\" style=\"color: var(--color-on-dark-soft);\">\n <a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">隐私政策</a>\n <a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">服务条款</a>\n <a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">数据安全</a>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-on-dark-soft);\">© 2026 AgWeather. All rights reserved.</p>\n </div>\n </div>\n </footer>\n </main>\n\n <script>\n // ===== Crop Data =====\n const cropData = {\n '玉米': {\n icon: 'fa-solid fa-seedling',\n stage: '拔节期',\n stageColor: '#5db872',\n temp: 26.3,\n tempRange: '22-30°C',\n status: '生长正常',\n statusColor: '#5db872',\n metrics: [\n { label: '土壤湿度', value: '68%', detail: '良好', progress: 68, color: '#5db8a6' },\n { label: '积温进展', value: '1800°C', detail: '52%·目标3500°C', progress: 52, color: '#e8a55a' },\n { label: '降水量', value: '82mm', detail: '本月累计', progress: 60, color: '#5db8a6' },\n { label: '日照时长', value: '10.2h', detail: '今日', progress: 85, color: '#e8a55a' },\n { label: '风速', value: '3.2m/s', detail: '适宜', progress: 40, color: '#6c6a64' },\n { label: '病害风险', value: '低', detail: '注意玉米螟', progress: 25, color: '#5db872' }\n ],\n advice: '及时追施拔节肥，注意玉米螟虫害防治，保持土壤墒情。未来3天无强降雨，适合田间作业。'\n },\n '水稻': {\n icon: 'fa-solid fa-leaf',\n stage: '分蘖期',\n stageColor: '#5db872',\n temp: 28.5,\n tempRange: '20-32°C',\n status: '长势旺盛',\n statusColor: '#5db872',\n metrics: [\n { label: '土壤湿度', value: '78%', detail: '水层3-5cm', progress: 78, color: '#5db8a6' },\n { label: '积温进展', value: '2200°C', detail: '55%·目标4000°C', progress: 55, color: '#e8a55a' },\n { label: '降水量', value: '128mm', detail: '本月累计', progress: 75, color: '#5db8a6' },\n { label: '日照时长', value: '8.5h', detail: '今日', progress: 70, color: '#e8a55a' },\n { label: '风速', value: '2.1m/s', detail: '微风适宜', progress: 25, color: '#6c6a64' },\n { label: '病害风险', value: '中', detail: '注意稻瘟病', progress: 50, color: '#d4a017' }\n ],\n advice: '保持田间水层3-5cm，适时追施分蘖肥。注意监测稻瘟病发生，可提前喷施预防药剂。'\n },\n '小麦': {\n icon: 'fa-solid fa-wheat-awn',\n stage: '灌浆期',\n stageColor: '#e8a55a',\n temp: 22.1,\n tempRange: '15-25°C',\n status: '注意干热风',\n statusColor: '#d4a017',\n metrics: [\n { label: '土壤湿度', value: '55%', detail: '偏低', progress: 55, color: '#d4a017' },\n { label: '积温进展', value: '1600°C', detail: '70%·目标2300°C', progress: 70, color: '#e8a55a' },\n { label: '降水量', value: '48mm', detail: '本月累计', progress: 35, color: '#5db8a6' },\n { label: '日照时长', value: '11.0h', detail: '今日', progress: 92, color: '#e8a55a' },\n { label: '风速', value: '5.8m/s', detail: '偏大', progress: 70, color: '#d4a017' },\n { label: '病害风险', value: '中', detail: '防锈病', progress: 45, color: '#d4a017' }\n ],\n advice: '注意预防干热风危害，适时灌水增加田间湿度。监测条锈病和白粉病，发现中心病株及时用药。'\n },\n '大豆': {\n icon: 'fa-solid fa-seedling',\n stage: '开花结荚期',\n stageColor: '#5db872',\n temp: 24.8,\n tempRange: '20-28°C',\n status: '生长正常',\n statusColor: '#5db872',\n metrics: [\n { label: '土壤湿度', value: '62%', detail: '良好', progress: 62, color: '#5db8a6' },\n { label: '积温进展', value: '2000°C', detail: '60%·目标3300°C', progress: 60, color: '#e8a55a' },\n { label: '降水量', value: '72mm', detail: '本月累计', progress: 55, color: '#5db8a6' },\n { label: '日照时长', value: '9.0h', detail: '今日', progress: 75, color: '#e8a55a' },\n { label: '风速', value: '2.8m/s', detail: '适宜', progress: 30, color: '#6c6a64' },\n { label: '病害风险', value: '低', detail: '注意豆荚螟', progress: 30, color: '#5db872' }\n ],\n advice: '开花结荚期需水量大，保持土壤湿润。追施钾肥提高结荚率，注意防治豆荚螟和食心虫。'\n },\n '棉花': {\n icon: 'fa-solid fa-seedling',\n stage: '现蕾期',\n stageColor: '#5db872',\n temp: 30.2,\n tempRange: '25-35°C',\n status: '长势良好',\n statusColor: '#5db872',\n metrics: [\n { label: '土壤湿度', value: '52%', detail: '偏低', progress: 52, color: '#d4a017' },\n { label: '积温进展', value: '2600°C', detail: '65%·目标4000°C', progress: 65, color: '#e8a55a' },\n { label: '降水量', value: '35mm', detail: '本月累计', progress: 25, color: '#5db8a6' },\n { label: '日照时长', value: '11.5h', detail: '充足', progress: 96, color: '#e8a55a' },\n { label: '风速', value: '3.5m/s', detail: '适宜', progress: 40, color: '#6c6a64' },\n { label: '病害风险', value: '中', detail: '注意棉铃虫', progress: 55, color: '#d4a017' }\n ],\n advice: '及时整枝去叶，保持通风透光。高温天气注意灌溉，防治棉铃虫和红蜘蛛，追施花铃肥。'\n },\n '马铃薯': {\n icon: 'fa-solid fa-seedling',\n stage: '块茎膨大期',\n stageColor: '#5db872',\n temp: 19.5,\n tempRange: '15-22°C',\n status: '生长正常',\n statusColor: '#5db872',\n metrics: [\n { label: '土壤湿度', value: '65%', detail: '良好', progress: 65, color: '#5db8a6' },\n { label: '积温进展', value: '1200°C', detail: '75%·目标1600°C', progress: 75, color: '#e8a55a' },\n { label: '降水量', value: '68mm', detail: '本月累计', progress: 50, color: '#5db8a6' },\n { label: '日照时长', value: '8.0h', detail: '今日', progress: 67, color: '#e8a55a' },\n { label: '风速', value: '2.5m/s', detail: '适宜', progress: 30, color: '#6c6a64' },\n { label: '病害风险', value: '高', detail: '注意晚疫病', progress: 75, color: '#c64545' }\n ],\n advice: '块茎膨大期注意培土防青头，保持土壤湿润但忌积水。晚疫病高发期，建议喷施保护性杀菌剂。'\n },\n '油菜': {\n icon: 'fa-solid fa-seedling',\n stage: '角果发育期',\n stageColor: '#e8a55a',\n temp: 16.2,\n tempRange: '10-20°C',\n status: '接近成熟',\n statusColor: '#e8a55a',\n metrics: [\n { label: '土壤湿度', value: '58%', detail: '偏低', progress: 58, color: '#d4a017' },\n { label: '积温进展', value: '1400°C', detail: '85%·目标1650°C', progress: 85, color: '#e8a55a' },\n { label: '降水量', value: '42mm', detail: '本月累计', progress: 30, color: '#5db8a6' },\n { label: '日照时长', value: '7.0h', detail: '今日', progress: 58, color: '#e8a55a' },\n { label: '风速', value: '4.2m/s', detail: '注意防倒伏', progress: 55, color: '#d4a017' },\n { label: '病害风险', value: '低', detail: '注意菌核病', progress: 20, color: '#5db872' }\n ],\n advice: '角果发育后期注意防倒伏，适当控水促进成熟。关注菌核病发生，适时收获避免角果炸裂落粒。'\n },\n '甘蔗': {\n icon: 'fa-solid fa-seedling',\n stage: '伸长盛期',\n stageColor: '#5db872',\n temp: 32.0,\n tempRange: '25-38°C',\n status: '长势旺盛',\n statusColor: '#5db872',\n metrics: [\n { label: '土壤湿度', value: '72%', detail: '充足', progress: 72, color: '#5db8a6' },\n { label: '积温进展', value: '3000°C', detail: '60%·目标5000°C', progress: 60, color: '#e8a55a' },\n { label: '降水量', value: '158mm', detail: '本月累计', progress: 80, color: '#5db8a6' },\n { label: '日照时长', value: '10.8h', detail: '充足', progress: 90, color: '#e8a55a' },\n { label: '风速', value: '2.0m/s', detail: '微风', progress: 20, color: '#6c6a64' },\n { label: '病害风险', value: '中', detail: '注意螟虫', progress: 45, color: '#d4a017' }\n ],\n advice: '伸长盛期需水需肥量大，及时培土施肥。注意防治甘蔗螟虫和梢腐病，保持田间湿润。'\n }\n };\n\n const cropOrder = ['玉米', '水稻', '小麦', '大豆', '棉花', '马铃薯', '油菜', '甘蔗'];\n let selectedCrop = '玉米';\n\n // Render crop list\n function renderCropList() {\n const list = document.getElementById('cropList');\n list.innerHTML = '';\n cropOrder.forEach(name => {\n const d = cropData[name];\n const active = name === selectedCrop;\n const item = document.createElement('div');\n item.className = 'crop-item' + (active ? ' active' : '');\n item.innerHTML = `\n <div class=\"crop-icon\"><i class=\"${d.icon}\"></i></div>\n <div>\n <div class=\"title-sm\" style=\"font-weight: ${active ? '600' : '500'}; color: inherit;\">${name}</div>\n <div class=\"crop-sub\">${d.stage}</div>\n </div>\n `;\n item.addEventListener('click', () => selectCrop(name));\n list.appendChild(item);\n });\n }\n\n // Select crop\n function selectCrop(name) {\n if (name === selectedCrop) return;\n selectedCrop = name;\n renderCropList();\n updateCropDetail(name);\n }\n\n // Update detail panel\n function updateCropDetail(name) {\n const d = cropData[name];\n if (!d) return;\n\n // Header\n document.getElementById('cropNameDisplay').textContent = name;\n document.getElementById('cropStageBadge').innerHTML = `<i class=\"fa-solid fa-seedling\" style=\"font-size:0.7rem;\"></i> ${d.stage}`;\n document.getElementById('cropStageBadge').style.backgroundColor = d.stageColor;\n document.getElementById('cropStatusBadge').innerHTML = `<i class=\"fa-solid fa-circle\" style=\"color:${d.statusColor};font-size:0.5rem;\"></i> ${d.status}`;\n document.getElementById('cropTempDisplay').innerHTML = `${d.temp}<span style=\"font-size:0.4em;color:var(--color-muted);\">°C</span>`;\n document.getElementById('cropTempRange').textContent = `适宜 ${d.tempRange}`;\n\n // Metrics\n const metricsContainer = document.getElementById('cropMetrics');\n metricsContainer.innerHTML = '';\n d.metrics.forEach(m => {\n const card = document.createElement('div');\n card.className = 'metric-card fade-slide-in';\n card.innerHTML = `\n <div class=\"metric-value\">${m.value}</div>\n <div class=\"metric-label\">${m.label}</div>\n <div class=\"progress-bar mt-1\" style=\"background: var(--color-hairline);\">\n <div class=\"progress-fill\" style=\"width:${m.progress}%;background:${m.color};\"></div>\n </div>\n <div style=\"font-size:0.65rem;color:var(--color-muted-soft);font-family:'Inter',sans-serif;\">${m.detail}</div>\n `;\n metricsContainer.appendChild(card);\n });\n\n // Advice\n document.getElementById('cropAdviceText').textContent = d.advice;\n }\n\n // Mobile toggle\n function toggleMobile() {\n const menu = document.getElementById('mobileMenu');\n menu.classList.toggle('mobile-menu-open');\n menu.classList.toggle('mobile-menu-closed');\n }\n\n // Nav scroll\n window.addEventListener('scroll', () => {\n const nav = document.getElementById('nav');\n if (window.scrollY > 10) nav.classList.add('nav-scrolled');\n else nav.classList.remove('nav-scrolled');\n });\n\n // Scroll reveal\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) entry.target.classList.add('revealed');\n });\n }, { threshold: 0.15 });\n document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));\n\n // Mobile menu close\n document.querySelectorAll('#mobileMenu a').forEach(link => {\n link.addEventListener('click', () => {\n const menu = document.getElementById('mobileMenu');\n menu.classList.add('mobile-menu-closed');\n menu.classList.remove('mobile-menu-open');\n });\n });\n\n // Init\n renderCropList();\n updateCropDetail('玉米');\n </script>\n</body>\n</html>"
},
"next": ["接入实时作物气象数据", "添加生长模型时间轴", "增加病虫害预警模块", "开放API接口文档", "移动端触控优化"],
"breakpoint": "none"
}
```