|
|
@@ -1,225 +1,225 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
-<head>
|
|
|
- <meta charset="utf-8"/>
|
|
|
- <title>南岸区大屏</title>
|
|
|
- <link rel="stylesheet" type="text/css" href="css/index.css"/>
|
|
|
- <link rel="stylesheet" href="./layui/layui.css" media="all">
|
|
|
- <style type="text/css">
|
|
|
- html,
|
|
|
- body {
|
|
|
- width: 1150px;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- @font-face {
|
|
|
- font-family: RUIZIZHENYANTIMIANFEISHANGYONG;
|
|
|
- src: url(./font/RUIZIZHENYANTIMIANFEISHANGYONG-2.TTF);
|
|
|
- }
|
|
|
-
|
|
|
- .all {
|
|
|
- width: 1150px;
|
|
|
- position: relative;
|
|
|
- background-color: #EAF1F8;
|
|
|
- min-width: 1150px;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .logo {
|
|
|
- background-image: none;
|
|
|
- text-align: left;
|
|
|
- padding-left: 20px;
|
|
|
- font-family: RUIZIZHENYANTIMIANFEISHANGYONG;
|
|
|
- color: #333;
|
|
|
- background-color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 50%;
|
|
|
- letter-spacing: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .topList {
|
|
|
- display: flex;
|
|
|
- /* margin: 0 10px; */
|
|
|
- width: 100%;
|
|
|
- justify-content: space-between;
|
|
|
- height: 500px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .topList > div {
|
|
|
- width: 99%;
|
|
|
- }
|
|
|
-
|
|
|
- .topList .layui-tab-title li {
|
|
|
- min-width: 115px;
|
|
|
- }
|
|
|
-
|
|
|
- .topList .layui-tab-title li:first-child {
|
|
|
- min-width: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- .topList .layui-tab-title li:nth-of-type(6) {
|
|
|
- min-width: 133px;
|
|
|
- }
|
|
|
-
|
|
|
- .topList .layui-tab-card > .layui-tab-title {
|
|
|
- background-color: #EAF1F8;
|
|
|
- }
|
|
|
-
|
|
|
- .layui-tab-content {
|
|
|
-
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .CenterList {
|
|
|
- padding: 0px 40px 20px 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .centerTit {
|
|
|
- border-bottom: 2px solid #DAE4ED;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- }
|
|
|
-
|
|
|
- .centerTit span {
|
|
|
- color: #2382FE;
|
|
|
- font-weight: bold;
|
|
|
- display: inline-block;
|
|
|
- height: 80%;
|
|
|
- width: 100px;
|
|
|
- text-align: center;
|
|
|
- margin-top: 8px;
|
|
|
- border-bottom: 3px solid #2382FE;
|
|
|
- }
|
|
|
-
|
|
|
- .centerSelect {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .layui-form-label {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .centerCon {
|
|
|
- height: 410px;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-
|
|
|
- .centerCon .centerTree {
|
|
|
- border: 1px solid #DAE4ED;
|
|
|
- width: 20%;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .centerCon .centerLine {
|
|
|
- flex: 2;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .layui-tree-iconArrow:after {
|
|
|
-
|
|
|
- border-color: transparent transparent transparent #1E9FFF;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .centerTable table {
|
|
|
- width: 100%;
|
|
|
- margin-top: 20px;
|
|
|
- color: #333;
|
|
|
- border: 1px solid #e3e9f0;
|
|
|
- text-indent: 2em;
|
|
|
- }
|
|
|
-
|
|
|
- .centerTable table tr {
|
|
|
- border: 1px solid #e3e9f0;
|
|
|
- }
|
|
|
-
|
|
|
- .centerTable table th {
|
|
|
- background-color: #D7DEE6;
|
|
|
- color: #333;
|
|
|
- text-align: left;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 16px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .centerTable table th,
|
|
|
- td {
|
|
|
- height: 40px;
|
|
|
- min-width: 165px;
|
|
|
- }
|
|
|
-
|
|
|
- .centerTable table th:first-child {
|
|
|
- min-width: 200px;
|
|
|
- }
|
|
|
-
|
|
|
- .centerTable table tr:nth-of-type(2n) {
|
|
|
- background-color: #f1f5f9;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomListOne {
|
|
|
- width: 46%;
|
|
|
- border: 1px solid #E9E9E9;
|
|
|
- height: 250px;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomTit {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: 40px;
|
|
|
- border-bottom: 1px solid #E9E9E9;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomTit span {
|
|
|
- display: inline-block;
|
|
|
- height: 100%;
|
|
|
- width: 80px;
|
|
|
- line-height: 40px;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomTit span:first-child {
|
|
|
- background-color: #007AFF;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomTit span:first-child::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- border-width: 8px;
|
|
|
- border-style: solid;
|
|
|
- border-color: #007AFF transparent transparent transparent;
|
|
|
- top: 100%;
|
|
|
- margin-left: -4px;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomTit span:last-child {
|
|
|
- color: #999;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .bottomCon ul li {
|
|
|
- list-style: inside;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- padding: 5px 13px 5px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomCon ul li span {
|
|
|
- float: right;
|
|
|
- }
|
|
|
-
|
|
|
- .topList .layui-tab-card > .layui-tab-title .layui-this {
|
|
|
- color: #007AFF;
|
|
|
- font-weight: bold;
|
|
|
- /* font-size: 16px; */
|
|
|
- }
|
|
|
-
|
|
|
- /* .layui-tab-card>.layui-tab-title .layui-this:after {
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <title>南岸区大屏</title>
|
|
|
+ <link rel="stylesheet" type="text/css" href="css/index.css" />
|
|
|
+ <link rel="stylesheet" href="./layui/layui.css" media="all">
|
|
|
+ <style type="text/css">
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ width: 1150px;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: RUIZIZHENYANTIMIANFEISHANGYONG;
|
|
|
+ src: url(./font/RUIZIZHENYANTIMIANFEISHANGYONG-2.TTF);
|
|
|
+ }
|
|
|
+
|
|
|
+ .all {
|
|
|
+ width: 1150px;
|
|
|
+ position: relative;
|
|
|
+ background-color: #EAF1F8;
|
|
|
+ min-width: 1150px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ background-image: none;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 20px;
|
|
|
+ font-family: RUIZIZHENYANTIMIANFEISHANGYONG;
|
|
|
+ color: #333;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 50%;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topList {
|
|
|
+ display: flex;
|
|
|
+ /* margin: 0 10px; */
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 500px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topList>div {
|
|
|
+ width: 99%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topList .layui-tab-title li {
|
|
|
+ min-width: 115px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topList .layui-tab-title li:first-child {
|
|
|
+ min-width: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topList .layui-tab-title li:nth-of-type(6) {
|
|
|
+ min-width: 133px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topList .layui-tab-card>.layui-tab-title {
|
|
|
+ background-color: #EAF1F8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layui-tab-content {
|
|
|
+
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .CenterList {
|
|
|
+ padding: 0px 40px 20px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerTit {
|
|
|
+ border-bottom: 2px solid #DAE4ED;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerTit span {
|
|
|
+ color: #2382FE;
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ height: 80%;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 8px;
|
|
|
+ border-bottom: 3px solid #2382FE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerSelect {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layui-form-label {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerCon {
|
|
|
+ height: 410px;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerCon .centerTree {
|
|
|
+ border: 1px solid #DAE4ED;
|
|
|
+ width: 20%;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerCon .centerLine {
|
|
|
+ flex: 2;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .layui-tree-iconArrow:after {
|
|
|
+
|
|
|
+ border-color: transparent transparent transparent #1E9FFF;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerTable table {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #333;
|
|
|
+ border: 1px solid #e3e9f0;
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerTable table tr {
|
|
|
+ border: 1px solid #e3e9f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerTable table th {
|
|
|
+ background-color: #D7DEE6;
|
|
|
+ color: #333;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerTable table th,
|
|
|
+ td {
|
|
|
+ height: 40px;
|
|
|
+ min-width: 165px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerTable table th:first-child {
|
|
|
+ min-width: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerTable table tr:nth-of-type(2n) {
|
|
|
+ background-color: #f1f5f9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomListOne {
|
|
|
+ width: 46%;
|
|
|
+ border: 1px solid #E9E9E9;
|
|
|
+ height: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomTit {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 40px;
|
|
|
+ border-bottom: 1px solid #E9E9E9;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomTit span {
|
|
|
+ display: inline-block;
|
|
|
+ height: 100%;
|
|
|
+ width: 80px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomTit span:first-child {
|
|
|
+ background-color: #007AFF;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomTit span:first-child::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ border-width: 8px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #007AFF transparent transparent transparent;
|
|
|
+ top: 100%;
|
|
|
+ margin-left: -4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomTit span:last-child {
|
|
|
+ color: #999;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomCon ul li {
|
|
|
+ list-style: inside;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 5px 13px 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomCon ul li span {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topList .layui-tab-card>.layui-tab-title .layui-this {
|
|
|
+ color: #007AFF;
|
|
|
+ font-weight: bold;
|
|
|
+ /* font-size: 16px; */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* .layui-tab-card>.layui-tab-title .layui-this:after {
|
|
|
content: '';
|
|
|
width: 70%;
|
|
|
height: 4px;
|
|
|
@@ -227,200 +227,201 @@
|
|
|
left: 21px;
|
|
|
top: 37px;
|
|
|
} */
|
|
|
- .topList .layui-tab-card > .layui-tab-title .layui-this::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- background: #EAF1F8;
|
|
|
- top: -7px;
|
|
|
- left: -10px;
|
|
|
- transform: rotate(45deg);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .topList .layui-tab-card > .layui-tab-title .layui-this::after {
|
|
|
- content: '';
|
|
|
- border: none;
|
|
|
- position: absolute;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- background: #EAF1F8;
|
|
|
- top: -7px;
|
|
|
- /* left: 130px; */
|
|
|
- left: 93%;
|
|
|
- transform: rotate(-45deg);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .bottomListOne .layui-tab {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomListOne .layui-tab-card > .layui-tab-title {
|
|
|
- background-color: #fff;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .bottomListOne .layui-tab-card > .layui-tab-title .layui-this {
|
|
|
- background-color: #007AFF;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomListOne .layui-tab-card {
|
|
|
- border-width: 1px;
|
|
|
- border-style: none;
|
|
|
- border-radius: none;
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
-
|
|
|
- .bottomListOne .layui-tab-card > .layui-tab-title .layui-this::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
- background: #007AFF;
|
|
|
- top: 30px;
|
|
|
- left: 39px;
|
|
|
- transform: rotate(45deg);
|
|
|
- z-index: 2;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .bottomListOne ul > span {
|
|
|
- display: inline-block;
|
|
|
- color: #999;
|
|
|
- width: 100px;
|
|
|
- height: 40px;
|
|
|
- /* z-index: 1111111111111; */
|
|
|
-
|
|
|
- line-height: 40px;
|
|
|
- font-size: 14px;
|
|
|
- position: absolute;
|
|
|
- right: 0px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .czbtn {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- /* margin-left: 30px; */
|
|
|
- z-index: 99999999;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-<div class="all all_enter_show">
|
|
|
- <div style="display: flex;justify-content: space-between;background-color: #fff;border-bottom: 2px solid #C1C1C1;;">
|
|
|
- <div class="logo">
|
|
|
- 南岸区经济发展数据
|
|
|
- </div>
|
|
|
- <div class="showTime" style="position: inherit;margin-top: 31px;color: #0990F8;">
|
|
|
- <div class="timeDeatil" style="line-height: 42px;">10:12:23</div>
|
|
|
- <div class="dateLine" style="line-height: 42px;margin-right: 10px;">|</div>
|
|
|
- <div>
|
|
|
- <p class="dateMon">星期四</p>
|
|
|
- <p class="dateDeatil">2021-09-12</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="main-container">
|
|
|
- <div class="topList">
|
|
|
- <div class="layui-tab layui-tab-card" lay-filter="test1">
|
|
|
- <ul class="layui-tab-title">
|
|
|
- <!-- <li class="layui-this" lay-id="gdpmain">GDP</li> -->
|
|
|
- <li class="layui-this" lay-id="scalemain" style="width: 100px;">规上工业总产值</li>
|
|
|
- <li lay-id="constructionmain">建筑业总产值</li>
|
|
|
- <li lay-id="fixedAssetsmain">固定资产投资总额</li>
|
|
|
- <li lay-id="realtyMarketmain">商品房建设与销售</li>
|
|
|
- <li lay-id="inlandTrademain">批发零售住宿餐饮业</li>
|
|
|
- <li lay-id="publicIncomemain">地方财政收支</li>
|
|
|
- <li lay-id="bankmain">金融机构存贷款</li>
|
|
|
- </ul>
|
|
|
- <div class="layui-tab-content" style="height: 400px;">
|
|
|
- <!-- <div class="layui-tab-item layui-show" id="gdpmain" style="height: 100%;width: 100%;">
|
|
|
- </div> -->
|
|
|
- <div class="layui-tab-item layui-show">
|
|
|
- <div id="scalemain" style="height: 400px;width: 1146px;"></div>
|
|
|
- </div>
|
|
|
- <div class="layui-tab-item">
|
|
|
- <div id="constructionmain" style="height: 400px;width: 1146px;"></div>
|
|
|
- </div>
|
|
|
- <div class="layui-tab-item">
|
|
|
- <div id="fixedAssetsmain" style="height: 400px;width: 1146px;"></div>
|
|
|
- </div>
|
|
|
- <div class="layui-tab-item">
|
|
|
- <div id="realtyMarketmain" style="height: 400px;width: 1146px;"></div>
|
|
|
- </div>
|
|
|
- <div class="layui-tab-item">
|
|
|
- <div id="inlandTrademain" style="height: 400px;width: 1146px;"></div>
|
|
|
- </div>
|
|
|
- <div class="layui-tab-item" style="position: relative;">
|
|
|
- <div class="czbtn">
|
|
|
- <div class="layui-btn layui-btn-xs layui-btn-normal togglePic">＃公共财政支出</div>
|
|
|
- <div class="layui-btn layui-btn-xs layui-btn-normal togglePic">税收收入</div>
|
|
|
- <div class="layui-btn layui-btn-xs layui-btn-normal togglePic">＃公共财政收入</div>
|
|
|
- </div>
|
|
|
- <div id="publicIncomemain" style="height: 400px;width: 1146px;"></div>
|
|
|
- </div>
|
|
|
- <div class="layui-tab-item" style="position: relative;">
|
|
|
- <div class="czbtn">
|
|
|
- <div class="layui-btn layui-btn-xs layui-btn-normal togglePic2">金融机构人民币存款余额</div>
|
|
|
- <div class="layui-btn layui-btn-xs layui-btn-normal togglePic2">金融机构人民币贷款余额</div>
|
|
|
- </div>
|
|
|
- <div id="bankmain" style="height: 400px;width: 1146px;"></div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="CenterList" style="height: auto;background-color: #fff;">
|
|
|
- <div class="centerTit">
|
|
|
- <span>详细数据</span>
|
|
|
- </div>
|
|
|
- <div class="centerSelect">
|
|
|
- <div class="layui-form">
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="centerCon">
|
|
|
- <div class="centerTree">
|
|
|
- <div id="test13" class="demo-tree-more"></div>
|
|
|
- </div>
|
|
|
- <div class="centerLine" id="mainCenter" style="height: 100%;width: 876px;"></div>
|
|
|
- </div>
|
|
|
- <div class="centerTable" style="overflow-x: scroll;">
|
|
|
- <table border="0" cellspacing="" cellpadding="">
|
|
|
- <tr class="tableTit">
|
|
|
- </tr>
|
|
|
- <tbody class="tableMain">
|
|
|
-
|
|
|
- </tbody>
|
|
|
-
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-
|
|
|
-<script src="layui/layui.js"></script>
|
|
|
-<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
|
|
|
-<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
|
|
|
-<script src="js/enterStatisMain.js" type="text/javascript" charset="utf-8"></script>
|
|
|
-
|
|
|
-
|
|
|
-</body>
|
|
|
+ .topList .layui-tab-card>.layui-tab-title .layui-this::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: #EAF1F8;
|
|
|
+ top: -7px;
|
|
|
+ left: -10px;
|
|
|
+ transform: rotate(45deg);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .topList .layui-tab-card>.layui-tab-title .layui-this::after {
|
|
|
+ content: '';
|
|
|
+ border: none;
|
|
|
+ position: absolute;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: #EAF1F8;
|
|
|
+ top: -7px;
|
|
|
+ /* left: 130px; */
|
|
|
+ left: 93%;
|
|
|
+ transform: rotate(-45deg);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomListOne .layui-tab {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomListOne .layui-tab-card>.layui-tab-title {
|
|
|
+ background-color: #fff;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomListOne .layui-tab-card>.layui-tab-title .layui-this {
|
|
|
+ background-color: #007AFF;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomListOne .layui-tab-card {
|
|
|
+ border-width: 1px;
|
|
|
+ border-style: none;
|
|
|
+ border-radius: none;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomListOne .layui-tab-card>.layui-tab-title .layui-this::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ background: #007AFF;
|
|
|
+ top: 30px;
|
|
|
+ left: 39px;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomListOne ul>span {
|
|
|
+ display: inline-block;
|
|
|
+ color: #999;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ /* z-index: 1111111111111; */
|
|
|
+
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .czbtn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ /* margin-left: 30px; */
|
|
|
+ z-index: 99999999;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="all all_enter_show">
|
|
|
+ <div
|
|
|
+ style="display: flex;justify-content: space-between;background-color: #fff;border-bottom: 2px solid #C1C1C1;;">
|
|
|
+ <div class="logo">
|
|
|
+ 南岸区经济发展数据
|
|
|
+ </div>
|
|
|
+ <div class="showTime" style="position: inherit;margin-top: 31px;color: #0990F8;">
|
|
|
+ <div class="timeDeatil" style="line-height: 42px;">10:12:23</div>
|
|
|
+ <div class="dateLine" style="line-height: 42px;margin-right: 10px;">|</div>
|
|
|
+ <div>
|
|
|
+ <p class="dateMon">星期四</p>
|
|
|
+ <p class="dateDeatil">2021-09-12</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="main-container">
|
|
|
+ <div class="topList">
|
|
|
+ <div class="layui-tab layui-tab-card" lay-filter="test1">
|
|
|
+ <ul class="layui-tab-title">
|
|
|
+ <li class="layui-this" lay-id="gdpmain" style="width: 100px;">GDP</li>
|
|
|
+ <li lay-id="scalemain">规上工业总产值</li>
|
|
|
+ <li lay-id="constructionmain">建筑业总产值</li>
|
|
|
+ <li lay-id="fixedAssetsmain">固定资产投资总额</li>
|
|
|
+ <li lay-id="realtyMarketmain">商品房建设与销售</li>
|
|
|
+ <li lay-id="inlandTrademain">批发零售住宿餐饮业</li>
|
|
|
+ <li lay-id="publicIncomemain">地方财政收支</li>
|
|
|
+ <li lay-id="bankmain">金融机构存贷款</li>
|
|
|
+ </ul>
|
|
|
+ <div class="layui-tab-content" style="height: 400px;">
|
|
|
+ <div class="layui-tab-item layui-show" id="gdpmain" style="height: 400px;width: 1146px;">
|
|
|
+ </div>
|
|
|
+ <div class="layui-tab-item">
|
|
|
+ <div id="scalemain" style="height: 400px;width: 1146px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-tab-item">
|
|
|
+ <div id="constructionmain" style="height: 400px;width: 1146px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-tab-item">
|
|
|
+ <div id="fixedAssetsmain" style="height: 400px;width: 1146px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-tab-item">
|
|
|
+ <div id="realtyMarketmain" style="height: 400px;width: 1146px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-tab-item">
|
|
|
+ <div id="inlandTrademain" style="height: 400px;width: 1146px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-tab-item" style="position: relative;">
|
|
|
+ <div class="czbtn">
|
|
|
+ <div class="layui-btn layui-btn-xs layui-btn-normal togglePic">＃公共财政支出</div>
|
|
|
+ <div class="layui-btn layui-btn-xs layui-btn-normal togglePic">税收收入</div>
|
|
|
+ <div class="layui-btn layui-btn-xs layui-btn-normal togglePic">＃公共财政收入</div>
|
|
|
+ </div>
|
|
|
+ <div id="publicIncomemain" style="height: 400px;width: 1146px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-tab-item" style="position: relative;">
|
|
|
+ <div class="czbtn">
|
|
|
+ <div class="layui-btn layui-btn-xs layui-btn-normal togglePic2">金融机构人民币存款余额</div>
|
|
|
+ <div class="layui-btn layui-btn-xs layui-btn-normal togglePic2">金融机构人民币贷款余额</div>
|
|
|
+ </div>
|
|
|
+ <div id="bankmain" style="height: 400px;width: 1146px;"></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="CenterList" style="height: auto;background-color: #fff;">
|
|
|
+ <div class="centerTit">
|
|
|
+ <span>详细数据</span>
|
|
|
+ </div>
|
|
|
+ <div class="centerSelect">
|
|
|
+ <div class="layui-form">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="centerCon">
|
|
|
+ <div class="centerTree">
|
|
|
+ <div id="test13" class="demo-tree-more"></div>
|
|
|
+ </div>
|
|
|
+ <div class="centerLine" id="mainCenter" style="height: 100%;width: 876px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="centerTable" style="overflow-x: scroll;">
|
|
|
+ <table border="0" cellspacing="" cellpadding="">
|
|
|
+ <tr class="tableTit">
|
|
|
+ </tr>
|
|
|
+ <tbody class="tableMain">
|
|
|
+
|
|
|
+ </tbody>
|
|
|
+
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <script src="layui/layui.js"></script>
|
|
|
+ <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+ <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+ <script src="js/enterStatisMain.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+
|
|
|
+
|
|
|
+ </body>
|
|
|
</html>
|
sunjuan