这是一个完整的交互式区域天气页面，包含左侧大洲/国家导航树和中间地图展示区。
```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: 1rem; 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 .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 .region-layout { flex-direction: column; }\n .region-sidebar { width: 100% !important; max-height: 300px; overflow-y: auto; border-right: none !important; border-bottom: 1px solid var(--color-hairline); }\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 .region-sidebar { width: 220px !important; }\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-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 /* Sidebar continent tree */\n .continent-item {\n cursor: pointer;\n user-select: none;\n transition: all var(--dur-base) var(--ease-standard);\n }\n .continent-item:hover {\n color: var(--color-primary);\n }\n .continent-item.active {\n color: var(--color-primary);\n font-weight: 600;\n }\n .continent-arrow {\n transition: transform var(--dur-base) var(--ease-standard);\n display: inline-block;\n }\n .continent-arrow.expanded {\n transform: rotate(90deg);\n }\n .country-list {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.35s var(--ease-standard), opacity 0.25s var(--ease-standard);\n opacity: 0;\n }\n .country-list.open {\n max-height: 500px;\n opacity: 1;\n }\n .country-item {\n cursor: pointer;\n transition: all var(--dur-base) var(--ease-standard);\n padding: 4px 8px 4px 28px;\n border-radius: 6px;\n font-size: 0.875rem;\n font-weight: 400;\n font-family: 'Inter', sans-serif;\n color: var(--color-body);\n }\n .country-item:hover {\n background-color: var(--color-card);\n color: var(--color-foreground);\n }\n .country-item.active {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n }\n\n /* Map visualization */\n .map-container {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 400px;\n background: linear-gradient(135deg, #e8e0d2 0%, #f5f0e8 50%, #e8e0d2 100%);\n border-radius: 12px;\n overflow: hidden;\n }\n .map-grid {\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(20,20,19,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(20,20,19,0.04) 1px, transparent 1px);\n background-size: 40px 40px;\n }\n .map-region {\n position: absolute;\n border-radius: 50%;\n transition: all 0.5s var(--ease-standard);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Inter', sans-serif;\n font-weight: 500;\n font-size: 0.75rem;\n color: var(--color-on-primary);\n text-shadow: 0 1px 2px rgba(0,0,0,0.2);\n }\n .map-region .pulse-ring {\n position: absolute;\n inset: -8px;\n border-radius: 50%;\n border: 2px solid var(--color-primary);\n opacity: 0;\n animation: pulse 2s ease-out infinite;\n }\n @keyframes pulse {\n 0% { transform: scale(0.8); opacity: 0.6; }\n 100% { transform: scale(1.5); opacity: 0; }\n }\n\n .weather-temp-display {\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 400;\n font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;\n line-height: 1;\n letter-spacing: -0.02em;\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\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 .sidebar-scroll::-webkit-scrollbar {\n width: 4px;\n }\n .sidebar-scroll::-webkit-scrollbar-track { background: transparent; }\n .sidebar-scroll::-webkit-scrollbar-thumb {\n background: var(--color-hairline);\n border-radius: 2px;\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; color: var(--color-foreground);\">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); font-size: 1.05rem;\">首页</a>\n <a href=\"#region-weather\" class=\"nav-link nav-link-active\" style=\"color: var(--color-primary); padding: 0.25rem 0; transition: color var(--dur-base) var(--ease-standard); font-size: 1.05rem;\">区域天气</a>\n <a href=\"#crop\" class=\"nav-link\" style=\"color: var(--color-foreground); padding: 0.25rem 0; transition: color var(--dur-base) var(--ease-standard); font-size: 1.05rem;\">作物天气</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); font-size: 1.05rem;\">联系我们</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; padding: 0.75rem 1.25rem;\">免费使用</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; color: var(--color-foreground);\">AgWeather</span>\n <button class=\"btn-ghost\" aria-label=\"关闭菜单\" 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-primary); font-weight: 600;\">区域天气</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\">免费使用</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=\"#region-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 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 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\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 </div>\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-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=\"region-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=\"region-sidebar sidebar-scroll\" style=\"width: 260px; flex-shrink: 0; border-right: 1px solid var(--color-hairline); overflow-y: auto; padding: 16px 0;\">\n <div id=\"continentTree\"></div>\n </div>\n\n <!-- Center Map + Data -->\n <div class=\"flex-1 flex flex-col\">\n <!-- Map Area -->\n <div class=\"map-container\" style=\"flex: 1; min-height: 360px; border-bottom: 1px solid var(--color-hairline);\">\n <div class=\"map-grid\"></div>\n <!-- Decorative region markers -->\n <div id=\"mapRegions\"></div>\n <!-- Selected location label -->\n <div id=\"mapCenterLabel\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;\">\n <p id=\"selectedRegionName\" class=\"display-sm\" style=\"color: var(--color-foreground); text-shadow: 0 2px 8px rgba(250,249,245,0.8);\">中国</p>\n <p id=\"selectedRegionSub\" class=\"body-sm\" style=\"color: var(--color-muted);\">亚洲 · 东部农业区</p>\n </div>\n <!-- Weather overlay on map -->\n <div id=\"mapWeatherOverlay\" style=\"position: absolute; bottom: 20px; right: 20px; background-color: rgba(250,249,245,0.92); backdrop-filter: blur(8px); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 16px 20px; min-width: 160px; text-align: center;\">\n <p class=\"caption\" style=\"color: var(--color-muted);\">当前气温</p>\n <p class=\"weather-temp-display\" id=\"mapTempDisplay\" style=\"color: var(--color-foreground);\">26.3<span style=\"font-size: 0.5em; color: var(--color-muted);\">°C</span></p>\n <div class=\"flex justify-center gap-3 mt-2 text-xs\" style=\"color: var(--color-body);\">\n <span><i class=\"fa-solid fa-droplet\" style=\"color: var(--color-info);\"></i> <span id=\"mapHumidity\">62%</span></span>\n <span><i class=\"fa-solid fa-wind\" style=\"color: var(--color-secondary);\"></i> <span id=\"mapWind\">3.2m/s</span></span>\n </div>\n </div>\n </div>\n\n <!-- Data row below map -->\n <div style=\"padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;\">\n <div class=\"flex flex-wrap gap-6\">\n <div>\n <p class=\"caption\" style=\"color: var(--color-muted);\">日出</p>\n <p class=\"title-sm\" id=\"sunriseDisplay\" style=\"color: var(--color-foreground);\">05:12</p>\n </div>\n <div>\n <p class=\"caption\" style=\"color: var(--color-muted);\">日落</p>\n <p class=\"title-sm\" id=\"sunsetDisplay\" style=\"color: var(--color-foreground);\">19:08</p>\n </div>\n <div>\n <p class=\"caption\" style=\"color: var(--color-muted);\">降水量</p>\n <p class=\"title-sm\" id=\"rainDisplay\" style=\"color: var(--color-foreground);\">0.2mm</p>\n </div>\n <div>\n <p class=\"caption\" style=\"color: var(--color-muted);\">土壤湿度</p>\n <p class=\"title-sm\" id=\"soilDisplay\" style=\"color: var(--color-foreground);\">68%</p>\n </div>\n <div>\n <p class=\"caption\" style=\"color: var(--color-muted);\">UV 指数</p>\n <p class=\"title-sm\" id=\"uvDisplay\" style=\"color: var(--color-foreground);\">中等 (5)</p>\n </div>\n </div>\n <div>\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 14px; font-size: 0.75rem; font-weight: 500;\">\n <i class=\"fa-solid fa-rotate\" style=\"font-size: 0.65rem;\"></i>\n 数据实时更新\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ===== FEATURES ===== -->\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;\">AgWeather 将气象科学与农业实践深度结合,为种植决策提供数据支持</p>\n </div>\n <div class=\"feature-grid grid gap-6\" style=\"grid-template-columns: repeat(3, 1fr);\">\n <div class=\"card-hover\" style=\"background-color: var(--color-card); border-radius: 12px; padding: 32px;\">\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\" style=\"background-color: var(--color-card); border-radius: 12px; padding: 32px;\">\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\" style=\"background-color: var(--color-card); border-radius: 12px; padding: 32px;\">\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 <!-- ===== CROP WEATHER ===== -->\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);\">作物天气 · 生长模型</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);\">结合积温、降水与土壤湿度数据,为水稻、小麦、玉米等主要作物提供播种、灌溉与收获的精准建议。</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;\">\"rice\"</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;\">sowing_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;\">推荐播种窗口: 6月3日-6月5日 (积温可靠度 87%)</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ===== STATS ===== -->\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 <!-- ===== CTA BANNER ===== -->\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: 600px; 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=\"email2\" class=\"caption\" style=\"color: var(--color-body); display: block; margin-bottom: 4px;\">邮箱</label>\n <input type=\"email\" id=\"email2\" 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 // ===== Continent & Country Data =====\n const regionData = [\n {\n name: '亚洲',\n icon: 'fa-solid fa-earth-asia',\n countries: ['中国', '日本', '韩国', '印度', '泰国', '越南', '新加坡', '马来西亚', '印度尼西亚', '菲律宾', '缅甸', '老挝', '柬埔寨', '尼泊尔', '孟加拉国'],\n mapCenter: { x: 65, y: 45 },\n weather: { temp: 26.3, humidity: '62%', wind: '3.2m/s', sunrise: '05:12', sunset: '19:08', rain: '0.2mm', soil: '68%', uv: '中等 (5)' }\n },\n {\n name: '欧洲',\n icon: 'fa-solid fa-flag',\n countries: ['英国', '法国', '德国', '意大利', '西班牙', '荷兰', '瑞士', '瑞典', '挪威', '俄罗斯', '丹麦', '芬兰', '葡萄牙', '希腊', '波兰'],\n mapCenter: { x: 45, y: 30 },\n weather: { temp: 18.5, humidity: '55%', wind: '4.1m/s', sunrise: '04:50', sunset: '20:15', rain: '1.8mm', soil: '52%', uv: '低 (2)' }\n },\n {\n name: '北美洲',\n icon: 'fa-solid fa-globe',\n countries: ['美国', '加拿大', '墨西哥', '古巴', '巴拿马', '哥斯达黎加'],\n mapCenter: { x: 25, y: 40 },\n weather: { temp: 22.1, humidity: '48%', wind: '5.6m/s', sunrise: '05:30', sunset: '18:45', rain: '0.8mm', soil: '45%', uv: '高 (7)' }\n },\n {\n name: '南美洲',\n icon: 'fa-solid fa-tree',\n countries: ['巴西', '阿根廷', '智利', '哥伦比亚', '秘鲁', '委内瑞拉', '厄瓜多尔'],\n mapCenter: { x: 55, y: 65 },\n weather: { temp: 30.2, humidity: '72%', wind: '2.8m/s', sunrise: '06:15', sunset: '17:50', rain: '3.5mm', soil: '78%', uv: '极高 (9)' }\n },\n {\n name: '非洲',\n icon: 'fa-solid fa-sun',\n countries: ['南非', '尼日利亚', '肯尼亚', '埃及', '摩洛哥', '埃塞俄比亚', '坦桑尼亚', '加纳', '安哥拉', '莫桑比克'],\n mapCenter: { x: 50, y: 55 },\n weather: { temp: 34.7, humidity: '35%', wind: '6.3m/s', sunrise: '05:45', sunset: '18:30', rain: '0.1mm', soil: '22%', uv: '极高 (11)' }\n },\n {\n name: '大洋洲',\n icon: 'fa-solid fa-water',\n countries: ['澳大利亚', '新西兰', '斐济', '巴布亚新几内亚'],\n mapCenter: { x: 80, y: 70 },\n weather: { temp: 24.8, humidity: '58%', wind: '4.5m/s', sunrise: '06:40', sunset: '17:15', rain: '0.5mm', soil: '38%', uv: '高 (8)' }\n },\n {\n name: '南极洲',\n icon: 'fa-solid fa-snowflake',\n countries: ['麦克默多站', '南极点站', '中山站', '长城站'],\n mapCenter: { x: 50, y: 85 },\n weather: { temp: -28.5, humidity: '15%', wind: '12.1m/s', sunrise: '---', sunset: '---', rain: '0mm', soil: '---', uv: '---' }\n }\n ];\n\n let currentContinent = '亚洲';\n let currentCountry = '中国';\n\n // ===== Render Continent Tree =====\n function renderSidebar() {\n const tree = document.getElementById('continentTree');\n tree.innerHTML = '';\n regionData.forEach((region, idx) => {\n const isActive = region.name === currentContinent;\n const container = document.createElement('div');\n container.style.cssText = 'margin-bottom: 2px;';\n\n // Continent header\n const header = document.createElement('div');\n header.className = 'continent-item' + (isActive ? ' active' : '');\n header.style.cssText = 'display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px; margin: 0 8px; transition: all 0.2s ease;';\n if (isActive) {\n header.style.backgroundColor = 'rgba(204,120,92,0.08)';\n }\n header.innerHTML = `\n <i class=\"${region.icon}\" style=\"font-size: 1rem; color: ${isActive ? 'var(--color-primary)' : 'var(--color-muted)'}; width: 20px;\"></i>\n <span style=\"flex: 1; font-family: 'Inter', sans-serif; font-weight: ${isActive ? '600' : '500'}; font-size: 0.95rem;\">${region.name}</span>\n <i class=\"fa-solid fa-chevron-right continent-arrow ${isActive ? 'expanded' : ''}\" style=\"font-size: 0.7rem; color: var(--color-muted-soft);\"></i>\n `;\n header.addEventListener('click', () => toggleContinent(idx));\n container.appendChild(header);\n\n // Country list\n const list = document.createElement('div');\n list.className = 'country-list' + (isActive ? ' open' : '');\n list.style.cssText = 'margin: 0 8px 0 16px;';\n region.countries.forEach(c => {\n const item = document.createElement('div');\n item.className = 'country-item' + (c === currentCountry ? ' active' : '');\n item.textContent = c;\n item.addEventListener('click', () => selectCountry(region.name, c));\n list.appendChild(item);\n });\n container.appendChild(list);\n tree.appendChild(container);\n });\n }\n\n function toggleContinent(idx) {\n const region = regionData[idx];\n currentContinent = region.name;\n // If not already expanded, default to first country\n if (!region.countries.includes(currentCountry)) {\n currentCountry = region.countries[0];\n }\n renderSidebar();\n updateMap(region.name, currentCountry);\n }\n\n function selectCountry(continent, country) {\n currentContinent = continent;\n currentCountry = country;\n renderSidebar();\n updateMap(continent, country);\n }\n\n // ===== Update Map =====\n function updateMap(continent, country) {\n const region = regionData.find(r => r.name === continent);\n if (!region) return;\n\n const w = region.weather;\n\n // Update labels\n document.getElementById('selectedRegionName').textContent = country;\n document.getElementById('selectedRegionSub').textContent = `${continent} · 农业气象区`;\n\n // Update weather overlay\n document.getElementById('mapTempDisplay').innerHTML = `${w.temp}<span style=\"font-size:0.5em;color:var(--color-muted);\">°C</span>`;\n document.getElementById('mapHumidity').textContent = w.humidity;\n document.getElementById('mapWind').textContent = w.wind;\n document.getElementById('sunriseDisplay').textContent = w.sunrise;\n document.getElementById('sunsetDisplay').textContent = w.sunset;\n document.getElementById('rainDisplay').textContent = w.rain;\n document.getElementById('soilDisplay').textContent = w.soil;\n document.getElementById('uvDisplay').textContent = w.uv;\n\n // Update map region markers\n renderMapMarkers(region);\n }\n\n function renderMapMarkers(region) {\n const container = document.getElementById('mapRegions');\n container.innerHTML = '';\n\n // Main region dot\n const main = document.createElement('div');\n main.className = 'map-region';\n const cx = region.mapCenter.x;\n const cy = region.mapCenter.y;\n // Convert percentage to position within the map\n main.style.cssText = `\n left: ${cx}%;\n top: ${cy}%;\n width: 24px;\n height: 24px;\n transform: translate(-50%, -50%);\n background-color: var(--color-primary);\n box-shadow: 0 0 0 4px rgba(204,120,92,0.25), 0 0 20px rgba(204,120,92,0.15);\n `;\n const pulse = document.createElement('div');\n pulse.className = 'pulse-ring';\n main.appendChild(pulse);\n container.appendChild(main);\n\n // Some decorative dots for nearby areas\n const offsets = [\n { dx: -8, dy: -6, size: 10, opacity: 0.4 },\n { dx: 7, dy: -4, size: 8, opacity: 0.3 },\n { dx: -4, dy: 8, size: 12, opacity: 0.35 },\n { dx: 9, dy: 5, size: 6, opacity: 0.25 },\n ];\n offsets.forEach(o => {\n const dot = document.createElement('div');\n dot.style.cssText = `\n position: absolute;\n left: calc(${cx}% + ${o.dx}px);\n top: calc(${cy}% + ${o.dy}px);\n width: ${o.size}px;\n height: ${o.size}px;\n border-radius: 50%;\n background-color: var(--color-primary);\n opacity: ${o.opacity};\n transform: translate(-50%, -50%);\n pointer-events: none;\n `;\n container.appendChild(dot);\n });\n\n // Region label\n const label = document.createElement('div');\n label.style.cssText = `\n position: absolute;\n left: calc(${cx}% + 18px);\n top: ${cy}%;\n transform: translateY(-50%);\n font-family: 'Inter', sans-serif;\n font-size: 0.8rem;\n font-weight: 500;\n color: var(--color-foreground);\n white-space: nowrap;\n text-shadow: 0 1px 4px rgba(250,249,245,0.9);\n pointer-events: none;\n `;\n label.textContent = currentCountry;\n container.appendChild(label);\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 renderSidebar();\n updateMap('亚洲', '中国');\n </script>\n</body>\n</html>"
},
"next": ["接入实时天气预报API", "添加GIS地图图层", "增加国家搜索功能", "开放数据API页面", "移动端触控优化"],
"breakpoint": "none"
}
```