智慧农业管理平台灵感：
- 技术栈 ：React + Ant Design（从
package.json和代码中的import语句判断） - 主题色 ：农业风，主色是 绿色系 （
#52c41a/#389e0d这类） - 布局 ：典型的后台管理布局 ------ 左侧侧边导航 + 右侧顶部栏 + 内容区域
- 核心模块：仪表盘（数据看板）、农场管理、作物监测、设备管理、任务中心等
为了让你立即看到"效果"，你只需要复制下面的代码，保存为 preview.html，然后用浏览器打开即可。
html
!DOCTYPE html
html lang=zh-CN
head
meta charset=UTF-8
meta name=viewport content=width=device-width, initial-scale=1.0
title智慧农业管理平台title
!-- 字体图标库 --
link rel=stylesheet href=httpscdnjs.cloudflare.comajaxlibsfont-awesome6.0.0-beta3cssall.min.css
!-- 图表库 Chart.js --
script src=httpscdn.jsdelivr.netnpmchart.js@4.4.0distchart.umd.min.jsscript
style
===== 全局重置 & 主题变量 =====
{
margin 0;
padding 0;
box-sizing border-box;
font-family 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
root {
--primary #2e7d32; 深绿主色
--primary-light #4caf50;
--primary-bg #f0f7f0; 背景浅绿
--sidebar-width 240px;
--header-height 64px;
--border-color #e8edeb;
--text-dark #1a2e1a;
--text-gray #5a6b5a;
--card-shadow 0 2px 12px rgba(46, 125, 50, 0.08);
--radius 12px;
}
body {
background #f5f9f5;
display flex;
min-height 100vh;
}
===== 侧边栏 =====
.sidebar {
width var(--sidebar-width);
background #ffffff;
border-right 1px solid var(--border-color);
height 100vh;
position sticky;
top 0;
padding 20px 0;
display flex;
flex-direction column;
box-shadow 2px 0 8px rgba(0,0,0,0.02);
}
.logo-area {
padding 0 24px 30px 24px;
display flex;
align-items center;
gap 10px;
border-bottom 1px solid var(--border-color);
}
.logo-icon {
width 36px;
height 36px;
background var(--primary);
border-radius 10px;
display flex;
align-items center;
justify-content center;
color white;
font-size 20px;
}
.logo-text {
font-size 20px;
font-weight 700;
color var(--text-dark);
letter-spacing -0.5px;
}
.logo-text span {
color var(--primary-light);
}
.menu {
flex 1;
padding 20px 12px;
list-style none;
}
.menu-item {
display flex;
align-items center;
gap 14px;
padding 12px 16px;
border-radius 10px;
color var(--text-gray);
font-weight 500;
font-size 15px;
transition all 0.2s;
cursor default;
margin-bottom 4px;
}
.menu-item i {
width 20px;
font-size 16px;
color #8a9b8a;
}
.menu-item.active {
background var(--primary-bg);
color var(--primary);
font-weight 600;
}
.menu-item.active i {
color var(--primary);
}
.menu-itemnot(.active)hover {
background #f2f7f2;
}
.menu-divider {
height 1px;
background var(--border-color);
margin 16px 16px;
}
===== 右侧主内容 =====
.main-wrapper {
flex 1;
display flex;
flex-direction column;
min-height 100vh;
}
===== 顶部导航 =====
.header {
height var(--header-height);
background #ffffff;
border-bottom 1px solid var(--border-color);
padding 0 32px;
display flex;
align-items center;
justify-content space-between;
position sticky;
top 0;
z-index 10;
background rgba(255,255,255,0.92);
backdrop-filter blur(4px);
}
.header-left {
display flex;
align-items center;
gap 16px;
}
.breadcrumb {
color var(--text-gray);
font-size 14px;
}
.breadcrumb strong {
color var(--text-dark);
}
.header-right {
display flex;
align-items center;
gap 20px;
}
.search-box {
display flex;
align-items center;
background var(--primary-bg);
padding 6px 16px;
border-radius 30px;
border 1px solid transparent;
transition 0.2s;
}
.search-box i {
color var(--text-gray);
font-size 14px;
margin-right 8px;
}
.search-box input {
border none;
background transparent;
outline none;
padding 6px 0;
font-size 14px;
width 160px;
color var(--text-dark);
}
.search-box inputplaceholder {
color #b0c0b0;
}
.header-icon {
width 38px;
height 38px;
border-radius 50%;
background var(--primary-bg);
display flex;
align-items center;
justify-content center;
color var(--text-gray);
font-size 16px;
cursor default;
position relative;
}
.header-icon .badge {
position absolute;
top -2px;
right -2px;
width 18px;
height 18px;
background #ff4d4f;
color white;
border-radius 50%;
font-size 10px;
font-weight 700;
display flex;
align-items center;
justify-content center;
}
.avatar {
width 38px;
height 38px;
border-radius 50%;
background var(--primary);
color white;
display flex;
align-items center;
justify-content center;
font-weight 600;
font-size 16px;
cursor default;
}
===== 内容主体 =====
.content {
padding 28px 32px;
flex 1;
}
统计卡片
.stats-grid {
display grid;
grid-template-columns repeat(4, 1fr);
gap 20px;
margin-bottom 28px;
}
.stat-card {
background white;
padding 20px 24px;
border-radius var(--radius);
box-shadow var(--card-shadow);
border 1px solid var(--border-color);
display flex;
align-items center;
justify-content space-between;
transition 0.2s;
}
.stat-cardhover {
box-shadow 0 4px 16px rgba(46, 125, 50, 0.12);
}
.stat-left h4 {
font-size 14px;
font-weight 500;
color var(--text-gray);
margin-bottom 6px;
}
.stat-left .number {
font-size 28px;
font-weight 700;
color var(--text-dark);
}
.stat-left .trend {
font-size 13px;
color var(--primary-light);
background #e8f5e8;
padding 2px 10px;
border-radius 30px;
display inline-block;
margin-top 6px;
}
.stat-icon {
width 48px;
height 48px;
border-radius 12px;
background var(--primary-bg);
color var(--primary);
display flex;
align-items center;
justify-content center;
font-size 24px;
}
双栏布局
.row-two {
display grid;
grid-template-columns 2fr 1fr;
gap 24px;
margin-bottom 28px;
}
.panel {
background white;
border-radius var(--radius);
border 1px solid var(--border-color);
padding 20px 24px;
box-shadow var(--card-shadow);
}
.panel-header {
display flex;
justify-content space-between;
align-items center;
margin-bottom 18px;
}
.panel-header h3 {
font-size 16px;
font-weight 600;
color var(--text-dark);
}
.panel-header a {
color var(--primary-light);
font-size 14px;
text-decoration none;
}
.chart-container {
height 200px;
}
任务列表
.task-list {
list-style none;
}
.task-item {
display flex;
align-items center;
gap 12px;
padding 12px 0;
border-bottom 1px solid #f0f5f0;
}
.task-itemlast-child {
border-bottom none;
}
.task-dot {
width 8px;
height 8px;
border-radius 50%;
background var(--primary-light);
}
.task-dot.warning { background #faad14; }
.task-dot.danger { background #ff4d4f; }
.task-info {
flex 1;
}
.task-info .title {
font-size 14px;
font-weight 500;
color var(--text-dark);
}
.task-info .desc {
font-size 12px;
color var(--text-gray);
}
.task-time {
font-size 12px;
color var(--text-gray);
}
底部表格
.table-wrap {
overflow-x auto;
}
table {
width 100%;
border-collapse collapse;
font-size 14px;
}
th {
text-align left;
padding 12px 8px;
color var(--text-gray);
font-weight 500;
border-bottom 1px solid var(--border-color);
}
td {
padding 12px 8px;
border-bottom 1px solid #f0f5f0;
color var(--text-dark);
}
.status-badge {
padding 4px 12px;
border-radius 30px;
font-size 12px;
font-weight 500;
background #e8f5e8;
color var(--primary);
}
.status-badge.warning { background #fff7e6; color #d48806; }
.status-badge.danger { background #fff1f0; color #cf1322; }
响应式
@media (max-width 1024px) {
.stats-grid { grid-template-columns repeat(2, 1fr); }
.row-two { grid-template-columns 1fr; }
}
@media (max-width 768px) {
.sidebar { display none; }
.header { padding 0 16px; }
.content { padding 16px; }
.stats-grid { grid-template-columns 1fr; }
.search-box input { width 100px; }
}
style
head
body
!-- ========= 侧边栏 ========= --
aside class=sidebar
div class=logo-area
div class=logo-iconi class=fas fa-leafidiv
div class=logo-textAgrispanOnespandiv
div
ul class=menu
li class=menu-item activei class=fas fa-chart-piei 仪表盘li
li class=menu-itemi class=fas fa-tractori 农场管理li
li class=menu-itemi class=fas fa-seedlingi 作物监测li
li class=menu-itemi class=fas fa-microchipi 设备中心li
li class=menu-itemi class=fas fa-tasksi 任务中心li
div class=menu-dividerdiv
li class=menu-itemi class=fas fa-databasei 数据报表li
li class=menu-itemi class=fas fa-cogi 系统设置li
ul
aside
!-- ========= 主内容区 ========= --
div class=main-wrapper
!-- 顶部栏 --
header class=header
div class=header-left
div class=breadcrumb📋 strong仪表盘strong 总览div
div
div class=header-right
div class=search-box
i class=fas fa-searchi
input type=text placeholder=搜索农场、设备...
div
div class=header-icon
i class=far fa-belli
span class=badge3span
div
div class=avatar张div
div
header
!-- 内容 --
div class=content
!-- 统计卡片 --
div class=stats-grid
div class=stat-card
div class=stat-left
h4总农场h4
div class=number24div
span class=trendi class=fas fa-arrow-upi 12%span
div
div class=stat-iconi class=fas fa-map-marked-altidiv
div
div class=stat-card
div class=stat-left
h4活跃设备h4
div class=number187div
span class=trendi class=fas fa-arrow-upi 8%span
div
div class=stat-iconi class=fas fa-wifiidiv
div
div class=stat-card
div class=stat-left
h4今日任务h4
div class=number14div
span class=trend style=color#d48806;background#fff7e6;i class=fas fa-clocki 5 待处理span
div
div class=stat-iconi class=fas fa-list-checkidiv
div
div class=stat-card
div class=stat-left
h4作物健康率h4
div class=number94%div
span class=trendi class=fas fa-arrow-upi 2%span
div
div class=stat-iconi class=fas fa-heartidiv
div
div
!-- 双栏：图表 + 任务 --
div class=row-two
div class=panel
div class=panel-header
h3i class=fas fa-chart-line style=colorvar(--primary);margin-right8px;i近7日产量趋势h3
a href=#查看详情 →a
div
div class=chart-container
canvas id=trendChart width=400 height=150canvas
div
div
div class=panel
div class=panel-header
h3i class=fas fa-clock style=colorvar(--primary);margin-right8px;i待办任务h3
a href=#全部a
div
ul class=task-list
li class=task-item
span class=task-dot warningspan
div class=task-infodiv class=title喷洒农药 · 3号大棚divdiv class=desc预计 2 小时divdiv
span class=task-time今天 1400span
li
li class=task-item
span class=task-dotspan
div class=task-infodiv class=title灌溉系统校准divdiv class=desc东区 5 号地块divdiv
span class=task-time今天 1630span
li
li class=task-item
span class=task-dot dangerspan
div class=task-infodiv class=title设备故障检修divdiv class=desc无人机 #07 信号丢失divdiv
span class=task-time超时 1hspan
li
li class=task-item
span class=task-dotspan
div class=task-infodiv class=title采收报告整理divdiv class=desc本周玉米产量divdiv
span class=task-time明天 0900span
li
ul
div
div
!-- 数据表格 --
div class=panel
div class=panel-header
h3i class=fas fa-table style=colorvar(--primary);margin-right8px;i最新农事记录h3
a href=#更多a
div
div class=table-wrap
table
thead
trth地块名称thth作物thth操作thth负责人thth状态thtr
thead
tbody
trtd东区 A-12tdtd🌽 玉米tdtd施肥tdtd王师傅tdtdspan class=status-badge已完成spantdtr
trtd西区 B-05tdtd🍅 番茄tdtd灌溉tdtd李工tdtdspan class=status-badge warning进行中spantdtr
trtd南区 C-08tdtd🥬 生菜tdtd除虫tdtd赵丽tdtdspan class=status-badge待确认spantdtr
trtd北区 D-03tdtd🌾 水稻tdtd收割tdtd陈队tdtdspan class=status-badge danger紧急spantdtr
tbody
table
div
div
div
div
!-- ===== 图表渲染脚本 ===== --
script
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('trendChart').getContext('2d');
new Chart(ctx, {
type 'line',
data {
labels ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
datasets [{
label '产量 (kg)',
data [320, 280, 410, 390, 480, 520, 610],
borderColor '#2e7d32',
backgroundColor 'rgba(46, 125, 50, 0.08)',
borderWidth 3,
tension 0.3,
pointBackgroundColor '#4caf50',
fill true,
}]
},
options {
responsive true,
maintainAspectRatio false,
plugins {
legend { display false }
},
scales {
y { beginAtZero true, grid { color '#eef5ee' } },
x { grid { display false } }
}
}
});
});
script
body
html效果说明
| 区域 | 还原内容 |
|---|---|
| 左侧边栏 | Logo + 导航菜单（仪表盘、农场、作物、设备等），当前"仪表盘"高亮 |
| 顶部导航 | 面包屑 + 搜索框 + 通知铃铛（带红点）+ 用户头像 |
| 统计卡片 | 4 个核心指标（农场数、设备数、任务数、作物健康率），带趋势标签 |
| 图表区域 | 使用 Chart.js 绘制的折线图，展示近 7 日产量趋势 |
| 任务列表 | 待办任务卡片，包含优先级颜色点（绿/黄/红）和时间 |
| 数据表格 | 最新农事记录，带状态标签（已完成/进行中/紧急） |
整个界面采用白底 + 绿色主题，视觉风格。