zxz 3 lat temu
rodzic
commit
bf5b4cd27a
7 zmienionych plików z 394 dodań i 8 usunięć
  1. 124 4
      large/css/app.css
  2. BIN
      large/img/bg2.jpg
  3. BIN
      large/img/line5.png
  4. BIN
      large/img/line6.png
  5. BIN
      large/img/pic.png
  6. 0 4
      large/index.html
  7. 270 0
      large/index2.html

+ 124 - 4
large/css/app.css

@@ -33,6 +33,9 @@ body{
 	background-size: 100%;
 	height: 100vh;
 }
+.bg2{
+	background: url(../img/bg2.jpg) no-repeat;
+}
 @font-face{
 	font-family: 'ysbth';
 	src : url('../fonts/ysbth.ttf');
@@ -58,6 +61,7 @@ body{
 	justify-content: space-between;
 	right: 40px;
 	top:40px;
+	padding-left: 20px;
 }
 .weather{
 	display: flex;
@@ -138,6 +142,7 @@ i{
 	float: right;
 	width:472px;
 }
+
 .main-left-data-chart{
 	width: 140px;
 	height: 100px;
@@ -204,6 +209,8 @@ i{
 	width: 510px;
 	background:url(../img/line4.png) no-repeat;
 }
+
+
 .main-left-table .title h3{
 	font-size: 24px;
 	color:#75BDFF;
@@ -215,7 +222,11 @@ i{
 	font-family: 'ysbth';
 	margin-left: 20px;
 }
-.main-left-table .table{
+.main-left-table .content{
+	height:240px ;
+	overflow-y: auto;
+}
+.table{
 	background-color: #040711;
 	margin-bottom: 0;
 }
@@ -230,7 +241,7 @@ i{
 .table-bordered{
 	border: 1px solid #3f536a!important;
 }
-.main-left-table .table>thead>tr>th{
+ .table>thead>tr>th{
 	border-bottom: 1px solid #3f536a;
 	background-color: #041e3c;
 }
@@ -263,7 +274,7 @@ i{
 	margin-left: 20px;
 }
 .main-right-chart .content{
-	height:240px ;
+	height:380px ;
 }
 
 .main-mid-top{
@@ -272,6 +283,10 @@ i{
 	height: 609px;
 	padding-top: 68px;
 }
+.main-mid-top.nobg{
+	background:none;
+	padding-top: 20px;
+}
 .main-mid-bot{
 	margin: 40px auto 0;
 	width: 800px;
@@ -323,4 +338,109 @@ i{
 .nav>li>a:focus,.nav>li>a:hover{
 	background-color:#1684FC;
 	border-radius: 0;
-}
+}
+
+.about-left{
+	width: 370px;
+}
+.about-mid{
+	width: 950px;
+	margin-left: -475px;
+}
+.about-mid .main-mid-top{
+	width: 950px;
+	height: 600px;
+}
+.about-mid .main-mid-top img{
+	height: 90%;
+}
+.about-mid .main-mid-top h2{
+	font-family: 'ysbth';
+	font-size: 40px;
+}
+.about-mid .main-mid-bot{
+	margin: 0;
+	width: 950px;
+}
+.about-right{
+	width: 370px;
+}
+.about-left .title{
+	background:url(../img/line5.png) no-repeat;
+	width: 370px;
+	height: 60px;
+	background-size:100%;
+	padding-bottom: 20px;
+}
+.about-left .title h3{
+	font-size: 24px;
+	color:#75BDFF;
+	font-family: 'ysbth';
+}
+.about-left .content{
+	background:url(../img/line6.png) no-repeat bottom left;
+	padding-bottom:20px ;
+	background-size:100%;
+}
+.about-left .content h4{
+	font-weight: bold;
+	font-size: 16px;
+}
+.about-left .content h1{
+	color:#8ACDFF;
+	margin: 10px 0;
+	font-size: 36px;
+}
+.content-chart{
+	height: 240px;
+	padding: 20px 0;
+}
+.content-company{
+	height: 480px;
+	overflow-y: auto;
+}
+.content-company i{
+	margin-left: 5px;
+}
+.content-row{
+	display: flex;
+	justify-content: space-between;
+	margin: 20px 0;
+}
+.content-row:last-child{
+	margin-bottom: 0;
+}
+.content-item{
+	flex: 1;
+	text-align: left;
+}
+.main-mid-bot{
+	display: flex;
+	justify-content: space-between;
+}
+.about-mid .content{
+	flex: 1;
+	background:url(../img/line6.png) no-repeat bottom left;
+	padding-bottom:20px ;
+	background-size:100%;
+
+}
+.about-mid .content.no-bg{
+	background:none;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: 0;
+}
+.about-mid .content.no-bg p{
+	font-size: 12px;
+}
+.about-mid .content h4{
+	font-weight: bold;
+	font-size: 16px;
+}
+.about-mid .content h1{
+	color:#8ACDFF;
+	margin-top: 10px;
+	font-size: 36px;
+}

BIN
large/img/bg2.jpg


BIN
large/img/line5.png


BIN
large/img/line6.png


BIN
large/img/pic.png


+ 0 - 4
large/index.html

@@ -38,7 +38,6 @@
       </div>
       <div class="head-right" id="tianqi">
           <iframe width="300" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=90&color=%23FFFFFF&icon=1&py=wenzhou&site=19"></iframe>
-
        </div>
     </div>
     <div class="main">
@@ -76,12 +75,9 @@
 					<tr>
 					  <th>工会名称</th>
 					  <th>基础型</th>
-
 					</tr>
 				  </thead>
 				  <tbody id="topListBody">
-
-
 				  </tbody>
 				</table>
 				<!--<div class="tab-more">查看更多</div>-->

+ 270 - 0
large/index2.html

@@ -0,0 +1,270 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/app.css">
+    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
+    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
+    <!--[if lt IE 9]>
+      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body class="bg2">
+    <div class="head">
+      <div class="head-left">
+        <div class="address">
+          <i class="glyphicon glyphicon-map-marker"></i>
+          <span>瓯海区娄桥街道</span>
+        </div>
+        <div class="menu">
+          <div class="menu-item active">
+            <span>园区概况</span>
+          </div>
+           <div class="menu-item ">
+            <span>智慧大屏</span>
+          </div>
+        </div>
+      </div>
+      <div class="head-mid">
+        <h2>温州市总工会健康指数监测点智慧大屏</h2>
+        <h4>Health Index Monitoring Sites Smart DATA Visialization</h4>
+      </div>
+      <div class="head-right" id="tianqi">
+          <iframe width="300" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=90&color=%23FFFFFF&icon=1&py=wenzhou&site=19"></iframe>
+       </div>
+    </div>
+    <div class="main">
+      <div class="main-left">
+		<div class="about-left">
+			<div class="title">
+				<h3>园区介绍</h3>
+			</div>
+			<div class="content">
+				<h4>成立时间</h4>
+				<h1>2021年6月</h1>
+				<p>“三服务”行动,为企业提供“家门口”服务的一次创新性尝试,产业类型以制造业、鞋革、眼镜等行业为主。</p>
+			</div>
+			<div class="content">
+				<div class="content-row">
+					<div class="content-item">
+						<h4>占地面积(亩)</h4>
+						<h1>450</h1>
+					</div>
+					<div class="content-item">
+						<h4>产业类型</h4>
+						<h1>制造业</h1>
+					</div>
+				</div>
+				<div class="content-row">
+					<div class="content-item">
+						<h4>企业数</h4>
+						<h1>28/103</h1>
+					</div>
+					<div class="content-item">
+						<h4>规上企业数</h4>
+						<h1>19</h1>
+					</div>
+				</div>
+				<div class="content-row">
+					<div class="content-item">
+						<h4>税收(万元)</h4>
+						<h1>74873</h1>
+					</div>
+					<div class="content-item">
+						<h4>总产值(亿)</h4>
+						<h1>57.59</h1>
+					</div>
+				</div>
+			</div>
+			<div class="content">
+				<div class="content-row">
+					<div class="content-item">
+						<h4>工会组织数</h4>
+						<h1>28+1</h1>
+					</div>
+					<div class="content-item">
+						<h4>会员数</h4>
+						<h1>5261</h1>
+					</div>
+				</div>
+				<div class="content-row">
+					<div class="content-item">
+						<h4>劳模 (含集体)</h4>
+						<h1>28</h1>
+					</div>
+					<div class="content-item">
+						<h4>工匠</h4>
+						<h1>19</h1>
+					</div>
+				</div>
+				<div class="content-row">
+					<div class="content-item">
+						<h4>五一劳动奖章 (奖状)</h4>
+						<h1>1</h1>
+					</div>
+					<div class="content-item">
+						<h4>工人先锋号</h4>
+						<h1>2</h1>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+	  </div>
+      <div class="main-mid about-mid">
+		  <div class="main-mid-top nobg">
+			  <h2>娄桥轻工产业园分布图</h2>
+			  <img src="img/pic.png" alt="">
+		  </div>
+		  <div class="main-mid-bot">
+			 <div class="content">
+			 	<div class="content-row">
+			 		<div class="content-item">
+			 			<h4>工会组织数</h4>
+			 			<h1>28+1</h1>
+			 		</div>
+			 		<div class="content-item">
+			 			<h4>会员数</h4>
+			 			<h1>5261</h1>
+			 		</div>
+			 	</div>
+			 	<div class="content-row">
+			 		<div class="content-item">
+			 			<h4>劳模 (含集体)</h4>
+			 			<h1>28</h1>
+			 		</div>
+			 		<div class="content-item">
+			 			<h4>工匠</h4>
+			 			<h1>19</h1>
+			 		</div>
+			 	</div>
+			 </div>
+			 <div class="content no-bg">
+			 	<div class="content-row">
+			 		<div class="content-item">
+			 			<h4>工会组织数</h4>
+			 			<h1>28+1</h1>
+			 		</div>
+			 		<div class="content-item">
+			 			<h4>会员数</h4>
+			 			<h1>5261</h1>
+			 		</div>
+			 	</div>
+			 	<p>本统计结果来源于平台2020年12月31日截止数据</p>
+			 </div>
+			 <div class="content">
+			 	<div class="content-row">
+			 		<div class="content-item">
+			 			<h4>工会组织数</h4>
+			 			<h1>28+1</h1>
+			 		</div>
+			 		<div class="content-item">
+			 			<h4>会员数</h4>
+			 			<h1>5261</h1>
+			 		</div>
+			 	</div>
+			 	<div class="content-row">
+			 		<div class="content-item">
+			 			<h4>劳模 (含集体)</h4>
+			 			<h1>28</h1>
+			 		</div>
+			 		<div class="content-item">
+			 			<h4>工匠</h4>
+			 			<h1>19</h1>
+			 		</div>
+			 	</div>
+			 </div>
+		  </div>
+	  </div>
+      <div class="main-right about-right">
+		<div class="about-left">
+			<div class="title">
+				<h3>基础型得分统计</h3>
+			</div>
+			<div class="content-chart">
+				 <div id="container1" style="height: 100%"></div>
+			</div>
+			<div class="content-company">
+				<table class="table table-bordered">
+				  <thead>
+					<tr>
+					  <th>企业名称</th>
+					  <th>经营状态</th>
+					</tr>
+				  </thead>
+				  <tbody>
+					<tr>
+						<td>企业名称<i class="glyphicon glyphicon-picture"></i></td>
+						<td>经营状态</td>
+					</tr>
+					<tr>
+						<td>企业名称<i class="glyphicon glyphicon-picture"></i></td>
+						<td>经营状态</td>
+					</tr>
+					<tr>
+						<td>企业名称</td>
+						<td>经营状态</td>
+					</tr>
+					<tr>
+						<td>企业名称</td>
+						<td>经营状态</td>
+					</tr> 
+					<tr>
+						<td>企业名称</td>
+						<td>经营状态</td>
+					</tr> 
+					<tr>
+						<td>企业名称</td>
+						<td>经营状态</td>
+					</tr> 
+					<tr>
+						<td>企业名称</td>
+						<td>经营状态</td>
+					</tr> 
+					<tr>
+						<td>企业名称</td>
+						<td>经营状态</td>
+					</tr> 
+					<tr>
+						<td>企业名称</td>
+						<td>经营状态</td>
+					</tr> 
+					<tr>
+						<td>企业名称</td>
+						<td>经营状态</td>
+					</tr> 
+					<tr>
+						<td>企业名称</td>
+						<td>经营状态</td>
+					</tr>
+					 <tr>
+					 	<td>企业名称</td>
+					 	<td>经营状态</td>
+					 </tr> 
+					 <tr>
+					 	<td>企业名称</td>
+					 	<td>经营状态</td>
+					 </tr> 
+				  </tbody>
+				</table>
+			</div>
+		</div>
+	  </div>
+    </div>
+    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
+    <script src="js/jquery.min.js"></script>
+    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
+    <script src="js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+    <script src="js/large.js"></script>
+
+
+  </body>
+</html>