更新导航栏：新增首页、区域天气等四个菜单，优化响应式布局

By 13121089289, 29 May, 2026

推理

用户希望顶部导航菜单改为横向展示，菜单项为：首页、区域天气、作物天气、联系我们。让我更新HTML，主要是修改导航栏部分和移动端的菜单。

角色

assistant

content

我来更新导航部分，将一级菜单横铺在顶部，并调整对应菜单项。

```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 --color-primary-disabled: #e6dfd8;\n --state-hover: #a9583e;\n --state-active: #8e4730;\n --state-focus: #cc785c;\n --state-disabled: #e6dfd8;\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; letter-spacing: 0; font-family: 'Inter', sans-serif; }\n .title-md { font-size: 1.125rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; font-family: 'Inter', sans-serif; }\n .title-sm { font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; font-family: 'Inter', sans-serif; }\n .body-md { font-size: 1rem; font-weight: 400; line-height: 1.55; letter-spacing: 0; font-family: 'Inter', sans-serif; }\n .body-sm { font-size: 0.875rem; font-weight: 400; line-height: 1.55; letter-spacing: 0; font-family: 'Inter', sans-serif; }\n .caption { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; 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; letter-spacing: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; }\n .button-label { font-size: 0.875rem; font-weight: 500; line-height: 1; letter-spacing: 0; font-family: 'Inter', sans-serif; }\n .nav-link { font-size: 0.875rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; 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: background-color var(--dur-base) var(--ease-standard), transform var(--dur-micro) var(--ease-standard), box-shadow 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); background-color: var(--state-active); }\n .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--color-primary-disabled); color: var(--color-muted); transform: none; box-shadow: none; }\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: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-micro) 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 .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--color-surface-soft); color: var(--color-muted); transform: none; }\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 .btn-ghost:active { transform: scale(0.97); }\n .btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; color: var(--color-muted); transform: none; }\n\n .card-hover {\n transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);\n }\n .card-hover:hover {\n box-shadow: 0 1px 3px rgba(20,20,19,0.08);\n transform: translateY(-2px);\n }\n\n .nav-scrolled {\n box-shadow: 0 1px 3px rgba(20,20,19,0.06);\n }\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 .stagger-item {\n opacity: 0;\n transform: translateY(20px);\n animation: fadeInUp var(--dur-expressive) var(--ease-standard) forwards;\n animation-delay: calc(var(--i, 0) * 40ms);\n }\n @keyframes fadeInUp {\n to { opacity: 1; transform: translateY(0); }\n }\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 {\n opacity: 1;\n transform: translateY(0);\n }\n\n .tabular-nums {\n font-variant-numeric: tabular-nums;\n font-feature-settings: 'tnum' 1;\n }\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\n html { scroll-behavior: smooth; }\n @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }\n\n *:focus-visible {\n outline: 2px solid var(--state-focus);\n outline-offset: 2px;\n border-radius: inherit;\n }\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 }\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 .nav-menu-gap { gap: 1rem; }\n }\n @media (min-width: 1025px) {\n .hide-desktop { display: none !important; }\n .show-desktop { display: flex !important; }\n .nav-menu-gap { gap: 1.75rem; }\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-body-strong: #faf9f5;\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 --color-primary-active: #c47a5e;\n --color-primary-disabled: #3d3d3a;\n }\n }\n\n .weather-card {\n background: var(--color-card);\n border-radius: 12px;\n padding: 1.5rem;\n }\n .weather-temp {\n font-size: clamp(2.5rem, 5vw, 3.5rem);\n font-weight: 400;\n font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--color-foreground);\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 {\n padding: 16px;\n }\n .code-line {\n display: flex;\n gap: 16px;\n }\n .code-line-number {\n color: var(--color-on-dark-soft);\n user-select: none;\n text-align: right;\n min-width: 24px;\n }\n .code-line-content {\n color: var(--color-on-dark);\n white-space: pre;\n }\n .syntax-keyword { color: #c792ea; }\n .syntax-string { color: #c3e88d; }\n .syntax-function { color: #82aaff; }\n .syntax-comment { color: #546e7a; font-style: italic; }\n .syntax-number { color: #f78c6c; }\n .syntax-variable { color: #f07178; }\n\n .nav-link-active {\n position: relative;\n color: var(--color-primary) !important;\n }\n .nav-link-active::after {\n content: '';\n position: absolute;\n bottom: -4px;\n left: 50%;\n transform: translateX(-50%);\n width: 60%;\n height: 2px;\n background-color: var(--color-primary);\n border-radius: 1px;\n }\n\n .custom-scrollbar::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }\n .custom-scrollbar::-webkit-scrollbar-thumb {\n background: var(--color-muted-soft);\n border-radius: 3px;\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 \n <nav id=\"nav\" class=\"fixed top-0 left-0 right-0 z-50\" style=\"background-color: var(--color-background); height: 64px; 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 \n <a href=\"#\" class=\"flex items-center gap-2 flex-shrink-0\" style=\"color: var(--color-foreground);\">\n <svg width=\"24\" height=\"24\" 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-xl\" style=\"letter-spacing: -0.02em; color: var(--color-foreground);\">AgWeather</span>\n </a>\n\n \n <div class=\"hide-mobile flex items-center nav-menu-gap mx-2 lg:mx-4\">\n <a href=\"#\" class=\"nav-link nav-link-active\" style=\"color: var(--color-primary); padding: 0.25rem 0.25rem; transition: color var(--dur-base) var(--ease-standard);\">首页</a>\n <a href=\"#features\" class=\"nav-link\" style=\"color: var(--color-foreground); padding: 0.25rem 0.25rem; transition: color var(--dur-base) var(--ease-standard);\">区域天气</a>\n <a href=\"#crop\" class=\"nav-link\" style=\"color: var(--color-foreground); padding: 0.25rem 0.25rem; 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.25rem; transition: color var(--dur-base) var(--ease-standard);\">联系我们</a>\n </div>\n\n \n <div class=\"hide-mobile flex items-center gap-2 lg:gap-3 flex-shrink-0\">\n <a href=\"#\" class=\"btn-ghost nav-link\">登录</a>\n <a href=\"#cta\" class=\"btn-primary nav-link whitespace-nowrap\">免费使用</a>\n </div>\n\n \n <button class=\"hide-desktop btn-ghost\" aria-label=\"打开菜单\" onclick=\"document.getElementById('mobileMenu').classList.toggle('mobile-menu-open'); document.getElementById('mobileMenu').classList.toggle('mobile-menu-closed');\">\n <i class=\"fa-solid fa-bars\" style=\"font-size: 1.25rem;\"></i>\n </button>\n </div>\n\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-xl\" style=\"letter-spacing: -0.02em; color: var(--color-foreground);\">AgWeather</span>\n <button class=\"btn-ghost\" aria-label=\"关闭菜单\" onclick=\"document.getElementById('mobileMenu').classList.add('mobile-menu-closed'); document.getElementById('mobileMenu').classList.remove('mobile-menu-open');\">\n <i class=\"fa-solid fa-xmark\" style=\"font-size: 1.25rem;\"></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-primary); font-weight: 600;\">首页</a>\n <a href=\"#features\" class=\"nav-link text-lg\" style=\"color: var(--color-foreground);\">区域天气</a>\n <a href=\"#crop\" 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\" style=\"color: var(--color-foreground);\">登录</a>\n <a href=\"#cta\" class=\"btn-primary nav-link text-lg text-center\" style=\"color: var(--color-on-primary);\">免费使用</a>\n </div>\n </div>\n </nav>\n\n <main id=\"main\" style=\"padding-top: 64px;\">\n\n \n <section class=\"hero-split max-w-[1200px] mx-auto px-6 flex items-center gap-12\" style=\"padding-top: 96px; padding-bottom: 96px; min-height: 100dvh;\">\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: 4px 12px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;\">\n <i class=\"fa-solid fa-cloud-sun\" style=\"font-size: 0.625rem;\"></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\">免费注册</a>\n <a href=\"#\" class=\"btn-secondary\">查看演示</a>\n </div>\n </div>\n\n <div class=\"flex-1\">\n \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 \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\n <div class=\"flex items-end gap-4 mb-6\">\n <span class=\"weather-temp\" style=\"color: var(--color-on-dark); font-size: 3.5rem; line-height: 1;\">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\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\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\n <div class=\"flex items-center gap-2 mt-4\" style=\"background-color: rgba(212, 160, 23, 0.12); border: 1px solid rgba(212, 160, 23, 0.25); border-radius: 8px; padding: 8px 12px;\">\n <i class=\"fa-solid fa-triangle-exclamation\" style=\"color: var(--color-warning); font-size: 0.875rem;\"></i>\n <span class=\"code\" style=\"color: var(--color-warning); font-size: 0.75rem;\">黄色预警: 6月1日预计有强对流天气,建议推迟播种</span>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n \n <section id=\"features\" style=\"padding-top: 96px; padding-bottom: 96px;\">\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: 600px; margin-left: auto; margin-right: auto;\">\n AgWeather 将气象科学与农业实践深度结合,为种植决策提供数据支持\n </p>\n </div>\n <div class=\"feature-grid grid gap-6\" style=\"grid-template-columns: repeat(3, 1fr);\">\n <div class=\"card-hover stagger-item\" style=\"--i: 0; background-color: var(--color-card); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"w-10 h-10 flex items-center justify-center rounded-lg mb-4\" style=\"background-color: var(--color-primary); color: var(--color-on-primary);\">\n <i class=\"fa-solid fa-satellite-dish\" style=\"font-size: 1.125rem;\"></i>\n </div>\n <h3 class=\"title-md mb-2\" style=\"color: var(--color-foreground);\">卫星遥感监测</h3>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">融合多源卫星数据与地面气象站网络,以 500 米网格精度覆盖全国耕地,每 10 分钟更新一次数据。</p>\n </div>\n <div class=\"card-hover stagger-item\" style=\"--i: 1; background-color: var(--color-card); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"w-10 h-10 flex items-center justify-center rounded-lg mb-4\" style=\"background-color: var(--color-primary); color: var(--color-on-primary);\">\n <i class=\"fa-solid fa-wheat-awn\" style=\"font-size: 1.125rem;\"></i>\n </div>\n <h3 class=\"title-md mb-2\" style=\"color: var(--color-foreground);\">物候与生长模型</h3>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">基于积温模型与作物物候日历,自动计算播种窗口、灌溉时机与收获预测,覆盖 30+ 主要作物品种。</p>\n </div>\n <div class=\"card-hover stagger-item\" style=\"--i: 2; background-color: var(--color-card); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"w-10 h-10 flex items-center justify-center rounded-lg mb-4\" style=\"background-color: var(--color-primary); color: var(--color-on-primary);\">\n <i class=\"fa-solid fa-bell\" style=\"font-size: 1.125rem;\"></i>\n </div>\n <h3 class=\"title-md mb-2\" style=\"color: var(--color-foreground);\">智能灾害预警</h3>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">提前 72 小时预测霜冻、冰雹、干旱、暴雨等极端天气,推送分级预警与应对建议,降低灾害损失。</p>\n </div>\n </div>\n </div>\n </section>\n\n \n <section id=\"crop\" 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);\">AgWeather 数据平台</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);\">GIS 地图叠加气象图层,实时显示降水雷达、温度分布、土壤湿度及积温趋势,让农场的天气数据一目了然。</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);\">查看 API 文档</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 — 数据分析</span>\n </div>\n <div class=\"code-window-body custom-scrollbar\">\n <div class=\"code-line\">\n <span class=\"code-line-number code\">1</span>\n <span class=\"code-line-content code\"><span class=\"syntax-keyword\">import</span> agweather <span class=\"syntax-keyword\">as</span> aw</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">2</span>\n <span class=\"code-line-content code\"></span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">3</span>\n <span class=\"code-line-content code\"><span class=\"syntax-comment\"># 获取指定农田的微气候数据</span></span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">4</span>\n <span class=\"code-line-content code\">field = aw.<span class=\"syntax-function\">get_field</span>(</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">5</span>\n <span class=\"code-line-content code\"> lat=<span class=\"syntax-number\">47.32</span>, lng=<span class=\"syntax-number\">132.68</span>,</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">6</span>\n <span class=\"code-line-content code\"> crop=<span class=\"syntax-string\">\"rice\"</span>, area_hectares=<span class=\"syntax-number\">120</span></span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">7</span>\n <span class=\"code-line-content code\">)</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">8</span>\n <span class=\"code-line-content code\"></span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">9</span>\n <span class=\"code-line-content code\"><span class=\"syntax-comment\"># 播种建议: 未来 10 天积温预测</span></span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">10</span>\n <span class=\"code-line-content code\">advisory = field.<span class=\"syntax-function\">sowing_advisory</span>()</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">11</span>\n <span class=\"code-line-content code\"><span class=\"syntax-function\">print</span>(advisory.summary)</span>\n </div>\n <div class=\"code-line\" style=\"margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-surface-dark-elevated);\">\n <span class=\"code-line-number code\" style=\"color: var(--color-success);\">></span>\n <span class=\"code-line-content code\" style=\"color: var(--color-success);\">推荐播种窗口: 6月3日-6月5日 (积温可靠度 87%)</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\" style=\"color: var(--color-success);\">></span>\n <span class=\"code-line-content code\" style=\"color: var(--color-success);\">土壤墒情: 良好 | 未来降雨概率: 中等</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n \n <section style=\"padding-top: 96px; padding-bottom: 96px;\">\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: 600px; margin-left: auto; margin-right: auto;\">从大田种植到设施农业,AgWeather 提供针对性解决方案</p>\n </div>\n <div class=\"grid gap-6\" style=\"grid-template-columns: repeat(3, 1fr);\">\n <div class=\"card-hover stagger-item\" style=\"--i: 0; background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"flex items-center gap-3 mb-4\">\n <i class=\"fa-solid fa-leaf\" style=\"color: var(--color-primary); font-size: 1.5rem;\"></i>\n <span class=\"display-sm\" style=\"color: var(--color-foreground);\">大田种植</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">覆盖水稻、小麦、玉米、大豆等主粮作物,提供从播种到收获的全周期气象服务,精准灌溉与施肥窗口建议。</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 mt-4\" style=\"color: var(--color-primary); font-size: 0.875rem; font-weight: 500; text-decoration: none;\">了解更多 <i class=\"fa-solid fa-arrow-right\" style=\"font-size: 0.75rem;\"></i></a>\n </div>\n <div class=\"card-hover stagger-item\" style=\"--i: 1; background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"flex items-center gap-3 mb-4\">\n <i class=\"fa-solid fa-wine-bottle\" style=\"color: var(--color-primary); font-size: 1.5rem;\"></i>\n <span class=\"display-sm\" style=\"color: var(--color-foreground);\">经济作物</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">针对葡萄、茶叶、咖啡、柑橘等高附加值作物,提供微气候分析与霜冻精准预警,守护品质与产量。</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 mt-4\" style=\"color: var(--color-primary); font-size: 0.875rem; font-weight: 500; text-decoration: none;\">了解更多 <i class=\"fa-solid fa-arrow-right\" style=\"font-size: 0.75rem;\"></i></a>\n </div>\n <div class=\"card-hover stagger-item\" style=\"--i: 2; background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"flex items-center gap-3 mb-4\">\n <i class=\"fa-solid fa-warehouse\" style=\"color: var(--color-primary); font-size: 1.5rem;\"></i>\n <span class=\"display-sm\" style=\"color: var(--color-foreground);\">设施农业</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">为温室大棚、智能温室提供室内外联动气象监测,自动控制通风、遮阳、灌溉设备,降低能耗 30%。</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 mt-4\" style=\"color: var(--color-primary); font-size: 0.875rem; font-weight: 500; text-decoration: none;\">了解更多 <i class=\"fa-solid fa-arrow-right\" style=\"font-size: 0.75rem;\"></i></a>\n </div>\n </div>\n </div>\n </section>\n\n \n <section 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=\"stats-grid grid gap-8\" style=\"grid-template-columns: repeat(4, 1fr);\">\n <div class=\"text-center scroll-reveal\">\n <p class=\"display-md tabular-nums\" style=\"color: var(--color-foreground);\">1.2 亿</p>\n <p class=\"caption\" style=\"color: var(--color-muted); margin-top: 4px;\">覆盖农田 (亩)</p>\n </div>\n <div class=\"text-center scroll-reveal\">\n <p class=\"display-md tabular-nums\" style=\"color: var(--color-foreground);\">98.6%</p>\n <p class=\"caption\" style=\"color: var(--color-muted); margin-top: 4px;\">预报准确率</p>\n </div>\n <div class=\"text-center scroll-reveal\">\n <p class=\"display-md tabular-nums\" style=\"color: var(--color-foreground);\">50 万+</p>\n <p class=\"caption\" style=\"color: var(--color-muted); margin-top: 4px;\">注册农户</p>\n </div>\n <div class=\"text-center scroll-reveal\">\n <p class=\"display-md tabular-nums\" style=\"color: var(--color-foreground);\">3,200</p>\n <p class=\"caption\" style=\"color: var(--color-muted); margin-top: 4px;\">合作农场</p>\n </div>\n </div>\n </div>\n </section>\n\n \n <section style=\"padding-top: 96px; padding-bottom: 96px;\">\n <div class=\"max-w-[800px] mx-auto px-6 text-center scroll-reveal\">\n <i class=\"fa-solid fa-quote-left display-md\" style=\"color: var(--color-primary); opacity: 0.3; margin-bottom: 16px;\"></i>\n <blockquote class=\"display-sm\" style=\"color: var(--color-foreground); font-style: italic;\">\n \"用了 AgWeather 之后,我再也不用凭经验猜天气了。去年根据他们的播种建议提前了一周,亩产增加了 15%。这不仅仅是天气预报——这是我们的生产指南。\"\n </blockquote>\n <div class=\"flex items-center justify-center gap-3 mt-8\">\n <div class=\"w-10 h-10 rounded-full flex items-center justify-center\" style=\"background-color: var(--color-primary); color: var(--color-on-primary); font-size: 0.875rem; font-weight: 500;\">陈</div>\n <div class=\"text-left\">\n <p class=\"title-sm\" style=\"color: var(--color-foreground);\">陈建国</p>\n <p class=\"caption\" style=\"color: var(--color-muted);\">黑龙江省建三江农场 · 种植大户</p>\n </div>\n </div>\n </div>\n </section>\n\n \n <section id=\"pricing\" 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 </div>\n <div class=\"pricing-grid grid gap-6\" style=\"grid-template-columns: repeat(3, 1fr);\">\n <div class=\"card-hover stagger-item\" style=\"--i: 0; background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 32px;\" role=\"article\">\n <h3 class=\"title-lg mb-2\" style=\"color: var(--color-foreground);\">基础版</h3>\n <p class=\"display-sm mb-4\" style=\"color: var(--color-foreground);\">免费</p>\n <p class=\"body-sm mb-6\" style=\"color: var(--color-body);\">个人农户的基础气象查询</p>\n <ul class=\"space-y-3 mb-8\" style=\"color: var(--color-body);\">\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 72 小时天气预报</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 基础灾害预警</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 3 个自定义地块</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 社区支持</li>\n </ul>\n <a href=\"#\" class=\"btn-secondary w-full justify-center\">免费注册</a>\n </div>\n <div class=\"card-hover stagger-item\" style=\"--i: 1; background-color: var(--color-surface-dark); border-radius: 12px; padding: 32px; transform: scale(1.02);\" role=\"article\">\n <h3 class=\"title-lg mb-2\" style=\"color: var(--color-on-dark);\">专业版</h3>\n <p class=\"display-sm mb-4\" style=\"color: var(--color-on-dark);\">¥299/年</p>\n <p class=\"body-sm mb-6\" style=\"color: var(--color-on-dark-soft);\">种植大户与合作社首选</p>\n <ul class=\"space-y-3 mb-8\" style=\"color: var(--color-on-dark-soft);\">\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 15 天精准预报</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 智能播种与灌溉建议</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 50 个自定义地块</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 历史气象数据查询</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 短信+App 预警推送</li>\n </ul>\n <a href=\"#\" class=\"btn-primary w-full justify-center\">订阅专业版</a>\n </div>\n <div class=\"card-hover stagger-item\" style=\"--i: 2; background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 32px;\" role=\"article\">\n <h3 class=\"title-lg mb-2\" style=\"color: var(--color-foreground);\">企业版</h3>\n <p class=\"display-sm mb-4\" style=\"color: var(--color-foreground);\">定制报价</p>\n <p class=\"body-sm mb-6\" style=\"color: var(--color-body);\">农业企业与政府单位</p>\n <ul class=\"space-y-3 mb-8\" style=\"color: var(--color-body);\">\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 全功能数据 API</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> GIS 地图集成</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 私有化部署</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 专属客户成功经理</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> SLA 保障 99.9%</li>\n </ul>\n <a href=\"#\" class=\"btn-secondary w-full justify-center\">联系销售</a>\n </div>\n </div>\n </div>\n </section>\n\n \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.25rem; font-size: 0.875rem; font-weight: 500; line-height: 1; min-height: 44px; min-width: 44px; transition: background-color var(--dur-base) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); text-decoration: none;\" onmouseover=\"this.style.backgroundColor='var(--color-surface-soft)'\" onmouseout=\"this.style.backgroundColor='var(--color-background)'\" onfocus=\"this.style.outline='2px solid var(--color-on-primary)'; this.style.outlineOffset='2px'\" onblur=\"this.style.outline='none'\">免费注册 AgWeather</a>\n </div>\n </div>\n </section>\n\n \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: 600px; margin-left: auto; margin-right: auto;\">\n 无论您是种植户、农业企业还是政府单位,我们都很乐意与您交流\n </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 (400-888-2493)</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 class=\"space-y-4\" onsubmit=\"event.preventDefault(); alert('感谢您的留言,我们会尽快与您联系！');\">\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 input-focus\" 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 input-focus\" 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 input-focus 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 \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 // Scroll reveal\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('revealed');\n }\n });\n }, { threshold: 0.15 });\n document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));\n\n // Nav scroll\n window.addEventListener('scroll', () => {\n const nav = document.getElementById('nav');\n if (window.scrollY > 10) {\n nav.classList.add('nav-scrolled');\n } else {\n nav.classList.remove('nav-scrolled');\n }\n });\n\n // Mobile menu close on link click\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 // Active nav link highlight\n const navLinks = document.querySelectorAll('#nav .nav-link');\n navLinks.forEach(link => {\n link.addEventListener('click', function() {\n navLinks.forEach(l => {\n l.classList.remove('nav-link-active');\n if (!l.classList.contains('btn-primary') && !l.classList.contains('btn-ghost')) {\n l.style.color = 'var(--color-foreground)';\n }\n });\n if (!this.classList.contains('btn-primary') && !this.classList.contains('btn-ghost')) {\n this.classList.add('nav-link-active');\n this.style.color = 'var(--color-primary)';\n }\n });\n });\n </script>\n</body>\n</html>"
},
"next": ["接入实时气象数据", "添加区域搜索功能", "增加作物日历组件", "开放API页面", "移动端体验优化"],
"breakpoint": "none"
}
```

total_tokens

68909

summary

更新导航栏：横铺首页、区域天气、作物天气、联系我们四个一级菜单，并优化响应式布局

uiParsing

关闭