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

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