首页 发现 帮助
注册 登录
zkx
/
jp-employment-kfq-large
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

zxz

zxz 3 年之前
父节点
b6bef14d82
当前提交
62b8f7db36
共有 11 个文件被更改，包括 979 次插入 和 11 次删除
合并视图 显示文件统计
  1. 692 0
      getJob.html
  2. 二进制
      img/Union-1.png
  3. 二进制
      img/Union-2.png
  4. 二进制
      img/Union-3.png
  5. 二进制
      img/Union.png
  6. 二进制
      img/getJob.png
  7. 二进制
      img/logo2.png
  8. 二进制
      img/statistics1.png
  9. 二进制
      img/statistics2.png
  10. 276 0
      propagate.html
  11. 11 11
      recruit.html

+ 692 - 0
getJob.html
查看文件 

@@ -0,0 +1,692 @@
 
+<!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>
 
+    <div class="head">
 
+      <div class="head-left">
 
+        <div class="address">
 
+          <img src="img/logo2.png" alt="">
 
+          <span>荆州市开发区求职招聘大厅</span>
 
+        </div>
 
+       <!-- <div class="menu">
 
+          <div class="menu-item">
 
+            <span>园区概况</span>
 
+          </div>
 
+           <div class="menu-item active">
 
+            <span>智慧大屏</span>
 
+          </div>
 
+        </div> -->
 
+      </div>
 
+      <div class="head-mid">
 
+        <h2>荆州开发区就业在线数据可视化大屏</h2>
 
+        <h4>Jingzhou Development Zone Job-online DATA Visialization</h4>
 
+      </div>
 
+      <div class="head-right">
 
+        <div class="weather">
 
+			<div class="number">27°C</div>
 
+			<div class="text">
 
+				<p>多云转晴</p>
 
+				<p>北风四级</p>
 
+			</div>
 
+		</div>
 
+		<div class="time">
 
+			2021/09/07 星期二 15:15:15
 
+		</div>
 
+      </div>
 
+    </div>
 
+    <div class="main">
 
+      <div class="main-left">
 
+		<div class="main-left-table">
 
+			<div class="title">
 
+				<h3>平台介绍</h3><span></span>
 
+			</div>
 
+			<div class="content">
 
+				<div class="about">
 
+					<h3>荆州开发区就业在线</h3>
 
+					<p>
 
+						<img src="img/code.png" class="aboutCode" alt="">
 
+					招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会
 
+					文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招
 
+					会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介
 
+					招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字
 
+					简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招聘会文字简介招会文字简介招聘。
 
+					</p>
 
+				</div>
 
+			</div>
 
+		</div>
 
+		<div class="main-left-table">
 
+			<div class="title">
 
+				<h3>入驻企业数</h3><span>105</span>
 
+			</div>
 
+			<div class="content">
 
+				<table class="table table-bordered">
 
+				  <thead>
 
+					<tr>
 
+					  <th>招聘企业</th>
 
+					  <th>招聘岗位数</th>
 
+					  <th>招聘人数</th>
 
+					</tr>
 
+				  </thead>
 
+				  <tbody>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+				  </tbody>
 
+				</table>
 
+				<!-- <div class="tab-more">查看更多</div> -->
 
+			</div>
 
+		</div>
 
+	  </div>
 
+      <div class="main-mid">
 
+		  <div class="main-mid-top">
 
+			<div class="getJob-row">
 
+				<img src="img/getJob.png" alt="">
 
+				<div class="getJob-item">
 
+					<p>入驻企业数</p>
 
+					<h3>105</h3>
 
+					<div class="data-float">
 
+						<i class="glyphicon glyphicon-triangle-top"></i>
 
+						<span>5.70%</span>
 
+					</div>
 
+				</div>
 
+				<div class="getJob-item">
 
+					<p>招聘岗位数</p>
 
+					<h3>580</h3>
 
+					<div class="data-float">
 
+						<i class="glyphicon glyphicon-triangle-top"></i>
 
+						<span>5.70%</span>
 
+					</div>
 
+				</div>
 
+				<div class="getJob-item">
 
+					<p>招聘人数</p>
 
+					<h3>1280</h3>
 
+					<div class="data-float">
 
+						<i class="glyphicon glyphicon-triangle-top"></i>
 
+						<span>5.70%</span>
 
+					</div>
 
+				</div>
 
+			</div>	
+			<div class="statistics-row">
 
+				<div class="statistics-item">
 
+					<div class="bgJiao bgJiao-1"><img src="img/Union.png" alt=""></div>
 
+					<div class="bgJiao bgJiao-2"><img src="img/Union-1.png" alt=""></div>
 
+					<div class="bgJiao bgJiao-3"><img src="img/Union-3.png" alt=""></div>
 
+					<div class="bgJiao bgJiao-4"><img src="img/Union-2.png" alt=""></div>
 
+					<div class="title">在岗人才统计</div>
 
+					<div class="content">
 
+						<!-- 插入图表1 --> 
+					</div>
 
+				</div>
 
+				<div class="statistics-item">
 
+					<div class="bgJiao bgJiao-1"><img src="img/Union.png" alt=""></div>
 
+					<div class="bgJiao bgJiao-2"><img src="img/Union-1.png" alt=""></div>
 
+					<div class="bgJiao bgJiao-3"><img src="img/Union-3.png" alt=""></div>
 
+					<div class="bgJiao bgJiao-4"><img src="img/Union-2.png" alt=""></div>
 
+					<div class="title">用工缺口统计</div>
 
+					<div class="content">
 
+						<div class="statistics-list">
 
+							<img src="img/statistics1.png" alt="">
 
+							<div class="statistics-text statistics-text-1">
 
+								<h4>用工紧缺企业数</h4><span> | </span><h4>56</h4>	
+							</div>
 
+						</div>
 
+						<div class="statistics-list">
 
+							<img src="img/statistics2.png" alt="">
 
+							<div class="statistics-text statistics-text-2">
 
+								<h4>用工紧缺岗位数</h4><span> | </span><h4>156</h4>	
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		  </div>
 
+		  <div class="main-mid-bot">
 
+			  <div class="title">
 
+			  	<h3>开发区人才流动统计</h3>
 
+			  </div>
 
+			  <div class="content boot-chart">
 
+				<!-- 插入图表2 --> 
+			  </div>
 
+		  </div>
 
+	  </div>
 
+      <div class="main-right">
 
+		<div class="main-right-chart">
 
+			<div class="title">
 
+				<h3>招聘职位</h3>
 
+			</div>
 
+			<div class="content right-content-1">
 
+				<table class="table table-bordered">
 
+				  <thead>
 
+					<tr>
 
+					  <th>职位名称</th>
 
+					  <th>薪酬范围</th>
 
+					  <th>招聘人数</th>
 
+					</tr>
 
+				  </thead>
 
+				  <tbody>
 
+					<tr>
 
+					  <td>职位名称</td>
 
+					  <td>3000-5000</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+					<tr>
 
+					  <td>企业名称</td>
 
+					  <td>5</td>
 
+					  <td>20</td>
 
+					</tr>
 
+				  </tbody>
 
+				</table>
 
+			</div>
 
+		</div>
 
+		<div class="main-right-chart">
 
+			<div class="title">
 
+				<h3>各行业用工缺口占比</h3>
 
+			</div>
 
+			<div class="content right-content-2">
 
+				<!-- 插入图表3 -->
 
+			</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>
 
+
 
+	<style>
 
+		.statistics-list{
 
+			display: flex;
 
+			align-items: center;
 
+			margin-top: 20px;
 
+		}
 
+		.statistics-text{
 
+			display: flex;
 
+			align-items: center;
 
+		}
 
+		.statistics-text h4{
 
+			font-size: 24px;
 
+		}
 
+		.statistics-text span{
 
+			margin:0 15px; 
+		}
 
+		.statistics-text-1{
 
+			color:#75BDFF;
 
+		}
 
+		.statistics-text-2{
 
+			color:#42FFD6;
 
+		}
 
+		.statistics-list img{
 
+			margin-right: 10px;
 
+			width: 60px;
 
+			height: 60px;
 
+		}
 
+		.statistics-row{
 
+			display: flex;
 
+			justify-content: space-between;
 
+			padding: 40px;
 
+		}
 
+		.statistics-item{
 
+			width: 372px;
 
+			height: 240px;
 
+			background-color: #091629;
 
+			position: relative;
 
+			padding: 15px;
 
+		}
 
+		.statistics-item .title{
 
+			font-size: 20px;
 
+			text-align: left;
 
+		}
 
+		.statistics-item .content{
 
+			height: 180px;
 
+			padding-top: 10px;
 
+		}
 
+		.bgJiao{
 
+			position: absolute;
 
+			height: 12px;
 
+			width: 12px;
 
+		}
 
+		.bgJiao img{
 
+			height: 12px;
 
+			width: 12px;
 
+			float: left;
 
+		}
 
+		.bgJiao-1{left: 0;top:0;}
 
+		.bgJiao-2{right: 0;top:0;}
 
+		.bgJiao-3{left: 0;bottom:0;}
 
+		.bgJiao-4{right: 0;bottom:0;}
 
+		.boot-chart{
 
+			height: 250px;
 
+		}
 
+		.getJob-row{
 
+			display: flex;
 
+			align-items: center;
 
+			padding: 0 40px;
 
+			justify-content: space-between;
 
+		}
 
+		.getJob-row img{
 
+			width: 188px;
 
+			height: 159px;
 
+		}
 
+		.getJob-item{
 
+			width: 180px;
 
+			height: 120px;
 
+			background:rgba(0,66,166,0.5);
 
+			border: 1px solid #3385FF;
 
+			border-radius: 10px;
 
+			display: flex;
 
+			flex-direction: column;
 
+			align-items: flex-start;
 
+			padding: 10px;
 
+			position: relative;
 
+		}
 
+		.data-float{
 
+			position: absolute;
 
+			right: 10px;
 
+			bottom: 10px;
 
+			text-align: right;
 
+			color:#3FD0FF;
 
+		}
 
+		.data-float i{
 
+			font-size: 12px;
 
+			color:#3FD0FF;
 
+		}
 
+		.getJob-item p{
 
+			font-size: 16px;
 
+			color:#76DDFF;
 
+		}
 
+		.getJob-item h3{
 
+			font-size: 40px;
 
+			color:#FFf;
 
+		}
 
+		body{
 
+			background: url(img/wgbg.png) #0e1324 no-repeat;
 
+			background-size: 100%;
 
+			height: 100vh;
 
+		}
 
+		
+		.head{
 
+			background: url(img/topbg.png) no-repeat;
 
+			background-size: 100%;
 
+			height: 120px;
 
+			position: relative;
 
+		}
 
+		.head-left{
 
+			position: absolute;
 
+			display: flex;
 
+			left: 40px;
 
+			top:40px;
 
+		}
 
+		.about h3{
 
+			color:#fff;
 
+			font-family: 'ysbth';
 
+			font-size: 28px;
 
+			margin: 10px 0;
 
+		}
 
+		.about h4{
 
+			color:#85C4FF;
 
+			font-family: 'ysbth';
 
+			font-size: 20px;
 
+		}
 
+		.about p{
 
+			font-size: 16px;
 
+			line-height: 28px;
 
+			margin: 10px 0;
 
+		}
 
+		.about p img{
 
+			float: right;
 
+			margin-left:13px;
 
+			margin-top: 5px;
 
+		}
 
+		.head-right{
 
+			position: absolute;
 
+			display: flex;
 
+			align-items: center;
 
+			width: 472px;
 
+			justify-content: space-between;
 
+			right:30px;
 
+			top:30px;
 
+		}
 
+		.weather{
 
+			display: flex;
 
+			align-items: center;
 
+		}
 
+		.weather .number{
 
+			font-size: 36px;
 
+		}
 
+		.weather .text{
 
+			font-size: 14px;
 
+			margin-left: 20px;
 
+		}
 
+		.time{
 
+			font-size: 18px;
 
+		}
 
+		.address{
 
+			display: flex;
 
+			align-items: center;
 
+			font-size: 20px;
 
+		}
 
+		.address img{
 
+			height: 24px;
 
+			width: 24px;
 
+			margin-right: 10px;
 
+		}
 
+		.menu{
 
+			display: flex;
 
+			margin-left: 50px;
 
+		}
 
+		.menu .menu-item {
 
+			margin-left: 20px;
 
+		}
 
+		.menu .menu-item span{
 
+			font-family: 'ysbth';
 
+			font-size: 28px;
 
+			color:#8FCAFF;
 
+		}
 
+		.menu .menu-item.active{
 
+			background:url(img/menu.png) no-repeat bottom center;
 
+			background-size: 100%;
 
+			padding-bottom: 10px;
 
+		}
 
+		.menu .menu-item.active span{
 
+			color:#fff;
 
+		}
 
+		.head-mid{
 
+			position: absolute;
 
+			left: 50%;
 
+			margin-left: -360px;
 
+			text-align: center;
 
+			padding-top: 10px;
 
+		}
 
+		.head-mid h2{
 
+			font-size: 46px;
 
+			font-family: 'ysbth';
 
+		}
 
+		.head-mid h4{
 
+			font-size: 20px;
 
+			color:#85C4FF;
 
+			font-family: 'ysbth';
 
+		}
 
+		
+		.main{
 
+			padding: 0px 30px 0;
 
+			overflow: hidden;
 
+			position:relative;
 
+		}
 
+		.main-left{
 
+			width:472px;
 
+			float: left;
 
+		}
 
+		.main-mid{
 
+			position:absolute;
 
+			width:854px;
 
+			left:50%;
 
+			margin-left:-427px;
 
+			text-align:center;
 
+		}
 
+		.main-right{
 
+			float: right;
 
+			width:472px;
 
+		}
 
+		.main-left-data-chart{
 
+			width: 140px;
 
+			height: 100px;
 
+		}
 
+		.main-left-data{
 
+			display: flex;
 
+			align-items: center;
 
+			position: relative;
 
+			padding: 30px 0;
 
+		}
 
+		.main-left-data:before{
 
+			content: '';
 
+			height: 7px;
 
+			width: 472px;
 
+			background:url(img/line1.png) no-repeat;
 
+			position: absolute;
 
+			top:0;
 
+		}
 
+		.main-left-data:after{
 
+			content: '';
 
+			height: 7px;
 
+			width: 472px;
 
+			background:url(img/line2.png) no-repeat;
 
+			position: absolute;
 
+			bottom:0;
 
+		}
 
+		.main-left-data-item{
 
+			margin-right: 60px;
 
+			position: relative;
 
+		}
 
+		.main-left-data-item h4{
 
+			font-size: 16px;
 
+		}
 
+		.main-left-data-item h2{
 
+			color:#129BFF;
 
+			font-size: 36px;
 
+			margin: 15px 0;
 
+		}
 
+		.data-item-foot{
 
+			display: flex;
 
+			align-items: center;
 
+		}
 
+		.data-item-foot p{
 
+			font-size: 12px;
 
+			margin: 0;
 
+		}
 
+		.data-item-foot span{
 
+			font-size: 12px;
 
+			margin-left: 10px;
 
+		}
 
+		
+		.data-item-foot img{
 
+			width: 12px;
 
+			height: 12px;
 
+		}
 
+		
+		.main-left-table{
 
+		}
 
+		.main-left-table .title{
 
+			display: flex;
 
+			align-items: center;
 
+			height:64px;
 
+			width: 510px;
 
+			background:url(img/line4.png) no-repeat;
 
+		}
 
+		.main-left-table .title h3{
 
+			font-size: 24px;
 
+			color:#75BDFF;
 
+			font-family: 'ysbth';
 
+		}
 
+		.main-left-table .title span{
 
+			font-size: 24px;
 
+			color:#fff;
 
+			font-family: 'ysbth';
 
+			margin-left: 20px;
 
+		}
 
+		.main-left-table .table{
 
+			background-color: #040711;
 
+			margin-bottom: 0;
 
+		}
 
+		.tab-more{
 
+			width: 100%;
 
+			text-align: center;
 
+			background-color: #040711;
 
+			height: 37px;
 
+			line-height: 37px;
 
+			border: 1px solid #3f536a!important;
 
+		}
 
+		.table{
 
+			margin-top: 10px;
 
+		}
 
+		.table-bordered{
 
+			border: 1px solid #3f536a!important;
 
+		}
 
+		.main-left-table .table>thead>tr>th{
 
+			border-bottom: 1px solid #3f536a;
 
+			background-color: #041e3c;
 
+		}
 
+		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
 
+			border-bottom: 1px solid #3f536a!important;
 
+		}
 
+		.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{
 
+			border: 1px solid #3f536a!important;	
+		}
 
+		
+		.main-right-chart{
 
+			
+		}
 
+		.main-right-chart .title{
 
+			display: flex;
 
+			align-items: center;
 
+			height:64px;
 
+			width: 510px;
 
+			background:url(img/line4.png) no-repeat;
 
+		}
 
+		.main-right-chart .title h3{
 
+			font-size: 24px;
 
+			color:#75BDFF;
 
+			font-family: 'ysbth';
 
+		}
 
+		.main-right-chart .title span{
 
+			font-size: 24px;
 
+			color:#FFF;
 
+			font-family: 'ysbth';
 
+			margin-left: 20px;
 
+		}
 
+		.right-content-1{
 
+			height:340px;
 
+		}
 
+		.right-content-2{
 
+			height:340px;
 
+		}
 
+		.main-mid-top{
 
+			background:url(img/line3.png) no-repeat top center;
 
+			width: 854px;
 
+			height: 480px;
 
+			margin-top: 20px;
 
+		}
 
+		.main-mid-bot{
 
+			margin: 20px auto 0;
 
+			background:url(img/line3.png) no-repeat bottom center;
 
+			width: 800px;
 
+			height: 285px;
 
+		}
 
+		.main-mid-bot .title{
 
+			display: flex;
 
+			align-items: center;
 
+			justify-content: space-between;
 
+		}
 
+		.main-mid-bot .title h3{
 
+			font-size: 24px;
 
+			color:#75BDFF;
 
+			font-family: 'ysbth';
 
+		}
 
+		.main-mid-bot .tab-content{
 
+			
+		}
 
+		.main-mid-bot .nav-tabs{
 
+			border: 1px solid #1684FC;
 
+			border-radius: 5px;
 
+			overflow: hidden;
 
+			height: 32px;
 
+		}
 
+		.main-mid-bot .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
 
+			background-color:#1684FC ;
 
+			color:#fff;
 
+			border: 1px solid #1684FC;
 
+			border-radius: 0;
 
+			height: 30px;
 
+		}
 
+		.main-mid-bot .nav-tabs>li>a{
 
+			color:#fff;
 
+			line-height: 30px;
 
+			border-right: 1px solid #1684FC;
 
+			border-radius: 0;
 
+			margin: 0;
 
+			width: 100px;
 
+			padding: 0;
 
+		}
 
+		.main-mid-bot .nav-tabs>li:last-child a{
 
+			border-right:none;
 
+		}
 
+		.main-mid-bot .nav-tabs>li>a:hover{
 
+			border: 1px solid #1684FC;
 
+		}
 
+		.main-mid-bot .content .tab-content>.tab-pane{
 
+			height: 220px;
 
+		}
 
+		.nav>li>a:focus,.nav>li>a:hover{
 
+			background-color:#1684FC;
 
+			border-radius: 0;
 
+		}
 
+	</style>
 
+  </body>
 
+</html>

二进制
img/Union-1.png
查看文件


二进制
img/Union-2.png
查看文件


二进制
img/Union-3.png
查看文件


二进制
img/Union.png
查看文件


二进制
img/getJob.png
查看文件


二进制
img/logo2.png
查看文件


二进制
img/statistics1.png
查看文件


二进制
img/statistics2.png
查看文件


+ 276 - 0
propagate.html
查看文件 

@@ -0,0 +1,276 @@
 
+<!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>
 
+		<div class="head">
 
+			<div class="head-left">
 
+				<div class="address">
 
+					<img src="img/logo2.png" alt="">
 
+					<span>荆州市开发区求职招聘大厅</span>
 
+				</div>
 
+				<!-- <div class="menu">
 
+          <div class="menu-item">
 
+            <span>园区概况</span>
 
+          </div>
 
+           <div class="menu-item active">
 
+            <span>智慧大屏</span>
 
+          </div>
 
+        </div> -->
 
+			</div>
 
+			<div class="head-mid">
 
+				<h2>荆州开发区就业在线数据可视化大屏</h2>
 
+				<h4>Jingzhou Development Zone Job-online DATA Visialization</h4>
 
+			</div>
 
+			<div class="head-right">
 
+				<div class="weather">
 
+					<div class="number">27°C</div>
 
+					<div class="text">
 
+						<p>多云转晴</p>
 
+						<p>北风四级</p>
 
+					</div>
 
+				</div>
 
+				<div class="time">
 
+					2021/09/07 星期二 15:15:15
 
+				</div>
 
+			</div>
 
+		</div>
 
+		<div class="main">
 
+			<div class="main-left">
 
+				<div class="propagateVideo"></div>
 
+				<div class="propagateInfo">
 
+					
+				</div>
 
+			</div>
 
+			<div class="main-right">
 
+				<div class="statistics-item">
 
+					<div class="bgJiao bgJiao-1"><img src="img/Union.png" alt=""></div>
 
+					<div class="bgJiao bgJiao-2"><img src="img/Union-1.png" alt=""></div>
 
+					<div class="bgJiao bgJiao-3"><img src="img/Union-3.png" alt=""></div>
 
+					<div class="bgJiao bgJiao-4"><img src="img/Union-2.png" alt=""></div>
 
+					<div class="title"></div>
 
+					<div class="content">
 
+						<div class="statistics-list">
 
+							<p>入驻企业数</p>
 
+							<h3>105</h3>
 
+						</div>
 
+						<div class="statistics-list">
 
+							<p>入驻企业数</p>
 
+							<h3>105</h3>
 
+						</div>
 
+						<div class="statistics-list">
 
+							<p>入驻企业数</p>
 
+							<h3>105</h3>
 
+						</div>
 
+						<div class="statistics-list">
 
+							<p>入驻企业数</p>
 
+							<h3>105</h3>
 
+						</div>
 
+						<div class="statistics-list">
 
+							<p>入驻企业数</p>
 
+							<h3>105</h3>
 
+						</div>
 
+						<div class="statistics-list">
 
+							<p>入驻企业数</p>
 
+							<h3>105</h3>
 
+						</div>
 
+					</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>
 
+
 
+		<style>
 
+			.statistics-list {
 
+				width: 160px;
 
+				height: 100px;
 
+				background: rgba(0, 66, 166, 0.5);
 
+				border: 1px solid #3385FF;
 
+				border-radius: 10px;
 
+				display: flex;
 
+				flex-direction: column;
 
+				align-items: flex-start;
 
+				padding: 10px;
 
+				position: relative;
 
+				margin-bottom: 20px;
 
+			}
 
+			.statistics-list p {
 
+				font-size: 16px;
 
+				color: #76DDFF;
 
+			}
 
+			
+			.statistics-list h3 {
 
+				font-size: 40px;
 
+				color: #FFf;
 
+			}
 
+		
+			.statistics-item {
 
+				width: 560px;
 
+				height: 240px;
 
+				background:rgba(33,67,119,0.3);
 
+				position: relative;
 
+				padding: 15px;
 
+			}
 
+
 
+			.statistics-item .title {
 
+				font-size: 20px;
 
+				text-align: left;
 
+			}
 
+
 
+			.statistics-item .content {
 
+				display: flex;
 
+				justify-content: space-between;
 
+				flex-wrap: wrap;
 
+			}
 
+
 
+			.bgJiao {
 
+				position: absolute;
 
+				height: 12px;
 
+				width: 12px;
 
+			}
 
+
 
+			.bgJiao img {
 
+				height: 12px;
 
+				width: 12px;
 
+				float: left;
 
+			}
 
+
 
+			.bgJiao-1 {
 
+				left: 0;
 
+				top: 0;
 
+			}
 
+
 
+			.bgJiao-2 {
 
+				right: 0;
 
+				top: 0;
 
+			}
 
+
 
+			.bgJiao-3 {
 
+				left: 0;
 
+				bottom: 0;
 
+			}
 
+
 
+			.bgJiao-4 {
 
+				right: 0;
 
+				bottom: 0;
 
+			}
 
+
 
+
 
+
 
+			body {
 
+				background: url(img/wgbg.png) #0e1324 no-repeat;
 
+				background-size: 100%;
 
+				height: 100vh;
 
+			}
 
+
 
+			.head {
 
+				background: url(img/topbg.png) no-repeat;
 
+				background-size: 100%;
 
+				height: 120px;
 
+				position: relative;
 
+			}
 
+
 
+			.head-left {
 
+				position: absolute;
 
+				display: flex;
 
+				left: 40px;
 
+				top: 40px;
 
+			}
 
+
 
+			.head-right {
 
+				position: absolute;
 
+				display: flex;
 
+				align-items: center;
 
+				width: 472px;
 
+				justify-content: space-between;
 
+				right: 30px;
 
+				top: 30px;
 
+			}
 
+
 
+			.weather {
 
+				display: flex;
 
+				align-items: center;
 
+			}
 
+
 
+			.weather .number {
 
+				font-size: 36px;
 
+			}
 
+
 
+			.weather .text {
 
+				font-size: 14px;
 
+				margin-left: 20px;
 
+			}
 
+
 
+			.time {
 
+				font-size: 18px;
 
+			}
 
+
 
+			.address {
 
+				display: flex;
 
+				align-items: center;
 
+				font-size: 20px;
 
+			}
 
+
 
+			.address img {
 
+				height: 24px;
 
+				width: 24px;
 
+				margin-right: 10px;
 
+			}
 
+
 
+			.head-mid {
 
+				position: absolute;
 
+				left: 50%;
 
+				margin-left: -360px;
 
+				text-align: center;
 
+				padding-top: 10px;
 
+			}
 
+
 
+			.head-mid h2 {
 
+				font-size: 46px;
 
+				font-family: 'ysbth';
 
+			}
 
+
 
+			.head-mid h4 {
 
+				font-size: 20px;
 
+				color: #85C4FF;
 
+				font-family: 'ysbth';
 
+			}
 
+
 
+			.main {
 
+				padding: 0px 30px 0;
 
+				overflow: hidden;
 
+				position: relative;
 
+			}
 
+
 
+			.main-left {
 
+				width: 1200px;
 
+				height: 800px;
 
+				float: left;
 
+			}
 
+
 
+			.main-right {
 
+				float: right;
 
+				width: 560px;
 
+				height: 800px;
 
+			}
 
+		</style>
 
+	</body>
 
+</html>

+ 11 - 11
recruit.html
查看文件 

@@ -20,7 +20,7 @@
 
     <div class="head">
 
     <div class="head">
 
       <div class="head-left">
 
       <div class="head-left">
 
         <div class="address">
 
         <div class="address">
 
-          <i class="glyphicon glyphicon-map-marker"></i>
 
+          <img src="img/logo2.png" alt="">
 
           <span>荆州市开发区求职招聘大厅</span>
 
           <span>荆州市开发区求职招聘大厅</span>
 
         </div>
 
         </div>
 
        <!-- <div class="menu">
 
        <!-- <div class="menu">
 
@@ -187,7 +187,7 @@
 
 			display: flex;
 
 			display: flex;
 
 			align-items: center;
 
 			align-items: center;
 
 			justify-content: space-between;
 
 			justify-content: space-between;
 
-			padding: 40px;
 
+			padding: 40px 40px 20px;
 
 		}
 
 		}
 
 		.dataInfo-item{
 
 		.dataInfo-item{
 
 			display: flex;
 
 			display: flex;
 
@@ -212,7 +212,7 @@
 
 		.head{
 
 		.head{
 
 			background: url(img/topbg.png) no-repeat;
 
 			background: url(img/topbg.png) no-repeat;
 
 			background-size: 100%;
 
 			background-size: 100%;
 
-			height: 130px;
 
+			height: 120px;
 
 			position: relative;
 
 			position: relative;
 
 		}
 
 		}
 
 		.head-left{
 
 		.head-left{
 
@@ -242,8 +242,8 @@
 
 			align-items: center;
 
 			align-items: center;
 
 			width: 472px;
 
 			width: 472px;
 
 			justify-content: space-between;
 
 			justify-content: space-between;
 
-			right: 40px;
 
-			top:40px;
 
+			right:30px;
 
+			top:30px;
 
 		}
 
 		}
 
 		.weather{
 
 		.weather{
 
 			display: flex;
 
 			display: flex;
 
@@ -264,8 +264,9 @@
 
 			align-items: center;
 
 			align-items: center;
 
 			font-size: 20px;
 
 			font-size: 20px;
 
 		}
 
 		}
 
-		i{
 
-			color:#129bff;
 
+		.address img{
 
+			height: 24px;
 
+			width: 24px;
 
 			margin-right: 10px;
 
 			margin-right: 10px;
 
 		}
 
 		}
 
 		.menu{
 
 		.menu{
 
@@ -306,7 +307,7 @@
 
 		}
 
 		}
 
 		
 		
 		.main{
 
 		.main{
 
-			padding: 0px 50px 0;
 
+			padding: 0px 30px 0;
 
 			overflow: hidden;
 
 			overflow: hidden;
 
 			position:relative;
 
 			position:relative;
 
 		}
 
 		}
 
@@ -382,7 +383,6 @@
 
 		}
 
 		}
 
 		
 		
 		.main-left-table{
 
 		.main-left-table{
 
-			margin-top: 20px;
 
 		}
 
 		}
 
 		.main-left-table .title{
 
 		.main-left-table .title{
 
 			display: flex;
 
 			display: flex;
 
@@ -456,7 +456,7 @@
 
 			height:340px;
 
 			height:340px;
 
 		}
 
 		}
 
 		.right-content-2{
 
 		.right-content-2{
 
-			height:360px;
 
+			height:340px;
 
 		}
 
 		}
 
 		.main-mid-top{
 
 		.main-mid-top{
 
 			background:url(img/line3.png) no-repeat top center;
 
 			background:url(img/line3.png) no-repeat top center;
 
@@ -465,7 +465,7 @@
 
 			margin-top: 20px;
 
 			margin-top: 20px;
 
 		}
 
 		}
 
 		.main-mid-bot{
 
 		.main-mid-bot{
 
-			margin: 40px auto 0;
 
+			margin: 20px auto 0;
 
 			background:url(img/line3.png) no-repeat bottom center;
 
 			background:url(img/line3.png) no-repeat bottom center;
 
 			width: 800px;
 
 			width: 800px;
 
 			height: 285px;
 
 			height: 285px;