/* ========================================================================== 叶护卫 · 设计令牌（全站唯一来源 · 2026 版） 设计依据：AgTech 2026（高对比 / 行动优先 / 置信度可视化） + 农户实测范式（极简首页 · 无强制登录 · 大按钮 · 拇指热区） + 适老化（大字号 · 可切换特大字） 说明：此前 3 套互不兼容的 :root（2026 版 / 基础层 / ⑤ 配色补丁）已合并至本块。 全站令牌只在本块定义；下方 html.dark / body.big 仅做「模式覆盖」。 ========================================================================== */ :root{ /* ---------- 1. 色板 ---------- */ --forest:#0f7a45; /* 主色 · 农业绿 */ --forest-2:#2a9d63; /* 主色 · 浅（悬停/辅助） */ --forest-050:#e8f5ee; /* 主色 · 极浅底 */ --leaf:#66bb6a; /* 辅助 · 叶绿 */ --accent:#c8861a; /* 强调 · 琥珀（关键数字 / 标签） */ --accent-050:rgba(200,134,26,.10); --earth:#8d6e46; /* 土壤棕 */ --ok:#1faa59; /* 语义 · 成功 */ --warn:#e8862e; /* 语义 · 预警 */ --danger:#d1495b; /* 语义 · 危险 */ --info:#2f6fd0; /* 语义 · 信息 */ /* 中性 5 档 */ --ink:#14251c; /* 正文主 */ --ink-2:#3c5046; /* 正文次 */ --ink-3:#68796f; /* 弱化（对比度 ≥4.5:1） */ --muted:#68796f; /* 语义别名，同 --ink-3 */ --white:#ffffff; /* 恒定白（深色下也用于反绿底文字） */ --black:#000000; /* 恒定黑（遮罩 / 极深底） */ --forest-600:#0c6839; /* 主色 · 深（徽标文字） */ --bg:#f5f8f4; --card:#ffffff; --card-2:#f0f4ef; --hair:rgba(20,37,28,.10); /* 半透明描边（深浅色双向适配） */ --line:#dfe7dd; /* 实色描边 */ /* ---------- 2. 文本字阶（12 档 · 全站禁用硬编码 px） ---------- */ --fs-1:11px; /* 微字（角标 / 密集标注） */ --fs-2:12px; /* 脚注 */ --fs-3:13.5px; /* 小字（辅助说明） */ --fs-4:14.5px; /* 正文基准 */ --fs-5:15.5px; /* 正文强调 */ --fs-6:16.5px; /* 小标题 */ --fs-7:18px; /* 四级标题 */ --fs-8:20px; /* 三级标题 */ --fs-9:22px; /* 二级标题 */ --fs-10:26px; /* 一级标题 */ --fs-11:31px; /* 展示级 */ --fs-12:34px; /* 特大数字 */ /* ---------- 2b. 图标尺度（6 档 · 表情/字形图标统一用 --ico-*） ---------- */ --ico-1:15px; --ico-2:17px; --ico-3:19px; --ico-4:22px; --ico-5:26px; --ico-6:34px; /* ---------- 3. 间距（6 档） ---------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; /* ---------- 4. 圆角 ---------- */ --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px; --r-card:18px; --r-btn:12px; /* ---------- 5. 阴影（唯一来源 · 双层） ---------- */ --sh-1:0 1px 2px rgba(16,60,38,.05), 0 2px 8px rgba(16,60,38,.05); --sh-2:0 8px 24px rgba(16,60,38,.10), 0 2px 6px rgba(16,60,38,.06); --sh-3:0 16px 40px rgba(16,60,38,.14); /* ---------- 6. 动效 / 热区 ---------- */ --tr:200ms cubic-bezier(.22,.8,.28,1); --tap:56px; /* 拇指热区最小高度 */ /* ---------- 7. 兼容别名（旧名 → 新名；仅供历史规则引用，新代码请用新名） ---------- */ --c-primary:var(--forest); --c-primary-600:var(--forest-600); --c-primary-050:var(--forest-050); --c-earth:var(--earth); --c-warn:var(--warn); --c-danger:var(--danger); --c-ok:var(--ok); --c-info:var(--info); --c-bg:var(--bg); --c-surface:var(--card); --c-surface-2:var(--card-2); --c-line:var(--line); --c-text:var(--ink); --c-text-2:var(--ink-2); --c-text-3:var(--ink-3); --shadow-1:var(--sh-1); --shadow-2:var(--sh-2); --fs-base:var(--fs-6); --fs-h1:var(--fs-10); --fs-h2:var(--fs-8); --fs-h3:var(--fs-6); --fs-sm:var(--fs-3); --fs-xs:var(--fs-2); --sp:var(--sp-4); } /* ---------- 深色模式：仅覆盖色值（令牌结构不变） ---------- */ html.dark{ --ink:#e9f4ed; --ink-2:#c0d4c8; --ink-3:#93ac9f; --muted:#93ac9f; --bg:#071810; --card:#0f2419; --card-2:#0b1d14; --hair:rgba(233,244,237,.12); --line:#254034; --forest:#3fce85; --forest-2:#57b57f; --sh-1:0 1px 3px rgba(0,0,0,.4); --sh-2:0 10px 26px rgba(0,0,0,.5); --sh-3:0 16px 40px rgba(0,0,0,.6); } /* ---------- 大字模式（适老）：整体放大字阶 / 间距 / 热区 ---------- */ body.big{ --fs-1:13.5px; --fs-2:15px; --fs-3:16.5px; --fs-4:18px; --fs-5:19px; --fs-6:20.5px; --fs-7:22px; --fs-8:24px; --fs-9:27px; --fs-10:30px; --fs-11:36px; --fs-12:40px; --ico-1:18px; --ico-2:20px; --ico-3:23px; --ico-4:26px; --ico-5:30px; --ico-6:38px; --sp-2:10px; --sp-4:20px; --sp-5:28px; --sp-6:36px; --tap:64px; /* 兼容别名同步（历史规则仍可放大） */ --fs-base:19px; --fs-h1:31px; --fs-h2:24px; --fs-h3:20px; --fs-sm:16px; --fs-xs:14px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; } body { background: var(--c-bg); color: var(--c-text); font-size: var(--fs-base); line-height: 1.65; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif; padding-bottom: calc(var(--tap) + env(safe-area-inset-bottom, 0px)); } /* 手机优先：桌面居中成"手机宽度"卡片式体验 */ .shell { max-width: 560px; margin: 0 auto; min-height: 100vh; background: var(--c-bg); position: relative; } .pad { padding: 0 var(--sp-4); } /* ---------------- 顶部栏 ---------------- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px var(--sp-4); background: color-mix(in srgb, var(--c-bg) 88%, white); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line); } .topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-h3); } .topbar .logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-primary), var(--forest-2)); color: var(--white); font-size: var(--fs-6); } .topbar .spacer { flex: 1; } .icon-btn { height: 38px; min-width: 38px; padding: 0 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text-2); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; } .icon-btn.on { background: var(--c-primary-050); border-color: var(--c-primary); color: var(--c-primary-600); } .icon-btn:active { transform: scale(.97); } /* ---------------- 卡片 ---------------- */ .card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px; margin: 14px 0; } .card.tight { padding: 14px; } .card-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-h3); margin: 0 0 10px; } .muted { color: var(--c-text-3); font-size: var(--fs-sm); } .center { text-align: center; } /* ---------------- Hero 动效层 ---------------- */ .hero-wrap { position: relative; overflow: hidden; border-radius: var(--r-lg); margin: 10px 0 4px; } .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* 柔和暗角，让文字更立得住（研究结论：hero 需要"暗底承托"） */ .hero-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 12% 10%, rgba(255,255,255,0) 42%, rgba(15,60,35,.10) 100%); } .hero-wrap .hero { position: relative; z-index: 1; padding: 20px 16px 14px; } body.big .hero-wrap .hero { padding: 22px 16px 16px; } /* 入场动画（克制、缓慢——研究结论：能数出帧数就太快） */ .reveal { animation: rise .62s cubic-bezier(.22,.61,.36,1) both; } .reveal.d1 { animation-delay: .06s } .reveal.d2 { animation-delay: .12s } .reveal.d3 { animation-delay: .18s } @keyframes rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none } } /* 看板预览图 */ .spark { width: 100%; height: 96px; display: block; } /* 骨架屏（识别等待时用） */ .skel { background: linear-gradient(90deg, #eef3ee 25%, #e2eae3 37%, #eef3ee 63%); background-size: 400% 100%; animation: shimmer 1.3s infinite; border-radius: 10px; } @keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } } /* ---------------- 首页 Hero（文字层） ---------------- */ .hero { padding: 22px 0 6px; } .hero h1 { font-size: var(--fs-h1); line-height: 1.3; margin: 0 0 8px; letter-spacing: -.3px; } .hero p { color: var(--c-text-2); margin: 0; font-size: var(--fs-h3); } .hero .badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .pill { font-size: var(--fs-xs); padding: 5px 11px; border-radius: 999px; background: var(--c-primary-050); color: var(--c-primary-600); font-weight: 700; } .pill.grey { background: var(--c-surface-2); color: var(--c-text-2); } /* 主操作：三选一（拍照 / 相册 / 文字）——拇指热区 */ .actions { display: grid; gap: 10px; margin: 16px 0; } .big-btn { min-height: var(--tap); border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-h3); font-weight: 700; display: flex; align-items: center; gap: 12px; padding: 0 18px; cursor: pointer; text-align: left; box-shadow: var(--shadow-1); } .big-btn small { display: block; font-weight: 500; color: var(--c-text-3); font-size: var(--fs-xs); } .big-btn.primary { background: linear-gradient(135deg, var(--c-primary), var(--forest-2)); color: var(--white); border-color: transparent; box-shadow: 0 8px 22px rgba(15, 122, 69, .28); } .big-btn.primary small { color: rgba(255, 255, 255, .85); } .big-btn:active { transform: scale(.985); } /* 四模块入口 */ .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tile { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 14px; cursor: pointer; box-shadow: var(--shadow-1); } .tile .t-ico { font-size: var(--ico-4); } .tile .t-name { font-weight: 800; margin-top: 6px; } .tile:active { transform: scale(.98); } .tile.soon { opacity: .55; } /* 数字卡 */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 12px; text-align: center; } .stat b { display: block; font-size: var(--fs-h2); color: var(--c-primary-600); } .stat span { font-size: var(--fs-xs); color: var(--c-text-3); } /* ---------------- 上传 / 预览 ---------------- */ .dropzone { border: 2px dashed var(--c-line); border-radius: var(--r-md); padding: 26px 16px; text-align: center; background: var(--c-surface); cursor: pointer; } .dropzone:active { background: var(--c-surface-2); } .preview { width: 100%; border-radius: var(--r-md); display: block; max-height: 340px; object-fit: contain; background: var(--black); } /* ---------------- 结果页 ---------------- */ .verdict { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; } .ring { position: relative; width: 92px; height: 92px; } .ring svg { transform: rotate(-90deg); } .ring .num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-h2); color: var(--c-primary-600); } .verdict h2 { margin: 0 0 6px; font-size: var(--fs-h2); } .sev-bar { height: 10px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; margin-top: 8px; } .sev-bar i { display: block; height: 100%; border-radius: 999px; } .sev-mild { background: var(--c-ok); } .sev-moderate { background: var(--c-warn); } .sev-severe { background: var(--c-danger); } /* Agentic：行动卡（最醒目） */ .action-first { border: 2px solid var(--c-primary); background: linear-gradient(180deg, var(--white), var(--c-primary-050)); border-radius: var(--r-lg); padding: 16px; margin: 14px 0; box-shadow: var(--shadow-2); } .action-first h3 { margin: 0 0 4px; font-size: var(--fs-h3); color: var(--c-primary-600); } .action-first ol { margin: 8px 0 0; padding-left: 22px; } .action-first li { margin-bottom: 6px; } .heat { /* ★ 2026-10-09 修"热力图太大"：原来 width:100% 在宽屏上会把 640px 的底图拉成整屏宽。 现在给合理上限并居中；手机端 460px > 屏宽，仍自动满宽 ✔ 点击可放大到 900px。 */ width: 100%; max-width: 460px; display: block; margin: 0 auto; border-radius: var(--r-md); border: 1px solid var(--c-line); cursor: zoom-in; transition: max-width .22s ease; } .heat.big { max-width: 900px; cursor: zoom-out; } @media (max-width: 640px) { .heat { max-width: 100%; } } .top3 { display: grid; gap: 8px; } .top3 .row { display: grid; grid-template-columns: 26px 1fr 64px; gap: 8px; align-items: center; } .top3 .bar { height: 8px; background: var(--c-surface-2); border-radius: 999px; overflow: hidden; } .top3 .bar i { display: block; height: 100%; background: var(--c-primary); } .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: var(--fs-sm); } .kv b { color: var(--c-text-2); font-weight: 700; white-space: nowrap; } /* AI 方案 */ .ai-head { display: flex; align-items: center; gap: 8px; } .chip { font-size: var(--fs-xs); padding: 3px 10px; border-radius: 999px; font-weight: 700; } .chip.llm { background: #efe7fd; color: #5b34c4; } .chip.fb { background: #fdf0dd; color: #a8620f; } .ai-text { white-space: pre-wrap; font-size: var(--fs-base); line-height: 1.9; margin-top: 10px; } .ai-text .caret { animation: blink 1s steps(2) infinite; color: var(--c-primary); } @keyframes blink { 50% { opacity: 0 } } .dots { display: flex; gap: 6px; padding: 8px 0; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); opacity: .35; animation: bump 1.1s infinite; } .dots i:nth-child(2) { animation-delay: .15s } .dots i:nth-child(3) { animation-delay: .3s } @keyframes bump { 0%,60%,100% { transform: translateY(0); opacity: .35 } 30% { transform: translateY(-5px); opacity: 1 } } .ask { display: flex; gap: 8px; margin-top: 12px; } /* 输入框外观统一由「基础层」input,select,textarea 定义；此处只补 .ask 行内伸缩 */ input[type="text"], input[type="password"], textarea { flex: 1; } textarea { padding: 12px 14px; min-height: 96px; } /* .btn 主体由「基础层」唯一定义；此处只保留尺寸修饰符 */ .btn.sm { min-height: 40px; font-size: var(--fs-2); padding: 0 14px; } /* 底部导航（拇指热区） */ .tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: color-mix(in srgb, var(--c-surface) 94%, transparent); border-top: 1px solid var(--c-line); backdrop-filter: blur(12px); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 30; } .tabbar button { border: 0; background: transparent; padding: 10px 0 12px; color: var(--c-text-3); cursor: pointer; font-size: var(--fs-xs); display: grid; gap: 3px; place-items: center; min-height: var(--tap); } .tabbar button .i { font-size: var(--ico-3); } .tabbar button.on { color: var(--c-primary-600); font-weight: 800; } /* ---------------- 图鉴 ---------------- */ .sel { min-height: 44px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-sm); padding: 0 10px; } .chip-btn { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text-2); font-size: var(--fs-sm); cursor: pointer; } .chip-btn.on { background: var(--c-primary-050); border-color: var(--c-primary); color: var(--c-primary-600); font-weight: 700; } .atlas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .atlas-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); cursor: pointer; } .atlas-card:active { transform: scale(.98); } .atlas-card .thumb { aspect-ratio: 1 / 1; background: var(--c-surface-2); display: grid; place-items: center; } .atlas-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .atlas-card .thumb .ph { font-size: var(--ico-6); opacity: .85; filter: saturate(1.1); } /* 无样图时按病原类型做视觉分级（不自造"假照片"，只做类型色块 + 图标） */ .thumb.ph-fungi { background: linear-gradient(150deg, #efe6d8, #d9c7a8); } .thumb.ph-bacteria { background: linear-gradient(150deg, #e4eaf5, #c3d0e6); } .thumb.ph-virus { background: linear-gradient(150deg, #efe6f5, #d3c2e6); } .thumb.ph-pest { background: linear-gradient(150deg, #fdece0, #f5cfae); } .thumb.ph-healthy { background: linear-gradient(150deg, var(--forest-050), #c2e3d0); } .thumb.ph-other { background: linear-gradient(150deg, #eef1ef, #d5ddd7); } .ac-sym { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ac-body { padding: 10px; } .ac-name { font-weight: 800; font-size: var(--fs-sm); } .ac-meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .sheet { position: fixed; inset: 0; background: rgba(10,25,16,.45); z-index: 55; display: flex; align-items: flex-end; justify-content: center; } .sheet-in { background: var(--c-surface); width: 100%; max-width: 560px; border-radius: 22px 22px 0 0; padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px)); max-height: 88vh; overflow-y: auto; animation: rise .28s ease both; } /* ---------------- 答题 ---------------- */ .options { display: grid; gap: 10px; margin-top: 14px; } .opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; min-height: 58px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-base); cursor: pointer; } .opt.picked { border-color: var(--c-primary); background: var(--c-primary-050); } .opt-i { flex: 0 0 26px; height: 26px; border-radius: 8px; background: var(--c-surface-2); display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm); } .opt.picked .opt-i { background: var(--c-primary); color: var(--white); } .big-num { font-size: var(--fs-12); color: var(--c-primary-600); } /* ---------------- 看板 ---------------- */ .chart-wrap { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: stretch; } .yaxis { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-xs); color: var(--c-text-3); text-align: right; } .line-chart { width: 100%; height: 130px; display: block; overflow: visible; } .bars { display: grid; gap: 10px; } .bar-row { cursor: pointer; } .bar-label { font-size: var(--fs-sm); font-weight: 700; } .bar-track { height: 12px; background: var(--c-surface-2); border-radius: 999px; overflow: hidden; margin: 4px 0; } .bar-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-primary), var(--forest-2)); } .bar-val { font-size: var(--fs-xs); color: var(--c-text-3); text-align: right; } .bar-sub { font-size: var(--fs-xs); color: var(--c-text-2); background: var(--c-surface-2); padding: 6px 10px; border-radius: 10px; margin-top: 4px; } .donut-wrap { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; } .donut { width: 132px; height: 132px; border-radius: 50%; position: relative; } .donut-hole { position: absolute; inset: 26px; background: var(--c-surface); border-radius: 50%; display: grid; place-content: center; text-align: center; box-shadow: inset 0 0 0 1px var(--c-line); } .donut-hole b { font-size: var(--fs-h2); color: var(--c-primary-600); } .donut-hole span { font-size: var(--fs-xs); color: var(--c-text-3); } .legend { display: grid; gap: 6px; } .lg { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); } .lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .sev-list { display: grid; gap: 10px; } .sev-row { display: grid; grid-template-columns: 52px 1fr 48px; gap: 10px; align-items: center; } .sev-name { font-size: var(--fs-sm); color: var(--c-text-2); } .sev-track { height: 12px; background: var(--c-surface-2); border-radius: 999px; overflow: hidden; } .sev-track i { display: block; height: 100%; border-radius: 999px; } .sev-unknown { background: #b8c3bb; } /* 工具类 */ .row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .grow { flex: 1; } .mt8 { margin-top: 8px } .mt12 { margin-top: 12px } .mt16 { margin-top: 16px } .tag-ok { color: var(--c-ok); font-weight: 800; } .tag-warn { color: var(--c-warn); font-weight: 800; } .tag-danger { color: var(--c-danger); font-weight: 800; } .foot-note { color: var(--c-text-3); font-size: var(--fs-xs); text-align: center; padding: 18px 12px 26px; } .toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 60; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 999px; font-size: var(--fs-sm); box-shadow: var(--shadow-2); max-width: 88%; } .err { color: var(--c-danger); font-size: var(--fs-sm); } /* ---------- 基础 ---------- */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} body{ margin:0; background:var(--bg); color:var(--ink); font:400 var(--fs-4)/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:var(--forest);text-decoration:none;transition:color var(--tr)} a:hover{color:var(--forest-2)} /* ---------- 排版 ---------- */ h1{font-size:var(--fs-10);line-height:1.3;font-weight:800;letter-spacing:-.2px;margin:0 0 var(--sp-4)} h2,.card-title{font-size:var(--fs-8);line-height:1.35;font-weight:800;margin:0 0 var(--sp-4)} h3{font-size:var(--fs-6);line-height:1.45;font-weight:700;margin:0 0 var(--sp-2)} p{margin:0 0 var(--sp-2);color:var(--ink-2);line-height:1.8} p:last-child{margin-bottom:0} .muted,.note,.tip{color:var(--muted);font-size:var(--fs-2);line-height:1.7} b,strong{font-weight:700;color:var(--ink)} .num,.big-num{font-variant-numeric:tabular-nums;letter-spacing:-.4px} /* ---------- 组件 ---------- */ .card{ background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card); padding:var(--sp-5);margin-bottom:var(--sp-4);box-shadow:var(--sh-1); } .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:46px;padding:11px 20px;border-radius:var(--r-btn); font-size:var(--fs-4);font-weight:600;font-family:inherit;cursor:pointer; border:1px solid transparent;background:var(--forest);color:var(--white); transition:transform var(--tr),box-shadow var(--tr),opacity var(--tr); } .btn.ghost{background:transparent;color:var(--forest);border-color:currentColor} .btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)} .btn:active{transform:scale(.98);box-shadow:none} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} input,select,textarea{ min-height:46px;width:100%;padding:11px 13px;font-size:var(--fs-4);font-family:inherit; color:inherit;background:var(--card);border:1px solid rgba(20,37,28,.18); border-radius:var(--r-btn);transition:border-color var(--tr),box-shadow var(--tr); } html.dark input,html.dark select,html.dark textarea{background:#0c1f16;border-color:var(--line)} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(15,122,69,.14); } :focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:6px} /* ---------- 布局（唯一入口，替代此前所有布局补丁） ---------- */ .shell{ max-width:100%;margin:0 auto;min-height:100vh; background:var(--bg);position:relative; } main.pad{padding:16px 14px 56px} .tabbar{ position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%; display:flex;background:var(--card);border-top:1px solid var(--hair); padding-bottom:env(safe-area-inset-bottom,0px);z-index:70; } .tabbar button{ flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:2px;border:0;background:transparent;color:var(--muted); font-size:var(--fs-2);font-family:inherit;cursor:pointer;transition:color var(--tr); } .tabbar button .i{font-size:var(--ico-3);line-height:1} .tabbar button.on{color:var(--forest);font-weight:700} /* 桌面：内容居中 + 适度加宽（不再多列，避免表格被拆/卡片留洞） */ @media (min-width: 1024px){ /* 桌面档：容器加宽（原 1120 + 原 1200 档的 1320 折中为 1240，兼顾 1280 笔记本） */ .shell{max-width:1240px;box-shadow:0 0 0 1px var(--hair)} main.pad{padding:24px 24px 72px;max-width:1240px;margin:0 auto} .tabbar{max-width:640px;border-radius:16px 16px 0 0;box-shadow:var(--sh-2); bottom:16px;overflow:hidden} .topnav .shell,.wrap{max-width:1120px;margin:0 auto} .b,.card{--pad:22px} .card{padding:22px} .intro-cards{grid-template-columns:repeat(4,1fr)} } /* 宽屏档（3 档中的「大屏」）：容器随屏幕放宽，减少两侧空白 */ @media (min-width: 1440px){ /* ★ 2026-10-09 改流式：原来固定 1400 → 在 1600px 屏两侧各空 200px、1920px 屏各空 260px。 现在 = min(舒适上限, 屏宽 - 少量留白)，任何宽屏都只留 ~24-32px 边距。 */ .shell{ max-width:min(1720px, calc(100vw - 32px)) } main.pad{ max-width:min(1680px, calc(100vw - 48px)) } .wrap, .topnav .shell{ max-width:min(1680px, calc(100vw - 48px)) } /* 容器变宽后卡片网格自动填充列数，不会"中间留洞" */ .intro-cards{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) } .tech-grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) } /* 正文行宽上限：一行太长会左右甩头（标题/网格不受影响） */ main.pad > .card > p, main.pad .intro-sub{ max-width:82ch } } /* ========================================================================== ★ 超大屏档（2026-10-09 补） 背景：原来只有 1024 / 1440 两档、最大 1400px。在 1920px 屏上两侧各空 260px， 2560px 屏上各空 580px —— 用户反馈"两侧空白太多"。 做法：按屏幕继续放宽；卡片网格 auto-fit 自动填充列数；正文给可读行宽上限。 注意：手机与小屏**完全不受影响**（本站主要用户是手机）。 ========================================================================== */ @media (min-width: 2400px){ .shell{ max-width:min(2200px, calc(100vw - 32px)) } main.pad{ max-width:min(2160px, calc(100vw - 48px)) } .wrap, .topnav .shell{ max-width:min(2160px, calc(100vw - 48px)) } main.pad > .card > p, main.pad .intro-sub{ max-width:90ch } } /* ---------- 表格与图表：可读优先 ---------- */ table{width:100%;border-collapse:collapse;font-size:var(--fs-4);line-height:1.65} th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--hair);white-space:nowrap} th{color:var(--muted);font-weight:600;font-size:var(--fs-2)} @media (max-width: 1024px){ .table-wrap,main>table,.card>table,.b>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} main>table th:first-child,main>table td:first-child{position:sticky;left:0;background:var(--card)} .cm-live,.cm-live-table,.wb-chart,.chart-card{overflow-x:auto;-webkit-overflow-scrolling:touch} .cm-live>svg,.cm-live-table>table{min-width:680px} } /* ---------- 项目介绍卡片 ---------- */ .intro{margin:0 0 var(--sp-5)} .intro-h{font-size:var(--fs-8);font-weight:800;margin:0 0 4px;color:var(--forest)} .intro-sub{font-size:var(--fs-4);color:var(--muted);margin:0 0 var(--sp-4)} .intro-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .intro-card{ display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:var(--r-card); background:var(--card);border:1px solid var(--hair);box-shadow:var(--sh-1); position:relative;overflow:hidden;transition:transform var(--tr),box-shadow var(--tr); } .intro-card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px; background:linear-gradient(90deg,var(--forest),var(--leaf))} .intro-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .ic-i{font-size:var(--ico-3)} .intro-card b{font-size:var(--fs-6);color:var(--ink)} .ic-d{font-size:var(--fs-2);color:var(--muted);line-height:1.7} @media (min-width: 768px){.intro-cards{grid-template-columns:repeat(5,1fr)}} /* ---------- 图表放大提示 ---------- */ .zoomable{cursor:zoom-in} .zoomable:hover{outline:2px dashed var(--forest);outline-offset:4px;border-radius:10px} /* ---------- 页脚 ---------- */ footer,.site-foot{ font-size:var(--fs-2);line-height:1.9;color:var(--muted); padding:var(--sp-5) var(--sp-4);text-align:center; } footer a,.site-foot a{display:inline-block;padding:7px 10px;min-height:40px;color:var(--forest)} /* ---------- 响应式收敛 ---------- */ @media (max-width: 640px){ main.pad{padding:14px 12px 84px} .card{padding:16px 14px} .tabbar button{min-height:58px} } @media (prefers-reduced-motion:reduce){ *{transition-duration:1ms !important;animation:none !important} .intro-card:hover,.btn:hover{transform:none !important} } /* ===== 3D 病斑查看器 · 自动注入 ===== */ .v3d { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; background: radial-gradient(1200px 800px at 50% 0%, #0d2418, #05130c 72%); color: var(--ink); } .v3d-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; } .v3d-title { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-4); } .v3d-title span { font-size: var(--fs-2); opacity: .72; } .v3d-btns { display: flex; gap: 8px; flex-wrap: wrap; } .v3d-btns button { background: rgba(255,255,255,.1); color: var(--ink); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 6px 11px; font-size: var(--fs-2); cursor: pointer; font-family: inherit; } .v3d-btns button:hover { background: rgba(255,255,255,.19); } .v3d-x { width: 34px; height: 34px; padding: 0 !important; font-size: var(--ico-3) !important; border-radius: 50% !important; } .v3d-stage { position: relative; flex: 1; min-height: 0; } .v3d-cv { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; } .v3d-cv:active { cursor: grabbing; } .v3d-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: var(--fs-2); color: rgba(233,244,237,.62); pointer-events: none; } .v3d-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--fs-3); color: rgba(233,244,237,.82); line-height: 1.9; } /* ===== 3D 层级修正 · 自动注入 ===== */ .v3d { z-index: 100000 !important; } .leaf-toast { z-index: 100001 !important; } body.v3d-open .leaf-install, body.v3d-open .leaf-fabbtn, body.v3d-open .tabbar, body.v3d-open .topnav { display: none !important; } .v3d-stage { background: radial-gradient(900px 620px at 50% 42%, rgba(63,206,133,.10), transparent 70%); } /* ===== 实景拍摄（AR 取景）· 自动注入 ===== */ .arc { position: fixed; inset: 0; z-index: 100000; background: var(--black); overflow: hidden; } .arc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .arc-mask { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 42% at 50% 47%, transparent 62%, rgba(0,0,0,.62) 100%); } .arc-guide { position: absolute; left: 50%; top: 47%; width: min(78vw, 340px); height: min(60vh, 420px); transform: translate(-50%, -50%); pointer-events: none; } .arc-guide .c { position: absolute; width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.92); border-radius: 3px; } .arc-guide .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; } .arc-guide .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; } .arc-guide .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; } .arc-guide .br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; } .arc-tip { position: absolute; left: 0; right: 0; bottom: -40px; text-align: center; font-size: var(--fs-2); color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.8); } .arc-top { position: absolute; left: 0; right: 0; top: 0; padding: 12px 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; } .arc-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.42); color: var(--white); font-size: var(--ico-3); line-height: 1; cursor: pointer; backdrop-filter: blur(6px); font-family: inherit; } .arc-btn.on { background: var(--forest); color: #04240f; border-color: var(--forest); } .arc-warn { flex: 1; text-align: center; font-size: var(--fs-2); color: #ffe9a8; background: rgba(0,0,0,.45); border-radius: 999px; padding: 7px 12px; } .arc-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .arc-shutter { width: 74px; height: 74px; border-radius: 50%; border: 4px solid rgba(255,255,255,.9); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; } .arc-shutter i { display: block; width: 56px; height: 56px; border-radius: 50%; background: var(--white); } .arc-shutter:active i { transform: scale(.94); } .arc-album { min-width: 76px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.42); color: var(--white); font-size: var(--fs-4); cursor: pointer; font-family: inherit; backdrop-filter: blur(6px); } .arc-help { position: absolute; left: 14px; right: 14px; bottom: calc(120px + env(safe-area-inset-bottom, 0px)); background: rgba(8,22,15,.92); color: #eaf5ee; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 14px 16px; font-size: var(--fs-3); line-height: 1.8; } .arc-help b { display: block; margin-bottom: 6px; color: #7fe3ab; } .arc-help ul { margin: 0 0 6px; padding-left: 18px; } .arc-help .muted { color: rgba(234,245,238,.66); font-size: var(--fs-2); margin: 0; } body.arc-open { overflow: hidden; } /* ===== 认证弹层重做 · 自动注入 ===== */ .auth-modal { max-width: 460px !important; } .auth-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .auth-tabs { display: flex; gap: 4px; background: rgba(20,37,28,.06); padding: 3px; border-radius: 999px; } html.dark .auth-tabs { background: rgba(255,255,255,.08); } .auth-tabs button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-size: var(--fs-3); color: var(--muted); cursor: pointer; font-family: inherit; transition: all .18s ease; } .auth-tabs button.on { background: var(--card); color: var(--forest); font-weight: 700; box-shadow: 0 1px 4px rgba(16,60,38,.12); } html.dark .auth-tabs button.on { background: #123024; color: #7fe3ab; } .auth-x { width: 32px; height: 32px; font-size: var(--ico-1); } .auth-sub { font-size: var(--fs-2); color: var(--muted); margin: 2px 0 12px; line-height: 1.6; } .auth-field { display: block; position: relative; margin-top: 10px; } .auth-field > span { display: block; font-size: var(--fs-2); color: var(--muted); margin-bottom: 5px; } .auth-field input { width: 100%; padding: 11px 40px 11px 12px; border-radius: 12px; font-size: var(--fs-4); border: 1px solid rgba(20,37,28,.16); background: var(--card); color: inherit; font-family: inherit; transition: border-color .18s ease, box-shadow .18s ease; } html.dark .auth-field input { background: #0d2118; border-color: #24402f; } .auth-field input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(15,122,69,.14); } .auth-field.bad input { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192,57,43,.12); } .auth-field .af-ok { position: absolute; right: 12px; bottom: 10px; color: var(--forest); font-weight: 700; font-size: var(--ico-1); } .auth-field .af-eye { position: absolute; right: 6px; bottom: 4px; border: 0; background: transparent; font-size: var(--ico-1); padding: 6px; cursor: pointer; line-height: 1; } .auth-err { color: var(--danger); font-size: var(--fs-2); margin: 5px 0 0; } html.dark .auth-err { color: #ff9d86; } .auth-msg { margin: 10px 0 0; font-size: var(--fs-3); color: var(--danger); background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.22); border-radius: 10px; padding: 8px 10px; } html.dark .auth-msg { color: #ffb3a0; background: rgba(255,138,114,.1); } .auth-pwbar { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: var(--fs-2); color: var(--muted); } .auth-pwbar i { flex: 1; height: 5px; border-radius: 3px; background: rgba(20,37,28,.1); position: relative; overflow: hidden; } .auth-pwbar i::after { content: ''; position: absolute; inset: 0; width: 0; transition: width .3s ease, background .3s ease; } .auth-pwbar i.lv0::after { width: 12%; background: var(--danger); } .auth-pwbar i.lv1::after { width: 32%; background: #d76a3a; } .auth-pwbar i.lv2::after { width: 56%; background: #cfa02f; } .auth-pwbar i.lv3::after { width: 78%; background: #58a35c; } .auth-pwbar i.lv4::after { width: 100%; background: var(--forest); } .auth-foot { font-size: var(--fs-2); color: var(--muted); margin: 12px 0 0; text-align: center; } .auth-foot a { color: var(--forest); text-decoration: none; font-weight: 600; } @media (prefers-reduced-motion: no-preference) { .auth-field.shake { animation: afShake .4s cubic-bezier(.36,.07,.19,.97); } @keyframes afShake { 10%,90% { transform: translateX(-2px) } 20%,80% { transform: translateX(4px) } 30%,50%,70% { transform: translateX(-6px) } 40%,60% { transform: translateX(6px) } } .btn:active, .auth-tabs button:active { transform: scale(.985); } } /* ===== 3D 升级：HUD / 巡览 / 揭幕 · 自动注入 ===== */ .v3d-hud { position: absolute; left: 14px; top: 12px; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(6,26,17,.72), rgba(6,26,17,.52)); border: 1px solid rgba(63,206,133,.28); border-radius: 14px; padding: 11px 13px; min-width: 168px; backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.28); } .v3d-hud .hud-t { font-size: var(--fs-4); font-weight: 700; color: #eafff2; letter-spacing: .3px; } .v3d-hud .hud-s { font-size: var(--fs-2); color: rgba(214,240,224,.72); margin-top: 2px; } .v3d-hud .hud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 9px; } .v3d-hud .hud-grid span { display: block; font-size: var(--fs-1); color: rgba(198,230,212,.62); } .v3d-hud .hud-grid b { font-size: var(--fs-4); color: #7fe3ab; font-variant-numeric: tabular-nums; } .v3d-hud .hud-tip { margin-top: 8px; font-size: var(--fs-1); color: rgba(198,230,212,.6); max-width: 190px; line-height: 1.5; } html:not(.dark) .v3d-hud { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(245,250,247,.78)); border-color: rgba(15,122,69,.24); box-shadow: 0 8px 22px rgba(16,60,38,.14); } html:not(.dark) .v3d-hud .hud-t { color: #10361f; } html:not(.dark) .v3d-hud .hud-s, html:not(.dark) .v3d-hud .hud-tip { color: #5c7264; } html:not(.dark) .v3d-hud .hud-grid span { color: var(--muted); } html:not(.dark) .v3d-hud .hud-grid b { color: var(--forest); } .v3d-btns button[data-a=tour].on { background: #ffce6a !important; color: #3a2a05 !important; border-color: #ffce6a !important; } @media (max-width: 640px) { .v3d-hud { left: 8px; top: 8px; padding: 9px 10px; min-width: 140px; } .v3d-hud .hud-tip { display: none; } } /* ===== 交互式混淆矩阵 · 自动注入 ===== */ .cm-wrap { margin: 6px 0 4px; } .cm-live { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cm-live svg { min-width: 460px; } .cm-live-table { margin-top: 12px; } .cm-tbl-head { font-size: var(--fs-4); font-weight: 700; color: var(--forest); margin-bottom: 7px; } .cm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); } .cm-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 6px; border-bottom: 1px solid rgba(20,37,28,.12); } .cm-table td { padding: 6px 6px; border-bottom: 1px solid rgba(20,37,28,.07); vertical-align: middle; } .cm-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } .cm-table tr.cm-weak { background: rgba(192,57,43,.05); } .cm-tag { font-size: var(--fs-1); padding: 1px 6px; border-radius: 7px; background: rgba(192,57,43,.12); color: var(--danger); margin-left: 4px; } .cm-bar { height: 5px; border-radius: 3px; background: rgba(20,37,28,.09); margin-top: 3px; overflow: hidden; } .cm-bar i { display: block; height: 100%; border-radius: 3px; } .cm-src { font-size: var(--fs-2); color: var(--muted); margin-top: 9px; line-height: 1.7; } html.dark .cm-table th { color: #9db6a8; border-color: rgba(233,244,237,.14); } html.dark .cm-table td { border-color: rgba(233,244,237,.08); } html.dark .cm-bar { background: rgba(255,255,255,.12); } @media (max-width: 768px) { .cm-live svg { min-width: 420px; } .cm-table { font-size: var(--fs-2); } } /* ===== 田间课堂 + 提醒 · 自动注入 ===== */ .qz-scene { background: rgba(15,122,69,.07); border-left: 3px solid var(--forest); border-radius: 10px; padding: 9px 11px; font-size: var(--fs-2); line-height: 1.7; margin-bottom: 9px; } .qz-q { font-size: var(--fs-4); font-weight: 600; line-height: 1.7; margin: 6px 0 11px; } .qz-opts { display: flex; flex-direction: column; gap: 8px; } .qz-opt { display: flex; align-items: flex-start; gap: 9px; text-align: left; cursor: pointer; font-family: inherit; border: 1px solid rgba(15,122,69,.24); background: var(--card); border-radius: 13px; padding: 10px 12px; font-size: var(--fs-3); color: inherit; transition: all .15s ease; } .qz-opt .oi { flex: 0 0 20px; height: 20px; border-radius: 50%; background: rgba(15,122,69,.13); color: var(--forest); font-size: var(--fs-2); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .qz-opt.on { background: var(--forest); color: var(--white); border-color: var(--forest); } .qz-opt.on .oi { background: rgba(255,255,255,.28); color: var(--white); } .qz-opt.ok { background: rgba(15,122,69,.13); border-color: var(--forest); } .qz-opt.no { background: rgba(192,57,43,.09); border-color: var(--danger); } .qz-fb { margin-top: 11px; border-radius: 12px; padding: 10px 12px; font-size: var(--fs-3); line-height: 1.75; } .qz-fb.ok { background: rgba(15,122,69,.09); border: 1px solid rgba(15,122,69,.28); } .qz-fb.no { background: rgba(233,160,0,.1); border: 1px solid rgba(233,160,0,.32); } .qz-fb b { display: block; margin-bottom: 3px; } .mt8 { margin-top: 8px; } /* 提醒铃 */ .bell { position: fixed; right: 14px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(15,122,69,.24); background: var(--card); font-size: var(--ico-3); cursor: pointer; box-shadow: 0 6px 20px rgba(16,60,38,.16); font-family: inherit; } .bell i { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: var(--white); font-size: var(--fs-1); font-style: normal; line-height: 18px; text-align: center; padding: 0 4px; } /* ===== 首屏与导航重构 · 自动注入 ===== */ /* 首屏主 CTA */ .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:16px 0 12px} .hero-cta .btn{min-height:56px;padding:14px 28px;font-size:var(--fs-6);font-weight:700;border-radius:14px; box-shadow:0 6px 18px rgba(15,122,69,.22)} .hero-cta .btn:active{transform:scale(.97)} .hero-alt{font-size:var(--fs-3);color:var(--muted)} .hero-alt a{color:var(--forest);font-weight:600;padding:2px 2px} /* 首屏功能区只留次入口 */ .actions[data-entries="2"]{display:grid;grid-template-columns:1fr;gap:10px} .actions[data-entries="2"] .big-btn{min-height:60px;justify-content:flex-start;text-align:left} /* 徽标弱化（不抢主 CTA） */ .badge-row{margin-top:4px;opacity:.9} /* 底部导航（含「更多」） */ .tabbar .tab-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; flex:1;min-height:56px;font-size:var(--fs-2);color:var(--muted);text-decoration:none} .tabbar .tab-link .i{font-size:var(--ico-3);line-height:1} .tabbar button.on,.tabbar .tab-link:hover{color:var(--forest)} .more-sheet{position:fixed;inset:0;z-index:90;background:rgba(8,20,14,.42); display:flex;align-items:flex-end;backdrop-filter:blur(4px)} .more-panel{width:100%;background:var(--card);border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 30px rgba(0,0,0,.18);animation:moreUp .22s cubic-bezier(.22,.8,.28,1)} @keyframes moreUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}} .more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .more-grid button,.more-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; min-height:76px;border:1px solid var(--hair);border-radius:14px;background:transparent;color:var(--ink); font-size:var(--fs-2);font-family:inherit;cursor:pointer;text-decoration:none;transition:background var(--tr),transform var(--tr)} .more-grid button:hover,.more-grid a:hover{background:rgba(15,122,69,.08);transform:translateY(-2px)} .more-grid .i{font-size:var(--ico-4)} .more-close{width:100%;margin-top:14px;min-height:44px;border:1px solid var(--hair);border-radius:12px; background:transparent;color:var(--muted);font-family:inherit;font-size:var(--fs-3);cursor:pointer} /* 桌面：更多面板居中成对话框 */ @media (min-width: 1024px){ .more-sheet{align-items:center;justify-content:center} .more-panel{max-width:520px;border-radius:20px} .more-grid{grid-template-columns:repeat(3,1fr)} } /* 题库入口卡片（田间课堂）更醒目 */ .intro-card[href="quiz.html"] .ic-i{font-size:var(--ico-4)} /* 指标数字做视觉锚点 */ .kpi .num,.big-num,.stats b{font-size:clamp(24px,3.2vw,30px);font-weight:800;letter-spacing:-.6px;color:var(--forest)} @media (max-width: 640px){ .kpi .num,.big-num,.stats b{font-size:var(--fs-10)} .hero-cta .btn{width:100%;justify-content:center} } /* ---------- 被重构误删的基础类（补回） ---------- */ /* 顶部导航 */ .topnav{ position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:8px; padding:10px 14px;background:var(--card);border-bottom:1px solid var(--hair); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); } .topnav .brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--ink); font-size:var(--fs-6);text-decoration:none;white-space:nowrap;flex:0 0 auto} .topnav .brand .leaf{font-size:var(--ico-3)} .topnav nav,.topnav .nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap} .topnav nav a,.topnav .nav-links a{ display:inline-flex;align-items:center;min-height:40px;padding:6px 10px;border-radius:10px; color:var(--ink-2);font-size:var(--fs-2);font-weight:600;text-decoration:none; transition:background var(--tr),color var(--tr); } .topnav nav a:hover,.topnav .nav-links a:hover{background:rgba(15,122,69,.08);color:var(--forest)} @media (max-width: 768px){ .topnav{flex-wrap:wrap;padding:8px 12px} .topnav nav,.topnav .nav-links{margin-left:0;width:100%;justify-content:flex-start;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none} .topnav nav a,.topnav .nav-links a{white-space:nowrap;min-height:36px;padding:5px 9px} } @media (min-width: 1024px){ .topnav{padding:12px 22px} .topnav nav a,.topnav .nav-links a{font-size:var(--fs-4);padding:7px 13px;min-height:42px} } /* 页脚 */ .site-foot{ background:var(--card);border-top:1px solid var(--hair); padding:var(--sp-5) var(--sp-4); } /* 内容包装（报告页） */ .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px} @media (min-width: 1024px){.wrap{max-width:1120px;padding:0 24px}} /* 步骤区（怎么开始用） */ .howto{display:flex;flex-direction:column;gap:14px} .howto .hw{display:flex;gap:12px;align-items:flex-start} .howto .hw > i{ flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:rgba(15,122,69,.12); color:var(--forest);font-style:normal;font-weight:800;font-size:var(--fs-3); display:inline-flex;align-items:center;justify-content:center;margin-top:2px; } .howto .hw > div{min-width:0} .howto .hw b{display:block;font-size:var(--fs-4);font-weight:700;color:var(--ink);margin-bottom:2px} .howto .hw span{font-size:var(--fs-2);line-height:1.75;color:var(--muted)} .howto-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px} /* hero 背景画布 */ .hero-wrap{position:relative;margin-bottom:var(--sp-4)} .hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.5} .hero{position:relative;z-index:1} /* 大按钮（首屏次入口） */ .big-btn{ display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:14px 16px; border:1px solid var(--hair);border-radius:14px;background:var(--card);color:var(--ink); font-family:inherit;font-size:var(--fs-4);text-align:left;cursor:pointer; box-shadow:var(--sh-1);transition:transform var(--tr),box-shadow var(--tr); } .big-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .big-btn:active{transform:scale(.99)} .big-btn .emoji{font-size:var(--ico-4);flex:0 0 auto} .big-btn > span:not(.emoji){display:flex;flex-direction:column;gap:2px;font-weight:600} .big-btn small{font-size:var(--fs-2);font-weight:400;color:var(--muted);line-height:1.6} .big-btn.primary{background:linear-gradient(135deg,var(--forest),var(--forest-2));color:var(--white);border-color:transparent} .big-btn.primary small{color:rgba(255,255,255,.85)} /* 报告页 bento 网格 */ .bento{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px} .bento > .b{min-width:0} .bento > .b h3{font-size:var(--fs-4);font-weight:700;color:var(--forest);margin:0 0 6px} .bento > .b p{font-size:var(--fs-2);line-height:1.7;color:var(--ink-2);margin:0} /* ===== 子页导航整合：subnav 与顶栏重复 → 桌面隐藏，只留顶栏一条 ===== */ @media (min-width: 768px) { .subnav { display: none !important; } .back-bar { border-bottom: 1px solid var(--hair); padding: 12px 24px; } } /* 手机端：保留 subnav（顶栏可能横向滚动），但去掉重复的返回栏标题 */ @media (max-width: 768px) { .subnav { display: flex !important; } .back-bar .bb-title { display: none; } } /* hero 描述文字对比度 */ /* ===== 桌面宽度适配（消除大屏留白）· 自动注入 ===== */ /* 桌面：容器随屏幕放大，减少两侧空白（内容仍保持可读宽度） */ /* 宽屏时正文仍限行宽，避免超长行 */ @media (min-width: 1024px){ main .card > p, main .card li, .card .note, .card .muted { max-width: 78ch; } } /* 大屏下多给一点卡片内边距，视觉更从容 */ @media (min-width: 1024px){ .card{ padding: 24px; } } /* ===== 桌面隐藏底部 tabbar（统一顶栏已接管）· 自动注入 ===== */ /* 全平台隐藏底部 tabbar（统一顶栏是唯一导航） */ .tabbar { display: none !important; } main.pad { padding-bottom: 32px !important; } .leaf-fabbtn { bottom: 24px !important; } /* ===== Vue topbar 隐藏（统一导航已含登录/深色）· 自动注入 ===== */ .topbar { display: none !important; } /* ===== Hero 与首屏修正 · 自动注入 ===== */ /* Hero 文字：背景是浅色，必须用深色文字（高对比） */ .hero h1{ color:#0f2c1d !important; font-weight:800; letter-spacing:-.2px; line-height:1.25; text-shadow:none !important; } .hero p{ color:#2f4a3b !important; font-size:var(--fs-5); line-height:1.75; text-shadow:none !important; } /* 首屏：hero 内已有主 CTA，下方功能区只保留次入口 */ .actions[data-entries="2"] .big-btn.primary{ display:none !important; } /* 项目介绍卡片：字号与呼吸感 */ .intro-h{ font-size:var(--ico-3) !important; } .intro-sub{ font-size:var(--fs-3) !important; } .intro-card{ padding:16px 16px 18px !important; min-height:126px !important; } .intro-card b{ font-size:var(--fs-5) !important; } .ic-d{ font-size:var(--fs-3) !important; line-height:1.7 !important; } /* 卡片正文可读性 */ .card p, .card li{ font-size:var(--fs-4); line-height:1.8; } /*! * 叶护卫 · 视觉升级 v2（图标 / Hero 背景 / 配色阴影） * 目标：把 emoji 换成统一线性图标、Hero 换干净背景、建立阴影与辅助色层次 */ /* ================= ① 统一 SVG 图标（替换 emoji） ================= */ /* 用 data-URI SVG，线性风格、品牌绿、统一 24×24 视觉尺寸 */ .intro-card .ic-i, .ic-i { width: 40px !important; height: 40px !important; border-radius: 11px !important; background-color: rgba(15, 122, 69, .09) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 22px 22px !important; font-size: 0 !important; /* 隐藏 emoji 文字 */ display: block !important; margin-bottom: 2px !important; } /* 技术架构：文档/代码 */ .intro-card[href="about.html"] .ic-i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E") !important; } /* 项目价值：趋势上升 */ .intro-card[href="value.html"] .ic-i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E") !important; } /* 田间实测：烧瓶 */ .intro-card[href="field.html"] .ic-i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31'/%3E%3Cpath d='M14 9.3V1.99'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M14 9.3a6.5 6.5 0 1 1-4 0'/%3E%3Cpath d='M5.52 16h12.96'/%3E%3C/svg%3E") !important; } /* 田间课堂：学士帽 */ .intro-card[href="quiz.html"] .ic-i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E") !important; } /* 常驻农技员：对话 */ .intro-card[href="agent.html"] .ic-i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E") !important; } /* 其它常见 emoji 标题图标也统一化（卡片标题） */ .card-title, .b h3 { display: flex !important; align-items: center !important; gap: 8px !important; } /* ================= ② Hero 背景：去掉模糊叶子，换干净渐变 ================= */ .hero-wrap { background: linear-gradient(135deg, #f2faf5 0%, #e6f6ec 45%, #dff2e8 100%) !important; border-radius: 20px !important; overflow: hidden !important; position: relative !important; } .hero-wrap::before { content: '' !important; position: absolute !important; right: -60px !important; top: -60px !important; width: 300px !important; height: 300px !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(15,122,69,.10), transparent 68%) !important; pointer-events: none !important; } .hero-wrap::after { content: '' !important; position: absolute !important; left: -40px !important; bottom: -80px !important; width: 240px !important; height: 240px !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(102,187,106,.13), transparent 68%) !important; pointer-events: none !important; } .hero-canvas { display: none !important; } /* 隐藏旧叶子动效 */ .hero { padding: 26px 24px 22px !important; position: relative !important; z-index: 1 !important; } /* Hero 主按钮更有质感 */ .hero-cta .btn { min-height: 50px !important; padding: 13px 26px !important; font-size: var(--fs-5) !important; box-shadow: 0 6px 20px rgba(15,122,69,.26) !important; } .hero-cta .btn:hover { box-shadow: 0 10px 28px rgba(15,122,69,.32) !important; } /* 卡片双层阴影，层次更清楚 */ .card { box-shadow: var(--sh-1) !important; border-color: rgba(20,37,28,.075) !important; } .card:hover { box-shadow: var(--sh-2) !important; } /* 关键数字用强调色，形成视觉节奏 */ .stats b, .kpi b, .big-num { color: var(--forest) !important; } .stats b:nth-child(2), .kpi:nth-child(2) b { color: var(--accent) !important; } /* 项目介绍卡片：悬停抬升 + 顶条加粗 */ .intro-card { box-shadow: var(--sh-1) !important; } .intro-card:hover { box-shadow: var(--sh-2) !important; transform: translateY(-3px) !important; } .intro-card::before { height: 3px !important; } /* 徽标 pill 更克制 */ .badge-row .pill{ background:rgba(15,122,69,.10); color:var(--forest); font-size:var(--fs-2); font-weight:600; padding:4px 11px; } .badge-row .pill.grey{ background:rgba(20,37,28,.06); color:var(--ink-2); } /* 首屏整体留白更从容 */ .hero-wrap { margin-bottom: 18px !important; } .actions[data-entries="2"] { margin-bottom: 4px !important; } .actions[data-entries="2"] .big-btn { min-height: 56px !important; } /* 深色模式适配 */ html.dark .hero-wrap { background: linear-gradient(135deg, #0d2018 0%, #10291d 100%) !important; } html.dark .hero h1 { color: #eaf6ee !important; } html.dark .hero p { color: #b9cfc2 !important; } html.dark .ic-i { background-color: rgba(63,206,133,.12) !important; } body.big .btn, body.big button { min-height: 52px !important; } body.big .nb-item { font-size: var(--fs-5) !important; min-height: 46px !important; } body.big .ic-d, body.big .tip, body.big .muted { font-size: var(--fs-4) !important; } /* ===== 安装条与旧顶栏隐藏（精确规则）· 自动注入 ===== */ /* 安装引导：用户明确要求"直接访问即用，不要安装提示" */ #leaf-install, .leaf-install { display: none !important; visibility: hidden !important; } /* 旧顶栏：统一导航 #wbNavBar 已接管全部入口（含深色/大字/登录），故隐藏 */ .topbar { display: none !important; } /* ===== 补回丢失样式：悬浮按钮 + 预警横幅 · 自动注入 ===== */ /* 悬浮「拍照识别」按钮（CSS 重构时丢失，导致显示浏览器默认方框） */ #leaf-fab, .leaf-fabbtn { position: fixed; right: 18px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 12px 20px; border: 0 none; border-radius: 999px; background: linear-gradient(135deg, var(--forest), var(--forest-2)); color: var(--white); font-family: inherit; font-size: var(--fs-4); font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none; box-shadow: 0 6px 20px rgba(15,122,69,.30); transition: transform .2s, box-shadow .2s; } #leaf-fab:hover, .leaf-fabbtn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,122,69,.36); } #leaf-fab:active, .leaf-fabbtn:active { transform: scale(.97); } #leaf-fab span, .leaf-fabbtn span { font-size: var(--fs-4); } @media (max-width: 640px) { #leaf-fab, .leaf-fabbtn { right: 12px; bottom: 20px; min-height: 50px; padding: 13px 18px; font-size: var(--fs-5); } } /* ===== 预警横幅（.leaf-warn / lw-*）· 自动注入 ===== 修正：此前只定义了 .lw-x，而 .leaf-warn / .lw-ico / .lw-txt / .lw-btn 均无样式 → 「看图鉴」按钮渲染成浏览器默认按钮（灰底+黑框+系统字体）。 */ .leaf-warn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(200,134,26,.10); border: 1px solid rgba(200,134,26,.28); border-radius: var(--r-btn); padding: 10px 14px; margin-bottom: 14px; font-size: var(--fs-3); line-height: 1.7; } .leaf-warn .lw-ico { font-size: var(--fs-6); line-height: 1; flex: 0 0 auto; } .leaf-warn .lw-txt { flex: 1 1 220px; min-width: 0; color: var(--ink-2); font-size: var(--fs-4); line-height: 1.7; overflow-wrap: anywhere; } .leaf-warn .lw-txt b { color: var(--ink); } /* 横幅内按钮（含 .lw-btn 本体）与关闭键 */ .leaf-warn button, [class^="lw-"] button, [class^="lw-"].lw-btn, .leaf-warn button:hover, .leaf-warn .lw-btn { background: rgba(200,134,26,.18); color: #8a5a08; white-space: nowrap; font-weight: 700; } .leaf-warn .lw-btn:hover { background: rgba(200,134,26,.30); transform: translateY(-1px); } .leaf-warn .lw-x { font-size: var(--ico-2); padding: 0 8px; color: var(--muted); } html.dark .leaf-warn { background: rgba(200,134,26,.14); border-color: rgba(200,134,26,.34); } html.dark .leaf-warn .lw-btn { background: rgba(240,201,138,.18); color: #f0c98a; } /* 其它预警条容器（历史类名，保持一致观感） */ /* ========================================================================== 收尾：可访问性与排版精度（呼应验收标准） ========================================================================== */ /* 深色模式下的焦点环（对比度足够） */ html.dark :focus-visible{ outline-color: var(--forest); } /* 长串/域名不被随意拆行；代码类允许断词 */ .cm-src, .tech-note, .site-foot, .wb-icp, .hero-alt, .note, .tip { overflow-wrap:anywhere } code, kbd, samp, .mono { overflow-wrap:anywhere; word-break:break-word } a[href^="http"], .domain { white-space:nowrap } /* 屏幕阅读器专用文本 */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 } /* 系统数据卡片：4 项改 2×2（原 3 列会留下 1 个孤项） */ @media (min-width: 640px){ .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px } } /* ========================================================================== 统一顶部导航（#wbNavBar）· 由 nav.js 迁移为静态样式 —— 原先由 nav.js 在运行期