| | |
| | | <div class="agri-promo-layer absolute inset-0 size-full overflow-hidden"> |
| | | <div |
| | | :key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'" |
| | | class="agri-promo relative flex h-full flex-col justify-center px-8 text-left" |
| | | class="agri-promo relative flex h-full flex-col items-end justify-start px-10 pt-16 text-left" |
| | | > |
| | | <!-- 品牌区 --> |
| | | <div class="agri-brand"> |
| | | <div class="flex items-center gap-4"> |
| | | <svg viewBox="0 0 64 64" class="size-14 shrink-0" aria-hidden="true"> |
| | | <circle |
| | | cx="32" cy="32" r="25" fill="none" stroke="#6ee7b7" stroke-width="2.5" |
| | | stroke-linecap="round" stroke-dasharray="118 40" transform="rotate(-30 32 32)" |
| | | /> |
| | | <circle |
| | | cx="32" cy="32" r="25" fill="none" stroke="#a7f3d0" stroke-width="2.5" |
| | | stroke-linecap="round" stroke-dasharray="26 132" transform="rotate(115 32 32)" |
| | | /> |
| | | <circle cx="53" cy="17" r="3" fill="#6ee7b7" /> |
| | | <circle cx="9" cy="41" r="2.4" fill="#a7f3d0" /> |
| | | <path d="M32 45c0-8 0-12 0-16" stroke="#a7f3d0" stroke-width="2.4" stroke-linecap="round" fill="none" /> |
| | | <path d="M32 34C24 32 19.5 26 19.5 19.5 27.5 21.5 32 26 32 34Z" fill="#34d399" /> |
| | | <path d="M32 30c6.5-1.5 10.5-6.5 10.5-12C36 20 32 24 32 30Z" fill="#6ee7b7" /> |
| | | <path d="M20 47q12-6 24 0" stroke="#a7f3d0" stroke-width="2.4" stroke-linecap="round" fill="none" /> |
| | | </svg> |
| | | <img |
| | | src="/images/tahe-logo.png" |
| | | alt="塔河种业" |
| | | class="h-16 w-auto shrink-0 rounded-xl bg-white/95 p-1.5 shadow-lg" |
| | | /> |
| | | <div> |
| | | <div class="agri-brand-title text-3xl font-semibold tracking-[0.14em] xl:text-4xl"> |
| | | {{ pageTitle }} |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="agri-brand-tag mt-6 flex items-center gap-4"> |
| | | <div class="agri-brand-tag mt-6 flex items-center justify-end gap-4"> |
| | | <span class="agri-brand-tag-line h-px w-12"></span> |
| | | <span class="text-base tracking-[0.22em]">{{ pageDescription }}</span> |
| | | <span class="agri-brand-tag-line h-px w-12"></span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="mt-12 flex items-start gap-10"> |
| | | <!-- 数据卡片列 --> |
| | | <div class="agri-stats flex w-60 shrink-0 flex-col gap-4" aria-label="平台运行概览"> |
| | | <div class="agri-stat"> |
| | | <span class="agri-stat-icon"> |
| | | <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| | | <path d="M12 20v-8" /> |
| | | <path d="M12 12C12 8 9 5 4.5 4.5 5 9 8 12 12 12Z" /> |
| | | <path d="M12 10c0-3.5 2.6-6 7-6.5-.4 4-3 6.5-7 6.5Z" /> |
| | | <path d="M5 20h14" /> |
| | | </svg> |
| | | </span> |
| | | <div> |
| | | <span class="agri-stat-label">种植面积</span> |
| | | <div class="agri-stat-num">12,580<i>亩</i></div> |
| | | <span class="agri-stat-trend agri-stat-up">较昨日 ↑ 2.35%</span> |
| | | </div> |
| | | </div> |
| | | <div class="agri-stat"> |
| | | <span class="agri-stat-icon"> |
| | | <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| | | <rect x="6" y="6" width="12" height="12" rx="2" /> |
| | | <rect x="10" y="10" width="4" height="4" /> |
| | | <path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4" /> |
| | | </svg> |
| | | </span> |
| | | <div> |
| | | <span class="agri-stat-label">在线设备</span> |
| | | <div class="agri-stat-num">1,286<i>台</i></div> |
| | | <span class="agri-stat-trend agri-stat-up">较昨日 ↑ 5.21%</span> |
| | | </div> |
| | | </div> |
| | | <div class="agri-stat"> |
| | | <span class="agri-stat-icon"> |
| | | <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| | | <path d="M12 3s-6 6.6-6 11a6 6 0 0 0 12 0c0-4.4-6-11-6-11Z" /> |
| | | <path d="M9.5 14a2.5 2.5 0 0 0 2.5 2.5" /> |
| | | </svg> |
| | | </span> |
| | | <div> |
| | | <span class="agri-stat-label">今日灌溉</span> |
| | | <div class="agri-stat-num">328<i>亩</i></div> |
| | | <span class="agri-stat-trend agri-stat-up">较昨日 ↑ 1.15%</span> |
| | | </div> |
| | | </div> |
| | | <div class="agri-stat"> |
| | | <span class="agri-stat-icon agri-stat-icon-warn"> |
| | | <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| | | <path d="M18 9a6 6 0 1 0-12 0c0 5-2 6-2 6h16s-2-1-2-6" /> |
| | | <path d="M10.3 19a2 2 0 0 0 3.4 0" /> |
| | | </svg> |
| | | </span> |
| | | <div> |
| | | <span class="agri-stat-label">AI 预警</span> |
| | | <div class="agri-stat-num">6<i>条</i></div> |
| | | <span class="agri-stat-trend agri-stat-down">较昨日 ↓ 12.50%</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 监测面板列 --> |
| | | <div class="agri-monitors hidden w-72 shrink-0 flex-col gap-6 xl:flex"> |
| | | <div class="agri-monitor"> |
| | | <div class="agri-monitor-title">土壤墒情监测</div> |
| | | <div class="mt-3 flex items-baseline gap-2"> |
| | | <svg viewBox="0 0 24 24" class="size-5 self-center" aria-hidden="true"> |
| | | <path d="M12 3c0 0-6 6.6-6 11a6 6 0 0 0 12 0c0-4.4-6-11-6-11Z" fill="#7dd3fc" /> |
| | | </svg> |
| | | <strong>68.5%</strong> |
| | | <span>土壤湿度</span> |
| | | </div> |
| | | <svg viewBox="0 0 260 92" class="mt-3 w-full" aria-hidden="true"> |
| | | <defs> |
| | | <linearGradient id="agriSoilGrad" x1="0" y1="0" x2="0" y2="1"> |
| | | <stop offset="0%" stop-color="rgba(110, 231, 183, 0.55)" /> |
| | | <stop offset="100%" stop-color="rgba(110, 231, 183, 0.04)" /> |
| | | </linearGradient> |
| | | </defs> |
| | | <g stroke="rgba(255, 255, 255, 0.14)" stroke-dasharray="3 4" stroke-width="1"> |
| | | <path d="M28 10h226" /><path d="M28 45h226" /><path d="M28 80h226" /> |
| | | </g> |
| | | <g fill="rgba(255, 255, 255, 0.55)" font-size="8"> |
| | | <text x="2" y="13">100%</text><text x="6" y="48">50%</text><text x="6" y="83">0%</text> |
| | | </g> |
| | | <path |
| | | d="M28 62 C48 58 60 68 76 60 C94 51 108 64 124 56 C142 47 158 54 174 42 C192 30 210 40 228 30 C240 24 248 27 254 22 L254 80 L28 80 Z" |
| | | fill="url(#agriSoilGrad)" |
| | | /> |
| | | <path |
| | | d="M28 62 C48 58 60 68 76 60 C94 51 108 64 124 56 C142 47 158 54 174 42 C192 30 210 40 228 30 C240 24 248 27 254 22" |
| | | fill="none" stroke="#6ee7b7" stroke-width="2" stroke-linecap="round" |
| | | /> |
| | | </svg> |
| | | <div class="agri-monitor-axis"> |
| | | <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="agri-monitor agri-monitor-ai"> |
| | | <div class="agri-monitor-title flex items-center gap-2"> |
| | | <svg viewBox="0 0 24 24" class="size-4.5" fill="none" stroke="#a7f3d0" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| | | <path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9Z" /> |
| | | <path d="M19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9Z" /> |
| | | </svg> |
| | | AI 智能分析 |
| | | </div> |
| | | <p> |
| | | 当前作物长势良好,土壤墒情适宜,未来3天无明显降雨,建议适时灌溉,保证作物稳产高产。 |
| | | </p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | |
| | | margin-left: clamp(2rem, 6vw, 7rem); |
| | | padding-top: 3rem; |
| | | padding-bottom: 4.5rem; |
| | | } |
| | | |
| | | .agri-brand svg { |
| | | filter: drop-shadow(0 6px 16px rgba(16, 185, 129, 0.35)); |
| | | } |
| | | |
| | | /* ---------- 数据卡片 ---------- */ |
| | | .agri-stat { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 0.85rem; |
| | | border: 1px solid rgba(167, 243, 208, 0.42); |
| | | border-radius: 1.1rem; |
| | | background: linear-gradient(135deg, rgba(8, 87, 65, 0.66), rgba(4, 57, 49, 0.3)); |
| | | padding: 0.9rem 1rem; |
| | | box-shadow: 0 12px 28px rgba(0, 36, 28, 0.16); |
| | | transition: border-color 200ms ease, background 200ms ease; |
| | | color: rgba(236, 253, 245, 0.92); |
| | | backdrop-filter: blur(12px); |
| | | } |
| | | |
| | | .agri-stat-icon { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | width: 2.6rem; |
| | | height: 2.6rem; |
| | | flex-shrink: 0; |
| | | border-radius: 9999px; |
| | | background: linear-gradient(135deg, #10b981, #047857); |
| | | color: #ecfdf5; |
| | | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); |
| | | } |
| | | |
| | | .agri-stat-icon-warn { |
| | | background: linear-gradient(135deg, #f59e0b, #b45309); |
| | | } |
| | | |
| | | .agri-stat-label { |
| | | font-size: 0.75rem; |
| | | color: rgba(236, 253, 245, 0.75); |
| | | } |
| | | |
| | | .agri-stat-num { |
| | | margin-top: 0.1rem; |
| | | font-size: 1.35rem; |
| | | font-weight: 700; |
| | | color: #fff; |
| | | line-height: 1.2; |
| | | } |
| | | |
| | | .agri-stat-num i { |
| | | margin-left: 0.3rem; |
| | | font-size: 0.75rem; |
| | | font-style: normal; |
| | | font-weight: 400; |
| | | color: rgba(236, 253, 245, 0.8); |
| | | } |
| | | |
| | | .agri-stat-trend { |
| | | display: block; |
| | | margin-top: 0.15rem; |
| | | font-size: 0.7rem; |
| | | } |
| | | |
| | | .agri-stat-up { color: #6ee7b7; } |
| | | .agri-stat-down { color: #fca5a5; } |
| | | |
| | | /* ---------- 监测面板 ---------- */ |
| | | .agri-monitor { |
| | | border: 1px solid rgba(125, 211, 252, 0.4); |
| | | border-radius: 1.1rem; |
| | | background: linear-gradient(160deg, rgba(8, 51, 68, 0.6), rgba(6, 78, 59, 0.32)); |
| | | padding: 1rem 1.1rem; |
| | | color: rgba(236, 253, 245, 0.92); |
| | | backdrop-filter: blur(12px); |
| | | box-shadow: 0 0 24px rgba(56, 189, 248, 0.18), 0 14px 30px rgba(0, 36, 28, 0.18); |
| | | } |
| | | |
| | | .agri-monitor-title { |
| | | font-size: 0.85rem; |
| | | font-weight: 600; |
| | | letter-spacing: 0.08em; |
| | | color: #bae6fd; |
| | | } |
| | | |
| | | .agri-monitor strong { |
| | | font-size: 1.6rem; |
| | | font-weight: 700; |
| | | color: #fff; |
| | | } |
| | | |
| | | .agri-monitor strong + span, |
| | | .agri-monitor-title + div span { |
| | | font-size: 0.75rem; |
| | | color: rgba(236, 253, 245, 0.75); |
| | | } |
| | | |
| | | .agri-monitor-axis { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-top: 0.35rem; |
| | | padding-left: 1.6rem; |
| | | font-size: 0.7rem; |
| | | color: rgba(255, 255, 255, 0.6); |
| | | } |
| | | |
| | | .agri-monitor-ai { |
| | | margin-left: 2.5rem; |
| | | border-color: rgba(167, 243, 208, 0.4); |
| | | box-shadow: 0 0 24px rgba(52, 211, 153, 0.16), 0 14px 30px rgba(0, 36, 28, 0.18); |
| | | } |
| | | |
| | | .agri-monitor-ai p { |
| | | margin: 0.6rem 0 0; |
| | | font-size: 0.78rem; |
| | | line-height: 1.7; |
| | | color: rgba(236, 253, 245, 0.85); |
| | | } |
| | | |
| | | /* ---------- 右侧登录卡片 ---------- */ |
| | |
| | | animation: agri-in-right 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both; |
| | | } |
| | | |
| | | .agri-stat, |
| | | .agri-monitor { |
| | | animation: agri-in-up 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; |
| | | } |
| | | |
| | | .agri-stat:nth-child(1) { animation-delay: 0.2s; } |
| | | .agri-stat:nth-child(2) { animation-delay: 0.28s; } |
| | | .agri-stat:nth-child(3) { animation-delay: 0.36s; } |
| | | .agri-stat:nth-child(4) { animation-delay: 0.44s; } |
| | | .agri-monitor:nth-child(1) { animation-delay: 0.3s; } |
| | | .agri-monitor:nth-child(2) { animation-delay: 0.4s; } |
| | | } |
| | | |
| | | @keyframes agri-in-left { |