<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>农业监测指挥舱</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/new_index.css" />
<style>
/* ---public---- */
.centerBox {
width: 75%;
margin-right: 15px;
background: transparent;
}
.boxFont {
font-size: 1.2vw;
}
.centerMainBox1 {
width: 100%;
height: 60.5%;
}
.centerMainBox2 {
width: 100%;
height: 38%;
position: relative;
margin-top: 15px;
}
.centerMainBox2 .first_border {
position: absolute;
width: 100%;
height: 100%;
}
.boxTitle2 {
width: 100%;
height: 10%;
font-size: 0.6vw;
text-align: center;
line-height: 10%;
margin-top: 1vw;
color: #0efcff;
}
.contList {
position: relative;
width: 70%;
height: 8vw;
margin: 1vw auto 0;
}
.content1 li {
display: none;
}
.baseBox {
width: 100%;
border: none;
background: none;
}
.boxTitle {
font-size: 0.8vw;
width: 38%;
margin-top: 1vw;
text-align: center;
}
.right {
float: right;
}
.baseBoxLeft {
width: 30%;
height: 95%;
position: relative;
}
.baseBoxRight {
width: 68%;
height: 100%;
}
.baseBoxLeft .first_border {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.baseBox1,
.baseBox2,
.baseBox3 {
position: relative;
}
.baseBox1 .hardware,
.baseBox2 img,
.baseBox3 img {
position: absolute;
width: 100%;
height: 100%;
}
.csbaseBox1 {
position: relative;
z-index: 999;
}
#canvas {
display: block;
margin: 0 auto;
width: 10vw;
height: 5vw;
}
.progress {
position: relative;
}
.progress img {
width: 12.5vw;
height: 2vw;
position: absolute;
top: 0.4vw;
right: -0.2vw;
}
.progress .disease {
position: absolute;
top: 0.7vw;
left: 0.5vw;
color: #fff;
font-size: 0.8vw;
}
.progress .similar {
position: absolute;
top: 0.8vw;
left: 3vw;
color: #0efcff;
font-size: 0.5vw;
}
/* 返回图标 */
.navLeft {
position: absolute;
top: 5%;
left: 35%;
width: 3.5%;
height: 8%;
z-index: 999;
}
.navLeft > img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="nav">XXXXX产业大数据指挥舱</div>
<div class="nav_btn">
<div class="btn_left">
<a href="">
<div class="btn_list listActive">主页</div>
</a>
<a href="">
<div class="btn_list">土地流转</div>
</a>
<a href="">
<div class="btn_list">空天地</div>
</a>
<a href="">
<div class="btn_list">生长监测</div>
</a>
</div>
<div class="btn_right">
<a href="">
<div class="btn_list">生产加工</div>
</a>
<a href="">
<div class="btn_list">仓储管理</div>
</a>
<a href="">
<div class="btn_list">流通销售</div>
</a>
<a href="">
<div class="btn_list">数据中心</div>
</a>
</div>
</div>
<div class="content">
<div class="centerBox">
<div class="baseBox centerMainBox1" style="height: 70%">
<div class="baseBoxLeft left">
<div class="boxTitle">茶叶病虫害预警</div>
<img src="img/left.png" class="first_border" alt="" />
<div class="firstBox">
<div class="pic">
<img src="img/demo_pic.png" class="first_top1" alt="" />
<img src="img/data_pic.png" class="first_top2" alt="" />
</div>
<div class="picText">
<span>样本图片</span>
<span class="text_second">茶叶病虫害大数据库</span>
</div>
<div class="voice_animation">
<canvas id="canvas"
>Your browser can not support canvas</canvas
>
</div>
<div class="progress">
<span class="disease">茶饼病</span>
<!-- <i class="counter-value">85</i>% -->
<span class="similar">相似度:85%</span>
<img src="img/progress.gif" alt="" />
</div>
<div class="about_illness">
<div class="symptom">
<div class="symptom_title">病症症状</div>
<div class="symptom_content">
xx
</div>
</div>
<div class="prevent">
<div class="prevent_title">防治方法</div>
<div class="prevent_content">
xxxx
</div>
</div>
</div>
</div>
</div>
<div class="baseBoxRight right">
<a class="navLeft" href=""
><img style="" src="img/fanhui.png" alt=""
/></a>
<!-- 地图 -->
<div class="maps">
<img class="land_level" src="img/landLevel.png" alt="" />
<img class="wifi_gif" src="img/wifi.gif" />
<img class="sun_pic" src="img/sun.png" alt="" />
<img class="wrj_pic" src="img/wrj.png" alt="" />
<img class="wind_gif" src="img/wind_shape.gif" alt="" />
<img class="plant_pic display_box" src="img/plant.png" alt="" />
<div class="windows display_box">
<ul>
<li>土地信息</li>
<li>土地信息</li>
<li>土地信息</li>
<li>土地信息</li>
</ul>
</div>
<div class="window_two display_box">
<ul>
<li>刘新武</li>
<li>年龄：41岁</li>
<li>农事活动：6次</li>
<li>信用等级：良好</li>
</ul>
</div>
<div class="window_three display_box">
<ul>
<li>土壤数据</li>
<li>湿度:63%</li>
<li>酸碱度：PH4.8</li>
<li>肥沃度：56%</li>
</ul>
</div>
<div class="window_four display_box">
<ul>
<li>气象信息</li>
<li>温度:19℃</li>
<li>湿度：52%</li>
<li>风速：2m/s</li>
<li>降水：0mm</li>
</ul>
</div>
<div
农业产业大数据指挥仓系统（Html模板、大数据模板、大屏echarts模板）.zip
版权申诉
194 浏览量
2022-12-28
16:53:58
上传
评论
收藏 4.34MB ZIP 举报
农业产业大数据指挥仓系统（Html模板、大数据模板、大屏echarts模板）.zip （33个子文件） 
农业产业大数据指挥仓系统 js 
dataScoll.js 1KB echarts.min.js 1.37MB jquery.min.js 141KB img 
data_pic.png 102KB
wind_shape.gif 44KB right3.png 4KB progress.gif 7KB tree_pic.png 14KB landLevel.png 1.33MB wifi.gif 6KB voice_pic.png 18KB bottom_icons.png 13KB fanhui.png 2KB down2.png 45KB progress_pic.png 3KB demo_pic.png 114KB control.png 122KB left.png 10KB illness_pic.png 4KB
bg.jpg 336KB detector.png 84KB top.png 18KB right2.png 4KB plant.png 36KB right.png 7KB camera.png 37KB uva.png 37KB sun.png 9KB wrj.png 10KB css reset.css 5KB new_index.css 13KB
index.html 24KB 农业产业大数据指挥仓系统.png 1.67MB资源评论
