效果展示：
代碼結構：
主要代碼實現
index.html布局
<!doctype html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>智慧農業大數據展示</title><link rel="stylesheet" href="css/index.css"><script src="js/jquery.js"></script><script>$(function() {$('.myscroll').myScroll({speed: 60, //數值越大，速度越慢rowHeight: 38 //li的高度});})$(document).ready(function() {var whei = $(window).width()$("html").css({fontSize: whei / 22});$(window).resize(function() {var whei = $(window).width();$("html").css({fontSize: whei / 22})});});</script>
</head><body><div class="main"><!--頭部--><div class="header"><div class="header-left" id="time"></div><div class="header-cen"><h1>智慧農業大數據展示</h1></div><div class="header-right"></div></div><!--中間--><div class="content"><!--左邊--><div class="content-left fl"><!--左上--><div class="left-top"><div class="title"><span>基本信息</span></div><div class="list"><p>托各地豐富的無公害、應季的果蔬資源、海鮮資源、山地及海域資源以及農村特色人文資源而搭建，集優質資源整合、優化、流通于一體，涵蓋有機蔬果產品、特色平價海鮮、農村生態人文旅游，更多模板關注公眾號【DreamCoders】,回復‘BigDataView’免費獲取</p><ul><li>建筑面積：1168畝</li><li>農戶總數：867戶</li><li>人口總數：13萬</li><li>年總產值：680萬</li><li>年總產值：4651萬</li><li>年總產值：4546萬</li></ul></div></div><!--左中--><div class="left-center"><div class="title"><span>蔬菜類別</span></div><div class="allnav" id="ceshi"></div></div><!--左下--><div class="left-bottom"><div class="title"><span>產量/種植面積</span></div><div class="allnav" id="ceshi2"></div></div></div><!--中間--><div class="content-center fl"><!--頭部--><div class="center-top"><div class="top-title"><ul><li><p>種植基地</p><span>3</span><span>6</span><span>5</span><b>個</b></li><li><p>已接入</p><span>8</span><span>3</span><b>%</b></li></ul></div><div class="top-bottom"><div class="allnav" id="ceshi8"></div></div></div><!--底部--><div class="center-bottom"><div class="bottom-left fl"><div class="allnav" id="ceshi6"></div></div><div class="bottom-right fr"><div class="allnav" id="ceshi7" style="width: 100%;height: 100%;"></div></div></div></div><!--右邊--><div class="content-right fr"><!--右上--><div class="right-top"><!--選項卡內容--><div id="tab_header"><ul><li class="selected">商鋪信息</li><li>基地信息</li></ul></div><!--內容--><div id="tab_content"><div class="dom" style="display: block"><ul><li><p>座收租金</p><span>50萬</span><label>元</label></li><li><p>座收租金</p><span>50萬</span><label>元</label></li><li><p>座收租金</p><span>50萬</span><label>元</label></li></ul><div class="list-t"><ul><li><span>50萬</span><p>商鋪</p></li><li><span>50萬</span><p>商鋪</p></li><li><span>50萬</span><p>商鋪</p></li><li><span>50萬</span><p>商鋪</p></li><li><span>50萬</span><p>商鋪</p></li><li><span>50萬</span><p>商鋪</p></li></ul></div></div><div class="dom" style="display: none"><div class="listStyle"><span>大棚：<strong>560</strong>個</span><span>供應企業：<strong>36</strong>家</span><span>經銷商：<strong>540</strong>個</span><span>供應鏈：<strong>15</strong>條</span><span>蔬菜加工基地：<strong>20</strong>個</span><span>售后卸載：<strong>29</strong>家</span><span>冷藏基地：<strong>10</strong>個</span><span>冷藏車：<strong>120</strong>臺</span></div></div></div><!--選項卡內容--></div><!--右中--><div class="right-center"><div class="title"><span>銷量排行</span></div><div class="echart wenzi"><div class="gun"><span>名稱</span><span>同比</span><span>銷量</span></div><div id="FontScroll" class="myscroll"><ul><li><div class="fontInner clearfix"><span><b> 1.辣椒</b></span><span>2.3%</span><span>45頓</span></div></li><li><div class="fontInner clearfix"><span><b>2.白菜</b></span><span>2.2%</span><span>44.5頓</span></div></li><li><div class="fontInner clearfix"><span><b>3.茄子</b></span><span>2.15%</span><span>44.3頓</span></div></li><li><div class="fontInner clearfix"><span><b>4.萵筍</b></span><span>2.1%</span><span>43.5頓</span></div></li><li><div class="fontInner clearfix"><span><b>5.洋芋</b></span><span>2%</span><span>43頓</span></div></li><li><div class="fontInner clearfix"><span><b>6.藕</b></span><span>1.95%</span><span>42.6頓</span></div></li><li><div class="fontInner clearfix"><span><b>7.豌豆</b></span><span>1.93%</span><span>42.3頓</span></div></li><li><div class="fontInner clearfix"><span><b>8.玉米</b></span><span>1.9%</span><span>42頓</span></div></li><li><div class="fontInner clearfix"><span><b>9.西紅柿</b></span><span>1.8%</span><span>41頓</span></div></li><li><div class="fontInner clearfix"><span><b>10.西紅柿</b></span><span>1.8%</span><span>41頓</span></div></li></ul></div></div></div><!--右下--><div class="right-bottom"><div class="title"><span>蔬菜成交價</span></div><div class="right-bottom-t"><div class="b-left" id="ceshi3"></div><div class="b-cent" id="ceshi4"></div><div class="b-right" id="ceshi5"></div></div></div></div></div></div><script src="js/echarts.min.js"></script><script src="js/jquery.min.js"></script><!--<script src="js/data01.js"></script>--><!--<script src="js/mapIndex.js"></script>--><script src="js/echart.js"></script><script src="js/fontscroll.js"></script><script src="js/china.js"></script><script>//頂部時間function getTime() {var myDate = new Date();var myYear = myDate.getFullYear(); //獲取完整的年份(4位,1970-????)var myMonth = myDate.getMonth() + 1; //獲取當前月份(0-11,0代表1月)var myToday = myDate.getDate(); //獲取當前日(1-31)var myDay = myDate.getDay(); //獲取當前星期X(0-6,0代表星期天)var myHour = myDate.getHours(); //獲取當前小時數(0-23)var myMinute = myDate.getMinutes(); //獲取當前分鐘數(0-59)var mySecond = myDate.getSeconds(); //獲取當前秒數(0-59)var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var nowTime;nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + ' ' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + ' ' + week[myDay] + ' ';//console.log(nowTime);$('#time').html(nowTime);};function fillZero(str) {var realNum;if (str < 10) {realNum = '0' + str;} else {realNum = str;}return realNum;}setInterval(getTime, 1000);</script><script>$(function() {var allLis = document.getElementById("tab_header").getElementsByTagName("li");var allDom = document.getElementById("tab_content").getElementsByClassName("dom");// console.log(allLis, allDom);// 2. 遍歷監聽for (var i = 0; i < allLis.length; i++) {var li = allLis[i];li.index = i;li.onclick = function() {console.log(i);for (var j = 0; j < allLis.length; j++) {allLis[j].className = '';allDom[j].style.display = 'none';}this.className = 'selected';allDom[this.index].style.display = 'block';}}})</script></body></html>
作品來自于網絡收集、侵權立刪
)
)
)
