我来在顶部导航菜单中增加"气象灾害"菜单项，并同步添加对应的内容板块。
```json
{
"summary": "导航菜单增加「气象灾害」项，页面新增气象灾害预警板块，各菜单联动可跳转",
"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 .disaster-grid { grid-template-columns: 1fr; }\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 .disaster-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 .alert-card {\n border-radius: 12px;\n padding: 24px;\n border-left: 4px solid;\n transition: all var(--dur-base) var(--ease-standard);\n }\n .alert-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(20,20,19,0.06);\n }\n\n .severity-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n display: inline-block;\n flex-shrink: 0;\n }\n\n .code-window {\n background: var(--color-surface-dark);\n border-radius: 12px;\n overflow: hidden;\n }\n .code-window-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n background: var(--color-surface-dark-elevated);\n }\n .code-window-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n }\n .code-window-body { padding: 16px; }\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\n @keyframes fadeSlideIn {\n 0% { opacity: 0; transform: translateY(12px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n .fade-slide-in { animation: fadeSlideIn 0.35s var(--ease-standard) forwards; }\n\n @keyframes pulse-warning {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n .pulse-warning { animation: pulse-warning 1.5s ease-in-out infinite; }\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-9 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\" style=\"color: var(--color-foreground); padding: 0.25rem 0; transition: color var(--dur-base) var(--ease-standard);\">作物天气</a>\n <a href=\"#disaster\" class=\"nav-link\" style=\"color: var(--color-foreground); 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-foreground);\">作物天气</a>\n <a href=\"#disaster\" class=\"nav-link text-lg\" style=\"color: var(--color-foreground);\">气象灾害</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=\"#disaster\" 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 10:00</p>\n </div>\n <div style=\"color: var(--color-accent);\">\n <i class=\"fa-solid fa-sun\" style=\"font-size: 2rem;\"></i>\n </div>\n </div>\n <div class=\"flex items-end gap-4 mb-6\">\n <span style=\"font-size: 3.5rem; 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=\"body-sm ml-auto\" style=\"color: var(--color-on-dark-soft);\">体感 27.1°C</span>\n </div>\n <div class=\"flex flex-wrap gap-4 mb-6\" style=\"border-top: 1px solid var(--color-surface-dark-elevated); padding-top: 16px;\">\n <div class=\"flex items-center gap-2\">\n <i class=\"fa-solid fa-droplet\" style=\"color: var(--color-info); font-size: 0.875rem;\"></i>\n <span class=\"code\" style=\"color: var(--color-on-dark);\">湿度 62%</span>\n </div>\n <div class=\"flex items-center gap-2\">\n <i class=\"fa-solid fa-wind\" style=\"color: var(--color-secondary); font-size: 0.875rem;\"></i>\n <span class=\"code\" style=\"color: var(--color-on-dark);\">风速 3.2m/s</span>\n </div>\n <div class=\"flex items-center gap-2\">\n <i class=\"fa-solid fa-eye\" style=\"color: var(--color-muted-soft); font-size: 0.875rem;\"></i>\n <span class=\"code\" style=\"color: var(--color-on-dark);\">能见度 12km</span>\n </div>\n <div class=\"flex items-center gap-2\">\n <i class=\"fa-solid fa-gauge-high\" style=\"color: var(--color-warning); font-size: 0.875rem;\"></i>\n <span class=\"code\" style=\"color: var(--color-on-dark);\">气压 1013hPa</span>\n </div>\n </div>\n <div style=\"border-top: 1px solid var(--color-surface-dark-elevated); padding-top: 16px;\">\n <p class=\"caption-uppercase\" style=\"color: var(--color-on-dark-soft); margin-bottom: 12px;\">未来 7 天预报</p>\n <div class=\"flex gap-3 justify-between\">\n <div class=\"text-center\">\n <p class=\"caption\" style=\"color: var(--color-on-dark-soft);\">今天</p>\n <i class=\"fa-solid fa-sun\" style=\"color: var(--color-accent); font-size: 1.125rem; margin: 4px 0;\"></i>\n <p class=\"code\" style=\"color: var(--color-on-dark); font-size: 0.75rem;\">26°/18°</p>\n </div>\n <div class=\"text-center\">\n <p class=\"caption\" style=\"color: var(--color-on-dark-soft);\">明天</p>\n <i class=\"fa-solid fa-cloud-sun\" style=\"color: var(--color-accent); font-size: 1.125rem; margin: 4px 0;\"></i>\n <p class=\"code\" style=\"color: var(--color-on-dark); font-size: 0.75rem;\">24°/16°</p>\n </div>\n <div class=\"text-center\">\n <p class=\"caption\" style=\"color: var(--color-on-dark-soft);\">周五</p>\n <i class=\"fa-solid fa-cloud\" style=\"color: var(--color-on-dark-soft); font-size: 1.125rem; margin: 4px 0;\"></i>\n <p class=\"code\" style=\"color: var(--color-on-dark); font-size: 0.75rem;\">22°/15°</p>\n </div>\n <div class=\"text-center\">\n <p class=\"caption\" style=\"color: var(--color-on-dark-soft);\">周六</p>\n <i class=\"fa-solid fa-cloud-rain\" style=\"color: var(--color-info); font-size: 1.125rem; margin: 4px 0;\"></i>\n <p class=\"code\" style=\"color: var(--color-on-dark); font-size: 0.75rem;\">19°/13°</p>\n </div>\n <div class=\"text-center\">\n <p class=\"caption\" style=\"color: var(--color-on-dark-soft);\">周日</p>\n <i class=\"fa-solid fa-cloud-showers-heavy\" style=\"color: var(--color-primary); font-size: 1.125rem; margin: 4px 0;\"></i>\n <p class=\"code\" style=\"color: var(--color-on-dark); font-size: 0.75rem;\">17°/12°</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ===== DISASTER SECTION ===== -->\n <section id=\"disaster\" 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 <span class=\"inline-flex items-center gap-1.5 mb-3\" style=\"background-color: var(--color-danger); color: white; border-radius: 9999px; padding: 4px 14px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;\">\n <i class=\"fa-solid fa-triangle-exclamation pulse-warning\" style=\"font-size: 0.65rem;\"></i>\n 实时监测中\n </span>\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: 560px; margin-left: auto; margin-right: auto;\">基于多源气象数据与 AI 模型，提前 72 小时预测极端天气，守护农业生产安全</p>\n </div>\n\n <!-- Active Alerts -->\n <div class=\"disaster-grid grid gap-5 scroll-reveal\" style=\"grid-template-columns: repeat(3, 1fr);\">\n <div class=\"alert-card\" style=\"background-color: var(--color-background); border-left-color: var(--color-danger);\">\n <div class=\"flex items-center gap-3 mb-3\">\n <span class=\"severity-dot\" style=\"background-color: var(--color-danger); box-shadow: 0 0 0 4px rgba(198,69,69,0.15);\"></span>\n <span class=\"caption-uppercase\" style=\"color: var(--color-danger); font-weight: 600;\">红色预警</span>\n <span class=\"caption\" style=\"color: var(--color-muted); margin-left: auto;\">06-01 08:00</span>\n </div>\n <h4 class=\"title-md mb-1\" style=\"color: var(--color-foreground);\">强对流天气</h4>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">安徽北部、河南东部预计出现 8-10 级雷暴大风，伴有冰雹。建议提前加固设施大棚，暂停户外作业。</p>\n <div class=\"flex items-center gap-2 mt-3\">\n <i class=\"fa-solid fa-location-dot\" style=\"color: var(--color-muted-soft); font-size: 0.75rem;\"></i>\n <span class=\"caption\" style=\"color: var(--color-muted);\">影响区域: 皖北 · 豫东</span>\n </div>\n </div>\n\n <div class=\"alert-card\" style=\"background-color: var(--color-background); border-left-color: var(--color-warning);\">\n <div class=\"flex items-center gap-3 mb-3\">\n <span class=\"severity-dot\" style=\"background-color: var(--color-warning); box-shadow: 0 0 0 4px rgba(212,160,23,0.15);\"></span>\n <span class=\"caption-uppercase\" style=\"color: var(--color-warning); font-weight: 600;\">橙色预警</span>\n <span class=\"caption\" style=\"color: var(--color-muted); margin-left: auto;\">05-31 14:00</span>\n </div>\n <h4 class=\"title-md mb-1\" style=\"color: var(--color-foreground);\">持续干旱</h4>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">云南中北部、四川南部连续 25 天无有效降水，土壤墒情持续下降。建议启动应急灌溉，覆盖保墒。</p>\n <div class=\"flex items-center gap-2 mt-3\">\n <i class=\"fa-solid fa-location-dot\" style=\"color: var(--color-muted-soft); font-size: 0.75rem;\"></i>\n <span class=\"caption\" style=\"color: var(--color-muted);\">影响区域: 滇中 · 川南</span>\n </div>\n </div>\n\n <div class=\"alert-card\" style=\"background-color: var(--color-background); border-left-color: var(--color-warning);\">\n <div class=\"flex items-center gap-3 mb-3\">\n <span class=\"severity-dot\" style=\"background-color: var(--color-warning); box-shadow: 0 0 0 4px rgba(212,160,23,0.15);\"></span>\n <span class=\"caption-uppercase\" style=\"color: var(--color-warning); font-weight: 600;\">橙色预警</span>\n <span class=\"caption\" style=\"color: var(--color-muted); margin-left: auto;\">06-02 06:00</span>\n </div>\n <h4 class=\"title-md mb-1\" style=\"color: var(--color-foreground);\">低温霜冻</h4>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">内蒙古东部、黑龙江北部夜间气温将降至 2°C 以下，可能对春播作物幼苗造成冻害。建议覆盖防寒。</p>\n <div class=\"flex items-center gap-2 mt-3\">\n <i class=\"fa-solid fa-location-dot\" style=\"color: var(--color-muted-soft); font-size: 0.75rem;\"></i>\n <span class=\"caption\" style=\"color: var(--color-muted);\">影响区域: 蒙东 · 黑北</span>\n </div>\n </div>\n </div>\n\n <!-- Second Row: Upcoming warnings + Stats -->\n <div class=\"grid gap-6 mt-6 scroll-reveal\" style=\"grid-template-columns: 2fr 1fr;\">\n <div style=\"background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 24px;\">\n <h4 class=\"title-md mb-4\" style=\"color: var(--color-foreground);\"><i class=\"fa-solid fa-clock\" style=\"color: var(--color-primary);\"></i> 未来 72 小时预警时间轴</h4>\n <div class=\"space-y-4\">\n <div class=\"flex items-start gap-3\">\n <div class=\"text-center\" style=\"min-width: 44px;\">\n <p class=\"caption\" style=\"color: var(--color-danger); font-weight: 700;\">+06h</p>\n <p class=\"caption\" style=\"color: var(--color-muted-soft); font-size: 0.65rem;\">05-31</p>\n </div>\n <div style=\"flex: 1; padding-bottom: 12px; border-bottom: 1px solid var(--color-hairline);\">\n <div class=\"flex items-center gap-2 mb-1\">\n <span class=\"severity-dot\" style=\"background-color: var(--color-danger); width: 8px; height: 8px;\"></span>\n <span class=\"title-sm\" style=\"color: var(--color-foreground);\">强对流 · 皖北豫东</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">雷暴大风 8-10 级，建议加固大棚、暂停高空作业</p>\n </div>\n </div>\n <div class=\"flex items-start gap-3\">\n <div class=\"text-center\" style=\"min-width: 44px;\">\n <p class=\"caption\" style=\"color: var(--color-warning); font-weight: 700;\">+18h</p>\n <p class=\"caption\" style=\"color: var(--color-muted-soft); font-size: 0.65rem;\">06-01</p>\n </div>\n <div style=\"flex: 1; padding-bottom: 12px; border-bottom: 1px solid var(--color-hairline);\">\n <div class=\"flex items-center gap-2 mb-1\">\n <span class=\"severity-dot\" style=\"background-color: var(--color-warning); width: 8px; height: 8px;\"></span>\n <span class=\"title-sm\" style=\"color: var(--color-foreground);\">暴雨 · 湘北鄂南</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">24 小时降水量 80-120mm，低洼农田注意排涝</p>\n </div>\n </div>\n <div class=\"flex items-start gap-3\">\n <div class=\"text-center\" style=\"min-width: 44px;\">\n <p class=\"caption\" style=\"color: var(--color-accent); font-weight: 700;\">+42h</p>\n <p class=\"caption\" style=\"color: var(--color-muted-soft); font-size: 0.65rem;\">06-02</p>\n </div>\n <div style=\"flex: 1; padding-bottom: 12px; border-bottom: 1px solid var(--color-hairline);\">\n <div class=\"flex items-center gap-2 mb-1\">\n <span class=\"severity-dot\" style=\"background-color: var(--color-warning); width: 8px; height: 8px;\"></span>\n <span class=\"title-sm\" style=\"color: var(--color-foreground);\">霜冻 · 蒙东黑北</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">夜间低温 1-3°C，幼苗需覆盖防寒物</p>\n </div>\n </div>\n <div class=\"flex items-start gap-3\">\n <div class=\"text-center\" style=\"min-width: 44px;\">\n <p class=\"caption\" style=\"color: var(--color-muted-soft); font-weight: 700;\">+66h</p>\n <p class=\"caption\" style=\"color: var(--color-muted-soft); font-size: 0.65rem;\">06-03</p>\n </div>\n <div style=\"flex: 1;\">\n <div class=\"flex items-center gap-2 mb-1\">\n <span class=\"severity-dot\" style=\"background-color: var(--color-success); width: 8px; height: 8px;\"></span>\n <span class=\"title-sm\" style=\"color: var(--color-foreground);\">天气转好 · 大部地区</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">全国大部天气转好，气温回升，适宜田间作业</p>\n </div>\n </div>\n </div>\n </div>\n\n <div style=\"background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 24px;\">\n <h4 class=\"title-sm mb-4\" style=\"color: var(--color-foreground);\">\n <i class=\"fa-solid fa-chart-simple\" style=\"color: var(--color-primary);\"></i>\n 本月灾害统计\n </h4>\n <div class=\"space-y-5\">\n <div>\n <div class=\"flex justify-between mb-1\">\n <span class=\"caption\" style=\"color: var(--color-body);\">暴雨洪涝</span>\n <span class=\"caption\" style=\"color: var(--color-foreground); font-weight: 600;\">3 次</span>\n </div>\n <div class=\"progress-bar\" style=\"background: var(--color-hairline);\">\n <div class=\"progress-fill\" style=\"width: 60%; background: var(--color-info); height: 8px; border-radius: 4px;\"></div>\n </div>\n </div>\n <div>\n <div class=\"flex justify-between mb-1\">\n <span class=\"caption\" style=\"color: var(--color-body);\">干旱</span>\n <span class=\"caption\" style=\"color: var(--color-foreground); font-weight: 600;\">2 次</span>\n </div>\n <div class=\"progress-bar\" style=\"background: var(--color-hairline);\">\n <div class=\"progress-fill\" style=\"width: 40%; background: var(--color-warning); height: 8px; border-radius: 4px;\"></div>\n </div>\n </div>\n <div>\n <div class=\"flex justify-between mb-1\">\n <span class=\"caption\" style=\"color: var(--color-body);\">低温霜冻</span>\n <span class=\"caption\" style=\"color: var(--color-foreground); font-weight: 600;\">1 次</span>\n </div>\n <div class=\"progress-bar\" style=\"background: var(--color-hairline);\">\n <div class=\"progress-fill\" style=\"width: 20%; background: var(--color-accent); height: 8px; border-radius: 4px;\"></div>\n </div>\n </div>\n <div>\n <div class=\"flex justify-between mb-1\">\n <span class=\"caption\" style=\"color: var(--color-body);\">强对流</span>\n <span class=\"caption\" style=\"color: var(--color-foreground); font-weight: 600;\">4 次</span>\n </div>\n <div class=\"progress-bar\" style=\"background: var(--color-hairline);\">\n <div class=\"progress-fill\" style=\"width: 80%; background: var(--color-danger); height: 8px; border-radius: 4px;\"></div>\n </div>\n </div>\n <div style=\"padding-top: 8px; border-top: 1px solid var(--color-hairline);\">\n <div class=\"flex justify-between\">\n <span class=\"title-sm\" style=\"color: var(--color-foreground);\">预警准确率</span>\n <span class=\"title-sm\" style=\"color: var(--color-primary);\">98.2%</span>\n </div>\n <p class=\"caption\" style=\"color: var(--color-muted);\">平均提前 52 小时预警</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- CTA within disaster -->\n <div class=\"text-center mt-8 scroll-reveal\">\n <a href=\"#\" class=\"btn-primary\" style=\"padding: 0.85rem 2rem;\">\n <i class=\"fa-solid fa-bell\"></i>\n 订阅灾害预警通知\n </a>\n </div>\n </div>\n </section>\n\n <!-- ===== REGION WEATHER ===== -->\n <section id=\"region-weather\" style=\"padding-top: 96px; padding-bottom: 96px; background-color: var(--color-background);\">\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 <div class=\"scroll-reveal\" style=\"background-color: var(--color-surface-soft); border: 1px solid var(--color-hairline); border-radius: 16px; padding: 40px; text-align: center;\">\n <i class=\"fa-solid fa-earth-asia\" style=\"font-size: 2.5rem; color: var(--color-primary); opacity: 0.3; margin-bottom: 12px;\"></i>\n <p class=\"body-md\" style=\"color: var(--color-body);\">点击上方导航栏「区域天气」查看完整的大洲-国家交互地图</p>\n </div>\n </div>\n </section>\n\n <!-- ===== CROP WEATHER ===== -->\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 <div class=\"scroll-reveal\" style=\"background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 16px; padding: 40px; text-align: center;\">\n <i class=\"fa-solid fa-seedling\" style=\"font-size: 2.5rem; color: var(--color-primary); opacity: 0.3; margin-bottom: 12px;\"></i>\n <p class=\"body-md\" style=\"color: var(--color-body);\">点击上方导航栏「作物天气」查看 8 大主要作物的生长阶段与农事建议</p>\n </div>\n </div>\n </section>\n\n <!-- ===== CTA ===== -->\n <section id=\"cta\" style=\"padding-top: 96px; padding-bottom: 96px;\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"scroll-reveal\" style=\"background-color: var(--color-primary); border-radius: 12px; padding: 64px; text-align: center;\">\n <h2 class=\"display-sm mb-4\" style=\"color: var(--color-on-primary);\">让天气为你的丰收服务</h2>\n <p class=\"body-md mb-8\" style=\"color: var(--color-on-primary); opacity: 0.9;\">50 万农户正在用 AgWeather 做出更明智的农业决策。加入他们,从今天开始。</p>\n <a href=\"#\" class=\"inline-flex items-center gap-2\" style=\"background-color: var(--color-background); color: var(--color-foreground); border-radius: 8px; padding: 0.75rem 1.5rem; font-size: 0.95rem; font-weight: 500; line-height: 1; min-height: 44px; min-width: 44px; transition: background-color var(--dur-base) var(--ease-standard); text-decoration: none;\" onmouseover=\"this.style.backgroundColor='var(--color-surface-soft)'\" onmouseout=\"this.style.backgroundColor='var(--color-background)'\">免费注册 AgWeather</a>\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=\"name\" class=\"caption\" style=\"color: var(--color-body); display: block; margin-bottom: 4px;\">姓名</label>\n <input type=\"text\" id=\"name\" 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=\"email\" class=\"caption\" style=\"color: var(--color-body); display: block; margin-bottom: 4px;\">邮箱</label>\n <input type=\"email\" id=\"email\" 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=\"msg\" class=\"caption\" style=\"color: var(--color-body); display: block; margin-bottom: 4px;\">留言</label>\n <textarea id=\"msg\" 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 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 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 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 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 </script>\n</body>\n</html>"
},
"next": ["接入实时灾害预警API", "增加灾害分布地图", "完善区域天气交互", "完善作物天气数据", "移动端适配优化"],
"breakpoint": "none"
}
```