|
@@ -1,375 +0,0 @@ |
|
|
<style> |
|
|
|
|
|
body { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
margin: 0; |
|
|
|
|
|
background: url(assets/img/bg.jpg); |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.header { |
|
|
|
|
|
color: white; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-size: 1.4em; |
|
|
|
|
|
text-shadow: 0px 0px 11px white; |
|
|
|
|
|
height: 10vh; |
|
|
|
|
|
line-height: 10vh; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-left { |
|
|
|
|
|
overflow-y: auto; |
|
|
|
|
|
height: 85vh; |
|
|
|
|
|
width: 24vw; |
|
|
|
|
|
float: left; |
|
|
|
|
|
margin-left: 2vw; |
|
|
|
|
|
padding-right: 0.6vw; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box { |
|
|
|
|
|
float: left; |
|
|
|
|
|
width: 21vw; |
|
|
|
|
|
padding: 0 1vw 0 2vw; |
|
|
|
|
|
margin-bottom: 1vw; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-1, .box-4 { |
|
|
|
|
|
height: 23vh; |
|
|
|
|
|
background: url(assets/img/bg1.png); |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-2, .box-3 { |
|
|
|
|
|
height: 15vh; |
|
|
|
|
|
background: url(assets/img/bg2.png); |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-5 { |
|
|
|
|
|
height: 9vh; |
|
|
|
|
|
background: url(assets/img/bg2.png); |
|
|
|
|
|
background-size: 100% 156%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-title { |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
color: white; |
|
|
|
|
|
line-height: 5vh; |
|
|
|
|
|
height: 5vh; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
button { |
|
|
|
|
|
width: 47%; |
|
|
|
|
|
float: left; |
|
|
|
|
|
border-radius: 15px; |
|
|
|
|
|
border:2px solid #2ea9fb; |
|
|
|
|
|
box-shadow:#2ea9fb 0px 0px 18px inset; |
|
|
|
|
|
border:1px; |
|
|
|
|
|
height: 27px; |
|
|
|
|
|
color: white; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
margin: 6px 0; |
|
|
|
|
|
margin-right: 3%; |
|
|
|
|
|
background: #105797; |
|
|
|
|
|
} |
|
|
|
|
|
select { |
|
|
|
|
|
width: 47%; |
|
|
|
|
|
float: center; |
|
|
|
|
|
border-radius: 15px; |
|
|
|
|
|
height: 20px; |
|
|
|
|
|
color: black; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
margin: 6px 0; |
|
|
|
|
|
margin-right: 3%; |
|
|
|
|
|
background: #7bb6cd; |
|
|
|
|
|
border: 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-content button.double { |
|
|
|
|
|
width: 97%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-right { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 1.5vw; |
|
|
|
|
|
width: 15vw; |
|
|
|
|
|
padding: 0 1% 1% 2%; |
|
|
|
|
|
background: url(assets/img/bg4.png); |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-right .box-content { |
|
|
|
|
|
padding: 0 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-right .box-content button.double { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
margin: 10px 2px; |
|
|
|
|
|
height: 30px; |
|
|
|
|
|
color: white; |
|
|
|
|
|
background: #105797; |
|
|
|
|
|
border: 1px solid rgba(241, 239, 239, 0.568); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-content button:hover { |
|
|
|
|
|
background: #2ea9fb; |
|
|
|
|
|
box-shadow: 0 0 10px white; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-right button.double:hover { |
|
|
|
|
|
background: #2ea9fb; |
|
|
|
|
|
box-shadow: 0 0 10px white; |
|
|
|
|
|
color: black; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.radio { |
|
|
|
|
|
color: white; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
background: url(assets/img/zb2.png); |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
height: 50px; |
|
|
|
|
|
line-height: 50px; |
|
|
|
|
|
padding: 0 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.radio_type { |
|
|
|
|
|
width: 20px; |
|
|
|
|
|
height: 20px; |
|
|
|
|
|
appearance: none; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
outline: none; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.radio_type:before { |
|
|
|
|
|
content: ""; |
|
|
|
|
|
width: 15px; |
|
|
|
|
|
height: 15px; |
|
|
|
|
|
border: 2px solid orange; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
vertical-align: middle; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.radio_type:checked:before { |
|
|
|
|
|
content: ""; |
|
|
|
|
|
width: 15px; |
|
|
|
|
|
height: 15px; |
|
|
|
|
|
border: 2px solid orange; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
vertical-align: middle; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.radio_type:checked:after { |
|
|
|
|
|
content: ""; |
|
|
|
|
|
width: 9px; |
|
|
|
|
|
height: 9px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
background: orange; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
display: block; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 5px; |
|
|
|
|
|
left: 5px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-zb { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 22vw; |
|
|
|
|
|
width: 12vw; |
|
|
|
|
|
height: auto; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-zb .zb { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 42px; |
|
|
|
|
|
line-height: 42px; |
|
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
background: url(assets/img/zb.png); |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
color: white; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
padding: 0 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-zb .zb span { |
|
|
|
|
|
float: right; |
|
|
|
|
|
color: orange; |
|
|
|
|
|
font-size: large; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-zb .zb span span { |
|
|
|
|
|
color: white; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
#map { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
height: 68vh; |
|
|
|
|
|
width: 56vw; |
|
|
|
|
|
left: 27vw; |
|
|
|
|
|
top: 5vh; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.weather { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
color: white; |
|
|
|
|
|
line-height: 15px; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
width: 500px; |
|
|
|
|
|
float: right; |
|
|
|
|
|
margin-top: calc(-10vh + 20px); |
|
|
|
|
|
text-align: left; |
|
|
|
|
|
} |
|
|
|
|
|
.leftweather { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
color: white; |
|
|
|
|
|
line-height: 15px; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
width: 400px; |
|
|
|
|
|
float: left; |
|
|
|
|
|
margin-top: calc(-10vh + 20px); |
|
|
|
|
|
text-align: left; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-left::-webkit-scrollbar { |
|
|
|
|
|
width: 5px; |
|
|
|
|
|
height: 1px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-left::-webkit-scrollbar-thumb { |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
background-color: skyblue; |
|
|
|
|
|
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) |
|
|
|
|
|
25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, |
|
|
|
|
|
rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box-left::-webkit-scrollbar-track { |
|
|
|
|
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|
|
|
|
|
background: #ededed; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.clickButton { |
|
|
|
|
|
background: #2ea9fb; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
|
|
|
width: 3px; /*滚动条宽度*/ |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
<div class="header">惠州市统计年鉴数据视图平台</div> |
|
|
|
|
|
<div class="box-left"> |
|
|
|
|
|
<div class="scrollbar"></div> |
|
|
|
|
|
<div class="box box-1" > |
|
|
|
|
|
<div class="box-title">农村与农村经济</div> |
|
|
|
|
|
<div class="box-content"> |
|
|
|
|
|
<button class="itemButton clickButton" id="button0" onclick="clickItem(0,'农业总产值')">农业总产值</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(1,'生产中间消耗')">生产中间消耗</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(2,'农业增加值')">农业增加值</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(3,'农村居民收入与支出')">农村居民收入与支出</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(4,'农产品进出口贸易','1')">农产品进出口贸易</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(5,'汇总村级经济联合社')">汇总村级经济联合社</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(6,'集体经济收益')">集体经济收益</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(7,'汇总农户数')">汇总农户数</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="box box-2" > |
|
|
|
|
|
<div class="box-title">农业技术装备统计指标</div> |
|
|
|
|
|
<div class="box-content"> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(8,'农业机械年末拥有量')">农业机械年末拥有量</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(9,'用电与农业化学化')">用电与农业化学化</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(10,'农机社会化组织及人员')">农机社会化组织及人员</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(11,'农业机械作业情况')">农业机械作业情况</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="box box-3" > |
|
|
|
|
|
<div class="box-title">农村科技与教育</div> |
|
|
|
|
|
<div class="box-content"> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(12,'专业技术协会')">专业技术协会</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(13,'科普示范基地')">科普示范基地</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(14,'科普示范区(村)')">科普示范区(村)</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(15,'科普示范户')">科普示范户</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="box box-4" > |
|
|
|
|
|
<div class="box-title">种植业指标</div> |
|
|
|
|
|
<div class="box-content"> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(16,'粮食作物统计','1')">粮食作物统计</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(17,'蔬菜类统计','1')">蔬菜类统计</button> |
|
|
|
|
|
<button class="itemButton" onclick="clicksg(18,'水果类统计','1')">水果类统计</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(19,'主要经济作物','1')">主要经济作物</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(20,'作物灾害统计')">作物灾害统计</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(21,'耕地面积')">耕地面积</button> |
|
|
|
|
|
<button class="itemButton" style="width:97%;" class="double" |
|
|
|
|
|
onclick="clickItem(22,'主要农产品人均占有量')">主要农产品人均占有量</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="box box-3" > |
|
|
|
|
|
<div class="box-title">畜牧业统计指标</div> |
|
|
|
|
|
<div class="box-content"> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(23,'年末存栏量')">年末存栏量</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(24,'当年出栏量')">当年出栏量</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(25,'产品产量')">产品产量</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(26,'畜牧饲料')">畜牧饲料</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="box box-3"> |
|
|
|
|
|
<div class="box-title">渔业统计指标</div> |
|
|
|
|
|
<div class="box-content"> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(27,'海水养殖与捕捞','1')">海水养殖与捕捞</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(28,'淡水养殖与捕捞','1')">淡水养殖与捕捞</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(29,'水产加工')">水产加工</button> |
|
|
|
|
|
<button class="itemButton" onclick="clickItem(30,'渔业从业人员')">渔业从业人员</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="box box-4" style="position: absolute; left: 28vw; height:27vh; top: 66vh;"> |
|
|
|
|
|
<div class="box-title">区县排名</div> |
|
|
|
|
|
<div class="box-content" id="chart1" style="height:calc(100% - 5vh)"></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="box box-4" style="position: absolute; left: 54vw; height:27vh; top: 66vh;"> |
|
|
|
|
|
<div class="box-title">年度趋势</div> |
|
|
|
|
|
<div class="box-content" id="chart2" style="height:calc(100% - 5vh)"></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="box-zb" id="box-zb"> |
|
|
|
|
|
<!-- <div class="zb">进出口贸易总额 <span>1,564<span>万元</span></span></div> |
|
|
|
|
|
<div class="zb">进口总额 <span>1,564<span>万元</span></span></div> |
|
|
|
|
|
<div class="zb">出口总额 <span>1,564<span>万元</span></span></div> --> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="box-right" id="box-right"> |
|
|
|
|
|
<div class="box-title" style="color: #aedceb;">农产品进出口贸易</div> |
|
|
|
|
|
<div class="box-content"> |
|
|
|
|
|
<div class="radio"> |
|
|
|
|
|
<input type="radio" class="radio_type" name="type" id="radio-1" |
|
|
|
|
|
checked> <label for="radio-1" class="radio-label">进口</label> |
|
|
|
|
|
<input type="radio" class="radio_type" name="type" id="radio-2" |
|
|
|
|
|
style="margin-left: 20%;"> <label for="radio-2" |
|
|
|
|
|
class="radio-label">出口</label> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="button"> |
|
|
|
|
|
<button class="double">活动物-动物产品</button> |
|
|
|
|
|
<button class="double">植物产品</button> |
|
|
|
|
|
<button class="double">动/植物油脂及蜡</button> |
|
|
|
|
|
<button class="double">食品-烟草及制品</button> |
|
|
|
|
|
<button class="double">其他</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div id="map"></div> |
|
|
|
|
|
<div id="tempdiv" style="hidden:true"></div> |
|
|
|
|
|
</body> |
|
|
|
|
|
|
|
|
|
|
|
<!-- jQuery --> |
|
|
|
|
|
<script type="text/javascript" src="assets/js/jQuery-2.2.0.min.js"></script> |
|
|
|
|
|
<!-- echarts --> |
|
|
|
|
|
<script type="text/javascript" src="assets/js/echarts.min.js"></script> |
|
|
|
|
|
<script src="js/bootstrap.min.js?v=3.3.6"></script> |
|
|
|
|
|
<script src="js/demo.js?v=1.1"></script> |
|
|
|
|
|
<script src="lionjs/comment.js?v=1.0.1"></script> |
|
|
|
|
|
<script src="js/lion.js"></script> |
|
|
|
|
|
<script type="text/javascript" src="lionjs/mainMap.js?v=3.2.2"></script> |
|
|
|
|
|
<script type="text/javascript" src="lionjs/mainDetail.js?v=3.3.3"></script> |
|
|
|
|
|
<script type="text/javascript" src="lionjs/main.js?v=3.2.0"></script> |
|
|
|