<script setup lang="ts">
|
import type { ToolbarType } from './types';
|
|
import { computed } from 'vue';
|
|
import { preferences, usePreferences } from '../../../../preferences/src';
|
|
import { Copyright } from '../basic/copyright';
|
import AuthenticationFormView from './form.vue';
|
import Toolbar from './toolbar.vue';
|
|
interface Props {
|
appName?: string;
|
logo?: string;
|
logoDark?: string;
|
pageTitle?: string;
|
pageDescription?: string;
|
sloganImage?: string;
|
toolbar?: boolean;
|
copyright?: boolean;
|
toolbarList?: ToolbarType[];
|
clickLogo?: () => void;
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
appName: '',
|
copyright: true,
|
logo: '',
|
logoDark: '',
|
pageDescription: '',
|
pageTitle: '',
|
sloganImage: '',
|
toolbar: true,
|
toolbarList: () => ['color', 'language', 'layout', 'theme'],
|
clickLogo: () => {},
|
});
|
|
const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
usePreferences();
|
|
/**
|
* @zh_CN 根据主题选择合适的 logo 图标
|
*/
|
const logoSrc = computed(() => {
|
if (isDark.value && props.logoDark) {
|
return props.logoDark;
|
}
|
return props.logo;
|
});
|
|
</script>
|
|
<template>
|
<div
|
:class="[isDark ? 'dark' : '']"
|
class="agri-auth flex min-h-full flex-1 overflow-x-hidden select-none"
|
>
|
<template v-if="toolbar">
|
<slot name="toolbar">
|
<Toolbar :toolbar-list="toolbarList" />
|
</slot>
|
</template>
|
<!-- 左侧认证面板 -->
|
<AuthenticationFormView
|
v-if="authPanelLeft"
|
class="agri-left-panel min-h-full w-2/5 flex-1"
|
data-side="left"
|
>
|
<template v-if="copyright" #copyright>
|
<slot name="copyright">
|
<Copyright
|
v-if="preferences.copyright.enable"
|
v-bind="preferences.copyright"
|
/>
|
</slot>
|
</template>
|
</AuthenticationFormView>
|
|
<slot name="logo">
|
<!-- 头部 Logo 和应用名称（小屏展示，大屏由品牌区代替） -->
|
<div
|
v-if="logoSrc || appName"
|
class="agri-mini-logo absolute top-0 left-0 z-10 flex flex-1"
|
@click="clickLogo"
|
>
|
<div
|
class="mt-4 ml-4 flex flex-1 items-center text-foreground sm:top-6 sm:left-6 lg:text-foreground"
|
>
|
<img
|
v-if="logoSrc"
|
:key="logoSrc"
|
:alt="appName"
|
:src="logoSrc"
|
class="mr-2"
|
width="42"
|
/>
|
<p v-if="appName" class="m-0 text-xl font-medium">
|
{{ appName }}
|
</p>
|
</div>
|
</div>
|
</slot>
|
|
<!-- 系统介绍 -->
|
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-[1.18] lg:block">
|
<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"
|
>
|
<!-- 品牌区 -->
|
<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>
|
<div>
|
<div class="agri-brand-title text-3xl font-semibold tracking-[0.14em] xl:text-4xl">
|
{{ pageTitle }}
|
</div>
|
<div class="agri-brand-sub mt-2 text-xs tracking-[0.3em] xl:text-sm">
|
AGRICULTURE DIGITAL PLATFORM
|
</div>
|
</div>
|
</div>
|
<div class="agri-brand-tag mt-6 flex items-center 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>
|
</div>
|
|
<!-- 中心认证面板 -->
|
<div v-if="authPanelCenter" class="relative flex-center w-full">
|
<div class="login-background absolute top-0 left-0 size-full"></div>
|
<AuthenticationFormView
|
class="w-full rounded-3xl border border-border/60 pb-20 shadow-float shadow-primary/10 md:w-2/3 md:bg-background/95 lg:w-1/2 xl:w-[36%]"
|
data-side="bottom"
|
>
|
<template v-if="copyright" #copyright>
|
<slot name="copyright">
|
<Copyright
|
v-if="preferences.copyright.enable"
|
v-bind="preferences.copyright"
|
/>
|
</slot>
|
</template>
|
</AuthenticationFormView>
|
</div>
|
|
<!-- 右侧认证面板 -->
|
<div v-if="authPanelRight" class="agri-form-wrap relative">
|
<AuthenticationFormView class="agri-form-panel min-h-full w-full" data-side="right" />
|
|
<!-- 卡片右上树叶装饰 -->
|
<svg
|
class="pointer-events-none absolute top-0 right-0 h-36 w-40"
|
viewBox="0 0 180 150"
|
aria-hidden="true"
|
>
|
<path d="M180 4c-26 22-38 52-36 92" fill="none" stroke="#4ade80" stroke-width="2" stroke-linecap="round" />
|
<g fill="#4ade80" opacity="0.85">
|
<path d="M160 22q-16-10-30-2 12 12 30 2Z" />
|
<path d="M150 44q-18-6-30 4 14 10 30-4Z" />
|
<path d="M146 70q-18-2-28 10 16 7 28-10Z" />
|
<path d="M146 96q-16 2-24 14 16 4 24-14Z" />
|
</g>
|
<g fill="#86efac" opacity="0.7">
|
<path d="M164 34q4-16 18-22 2 16-18 22Z" />
|
<path d="M156 60q6-14 20-18 0 16-20 18Z" />
|
<path d="M152 86q8-12 22-14-2 16-22 14Z" />
|
</g>
|
<g fill="#bbf7d0" opacity="0.45">
|
<path d="M96 118q-14-8-26-1 10 10 26 1Z" />
|
<path d="M70 136q-12-6-22 0 9 8 22 0Z" />
|
</g>
|
</svg>
|
|
<!-- 卡片底部农场插画 -->
|
<svg
|
class="agri-farm pointer-events-none absolute inset-x-0 bottom-0 h-24 w-full"
|
viewBox="0 0 560 130"
|
preserveAspectRatio="xMidYMax slice"
|
aria-hidden="true"
|
>
|
<path d="M0 92 Q120 62 260 88 T560 80 V130 H0 Z" fill="#dcfce7" />
|
<path d="M0 112 Q160 88 320 110 T560 104 V130 H0 Z" fill="#bbf7d0" />
|
<g fill="#a7f3d0">
|
<path d="M36 76 L58 58 L80 76 Z" />
|
<rect x="42" y="76" width="32" height="22" fill="#ecfdf5" />
|
<rect x="54" y="84" width="9" height="14" fill="#86efac" />
|
</g>
|
<g>
|
<rect x="116" y="78" width="4" height="16" fill="#86efac" />
|
<circle cx="118" cy="70" r="12" fill="#86efac" />
|
<rect x="146" y="84" width="3.5" height="12" fill="#6ee7b7" />
|
<circle cx="148" cy="78" r="8" fill="#6ee7b7" />
|
</g>
|
<g stroke="#6ee7b7" stroke-width="3" stroke-linecap="round">
|
<path d="M470 100V64" />
|
<path d="M470 64l-14-10M470 64l16-6M470 64l-2 18" />
|
</g>
|
<g fill="#a7f3d0">
|
<path d="M498 82 L514 68 L530 82 Z" />
|
<rect x="503" y="82" width="22" height="16" fill="#ecfdf5" />
|
</g>
|
</svg>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.agri-auth {
|
position: relative;
|
min-height: 100dvh;
|
overflow-y: auto;
|
background-color: #124b39;
|
background-image: url('/agriculture-login-bg.png');
|
background-position: center;
|
background-size: cover;
|
isolation: isolate;
|
}
|
|
.login-background {
|
background-image: none;
|
filter: saturate(1.06) contrast(1.01);
|
}
|
|
.agri-left-panel,
|
.agri-left-panel :deep(*) {
|
background-color: transparent !important;
|
}
|
|
/* 品牌文字：白色 + 文字阴影保证在背景图上的可读性 */
|
.agri-brand-title {
|
color: #fff;
|
text-shadow: 0 2px 10px rgba(2, 44, 34, 0.6);
|
}
|
|
.agri-brand-sub {
|
color: rgba(240, 253, 250, 0.92);
|
text-shadow: 0 1px 6px rgba(2, 44, 34, 0.55);
|
}
|
|
.agri-brand-tag {
|
color: rgba(240, 253, 250, 0.92);
|
text-shadow: 0 1px 6px rgba(2, 44, 34, 0.55);
|
}
|
|
.agri-brand-tag-line { background: rgba(167, 243, 208, 0.8); }
|
|
/* 大屏隐藏左上角小 logo，由品牌区展示 */
|
@media (min-width: 1024px) {
|
.agri-mini-logo {
|
display: none;
|
}
|
}
|
|
/* ---------- 品牌与内容 ---------- */
|
.agri-promo {
|
max-width: 780px;
|
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);
|
}
|
|
/* ---------- 右侧登录卡片 ---------- */
|
.agri-form-wrap {
|
align-self: center;
|
max-height: calc(100dvh - 5rem);
|
margin: 2.5rem clamp(1rem, 4vw, 4.5rem) 2.5rem 1.5rem;
|
width: 40%;
|
flex: 0.82 1 0%;
|
/* 外层统一圆角裁剪，避免底部插画等兄弟装饰把卡片直角化 */
|
overflow: hidden;
|
border-radius: 1.75rem;
|
box-shadow: 0 24px 70px rgba(2, 44, 34, 0.24);
|
}
|
|
.agri-form-panel {
|
overflow: auto;
|
border: 1px solid rgba(255, 255, 255, 0.9);
|
border-radius: 1.75rem;
|
background: rgba(250, 253, 251, 0.96) !important;
|
backdrop-filter: blur(18px);
|
}
|
|
/* 表单内容上移，为底部插画留出空间 */
|
.agri-form-wrap :deep(.side-content) {
|
margin-bottom: 4.5rem;
|
}
|
|
/* 标题下的绿色装饰条 */
|
.agri-form-wrap :deep(h2 + p)::after {
|
content: '';
|
display: block;
|
width: 2.75rem;
|
height: 0.28rem;
|
margin-top: 0.8rem;
|
border-radius: 9999px;
|
background: #16a34a;
|
}
|
|
/* 输入框前缀图标 */
|
.agri-form-wrap :deep(input[autocomplete='username']),
|
.agri-form-wrap :deep(input[autocomplete='current-password']) {
|
padding-left: 2.6rem;
|
background-repeat: no-repeat;
|
background-position: 0.85rem center;
|
background-size: 1.05rem;
|
}
|
|
.agri-form-wrap :deep(input[autocomplete='username']) {
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
|
}
|
|
.agri-form-wrap :deep(input[autocomplete='current-password']) {
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
|
}
|
|
/* 输入框整体质感：加高、圆角、柔和边框、聚焦绿色光圈 */
|
.agri-form-wrap :deep(input) {
|
height: 3rem;
|
border-radius: 0.75rem;
|
border-color: rgba(15, 118, 110, 0.16);
|
background-color: #fff;
|
font-size: 0.95rem;
|
transition: border-color 200ms ease, box-shadow 200ms ease;
|
}
|
|
.agri-form-wrap :deep(input:hover) {
|
border-color: rgba(16, 185, 129, 0.45);
|
}
|
|
.agri-form-wrap :deep(input:focus),
|
.agri-form-wrap :deep(input:focus-visible) {
|
border-color: #10b981;
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
|
outline: none;
|
}
|
|
.dark .agri-form-wrap :deep(input) {
|
border-color: rgba(255, 255, 255, 0.16);
|
background-color: rgba(255, 255, 255, 0.06);
|
}
|
|
.dark .agri-form-wrap :deep(input:focus),
|
.dark .agri-form-wrap :deep(input:focus-visible) {
|
border-color: #34d399;
|
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
|
}
|
|
@media (max-width: 1023px) {
|
.agri-farm {
|
display: none;
|
}
|
}
|
|
/* ---------- 暗色模式 ---------- */
|
.dark .login-background {
|
background-image:
|
linear-gradient(90deg, rgba(2, 26, 20, 0.9), rgba(2, 26, 20, 0.62)),
|
url('/agriculture-login-bg.png');
|
}
|
|
.dark .agri-form-panel {
|
background: rgba(13, 31, 25, 0.96) !important;
|
}
|
|
.dark .agri-form-wrap > svg {
|
opacity: 0.35;
|
}
|
|
/* ---------- 响应式 ---------- */
|
@media (max-width: 1023px) {
|
.agri-promo { margin-left: 2rem; }
|
.agri-form-wrap { margin-right: 1.25rem; }
|
}
|
|
@media (max-height: 720px) and (min-width: 1024px) {
|
.agri-form-wrap {
|
max-height: calc(100dvh - 2rem);
|
margin-top: 1rem;
|
margin-bottom: 1rem;
|
}
|
|
.agri-promo {
|
padding-top: 1.5rem;
|
padding-bottom: 3rem;
|
}
|
|
.agri-promo .mt-12 {
|
margin-top: 2rem;
|
}
|
}
|
|
@media (max-width: 767px) {
|
.agri-form-wrap {
|
align-self: stretch;
|
margin: 1rem;
|
width: auto;
|
flex: none;
|
}
|
|
.agri-form-panel {
|
border-radius: 1.5rem;
|
}
|
}
|
|
/* ---------- 入场动画（纯 CSS，动画结束必然停留于可见态） ---------- */
|
@media (prefers-reduced-motion: no-preference) {
|
.agri-promo {
|
animation: agri-in-left 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
|
}
|
|
.agri-form-wrap {
|
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 {
|
from {
|
opacity: 0;
|
transform: translateX(-28px);
|
}
|
}
|
|
@keyframes agri-in-right {
|
from {
|
opacity: 0;
|
transform: translateX(28px);
|
}
|
}
|
|
@keyframes agri-in-up {
|
from {
|
opacity: 0;
|
transform: translateY(18px);
|
}
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
.agri-auth :deep(*) {
|
animation-duration: 0.01ms !important;
|
animation-iteration-count: 1 !important;
|
transition-duration: 0.01ms !important;
|
}
|
}
|
</style>
|
