<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8" />
|
<title>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: #fff;
|
background: transparent;
|
}
|
.title {
|
font-size: 14px !important;
|
white-space : nowrap ;
|
color: #fff !important;
|
}
|
|
canvas {
|
background: transparent !important;
|
}
|
|
.row-fluid .span2 {
|
margin: 0px 2.7% !important;
|
}
|
</style>
|
<script>
|
var Index = function () {
|
return {
|
init: function () {
|
},
|
|
initMiniCharts: function () {
|
|
$('.easy-pie-chart .number').easyPieChart({
|
animate: 1000,
|
size: 120,
|
lineWidth: 8,
|
barColor: '#47C2D1'
|
});
|
},
|
|
initIntro: function () {
|
|
}
|
};
|
}();
|
|
jQuery(document).ready(function () {
|
try {
|
App.init();
|
$("#MainDiv").css("height", window.innerHeight);
|
Index.initMiniCharts();
|
} catch (e) { }
|
});
|
|
</script>
|
</head>
|
<body>
|
<div>
|
<!--<div style="float: left; background-color: #C1E4F2;font-size: 13pt; width: 100px; height: 200px;line-height: 200px;text-align: center;display: none;">-->
|
<!--海域使用-->
|
<!--</div>-->
|
<div id="MainDiv" style="float: left; background:transparent; font-size: 12pt; width: 100%; text-align: center; padding-top: 6px; height: 741px;">
|
<div style="padding-bottom: 6px;font-size: 18px;font-weight:normal;color: fff;">
|
海洋功能区划指标管控
|
</div>
|
<div class="row-fluid">
|
<!--<div class="span1"></div>-->
|
<div class="span2 popovers" data-trigger="hover" data-placement="top">
|
<div class="easy-pie-chart">
|
<div class="number easyPieChart" data-percent="1.4" style="width: 120px; height: 120px; line-height: 120px;"><span>1.4</span>%
|
<canvas width="120" height="120"></canvas></div>
|
<span class="title" href="#">
|
74.2 | 5221.7 公顷<br>
|
工业与城镇用海
|
</span>
|
</div>
|
</div>
|
|
<div class="span2 popovers" data-trigger="hover" data-placement="top">
|
<div class="easy-pie-chart">
|
<div class="number easyPieChart" data-percent="34.5" style="width: 120px; height: 120px; line-height: 120px;"><span>34.5</span>%
|
<canvas width="120" height="120"></canvas></div>
|
<span class="title" href="#">
|
1802.6 | 5221.7 公顷<br>
|
保护区
|
</span>
|
</div>
|
</div>
|
<div class="span2 popovers" data-trigger="hover" data-placement="top">
|
<div class="easy-pie-chart">
|
<div class="number easyPieChart" data-percent="8.2" style="width: 120px; height: 120px; line-height: 120px;"><span>8.2</span>%
|
<canvas width="120" height="120"></canvas></div>
|
<span class="title" href="#">
|
430.3 | 5221.7 万公顷<br>
|
保留区
|
</span>
|
</div>
|
</div>
|
<div class="span2 popovers" data-trigger="hover" data-placement="top">
|
<div class="easy-pie-chart">
|
<div class="number easyPieChart" data-percent="44.6" style="width: 120px; height: 120px; line-height: 120px;">
|
<span>44.6</span>%
|
<canvas width="120" height="120"></canvas></div>
|
<span class="title" href="#">
|
10057.0 | 22531.39 千米<br>
|
自然岸线保有率
|
</span>
|
</div>
|
</div>
|
<div class="span2 popovers" data-trigger="hover" data-placement="top">
|
<div class="easy-pie-chart">
|
<div class="number easyPieChart" data-percent="9.3" style="width: 120px; height: 120px; line-height: 120px;">
|
<span>9.3</span>%
|
<canvas width="120" height="120"></canvas></div>
|
<span class="title" href="#">
|
236.0 | 2538.8 万公顷<br>
|
养殖功能区
|
</span>
|
</div>
|
</div>
|
<!--<div class="span1"></div>-->
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
