aiotagro/nxxmdata
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改大屏，继续完善官网

Browse Source
This commit is contained in:
dengyuxin
2025-09-15 17:53:30 +08:00
parent bc3b3d7b52
commit fab7e3e4ea
15 changed files with 1146 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
website/assets/css/style.css
View File

@@ -285,6 +285,48 @@ body {
padding: 5rem 0;
}
/* 百度地图样式 */
#baidu-map-container {
border: 2px solid #e9ecef;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
#baidu-map-container:hover {
border-color: #667eea;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}
/* 地图加载状态样式 */
.map-loading {
background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%),
linear-gradient(-45deg, #f8f9fa 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #f8f9fa 75%),
linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
animation: mapLoading 1s linear infinite;
}
@keyframes mapLoading {
0% { background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }
100% { background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px; }
}
/* 地图控件样式优化 */
.BMap_cpyCtrl {
display: none !important;
}
/* 响应式地图 */
@media (max-width: 768px) {
#baidu-map-container {
height: 250px !important;
margin-bottom: 2rem;
}
}
.contact-info {
margin-bottom: 2rem;
}
@@ -406,6 +448,163 @@ html {
100% { transform: rotate(360deg); }
}
/* 页面加载动画 */
.page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease-out;
}
.page-loader.fade-out {
opacity: 0;
pointer-events: none;
}
.loader-content {
text-align: center;
color: white;
}
.spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
.loader-text {
font-size: 18px;
font-weight: 500;
margin-bottom: 10px;
}
.loader-subtitle {
font-size: 14px;
opacity: 0.8;
}
/* 性能优化 - 图片懒加载 */
.lazy-image {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.lazy-image.loaded {
opacity: 1;
}
/* 按钮悬停效果优化 */
.btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateZ(0);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* 卡片悬停效果优化 */
.card, .feature-card, .download-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateZ(0);
}
.card:hover, .feature-card:hover, .download-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
/* 文字渐入动画 */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.fade-in-up.animate {
opacity: 1;
transform: translateY(0);
}
/* 进度条动画 */
.progress-bar {
transition: width 1.5s ease-in-out;
}
/* 数字计数动画 */
.counter {
font-weight: bold;
color: #667eea;
}
/* 表单提交状态 */
.form-submitting {
pointer-events: none;
opacity: 0.7;
}
.form-submitting .btn {
cursor: not-allowed;
}
/* 通知样式优化 */
.alert {
border: none;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.alert-success {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
/* 骨架屏加载效果 */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* 图片加载优化 */
img {
max-width: 100%;
height: auto;
loading: lazy;
}
/* 减少重绘重排 */
* {
box-sizing: border-box;
}
/* GPU加速 */
.gpu-accelerated {
transform: translateZ(0);
will-change: transform;
}
/* 系统入口功能区 */
.systems-section {
padding: 5rem 0;

BIN
website/assets/images/case1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 MiB

94
website/assets/images/case1.svg Normal file
View File

@@ -0,0 +1,94 @@
<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" />
</linearGradient>
<linearGradient id="farmGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8FBC8F;stop-opacity:1" />
<stop offset="100%" style="stop-color:#228B22;stop-opacity:1" />
</linearGradient>
</defs>
<!-- 背景天空 -->
<rect width="400" height="200" fill="url(#skyGradient)"/>
<!-- 地面 -->
<rect x="0" y="200" width="400" height="100" fill="url(#farmGradient)"/>
<!-- 云朵 -->
<ellipse cx="80" cy="50" rx="25" ry="15" fill="white" opacity="0.8"/>
<ellipse cx="95" cy="45" rx="20" ry="12" fill="white" opacity="0.8"/>
<ellipse cx="320" cy="70" rx="30" ry="18" fill="white" opacity="0.8"/>
<!-- 养殖场建筑 -->
<rect x="50" y="120" width="120" height="80" fill="#8B4513" stroke="#654321" stroke-width="2"/>
<polygon points="50,120 110,80 170,120" fill="#DC143C" stroke="#B22222" stroke-width="2"/>
<!-- 窗户 -->
<rect x="70" y="140" width="20" height="20" fill="#FFD700" stroke="#FFA500" stroke-width="1"/>
<rect x="130" y="140" width="20" height="20" fill="#FFD700" stroke="#FFA500" stroke-width="1"/>
<!-- 门 -->
<rect x="100" y="170" width="20" height="30" fill="#8B4513" stroke="#654321" stroke-width="1"/>
<circle cx="115" cy="185" r="2" fill="#FFD700"/>
<!-- 智能设备 -->
<!-- 监控摄像头 -->
<rect x="45" y="115" width="8" height="6" fill="#2F4F4F" rx="2"/>
<circle cx="49" cy="118" r="3" fill="#000" stroke="#2F4F4F" stroke-width="1"/>
<!-- 传感器 -->
<rect x="175" y="130" width="6" height="15" fill="#4169E1" rx="3"/>
<circle cx="178" cy="125" r="3" fill="#1E90FF"/>
<!-- 数据传输线 -->
<path d="M 178 125 Q 200 100 250 110" stroke="#4169E1" stroke-width="2" fill="none" stroke-dasharray="5,5">
<animate attributeName="stroke-dashoffset" values="0;10" dur="2s" repeatCount="indefinite"/>
</path>
<!-- 控制中心 -->
<rect x="230" y="100" width="80" height="60" fill="#F5F5DC" stroke="#D3D3D3" stroke-width="2" rx="5"/>
<rect x="240" y="110" width="60" height="40" fill="#000" stroke="#333" stroke-width="1"/>
<!-- 屏幕显示 -->
<rect x="245" y="115" width="50" height="30" fill="#00FF00" opacity="0.3"/>
<text x="270" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000">监控中心</text>
<text x="270" y="140" text-anchor="middle" font-family="Arial, sans-serif" font-size="6" fill="#000">实时数据</text>
<!-- 动物 -->
<!-- 牛 -->
<ellipse cx="100" cy="230" rx="25" ry="15" fill="#8B4513"/>
<ellipse cx="85" cy="225" rx="8" ry="6" fill="#8B4513"/>
<rect x="82" y="220" width="3" height="8" fill="#654321"/>
<rect x="87" y="220" width="3" height="8" fill="#654321"/>
<!-- 羊 -->
<ellipse cx="150" cy="235" rx="20" ry="12" fill="#F5F5F5"/>
<ellipse cx="138" cy="230" rx="6" ry="5" fill="#F5F5F5"/>
<rect x="136" y="225" width="2" height="6" fill="#000"/>
<rect x="140" y="225" width="2" height="6" fill="#000"/>
<!-- 智能标签 -->
<rect x="95" y="215" width="10" height="6" fill="#FF6347" rx="2"/>
<text x="100" y="220" text-anchor="middle" font-family="Arial, sans-serif" font-size="4" fill="white">ID</text>
<rect x="145" y="220" width="10" height="6" fill="#FF6347" rx="2"/>
<text x="150" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="4" fill="white">ID</text>
<!-- 信号波纹 -->
<g opacity="0.6">
<circle cx="100" cy="218" r="15" fill="none" stroke="#FF6347" stroke-width="1">
<animate attributeName="r" values="5;20;5" dur="3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="1;0;1" dur="3s" repeatCount="indefinite"/>
</circle>
<circle cx="150" cy="223" r="12" fill="none" stroke="#FF6347" stroke-width="1">
<animate attributeName="r" values="5;18;5" dur="2.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="1;0;1" dur="2.5s" repeatCount="indefinite"/>
</circle>
</g>
<!-- 标题 -->
<rect x="0" y="270" width="400" height="30" fill="rgba(0,0,0,0.7)"/>
<text x="200" y="290" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="16" font-weight="bold" fill="white">智能养殖监控系统</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
website/assets/images/case2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 MiB

112
website/assets/images/case2.svg Normal file
View File

@@ -0,0 +1,112 @@
<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.1" />
</linearGradient>
<linearGradient id="screenGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#1a202c;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2d3748;stop-opacity:1" />
</linearGradient>
</defs>
<!-- 背景 -->
<rect width="400" height="300" fill="url(#bgGradient)"/>
<!-- 办公室环境 -->
<rect x="0" y="200" width="400" height="100" fill="#f7fafc"/>
<!-- 大屏幕显示器 -->
<rect x="50" y="50" width="300" height="180" fill="url(#screenGradient)" stroke="#4a5568" stroke-width="3" rx="10"/>
<rect x="60" y="60" width="280" height="160" fill="#000" rx="5"/>
<!-- 数据图表区域 -->
<!-- 折线图 -->
<g transform="translate(70, 70)">
<text x="0" y="15" font-family="Arial, sans-serif" font-size="12" fill="#00ff00">养殖数据趋势分析</text>
<!-- 坐标轴 -->
<line x1="10" y1="120" x2="120" y2="120" stroke="#4a5568" stroke-width="1"/>
<line x1="10" y1="20" x2="10" y2="120" stroke="#4a5568" stroke-width="1"/>
<!-- 折线图数据 -->
<polyline points="10,100 30,80 50,60 70,70 90,50 110,40"
fill="none" stroke="#00ff00" stroke-width="2"/>
<polyline points="10,110 30,95 50,85 70,90 90,75 110,65"
fill="none" stroke="#ff6b6b" stroke-width="2"/>
<!-- 数据点 -->
<circle cx="10" cy="100" r="3" fill="#00ff00"/>
<circle cx="30" cy="80" r="3" fill="#00ff00"/>
<circle cx="50" cy="60" r="3" fill="#00ff00"/>
<circle cx="70" cy="70" r="3" fill="#00ff00"/>
<circle cx="90" cy="50" r="3" fill="#00ff00"/>
<circle cx="110" cy="40" r="3" fill="#00ff00"/>
<!-- 图例 -->
<line x1="130" y1="30" x2="145" y2="30" stroke="#00ff00" stroke-width="2"/>
<text x="150" y="35" font-family="Arial, sans-serif" font-size="10" fill="#00ff00">产量</text>
<line x1="130" y1="45" x2="145" y2="45" stroke="#ff6b6b" stroke-width="2"/>
<text x="150" y="50" font-family="Arial, sans-serif" font-size="10" fill="#ff6b6b">成本</text>
</g>
<!-- 饼图 -->
<g transform="translate(220, 70)">
<text x="0" y="15" font-family="Arial, sans-serif" font-size="12" fill="#00ff00">养殖结构分布</text>
<!-- 饼图扇形 -->
<path d="M 40 70 L 40 40 A 30 30 0 0 1 65 55 Z" fill="#4facfe"/>
<path d="M 40 70 L 65 55 A 30 30 0 0 1 55 95 Z" fill="#43e97b"/>
<path d="M 40 70 L 55 95 A 30 30 0 0 1 15 85 Z" fill="#f093fb"/>
<path d="M 40 70 L 15 85 A 30 30 0 1 1 40 40 Z" fill="#feca57"/>
<!-- 标签 -->
<text x="0" y="110" font-family="Arial, sans-serif" font-size="8" fill="#4facfe">■ 牛 35%</text>
<text x="0" y="120" font-family="Arial, sans-serif" font-size="8" fill="#43e97b">■ 羊 25%</text>
<text x="0" y="130" font-family="Arial, sans-serif" font-size="8" fill="#f093fb">■ 猪 20%</text>
<text x="0" y="140" font-family="Arial, sans-serif" font-size="8" fill="#feca57">■ 鸡 20%</text>
</g>
<!-- 实时数据面板 -->
<rect x="70" y="170" width="260" height="40" fill="#2d3748" stroke="#4a5568" stroke-width="1" rx="5"/>
<!-- 数据指标 -->
<g transform="translate(80, 180)">
<text x="0" y="12" font-family="Arial, sans-serif" font-size="10" fill="#a0aec0">实时监控数据</text>
<text x="0" y="25" font-family="Arial, sans-serif" font-size="9" fill="#00ff00">温度: 24°C</text>
<text x="60" y="25" font-family="Arial, sans-serif" font-size="9" fill="#00ff00">湿度: 65%</text>
<text x="120" y="25" font-family="Arial, sans-serif" font-size="9" fill="#00ff00">存栏: 1,250头</text>
<text x="180" y="25" font-family="Arial, sans-serif" font-size="9" fill="#ff6b6b">预警: 2条</text>
</g>
<!-- 工作人员 -->
<g transform="translate(320, 160)">
<!-- 人物轮廓 -->
<ellipse cx="15" cy="35" rx="8" ry="12" fill="#4a5568"/>
<circle cx="15" cy="20" r="6" fill="#f7fafc"/>
<rect x="12" y="47" width="6" height="15" fill="#2d3748"/>
<rect x="8" y="62" width="4" height="8" fill="#2d3748"/>
<rect x="18" y="62" width="4" height="8" fill="#2d3748"/>
<!-- 手持设备 -->
<rect x="25" y="30" width="8" height="12" fill="#4a5568" rx="2"/>
<rect x="26" y="31" width="6" height="8" fill="#00ff00" opacity="0.3"/>
</g>
<!-- 数据流动效果 -->
<g opacity="0.6">
<circle cx="100" cy="100" r="2" fill="#00ff00">
<animate attributeName="cx" values="100;200;300" dur="3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="1;0.5;0" dur="3s" repeatCount="indefinite"/>
</circle>
<circle cx="150" cy="120" r="2" fill="#4facfe">
<animate attributeName="cx" values="150;250;350" dur="4s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="1;0.5;0" dur="4s" repeatCount="indefinite"/>
</circle>
</g>
<!-- 标题 -->
<rect x="0" y="270" width="400" height="30" fill="rgba(0,0,0,0.7)"/>
<text x="200" y="290" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="16" font-weight="bold" fill="white">数据分析与决策支持</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
website/assets/images/case3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 KiB

146
website/assets/images/case3.svg Normal file
View File

@@ -0,0 +1,146 @@
<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="mobileGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
</linearGradient>
<linearGradient id="fieldGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#98FB98;stop-opacity:1" />
</linearGradient>
</defs>
<!-- 背景 - 户外场景 -->
<rect width="400" height="300" fill="url(#fieldGradient)"/>
<!-- 地面 -->
<rect x="0" y="220" width="400" height="80" fill="#228B22"/>
<!-- 云朵 -->
<ellipse cx="60" cy="40" rx="20" ry="12" fill="white" opacity="0.8"/>
<ellipse cx="340" cy="60" rx="25" ry="15" fill="white" opacity="0.8"/>
<!-- 养殖场围栏 -->
<g stroke="#8B4513" stroke-width="3" fill="none">
<line x1="50" y1="180" x2="350" y2="180"/>
<line x1="50" y1="180" x2="50" y2="220"/>
<line x1="350" y1="180" x2="350" y2="220"/>
<!-- 围栏柱子 -->
<line x1="100" y1="175" x2="100" y2="225"/>
<line x1="150" y1="175" x2="150" y2="225"/>
<line x1="200" y1="175" x2="200" y2="225"/>
<line x1="250" y1="175" x2="250" y2="225"/>
<line x1="300" y1="175" x2="300" y2="225"/>
</g>
<!-- 动物群 -->
<!-- 牛群 -->
<ellipse cx="120" cy="200" rx="15" ry="10" fill="#8B4513"/>
<ellipse cx="110" cy="195" rx="5" ry="4" fill="#8B4513"/>
<ellipse cx="180" cy="205" rx="15" ry="10" fill="#654321"/>
<ellipse cx="170" cy="200" rx="5" ry="4" fill="#654321"/>
<ellipse cx="250" cy="195" rx="15" ry="10" fill="#8B4513"/>
<ellipse cx="240" cy="190" rx="5" ry="4" fill="#8B4513"/>
<!-- 管理员人物 -->
<g transform="translate(80, 120)">
<!-- 身体 -->
<ellipse cx="0" cy="30" rx="12" ry="20" fill="#4169E1"/>
<!-- 头部 -->
<circle cx="0" cy="10" r="8" fill="#FDBCB4"/>
<!-- 帽子 -->
<ellipse cx="0" cy="5" rx="10" ry="4" fill="#FF6347"/>
<!-- 手臂 -->
<ellipse cx="-8" cy="25" rx="4" ry="12" fill="#FDBCB4" transform="rotate(-20)"/>
<ellipse cx="8" cy="25" rx="4" ry="12" fill="#FDBCB4" transform="rotate(20)"/>
<!-- 腿部 -->
<rect x="-6" y="50" width="5" height="20" fill="#2F4F4F"/>
<rect x="1" y="50" width="5" height="20" fill="#2F4F4F"/>
</g>
<!-- 手机设备 -->
<g transform="translate(120, 140)">
<!-- 手机外壳 -->
<rect x="0" y="0" width="40" height="70" fill="#2F4F4F" rx="8" stroke="#1C1C1C" stroke-width="2"/>
<!-- 屏幕 -->
<rect x="3" y="8" width="34" height="54" fill="#000" rx="4"/>
<!-- 屏幕内容 -->
<rect x="5" y="10" width="30" height="50" fill="url(#mobileGradient)" rx="3"/>
<!-- APP界面 -->
<text x="20" y="20" text-anchor="middle" font-family="Arial, sans-serif" font-size="6" fill="white">养殖管理</text>
<!-- 状态指示器 -->
<circle cx="10" cy="28" r="3" fill="#00FF00"/>
<text x="15" y="32" font-family="Arial, sans-serif" font-size="4" fill="white">在线</text>
<!-- 数据显示 -->
<rect x="7" y="35" width="26" height="8" fill="rgba(255,255,255,0.2)" rx="2"/>
<text x="20" y="41" text-anchor="middle" font-family="Arial, sans-serif" font-size="4" fill="white">存栏: 125头</text>
<rect x="7" y="45" width="26" height="8" fill="rgba(255,255,255,0.2)" rx="2"/>
<text x="20" y="51" text-anchor="middle" font-family="Arial, sans-serif" font-size="4" fill="white">温度: 22°C</text>
<!-- 按钮 -->
<rect x="7" y="55" width="12" height="6" fill="#FF6347" rx="2"/>
<text x="13" y="59" text-anchor="middle" font-family="Arial, sans-serif" font-size="3" fill="white">报警</text>
<rect x="21" y="55" width="12" height="6" fill="#32CD32" rx="2"/>
<text x="27" y="59" text-anchor="middle" font-family="Arial, sans-serif" font-size="3" fill="white">记录</text>
<!-- Home键 -->
<circle cx="20" cy="66" r="2" fill="#4A4A4A"/>
</g>
<!-- 无线信号传输 -->
<g opacity="0.7">
<!-- 从动物到手机的信号 -->
<path d="M 120 190 Q 140 160 140 150" stroke="#00FF00" stroke-width="2" fill="none" stroke-dasharray="3,3">
<animate attributeName="stroke-dashoffset" values="0;6" dur="1.5s" repeatCount="indefinite"/>
</path>
<path d="M 180 195 Q 160 170 150 155" stroke="#00FF00" stroke-width="2" fill="none" stroke-dasharray="3,3">
<animate attributeName="stroke-dashoffset" values="0;6" dur="2s" repeatCount="indefinite"/>
</path>
<!-- 信号波纹 -->
<g transform="translate(140, 150)">
<circle cx="0" cy="0" r="8" fill="none" stroke="#00FF00" stroke-width="1">
<animate attributeName="r" values="3;15;3" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="1;0;1" dur="2s" repeatCount="indefinite"/>
</circle>
</g>
</g>
<!-- 智能标签 -->
<rect x="115" y="185" width="10" height="5" fill="#FF6347" rx="2"/>
<rect x="175" y="190" width="10" height="5" fill="#FF6347" rx="2"/>
<rect x="245" y="180" width="10" height="5" fill="#FF6347" rx="2"/>
<!-- GPS定位图标 -->
<g transform="translate(300, 50)">
<circle cx="0" cy="0" r="15" fill="none" stroke="#FF6347" stroke-width="2"/>
<circle cx="0" cy="0" r="3" fill="#FF6347"/>
<text x="0" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#2F4F4F">GPS定位</text>
</g>
<!-- 数据上传云端 -->
<g transform="translate(200, 30)">
<!-- 云朵图标 -->
<path d="M 0 15 c -8 0 -15 -7 -15 -15 c 0 -4 2 -8 5 -11 c 1 -6 6 -10 12 -10 c 8 0 15 7 15 15 c 0 1 0 2 -1 3 c 3 2 5 5 5 8 c 0 5 -4 10 -10 10 H 0 z" fill="white" stroke="#4A90E2" stroke-width="1"/>
<!-- 上传箭头 -->
<path d="M 0 5 L -3 8 L 3 8 Z" fill="#4A90E2"/>
<line x1="0" y1="5" x2="0" y2="12" stroke="#4A90E2" stroke-width="2"/>
<text x="0" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#2F4F4F">云端同步</text>
</g>
<!-- 标题 -->
<rect x="0" y="270" width="400" height="30" fill="rgba(0,0,0,0.7)"/>
<text x="200" y="290" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="16" font-weight="bold" fill="white">移动端智能管理</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

73
website/assets/images/hero-bg.svg Normal file
View File

@@ -0,0 +1,73 @@
<svg width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.8" />
<stop offset="50%" style="stop-color:#764ba2;stop-opacity:0.6" />
<stop offset="100%" style="stop-color:#667eea;stop-opacity:0.4" />
</linearGradient>
<pattern id="gridPattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
</pattern>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- 主背景 -->
<rect width="1920" height="1080" fill="url(#bgGradient)"/>
<!-- 网格图案 -->
<rect width="1920" height="1080" fill="url(#gridPattern)" opacity="0.3"/>
<!-- 装饰性几何图形 -->
<g opacity="0.2">
<!-- 大圆 -->
<circle cx="1600" cy="200" r="150" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2"/>
<circle cx="1600" cy="200" r="100" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
<!-- 小圆群 -->
<circle cx="300" cy="800" r="80" fill="rgba(255,255,255,0.1)"/>
<circle cx="250" cy="750" r="40" fill="rgba(255,255,255,0.15)"/>
<circle cx="350" cy="720" r="30" fill="rgba(255,255,255,0.1)"/>
<!-- 三角形 -->
<polygon points="1400,900 1500,700 1600,900" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/>
<!-- 六边形 -->
<polygon points="100,300 150,250 200,300 200,400 150,450 100,400" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
</g>
<!-- 浮动粒子效果 -->
<g opacity="0.6">
<circle cx="200" cy="200" r="3" fill="#ffffff" filter="url(#glow)">
<animate attributeName="cy" values="200;180;200" dur="3s" repeatCount="indefinite"/>
</circle>
<circle cx="800" cy="300" r="2" fill="#ffffff" filter="url(#glow)">
<animate attributeName="cy" values="300;280;300" dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="1200" cy="500" r="4" fill="#ffffff" filter="url(#glow)">
<animate attributeName="cy" values="500;470;500" dur="5s" repeatCount="indefinite"/>
</circle>
<circle cx="1500" cy="600" r="2" fill="#ffffff" filter="url(#glow)">
<animate attributeName="cy" values="600;580;600" dur="3.5s" repeatCount="indefinite"/>
</circle>
<circle cx="400" cy="900" r="3" fill="#ffffff" filter="url(#glow)">
<animate attributeName="cy" values="900;870;900" dur="4.5s" repeatCount="indefinite"/>
</circle>
</g>
<!-- 底部渐变遮罩 -->
<defs>
<linearGradient id="bottomMask" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgba(0,0,0,0.3);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="800" width="1920" height="280" fill="url(#bottomMask)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
website/assets/images/hero-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 306 KiB

35
website/assets/images/logo.svg Normal file
View File

@@ -0,0 +1,35 @@
<svg width="200" height="60" viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
</linearGradient>
</defs>
<!-- 背景圆形 -->
<circle cx="30" cy="30" r="25" fill="url(#logoGradient)" opacity="0.1"/>
<!-- 主图标 - 云朵和农场 -->
<g transform="translate(10, 10)">
<!-- 云朵 -->
<path d="M15 20c-3.3 0-6-2.7-6-6 0-1.8.8-3.4 2.1-4.5C11.7 7.6 13.7 6 16 6c3.3 0 6 2.7 6 6 0 .5-.1 1-.2 1.4 1.2.8 2 2.2 2 3.6 0 2.2-1.8 4-4 4H15z" fill="url(#logoGradient)"/>
<!-- 农场建筑 -->
<rect x="8" y="25" width="24" height="15" fill="#4a5568" opacity="0.8"/>
<polygon points="8,25 20,15 32,25" fill="#e53e3e" opacity="0.8"/>
<!-- 窗户 -->
<rect x="12" y="28" width="4" height="4" fill="#ffd700"/>
<rect x="24" y="28" width="4" height="4" fill="#ffd700"/>
<!-- 门 -->
<rect x="18" y="32" width="4" height="8" fill="#8b4513"/>
</g>
<!-- 文字部分 -->
<text x="65" y="25" font-family="'Microsoft YaHei', sans-serif" font-size="16" font-weight="bold" fill="url(#logoGradient)">宁夏智慧养殖</text>
<text x="65" y="42" font-family="'Microsoft YaHei', sans-serif" font-size="12" fill="#666">监管平台</text>
<!-- 装饰线条 -->
<line x1="65" y1="48" x2="190" y2="48" stroke="url(#logoGradient)" stroke-width="2" opacity="0.3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
website/assets/images/tech-architecture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

125
website/assets/images/tech-architecture.svg Normal file
View File

@@ -0,0 +1,125 @@
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="layerGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.8" />
</linearGradient>
<linearGradient id="layerGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#f093fb;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#f5576c;stop-opacity:0.8" />
</linearGradient>
<linearGradient id="layerGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4facfe;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#00f2fe;stop-opacity:0.8" />
</linearGradient>
<linearGradient id="layerGradient4" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#43e97b;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#38f9d7;stop-opacity:0.8" />
</linearGradient>
</defs>
<!-- 背景 -->
<rect width="800" height="600" fill="#f8f9fa"/>
<!-- 标题 -->
<text x="400" y="30" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="24" font-weight="bold" fill="#2d3748">智慧养殖监管平台技术架构</text>
<!-- 表示层 -->
<rect x="50" y="80" width="700" height="80" rx="10" fill="url(#layerGradient1)" stroke="#667eea" stroke-width="2"/>
<text x="70" y="105" font-family="Microsoft YaHei, sans-serif" font-size="16" font-weight="bold" fill="white">表示层 (Presentation Layer)</text>
<!-- 表示层组件 -->
<rect x="80" y="115" width="120" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#667eea"/>
<text x="140" y="135" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="12" fill="#2d3748">Web管理界面</text>
<rect x="220" y="115" width="120" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#667eea"/>
<text x="280" y="135" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="12" fill="#2d3748">移动端APP</text>
<rect x="360" y="115" width="120" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#667eea"/>
<text x="420" y="135" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="12" fill="#2d3748">数据大屏</text>
<rect x="500" y="115" width="120" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#667eea"/>
<text x="560" y="135" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="12" fill="#2d3748">API接口</text>
<!-- 业务层 -->
<rect x="50" y="200" width="700" height="80" rx="10" fill="url(#layerGradient2)" stroke="#f5576c" stroke-width="2"/>
<text x="70" y="225" font-family="Microsoft YaHei, sans-serif" font-size="16" font-weight="bold" fill="white">业务层 (Business Layer)</text>
<!-- 业务层组件 -->
<rect x="80" y="235" width="100" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#f5576c"/>
<text x="130" y="255" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="11" fill="#2d3748">养殖管理</text>
<rect x="200" y="235" width="100" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#f5576c"/>
<text x="250" y="255" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="11" fill="#2d3748">监控预警</text>
<rect x="320" y="235" width="100" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#f5576c"/>
<text x="370" y="255" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="11" fill="#2d3748">数据分析</text>
<rect x="440" y="235" width="100" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#f5576c"/>
<text x="490" y="255" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="11" fill="#2d3748">用户权限</text>
<rect x="560" y="235" width="100" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#f5576c"/>
<text x="610" y="255" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="11" fill="#2d3748">系统配置</text>
<!-- 服务层 -->
<rect x="50" y="320" width="700" height="80" rx="10" fill="url(#layerGradient3)" stroke="#4facfe" stroke-width="2"/>
<text x="70" y="345" font-family="Microsoft YaHei, sans-serif" font-size="16" font-weight="bold" fill="white">服务层 (Service Layer)</text>
<!-- 服务层组件 -->
<rect x="80" y="355" width="100" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#4facfe"/>
<text x="130" y="375" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="11" fill="#2d3748">数据采集</text>
<rect x="200" y="355" width="100" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#4facfe"/>
<text x="250" y="375" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="11" fill="#2d3748">消息队列</text>
<rect x="320" y="355" width="100" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#4facfe"/>
<text x="370" y="375" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="11" fill="#2d3748">缓存服务</text>
<rect x="440" y="355" width="100" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#4facfe"/>
<text x="490" y="375" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="11" fill="#2d3748">文件存储</text>
<rect x="560" y="355" width="100" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#4facfe"/>
<text x="610" y="375" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="11" fill="#2d3748">第三方集成</text>
<!-- 数据层 -->
<rect x="50" y="440" width="700" height="80" rx="10" fill="url(#layerGradient4)" stroke="#43e97b" stroke-width="2"/>
<text x="70" y="465" font-family="Microsoft YaHei, sans-serif" font-size="16" font-weight="bold" fill="white">数据层 (Data Layer)</text>
<!-- 数据层组件 -->
<rect x="80" y="475" width="120" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#43e97b"/>
<text x="140" y="495" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="12" fill="#2d3748">MySQL数据库</text>
<rect x="220" y="475" width="120" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#43e97b"/>
<text x="280" y="495" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="12" fill="#2d3748">Redis缓存</text>
<rect x="360" y="475" width="120" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#43e97b"/>
<text x="420" y="495" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="12" fill="#2d3748">时序数据库</text>
<rect x="500" y="475" width="120" height="35" rx="5" fill="rgba(255,255,255,0.9)" stroke="#43e97b"/>
<text x="560" y="495" text-anchor="middle" font-family="Microsoft YaHei, sans-serif" font-size="12" fill="#2d3748">文件系统</text>
<!-- 连接线 -->
<g stroke="#718096" stroke-width="2" fill="none" opacity="0.6">
<!-- 表示层到业务层 -->
<line x1="140" y1="160" x2="130" y2="200"/>
<line x1="280" y1="160" x2="250" y2="200"/>
<line x1="420" y1="160" x2="370" y2="200"/>
<line x1="560" y1="160" x2="490" y2="200"/>
<!-- 业务层到服务层 -->
<line x1="130" y1="280" x2="130" y2="320"/>
<line x1="250" y1="280" x2="250" y2="320"/>
<line x1="370" y1="280" x2="370" y2="320"/>
<line x1="490" y1="280" x2="490" y2="320"/>
<line x1="610" y1="280" x2="610" y2="320"/>
<!-- 服务层到数据层 -->
<line x1="130" y1="400" x2="140" y2="440"/>
<line x1="250" y1="400" x2="280" y2="440"/>
<line x1="370" y1="400" x2="420" y2="440"/>
<line x1="490" y1="400" x2="560" y2="440"/>
</g>
<!-- 技术栈标注 -->
<text x="50" y="570" font-family="Microsoft YaHei, sans-serif" font-size="14" font-weight="bold" fill="#4a5568">技术栈：Vue.js 3 + Node.js + MySQL + Redis + Docker</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

194
website/assets/js/script.js
View File

@@ -1,5 +1,8 @@
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 页面加载动画
initPageLoader();
// 初始化导航栏滚动效果
initNavbarScroll();
@@ -11,8 +14,116 @@ document.addEventListener('DOMContentLoaded', function() {
// 初始化数据统计动画
initStatsCounter();
// 图片懒加载
initLazyLoading();
// 性能优化
initPerformanceOptimizations();
});
// 页面加载动画
function initPageLoader() {
// 创建加载器
const loader = document.createElement('div');
loader.className = 'page-loader';
loader.innerHTML = `
<div class="loader-content">
<div class="spinner"></div>
<div class="loader-text">宁夏智慧养殖监管平台</div>
<div class="loader-subtitle">正在加载中...</div>
</div>
`;
document.body.appendChild(loader);
// 页面加载完成后隐藏加载器
window.addEventListener('load', function() {
setTimeout(() => {
loader.classList.add('fade-out');
setTimeout(() => {
if (loader.parentNode) {
loader.parentNode.removeChild(loader);
}
}, 500);
}, 800);
});
}
// 图片懒加载
function initLazyLoading() {
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.add('lazy-image');
img.onload = () => {
img.classList.add('loaded');
};
observer.unobserve(img);
}
});
});
images.forEach(img => imageObserver.observe(img));
}
// 性能优化
function initPerformanceOptimizations() {
// 导航栏滚动优化
let ticking = false;
function updateNavbar() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
ticking = false;
}
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(updateNavbar);
ticking = true;
}
});
// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// 预加载关键资源
const criticalImages = [
'assets/images/hero-bg.svg',
'assets/images/logo.svg'
];
criticalImages.forEach(src => {
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'image';
link.href = src;
document.head.appendChild(link);
});
}
// 导航栏滚动效果
function initNavbarScroll() {
const navbar = document.querySelector('.navbar');
@@ -79,9 +190,12 @@ function validateForm(form) {
if (input.hasAttribute('required') && !input.value.trim()) {
showInputError(input, '此字段为必填项');
isValid = false;
} else if (input.type === 'email' && !isValidEmail(input.value)) {
} else if (input.type === 'email' && input.value && !isValidEmail(input.value)) {
showInputError(input, '请输入有效的邮箱地址');
isValid = false;
} else if (input.type === 'tel' && input.value && !isValidPhone(input.value)) {
showInputError(input, '请输入有效的手机号码');
isValid = false;
} else {
clearInputError(input);
}
@@ -90,6 +204,84 @@ function validateForm(form) {
return isValid;
}
// 手机号验证
function isValidPhone(phone) {
const phoneRegex = /^1[3-9]\d{9}$/;
return phoneRegex.test(phone);
}
// 提交联系表单
function submitContactForm(event) {
event.preventDefault();
const form = event.target;
if (!validateForm(form)) {
return;
}
const formData = new FormData(form);
const data = {
name: formData.get('name'),
email: formData.get('email'),
phone: formData.get('phone'),
message: formData.get('message'),
timestamp: new Date().toISOString()
};
// 显示提交中状态
const submitBtn = form.querySelector('button[type="submit"]');
const originalText = submitBtn.innerHTML;
submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>提交中...';
submitBtn.disabled = true;
// 模拟提交到后端（实际项目中替换为真实API）
setTimeout(() => {
// 这里应该是实际的API调用
console.log('表单数据:', data);
// 显示成功消息
showNotification('消息发送成功！我们会尽快回复您。', 'success');
// 重置表单
form.reset();
// 恢复按钮状态
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
// 存储到本地（演示用）
saveContactToLocal(data);
}, 2000);
}
// 显示通知消息
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `alert alert-${type === 'success' ? 'success' : 'info'} alert-dismissible fade show position-fixed`;
notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
notification.innerHTML = `
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
document.body.appendChild(notification);
// 自动移除通知
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification);
}
}, 5000);
}
// 保存联系信息到本地存储（演示用）
function saveContactToLocal(formData) {
let contacts = JSON.parse(localStorage.getItem('contacts') || '[]');
contacts.push(formData);
localStorage.setItem('contacts', JSON.stringify(contacts));
}
// 邮箱验证
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;