<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8" />
|
<title>平台门户 - 海洋功能区划（临时）</title>
|
|
<link href="/js/PingTaiMenHuFile/GongNengQuHua/bootstrap.min.css" rel="stylesheet" type="text/css">
|
<link href="/js/PingTaiMenHuFile/GongNengQuHua/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
|
<link href="/js/PingTaiMenHuFile/GongNengQuHua/style.css" rel="stylesheet" type="text/css">
|
<link href="/js/PingTaiMenHuFile/GongNengQuHua/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css">
|
|
<script src="/js/PingTaiMenHuFile/GongNengQuHua/app.js"></script>
|
<script src="/js/PingTaiMenHuFile/GongNengQuHua/jquery-1.8.3.min.js" type="text/javascript"></script>
|
<script src="/js/PingTaiMenHuFile/GongNengQuHua/jquery.easy-pie-chart.js"></script>
|
|
<style>
|
body {
|
color: #313131;
|
background: transparent;
|
font-family: '微软雅黑',"Roboto", sans-serif !important;
|
}
|
.title_unit {
|
font-size: 16px !important;
|
white-space : nowrap ;
|
color: #717171 !important;
|
font-weight: 300 !important;
|
}
|
|
.title {
|
font-size: 18px !important;
|
white-space : nowrap ;
|
color: #717171 !important;
|
font-weight: 600 !important;
|
}
|
|
canvas {
|
background: transparent !important;
|
}
|
|
.row-fluid .span2 {
|
margin: 0px 2.5% !important;
|
}
|
|
.div_zytitle {
|
width: 100%;
|
float: left;
|
margin-top: 12px;
|
text-align: left;
|
}
|
|
.div_zytitle span {
|
line-height: 51px;
|
font-size: 20px;
|
margin-left: 33px;
|
color: #4777ff;
|
font-weight: 600;
|
}
|
|
.easy-pie-chart .number {
|
margin: 30px auto !important;
|
}
|
|
.popovers{
|
float: left;
|
margin-top: -13px;
|
}
|
</style>
|
<script>
|
var Index = function () {
|
return {
|
init: function () {
|
},
|
|
initMiniCharts: function () {
|
$('.easy-pie-chart .number').easyPieChart({
|
animate: 1000,
|
size: 165,
|
lineWidth: 15,
|
barColor: '#FF5555',
|
trackColor : '#00AEFF',
|
scaleColor:'white'//不显示刻度颜色
|
});
|
},
|
|
initIntro: function () {
|
|
}
|
};
|
}();
|
|
jQuery(document).ready(function () {
|
try {
|
App.init();
|
$("#MainDiv").css("height", window.innerHeight);
|
var width = window.innerWidth/5;
|
$(".popovers").css("width",width);
|
Index.initMiniCharts();
|
} catch (e) { }
|
});
|
|
</script>
|
</head>
|
<body>
|
<div>
|
<div id="MainDiv" style="float: left; background:transparent; font-size: 12pt; width: 100%; text-align: center; padding-top: 6px; height: 741px;">
|
<div class="div_zytitle">
|
<span>海洋功能区划-海洋功能区划指标管控</span>
|
</div>
|
<div class="row-fluid">
|
<div class="popovers" data-trigger="hover" data-placement="top">
|
<div class="easy-pie-chart">
|
<div class="number easyPieChart" data-percent="1.4" style="width: 130px; height: 130px; line-height: 130px;color:#4676FE;font-size: 25px !important;"><span>1.4</span>%
|
<canvas width="160" height="130"></canvas></div>
|
<div style="margin-top: -9px;">
|
<span class="title_unit" href="#">
|
<span style="color:#d00202;">74.2</span> | 5221.7 万公顷<br>
|
</span>
|
<span class="title">工业与城镇用海</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="popovers" data-trigger="hover" data-placement="top">
|
<div class="easy-pie-chart">
|
<div class="number easyPieChart" data-percent="34.5" style="width: 130px; height: 130px; line-height: 130px;color:#4676FE;font-size: 25px !important;"><span>34.5</span>%
|
<canvas width="160" height="130"></canvas></div>
|
<div style="margin-top: -9px;">
|
<span class="title_unit" href="#">
|
<span style="color:#d00202;">1802.6 </span> | 5221.7 万公顷<br>
|
</span>
|
<span class="title">保护区</span>
|
</div>
|
</div>
|
</div>
|
<div class="popovers" data-trigger="hover" data-placement="top">
|
<div class="easy-pie-chart">
|
<div class="number easyPieChart" data-percent="8.2" style="width: 130px; height: 130px; line-height: 130px;color:#4676FE;font-size: 25px !important;"><span>8.2</span>%
|
<canvas width="160" height="130"></canvas></div>
|
<div style="margin-top: -9px;">
|
<span class="title_unit" href="#">
|
<span style="color:#d00202;">430.3</span> | 5221.7 万公顷<br>
|
</span>
|
<span class="title">保留区</span>
|
</div>
|
</div>
|
</div>
|
<div class="popovers" data-trigger="hover" data-placement="top">
|
<div class="easy-pie-chart">
|
<div class="number easyPieChart" data-percent="44.6" style="width: 130px; height: 130px; line-height: 130px;color:#4676FE;font-size: 25px !important;">
|
<span>44.6</span>%
|
<canvas width="160" height="130"></canvas></div>
|
<div style="margin-top: -9px;">
|
<span class="title_unit" href="#">
|
<span style="color:#d00202;">10057.0</span> | 22531.39 千米<br>
|
</span>
|
<span class="title">自然岸线保有率</span>
|
</div>
|
</div>
|
</div>
|
<div class="popovers" data-trigger="hover" data-placement="top">
|
<div class="easy-pie-chart">
|
<div class="number easyPieChart" data-percent="9.3" style="width: 130px; height: 130px; line-height: 130px;color:#4676FE;font-size: 25px !important;">
|
<span>9.3</span>%
|
<canvas width="160" height="130"></canvas></div>
|
<div style="margin-top: -9px;">
|
<span class="title_unit" href="#">
|
<span style="color:#d00202;">236.0</span> | 2538.8 万公顷<br>
|
</span>
|
<span class="title">养殖功能区</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
