.

css/common.css

@@ -3,203 +3,308 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 14px;
-    font: inherit;
-    vertical-align: baseline;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 14px;
+	font: inherit;
+	vertical-align: baseline;
 }
+
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+	display: block;
 }
+
 body {
-    line-height: 1;
+	line-height: 1;
 }
-ol, ul {
-    list-style: none;
+
+ol,
+ul {
+	list-style: none;
 }
-blockquote, q {
-    quotes: none;
+
+blockquote,
+q {
+	quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+	content: '';
+	content: none;
 }
+
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+	border-collapse: collapse;
+	border-spacing: 0;
 }
+
 * {
-    box-sizing: border-box;
+	box-sizing: border-box;
 }
+
 a {
-    text-decoration: unset;
-}
-html, body {
-  background-color: #060B2E;
-  height: 100%;
-  width: 100%; 
-  min-width:1920px;
-  min-height:1080px;
- }
+	text-decoration: unset;
+}
+
+html,
+body {
+	background-color: #060B2E;
+	height: 100%;
+	width: 100%;
+	min-width: 1920px;
+	min-height: 1080px;
+}
+
 .header-wrapper {
-  display: flex;
-  justify-content: center;
-  background-color: #08133D; 
-  position:relative;
- }
+	display: flex;
+	justify-content: center;
+	background-color: #08133D;
+	position: relative;
+}
+
 .header-wrapper:hover .nav-bar {
-   top:0px;
-	
+	top: 0px;
+
 }
+
 .header-wrapper .title {
-    text-align: center;
-    line-height: 80px;
-    font-size: 2.6em;
-    color: #69F8FE;
-	position:relative;
-	width:623px
-}
-.header-wrapper .title svg{
-	position:absolute;
-	left:-140px;
-	top:-2px;
-}
-.header-wrapper .title:after{
-	content:'';
-	width:100%;
-	height:2px;
-	background-color:#fff;
-	position:absolute;
-	bottom:-10px;
-	left:0px;
-}
-
- .nav-bar {
-  position: absolute;
-  left: 0;
-  top: -90px;
-  height: 90px;
-  background-color: #0E1E51;
-  transition: top 0.75s;
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  width:100%;
- }
-.login-content{
-	 position:absolute;
-	 right:50px;
-	 top:0;
-	 height:100%;
-	display:flex;
-	align-items:center;
- }
-.login-content .login-href{
-	color:#fff;
-	cursor:pointer;
-	margin-right:30px;
-}
-.login-content .logout-href{
-	color:#fff;
-	cursor:pointer;
-	margin-right:30px;
-}
-.login-content .select-input{
-	min-width:80px;
-	max-width:300px;
-    height: 32px;
-    position: relative;
-    vertical-align: middle;
-    padding: 2px;
-    background-color: #001346;
-    color: #fff;
-    text-shadow: none;
-    border-radius: 4px;
-    transition: box-shadow 0.25s ease;
-    border: 1px solid #0b52e0;
-    z-index: 2;
-    display: flex;
-    align-items: center;
+	text-align: center;
+	line-height: 80px;
+	font-size: 2.6em;
+	color: #69F8FE;
+	position: relative;
+	width: 623px
+}
+
+.header-wrapper .title svg {
+	position: absolute;
+	left: -140px;
+	top: -2px;
+}
+
+.header-wrapper .title:after {
+	content: '';
+	width: 100%;
+	height: 2px;
+	background-color: #fff;
+	position: absolute;
+	bottom: -10px;
+	left: 0px;
+}
+
+.nav-bar {
+	position: absolute;
+	left: 0;
+	top: -90px;
+	height: 90px;
+	background-color: #0E1E51;
+	transition: top 0.75s;
+	display: flex;
+	align-items: center;
+	padding: 0 16px;
+	width: 100%;
+}
+
+.login-content {
+	position: absolute;
+	right: 50px;
+	top: 0;
+	height: 100%;
+	display: flex;
+	align-items: center;
+}
+
+.login-content .login-href {
+	color: #fff;
+	cursor: pointer;
+	margin-right: 30px;
+}
+
+.login-content .logout-href {
+	color: #fff;
+	cursor: pointer;
+	margin-right: 30px;
+}
+
+.login-content .select-input {
+	min-width: 80px;
+	max-width: 300px;
+	height: 32px;
+	position: relative;
+	vertical-align: middle;
+	padding: 2px;
+	background-color: #001346;
+	color: #fff;
+	text-shadow: none;
+	border-radius: 4px;
+	transition: box-shadow 0.25s ease;
+	border: 1px solid #0b52e0;
+	z-index: 2;
+	display: flex;
+	align-items: center;
 	padding-right: 20px;
 }
+
 .login-content .select-input:before {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 6px solid transparent;
-    border-top-color: #fff;
-    top: 12px;
-    right: 4px;
-    cursor: pointer;
-    z-index: -2;
-}
-.login-content .select-input .muchang-list{
-	position:absolute;
-	left:0px;
-	top:100%;
-	width:100%;
-	display:none;
+	content: "";
+	position: absolute;
+	width: 0;
+	height: 0;
+	border: 6px solid transparent;
+	border-top-color: #fff;
+	top: 12px;
+	right: 4px;
+	cursor: pointer;
+	z-index: -2;
+}
+
+.login-content .select-input .muchang-list {
+	position: absolute;
+	left: 0px;
+	top: 100%;
+	width: 100%;
+	display: none;
 	background-color: #001346;
-    border-radius: 0 0 6px 6px;
-    box-shadow: 0px -5px 5px 0px rgba(255,255,255,0.1), -5px 0px 5px 0px rgba(255,255,255,0.1), 5px 0px 5px 0px rgba(255,255,255,0.1), 0px 5px 5px 0px rgba(255,255,255,0.1);
-}
-.login-content .select-input .muchang-list li{
-	text-align:center;
-	height:30px;
-	line-height:30px;
-	cursor:pointer;
-	padding:0 10px;
-}
-.login-content .select-input .muchang-list li:hover{
-	background-color:#528DFF
-}
-.login-content .select-input .muchang-title{
-	width:100%;
-	height:100%;
+	border-radius: 0 0 6px 6px;
+	box-shadow: 0px -5px 5px 0px rgba(255, 255, 255, 0.1), -5px 0px 5px 0px rgba(255, 255, 255, 0.1), 5px 0px 5px 0px rgba(255, 255, 255, 0.1), 0px 5px 5px 0px rgba(255, 255, 255, 0.1);
+}
+
+.login-content .select-input .muchang-list li {
+	text-align: center;
+	height: 30px;
+	line-height: 30px;
+	cursor: pointer;
+	padding: 0 10px;
+}
+
+.login-content .select-input .muchang-list li:hover {
+	background-color: #528DFF
+}
+
+.login-content .select-input .muchang-title {
+	width: 100%;
+	height: 100%;
 	padding-left: 10px;
 	color: #fff;
-	display:flex;
-	align-items:center;
-	font-size:0.9em;
-	cursor:pointer;
-}
-
-  .nav-bar .item {
-    cursor: pointer;
-    padding: 10px 30px;
-    color: #ffffff;
-    font-size: 22px;
-    border-right: 2px solid transparent;
-    border-image: linear-gradient(0, #0A214A, #6DDFE9, #0A214A) 1; 
-}
- .nav-bar .item:last-child {
-    border-right: 0; 
-	}
- .nav-bar .item.active {
-    /*color: #6DDFE9; */
-	background: linear-gradient(to top, #69F8FE,#f4f4f4);
-    -webkit-background-clip: text;
-    color: transparent;
-	font-weight:bold;
-}
-
- 
+	display: flex;
+	align-items: center;
+	font-size: 0.9em;
+	cursor: pointer;
+}
+
+.nav-bar .item {
+	cursor: pointer;
+	padding: 10px 30px;
+	color: #ffffff;
+	font-size: 22px;
+	border-right: 2px solid transparent;
+	border-image: linear-gradient(0, #0A214A, #6DDFE9, #0A214A) 1;
+}
+
+.nav-bar .item:last-child {
+	border-right: 0;
+}
+
+.nav-bar .item.active {
+	/*color: #6DDFE9; */
+	background: linear-gradient(to top, #69F8FE, #f4f4f4);
+	-webkit-background-clip: text;
+	color: transparent;
+	font-weight: bold;
+}

css/fzfx.css

@@ -99,7 +99,10 @@
 .grid-wrapper #chartLeft2{
 	height:31%;
 }
-#chart-clfb,#chart-tcqk{
+.grid-wrapper #chartLeft3{
+	height:31%;
+}
+#chart-clfb,#chart-tcqk,#chart-gjdzzcl{
 	height:calc(100% - 40px);
 }
 .grid-wrapper .chart-tab-t{
@@ -153,7 +156,7 @@
     justify-content: center; 
 	position:relative;
 	padding-bottom:20px;
-	height:98px;
+	height:68px;
 }
 .grid-wrapper .center .line2:before{
 	content:'';
@@ -186,7 +189,7 @@
 	max-width:60%;
     padding-left: 30px;
 }
-.grid-wrapper .center .line2 .list .item {
+/* .grid-wrapper .center .line2 .list .item {
 	overflow:hidden;
     height: 26px;
     line-height: 26px;
@@ -195,11 +198,49 @@
 }
 .grid-wrapper .center .line2 .list .item .title {
     color: #6DDFE9; 
+} */
+.grid-wrapper .center .line2 .top .cell{
+	margin: 5px 8px;
+	/* background-color: #64CFDC; */
+	border: #64CFDC 1px solid;
+	border-radius: 5px;
+	padding: 5px;
+}
+.grid-wrapper .center .line2 .top .cell .title{
+	color: #69bdfd;
+}
+.grid-wrapper .center .line2 .top .cell .content{
+	font-weight: 600;
 }
 .grid-wrapper .line3{
 	margin-top:10px;
 	height:calc(100% - 148px);
 }
+.grid-wrapper .line3 .ln-Dropdown{
+	cursor: pointer;
+	position: relative;
+	display: inline-block;
+}
+.grid-wrapper .line3 .ln-Dropdown .ln-Dropdown-content{
+	background-color: #ddd;
+	display: none;
+	z-index: 999;
+	position: absolute;
+	top: 80%;
+	/* transform: translateX(-150%); */
+	/* width: 100%; */
+	border-radius: 5px;
+	padding: 5px 0;
+}
+.grid-wrapper .line3 .ln-Dropdown .ln-Dropdown-content .ln-Dropdown-item{
+	color: #000;
+	text-align: center;
+	line-height: 180%;
+	padding: 0 20px;
+}
+.grid-wrapper .line3 .ln-Dropdown .ln-Dropdown-content .ln-Dropdown-item:hover{
+	background-color: #b9e4e8;
+}
 #chartCenter{
 	height:100%;
 }

js/fzfx.js

@@ -69,4 +69,12 @@ $(".a_demo_two").click(function(){
 	$(this).addClass('switch-bt-active');
 	$('.tab-areas .tab-area').addClass('tabshow');
 	$(".tab-areas .tab-area").eq(i).removeClass('tabshow');
+})
+// 中间下拉框点击事件
+$("#ln-Dropdown").click(function(e) {
+	$(".ln-Dropdown-content").slideToggle(300);
+	if(e.target.nodeName == 'LI') {
+		console.dir(e.target.attributes.value.value)
+		$('#ln-Dropdown').eq(0)[0].children[0].innerText = e.target.innerText
+	}
 })