init1
386
web/css/index.css
Normal file
@ -0,0 +1,386 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-image: linear-gradient(30deg, #1B3488 50%, #14234E 100%); */
|
||||
/* background: radial-gradient(circle, #114eab 3%, #04133e); */
|
||||
background-image: url("../img/bg.png");
|
||||
}
|
||||
|
||||
/* 头部标题 */
|
||||
.top_box {
|
||||
height: 82px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title_box {
|
||||
font-size: 33px;
|
||||
font-family: "黑体";
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
/* text-shadow:0px 5px 5px #04144D; */
|
||||
background-image: -webkit-linear-gradient(bottom, #b7cae8, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.title_line {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: calc(100% - 82px);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.map_title_box {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left .map_title_box {
|
||||
padding-left: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.middle .map_title_box {
|
||||
padding-left: 7px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.right .map_title_box {
|
||||
padding-left: 7px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.map_title_bg img {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.map_title_bg {
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.map_title {
|
||||
color: #0aebe2;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.map_sty {
|
||||
width: 100%;
|
||||
height: calc(100% - 34px);
|
||||
box-sizing: border-box;
|
||||
/* padding: 10px; */
|
||||
}
|
||||
|
||||
.map_side_sty {
|
||||
width: 100%;
|
||||
height: calc(100% - 34px);
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
}
|
||||
|
||||
.side_img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.side_left_top {
|
||||
top: 42px;
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
.side_left_down {
|
||||
left: 14px;
|
||||
bottom: 11px;
|
||||
}
|
||||
|
||||
.side_right_top {
|
||||
right: 7px;
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
.side_right_down {
|
||||
right: 7px;
|
||||
bottom: 11px;
|
||||
}
|
||||
|
||||
.left .map_sty {
|
||||
width: calc(100% - 21px);
|
||||
height: calc(100% - 34px - 23px);
|
||||
margin: 8px 0 0 14px;
|
||||
border: 1px solid #213b8e;
|
||||
box-sizing: border-box;
|
||||
background-color: #162963;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.middle .map_sty {
|
||||
width: calc(100% - 14px);
|
||||
height: calc(100% - 34px - 23px);
|
||||
margin: 8px 0 0 7px;
|
||||
/* border: 1px solid #213B8E; */
|
||||
/* padding: 8px 7px 15px 7px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.middle .side_left_top {
|
||||
top: 42px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.middle .side_left_down {
|
||||
left: 7px;
|
||||
bottom: 11px;
|
||||
}
|
||||
|
||||
.middle .side_right_top {
|
||||
right: 7px;
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
.middle .side_right_down {
|
||||
right: 7px;
|
||||
bottom: 11px;
|
||||
}
|
||||
|
||||
.right .map_sty {
|
||||
width: calc(100% - 21px);
|
||||
height: calc(100% - 34px - 23px);
|
||||
margin: 8px 0 0 7px;
|
||||
border: 1px solid #213b8e;
|
||||
/* padding: 8px 14px 15px 7px; */
|
||||
box-sizing: border-box;
|
||||
background-color: #162963;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.middle_top .map_sty {
|
||||
width: calc(103% - 0px);
|
||||
height: calc(103% - 0px);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#middle_down_map {
|
||||
background-color: #162963;
|
||||
background-clip: content-box;
|
||||
border: 1px solid #213b8e;
|
||||
}
|
||||
|
||||
.right .side_left_top {
|
||||
top: 42px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.right .side_left_down {
|
||||
left: 7px;
|
||||
bottom: 11px;
|
||||
}
|
||||
|
||||
.right .side_right_top {
|
||||
right: 14px;
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
.right .side_right_down {
|
||||
right: 14px;
|
||||
bottom: 11px;
|
||||
}
|
||||
|
||||
/* 左中右 */
|
||||
.vertical {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vertical_middle {
|
||||
width: 40%;
|
||||
/* background-color: brown; */
|
||||
}
|
||||
|
||||
.vertical_left,
|
||||
.vertical_right {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
/* 左 上中下 */
|
||||
.left {
|
||||
width: 100%;
|
||||
height: calc(100% / 3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left_middle {
|
||||
/* background-color: cadetblue; */
|
||||
}
|
||||
|
||||
/* 中 上中下 */
|
||||
.middle {
|
||||
width: 100%;
|
||||
/* height: calc(100% / 3); */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.middle_top {
|
||||
height: 60%;
|
||||
/* height: calc(100% - (100% / 3)); */
|
||||
/* background-color: chartreuse; */
|
||||
}
|
||||
|
||||
.middle_down {
|
||||
height: calc(40% - 8px);
|
||||
margin-top: 8px;
|
||||
/* height: calc(100% / 3); */
|
||||
}
|
||||
|
||||
/* 右 上中下 */
|
||||
.right {
|
||||
width: 100%;
|
||||
height: calc(100% / 3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.right_middle {
|
||||
/* background-color: chocolate; */
|
||||
}
|
||||
|
||||
.xiang_guan {
|
||||
color: #0aebe2;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.xiang_guan a{
|
||||
text-decoration: none;
|
||||
color: #0aebe2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 弹处框效果 */
|
||||
.modal {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.modal:target {
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease-in-out;
|
||||
z-index: +20;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* width: 500px; */
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
transform: translate(-50%, -200%);
|
||||
transition: all 0.5s ease-in-out;
|
||||
perspective: 1000;
|
||||
outline: 1px solid transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal:target .modal-content {
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.5s ease-in-out;
|
||||
transition-delay: 0.5s;
|
||||
z-index: 9999;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 弹出框内容样式 */
|
||||
.modal_box {
|
||||
width: 1100px;
|
||||
height: 700px;
|
||||
background-color: #14234e;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal_close {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.modal_close a{
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-family: 'Cantarell', sans-serif;
|
||||
color: #3BADE7;
|
||||
}
|
||||
|
||||
.modal_con{
|
||||
height: calc(100% - 34px - 10px);
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.heat_map{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #162963;
|
||||
background-clip: content-box;
|
||||
border: 1px solid #213b8e;
|
||||
}
|
||||
|
||||
.modal_con .map_side_sty{
|
||||
height: 100%;
|
||||
position: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal_con .side_left_top{
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal_con .side_left_down{
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.modal_con .side_right_top{
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.modal_con .side_right_down{
|
||||
bottom: -5px;
|
||||
right: 0;
|
||||
}
|
BIN
web/img/bg.png
Normal file
After Width: | Height: | Size: 624 KiB |
BIN
web/img/gdp_title.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
web/img/gy_title.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
web/img/left_down.png
Normal file
After Width: | Height: | Size: 129 B |
BIN
web/img/left_top.png
Normal file
After Width: | Height: | Size: 125 B |
BIN
web/img/right_down.png
Normal file
After Width: | Height: | Size: 129 B |
BIN
web/img/right_top.png
Normal file
After Width: | Height: | Size: 122 B |
BIN
web/img/table_icon.png
Normal file
After Width: | Height: | Size: 265 B |
BIN
web/img/title_line.png
Normal file
After Width: | Height: | Size: 5.2 KiB |
255
web/index.html
Normal file
@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
|
||||
<title>贵州省主要指标趋势分析</title>
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
<script src="./plug/jquery/jquery-1.12.3.min.js"></script>
|
||||
<script src="./plug/echarts/echarts.min.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 标题 -->
|
||||
<div class="top_box">
|
||||
<div class="title_box">贵州省主要指标趋势分析</div>
|
||||
<div class="title_line">
|
||||
<img src="./img/title_line.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主体内容 -->
|
||||
<div class="container">
|
||||
<!-- 左 -->
|
||||
<div class="vertical vertical_left">
|
||||
<div class="left left_top">
|
||||
<!-- 图表标题 -->
|
||||
<div class="map_title_box">
|
||||
<div class="map_title">地区生产总值趋势分析</div>
|
||||
<div class="map_title_bg">
|
||||
<img src="./img/gdp_title.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div id="left_top_map" class="map_sty">
|
||||
</div>
|
||||
<!-- 四个角的样式 -->
|
||||
<!-- <div class="map_side_sty"> -->
|
||||
<div class="side_img side_left_top">
|
||||
<img src="./img/left_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_left_down">
|
||||
<img src="./img/left_down.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_top">
|
||||
<img src="./img/right_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_down">
|
||||
<img src="./img/right_down.png" alt="">
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="left left_middle">
|
||||
<!-- 图表标题 -->
|
||||
<div class="map_title_box">
|
||||
<div class="map_title">工业趋势分析</div>
|
||||
<div class="map_title_bg">
|
||||
<img src="./img/gy_title.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div id="left_middle_map" class="map_sty"></div>
|
||||
<!-- 四个角的样式 -->
|
||||
<!-- <div class="map_side_sty"> -->
|
||||
<div class="side_img side_left_top">
|
||||
<img src="./img/left_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_left_down">
|
||||
<img src="./img/left_down.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_top">
|
||||
<img src="./img/right_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_down">
|
||||
<img src="./img/right_down.png" alt="">
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="left left_down">
|
||||
<!-- 图表标题 -->
|
||||
<div class="map_title_box">
|
||||
<div class="map_title">人均生产总值趋势分析</div>
|
||||
<div class="map_title_bg">
|
||||
<img src="./img/gy_title.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div id="left_down_map" class="map_sty"></div>
|
||||
<!-- 四个角的样式 -->
|
||||
<!-- <div class="map_side_sty"> -->
|
||||
<div class="side_img side_left_top">
|
||||
<img src="./img/left_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_left_down">
|
||||
<img src="./img/left_down.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_top">
|
||||
<img src="./img/right_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_down">
|
||||
<img src="./img/right_down.png" alt="">
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中 -->
|
||||
<div class="vertical vertical_middle">
|
||||
<div class="middle middle_top">
|
||||
<div id="middle_top_map" class="map_sty"></div>
|
||||
</div>
|
||||
<!-- <div class="middle middle_middle">
|
||||
<div id="middle_middle_map" class="map_sty"></div>
|
||||
</div> -->
|
||||
<div class="middle middle_down">
|
||||
<!-- 图表标题 -->
|
||||
<div class="map_title_box">
|
||||
<div class="map_title">历年地区生产总值横向对比</div>
|
||||
<div class="xiang_guan" title="点击查看指标相关性图表">
|
||||
<img src="./img/table_icon.png" style="margin-right: 5px;margin-top: 2px;" alt="">
|
||||
<a href="#modal">指标相关性</a>
|
||||
</div>
|
||||
<div class="map_title_bg">
|
||||
<img src="./img/gy_title.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div id="middle_down_map" class="map_sty"></div>
|
||||
<!-- 四个角的样式 -->
|
||||
<!-- <div class="map_side_sty"> -->
|
||||
<div class="side_img side_left_top">
|
||||
<img src="./img/left_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_left_down">
|
||||
<img src="./img/left_down.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_top">
|
||||
<img src="./img/right_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_down">
|
||||
<img src="./img/right_down.png" alt="">
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右 -->
|
||||
<div class="vertical vertical_right">
|
||||
<div class="right right_top">
|
||||
<!-- 图表标题 -->
|
||||
<div class="map_title_box">
|
||||
<div class="map_title">第一产业增加值趋势分析</div>
|
||||
<div class="map_title_bg">
|
||||
<img src="./img/gy_title.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div id="right_top_map" class="map_sty"></div>
|
||||
<!-- 四个角的样式 -->
|
||||
<!-- <div class="map_side_sty"> -->
|
||||
<div class="side_img side_left_top">
|
||||
<img src="./img/left_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_left_down">
|
||||
<img src="./img/left_down.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_top">
|
||||
<img src="./img/right_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_down">
|
||||
<img src="./img/right_down.png" alt="">
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="right right_middle">
|
||||
<!-- 图表标题 -->
|
||||
<div class="map_title_box">
|
||||
<div class="map_title">第二产业增加值趋势分析</div>
|
||||
<div class="map_title_bg">
|
||||
<img src="./img/gy_title.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div id="right_middle_map" class="map_sty"></div>
|
||||
<!-- 四个角的样式 -->
|
||||
<!-- <div class="map_side_sty"> -->
|
||||
<div class="side_img side_left_top">
|
||||
<img src="./img/left_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_left_down">
|
||||
<img src="./img/left_down.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_top">
|
||||
<img src="./img/right_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_down">
|
||||
<img src="./img/right_down.png" alt="">
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="right right_down">
|
||||
<!-- 图表标题 -->
|
||||
<div class="map_title_box">
|
||||
<div class="map_title">第三产业增加值趋势分析</div>
|
||||
<div class="map_title_bg">
|
||||
<img src="./img/gy_title.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div id="right_down_map" class="map_sty"></div>
|
||||
<!-- 四个角的样式 -->
|
||||
<!-- <div class="map_side_sty"> -->
|
||||
<div class="side_img side_left_top">
|
||||
<img src="./img/left_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_left_down">
|
||||
<img src="./img/left_down.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_top">
|
||||
<img src="./img/right_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_down">
|
||||
<img src="./img/right_down.png" alt="">
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹处框 -->
|
||||
<div class="modal" id="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal_box">
|
||||
<div class="map_title_box">
|
||||
<div class="map_title" id="pertinence_title">指标相关性</div>
|
||||
<div class="modal_close"><a href="#" title="关闭">X</a></div>
|
||||
<div class="map_title_bg">
|
||||
<img src="./img/gy_title.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_con">
|
||||
<div class="heat_map" id="heat_map"></div>
|
||||
<!-- 四个角的样式 -->
|
||||
<!-- <div class="map_side_sty"> -->
|
||||
<div class="side_img side_left_top">
|
||||
<img src="./img/left_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_left_down">
|
||||
<img src="./img/left_down.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_top">
|
||||
<img src="./img/right_top.png" alt="">
|
||||
</div>
|
||||
<div class="side_img side_right_down">
|
||||
<img src="./img/right_down.png" alt="">
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|