更新

public/static/css/lib.css

@@ -0,0 +1,111 @@
+/* CSS Document */
+/**
+* +----------------------------------------------------------
+* 主样式
+* +----------------------------------------------------------
+*/
+*{
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	font-family: 微软雅黑;
+	letter-spacing: 1px;
+}
+html,body{
+	width: 100%; height: 100%;
+	overflow: hidden;
+	font-size: 14px;
+}
+
+li{
+	list-style: none;
+}
+a{
+	display: block;
+}
+a:hover{
+	color: #df621e;
+	-webkit-transition: all 0.2s ease-in-out;
+}
+
+iframe{
+	border: 0; width: 100%; height: 100%;
+}
+.pull-left{ float: left; }
+.pull-right{ float: right; }
+
+.show{ display: block; }
+.hide{ display: none; }
+
+.i-bold{
+	font-weight: bolder;
+}
+/*字体颜色*/
+.i-green{ color:#00c851 !important;}
+.i-yellow{ color:#e7592b !important;}
+.i-red{ color:#d90000 !important; font-weight: border;}
+.i-blue{ color:#2292ef !important;}
+.i-lightblue{ color:#00a5e0 !important;}
+.i-gray{ color:#6c6c6e !important;}
+
+/*背景颜色*/
+.bg-green{ background-color:#00c851 !important;}
+.bg-yellow{ background-color:#e7592b !important;}
+.bg-red{ background-color:#d90000 !important;}
+.bg-blue{ background-color:#2292ef !important;}
+.bg-white{ background-color: white !important;}
+.bg-gray{ background-color: #6c6c6e !important;}
+
+/*渐变色*/
+.shade-white{
+	display: block;
+	background-image:url(../images/shade/white.png);
+	background-repeat:repeat-x;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+.shade-menu{
+	display: block;
+	background-image:url(../images/shade/menu.png);
+	background-repeat:repeat-x;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.shadow{
+	box-shadow:0px 4px 8px rgba(0,0,0,0.3);
+}
+.shadow1{
+	background: url(../images/shadow.png);
+	width: 220px; height: 15px;
+	background-size: 100%;
+	background-position: 0 0;
+	position: absolute; bottom: -15px; left: 0;
+}
+.shadow2{
+	background: url(../images/shadow.png);
+	width: 100%; height: 15px;
+	background-size: 100%;
+	background-position: 0 -15px;
+	position: absolute; bottom: -15px; left: 0;
+}
+
+/* 数字提示 */
+.num{
+  width: 15px; height: 15px; text-align: center; line-height: 15px;
+  border-radius: 99px;
+  color: white; font-weight: bolder;
+}
+.num-1{
+	margin-left: 5px;
+  padding: 5px 10px; text-align: center; line-height: 15px;
+  border-radius: 99px;
+  color: white; font-weight: bolder;
+}
+
+/* layui修改 */
+.layui-input-block{
+	margin-left: 0;
+}

public/static/css/mubu2017.css

@@ -0,0 +1,97 @@
+html,body,div,p,span,h1,h2,h3,h4,p,a, em,font,img,strong,dl,dt,dd,ul,li{margin:0; padding:0; font-family:"Microsoft YaHei";}
+html,body{height:100%; font-size:12px;}    
+ul,ol{list-style:none;}
+ul li{list-style-type:none;}
+img{border:0;}    
+em,i{font-style:normal;}
+.f_r,.fr{float:right;}
+.f_l,.fl{float:left;}
+canvas { cursor:crosshair; display:block;}
+.mubu{ background:url(../images/mubu_1_s.jpg) no-repeat top center; min-width:960px;height:99.9%;}
+.mubu_main{ width:960px; margin:0 auto; text-align:center; padding-top:300px; }
+.mubu_main h1{ font-size:50px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden;}
+.mubu_main h2{ font-size:40px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden; margin-bottom:30px;}
+.mubu_main p{ font-size:24px; line-height:1.5em; height:1.5em; overflow:hidden; color:#fff; text-shadow:2px 2px 5px #000;}
+.mubu_main p.into{ margin-top:50px; height:120px;}
+.mubu_top{ background:url(../images/mubu_2_s.png) no-repeat top center; position:fixed; top:0; left:0; height:150px; width:100%;}
+.mubu_left{ background:url(../images/mubu_left_s.jpg) no-repeat; width:720px; height:100%; position:fixed; top:0; left:-720px; -webkit-animation:mubu_dh_1 5s linear; animation:mubu_dh_1 8s linear forwards; display:none\9;}
+.mubu_right{ background:url(../images/mubu_right_s.jpg) no-repeat; width:720px; height:100%; position:fixed; top:0; right:-720px; -webkit-animation:mubu_dh_2 5s linear; animation:mubu_dh_2 8s linear forwards; display:none\9;}
+@-webkit-keyframes mubu_dh_1 {
+	0%{left:0;}
+	75% { left:-540px; opacity:100;}
+	100% { left:-720px; opacity:0; display:none;}
+}
+@keyframes mubu_dh_1 {
+	0% { left:0;}
+	75% { left:-540px; opacity:100;}
+	100% { left:-720px; opacity:0; display:none;}
+}
+@-webkit-keyframes mubu_dh_2 {
+    0% { right:0;}
+	75% { right:-540px; opacity:100;}
+	100% { right:-720px; opacity:0; display:none;}
+}
+@keyframes mubu_dh_2 {
+    0% { right:0;}
+	75% { right:-540px; opacity:100;}
+	100% { right:-720px; opacity:0; display:none;}
+}
+.mubu .yanhua2 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_1.png) no-repeat 0 0; position:absolute; top:300px; left:70%; animation: fireworksfn 5s linear infinite;-webkit-animation: fireworksfn 3s linear infinite;-moz-animation: fireworksfn 3s linear infinite;-ms-animation: fireworksfn 3s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;}
+.mubu .yanhua3 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_2.png) no-repeat 0 0; position:absolute; top:250px; left:25%; animation: fireworksfn 4s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 4s linear infinite;-ms-animation: fireworksfn 4s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;}
+.mubu .yanhua4 {width: 70px;height: 70px; display:block; overflow: hidden;background: url(../images/nyear-wwwa5.png) no-repeat -6px -1px; position:absolute; top:250px; left:50%; animation: fireworksfn 3s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 5s linear infinite;-ms-animation: fireworksfn 5s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;}
+@media (min-width:1440px){ 
+.mubu{ background:url(../images/mubu_1.jpg) no-repeat top center; height:99.9%;}
+.mubu_main{ width:1150px; margin:0 auto; text-align:center; padding-top:300px; }
+.mubu_main h1{ font-size:50px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden;}
+.mubu_main h2{ font-size:40px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden; margin-bottom:30px;}
+.mubu_main p{ font-size:24px; line-height:1.5em; height:1.5em; overflow:hidden; color:#fff; text-shadow:2px 2px 5px #000;}
+.mubu_main p.into{ margin-top:50px; height:120px;}
+.mubu_top{ background:url(../images/mubu_2.png) no-repeat top center; position:fixed; top:0; left:0; height:200px; width:100%;}
+.mubu_left{ background:url(../images/mubu_left.jpg) no-repeat; width:960px; height:100%; position:fixed; top:0;left:-960px; -webkit-animation:mubu_dh_1 5s ease-in; animation:mubu_dh_1 8s linear forwards; display:none\9;}
+.mubu_right{ background:url(../images/mubu_right.jpg) no-repeat; width:960px; height:100%; position:fixed; top:0; right:-960px; -webkit-animation:mubu_dh_2 5s ease-in; animation:mubu_dh_2 8s linear forwards; display:none\9;}
+@-webkit-keyframes mubu_dh_1 {
+    0% { left:0;}
+	75% { left:-720px; opacity:100;}
+	100% { left:-960px; opacity:0; display:none;}
+}
+@keyframes mubu_dh_1 {
+    0% { left:0;}
+	75% { left:-720px; opacity:100;}
+	100% { left:-960px; opacity:0; display:none;}
+}
+@-webkit-keyframes mubu_dh_2 {
+    0% { right:0;}
+	75% { right:-720px; opacity:100;}
+	100% { right:-960px; opacity:0; display:none;}
+}
+@keyframes mubu_dh_2 {
+    0% { right:0;}
+	75% { right:-720px; opacity:100;}
+	100% { right:-960px; opacity:0; display:none;}
+}
+.mubu .yanhua2 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_1.png) no-repeat 0 0; position:absolute; top:450px; left:70%; animation: fireworksfn 5s linear infinite;-webkit-animation: fireworksfn 3s linear infinite;-moz-animation: fireworksfn 3s linear infinite;-ms-animation: fireworksfn 3s linear infinite;-o-animation: fireworksfn 1.5s infinite;}
+.mubu .yanhua3 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_2.png) no-repeat 0 0; position:absolute; top:350px; left:30%; animation: fireworksfn 4s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 4s linear infinite;-ms-animation: fireworksfn 4s linear infinite;-o-animation: fireworksfn 1.5s infinite;}
+.mubu .yanhua4 {width: 70px;height: 70px; display:block; overflow: hidden;background: url(../images/nyear-wwwa5.png) no-repeat -6px -1px; position:absolute; top:400px; left:50%; animation: fireworksfn 3s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 5s linear infinite;-ms-animation: fireworksfn 5s linear infinite;-o-animation: fireworksfn 1.5s infinite;}
+}
+
+/*ÑÌ»¨*/
+@keyframes fireworksfn{
+	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
+	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
+	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
+	}
+@-moz-keyframes fireworksfn{
+	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
+	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
+	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
+	}
+@-webkit-keyframes fireworksfn{
+	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
+	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
+	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
+	}
+@-o-keyframes fireworksfn{
+	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
+	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
+	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
+	}

public/static/css/style1.css

@@ -0,0 +1,233 @@
+:root {
+	font-size: calc(16px + (20 - 16) * (100vw - 320px)/(980 - 320));
+	--rotateTimes: 0;
+}
+
+nav,
+ul,
+li {
+	transform-style: preserve-3d;
+}
+
+nav,
+li {
+	position: absolute;
+	top: 30%;
+	left: 50%;
+}
+
+nav,
+li a {
+	border-radius: 50%;
+}
+
+nav {
+	width: 100em;
+	height: 70em;
+	transform: translate(-50%, -50%) rotateX(75deg);
+	position: relative;
+}
+
+ul,
+li a {
+	width: 100%;
+	height: 100%;
+}
+
+ul {
+	list-style: none;
+}
+
+li {
+	animation: idle 4s ease-in-out infinite;
+	text-align: center;
+	width: 15em;
+	height: 15em;
+	transform: translate(-50%, -50%);
+}
+
+li a {
+	box-shadow: 0 0 0 0.1em #0cf inset, 0 0 1em #0cf inset;
+	color: currentColor;
+	display: inline-block;
+	text-decoration: none;
+	transition: transform 0.4s linear, box-shadow 0.15s linear, margin 0.1s linear, width 0.1s linear, height 0.1s linear;
+}
+
+li a span {
+	transition: color 0.15s linear;
+}
+
+li a:before {
+	background-color: #fff;
+	border-radius: 50%;
+	content: "";
+	display: block;
+	opacity: 0.5;
+	position: absolute;
+	top: 2.75em;
+	left: 3.75em;
+	width: 1em;
+	height: 0.5em;
+	transform: rotate(-45deg);
+}
+
+li a:focus,
+li a.current {
+	box-shadow: 0 0 0 0.1em #ff0 inset, 0 0 1em #ff0 inset;
+	outline: 0;
+}
+
+li a:focus span,
+li a.current span {
+	color: #ff0;
+}
+
+li a:hover {
+	margin: -5% 0 0 -5%;
+	width: 110%;
+	height: 110%;
+	box-shadow: 0 0 0 0.1em #ff0 inset, 0 0 1em #ff0 inset;
+}
+
+li a:hover svg {
+	width: 3em;
+	height: 3em;
+}
+
+@media (prefers-reduced-motion) {
+	li {
+		animation: none;
+	}
+}
+
+svg {
+	display: block;
+	margin: 1.25em auto 1.5em auto;
+	transition: width 0.1s linear, height 0.1s linear;
+	width: 2.5em;
+	height: 2.5em;
+}
+
+/* Position bubbles */
+li:nth-of-type(1) {
+	animation-delay: 0s;
+}
+
+li:nth-of-type(1) a {
+	transform: rotate(calc(0deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(0deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
+}
+
+li:nth-of-type(2) {
+	animation-delay: -0.5s;
+}
+
+li:nth-of-type(2) a {
+	transform: rotate(calc(-51.4285714286deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(51.4285714286deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
+}
+
+li:nth-of-type(3) {
+	animation-delay: -1s;
+}
+
+li:nth-of-type(3) a {
+	transform: rotate(calc(-102.8571428571deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(102.8571428571deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
+}
+
+li:nth-of-type(4) {
+	animation-delay: -1.5s;
+}
+
+li:nth-of-type(4) a {
+	transform: rotate(calc(-154.2857142857deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(154.2857142857deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
+}
+
+li:nth-of-type(5) {
+	animation-delay: -2s;
+}
+
+li:nth-of-type(5) a {
+	transform: rotate(calc(-205.7142857143deg + var(--rotateTimes) * 51.4285714286deg)) translateY(9em) rotate(calc(205.7142857143deg - var(--rotateTimes) * 51.4285714286deg)) rotateX(-75deg);
+}
+
+/* Animations */
+.rise {
+	animation: rise 1s ease-out;
+}
+
+.rise a {
+	animation: fadeOut 1s ease-out;
+}
+
+.rise a.pop {
+	animation: pop 1s linear;
+}
+
+.rise a.pop svg,
+.rise a.pop span {
+	visibility: hidden;
+}
+
+@keyframes rise {
+	from {
+		transform: translateZ(0);
+	}
+
+	15% {
+		transform: translateZ(-1em);
+	}
+
+	to {
+		transform: translateZ(35em);
+	}
+}
+
+@keyframes fadeOut {
+
+	from,
+	15% {
+		opacity: 1;
+	}
+
+	50%,
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes pop {
+	from {
+		margin: -5% 0 0 -5%;
+		width: 110%;
+		height: 110%;
+		opacity: 1;
+	}
+
+	10%,
+	to {
+		margin: -20% 0 0 -20%;
+		width: 140%;
+		height: 140%;
+		opacity: 0;
+	}
+}
+
+@keyframes idle {
+
+	from,
+	to {
+		transform: translate(-50%, -48%);
+	}
+
+	25% {
+		transform: translate(-52%, -50%);
+	}
+
+	50% {
+		transform: translate(-50%, -52%);
+	}
+
+	75% {
+		transform: translate(-48%, -50%);
+	}
+}

public/static/home.html

@@ -0,0 +1,248 @@
+<html>
+	<head>
+		<title>欢迎来到吉林省计算中心科技服务平台</title>
+		<meta charset="utf-8" />
+		<meta name="renderer" content="webkit">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta content="width=device-width, initial-scale=1" name="viewport" />
+		<meta content="" name="description" />
+		<meta content="" name="author" />
+		<link rel="stylesheet" type="text/css" href="css/style.css" />
+		<link rel="stylesheet" type="text/css" href="css/style1.css" />
+		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
+	</head>
+	<body style="margin: 0 !important;">
+		<div style="width: 100vw;min-height:1000px; background-color:aliceblue; background-image: url(images/bg2.png); background-size: cover">
+			<div class="home">
+				<div class="w_0100">
+					<div class="w_1200">
+						<div class="homeTop">
+							<div class="homeTopInfo">
+								<span>欢迎来到吉林省计算中心科技服务平台</span>
+								<!-- <button type="button">登录</button>
+								<button type="button">注册</button> -->
+							</div>
+							<div class="homeTopLogo">
+								<img src="images/logo.png">
+								<span>吉林省计算中心科技服务平台</span>
+							</div>
+						</div>
+						<div class="homeMain">
+							<nav>
+								<ul>
+									<li class="live">
+										<a href="/platlive/live/hall/index" target="_blank" data-item="0">
+											<i class="iconfont icon-zhibo"></i>
+											<p>直播大厅</p>
+										</a>
+									</li>
+									<li class="super">
+										<a href="/live/market" target="_blank" data-item="1">
+											<i class="iconfont icon-gouwu-2"></i>
+											<p>科技超市</p>
+										</a>
+									</li>
+									<li class="service">
+										<a href="/live/service" target="_blank" data-item="2">
+											<i class="iconfont icon-fuwu"></i>
+											<p>创新服务</p>
+										</a>
+									</li>
+									<li class="dynamic">
+										<a href="/live/dynamic" target="_blank" data-item="3">
+											<i class="iconfont icon-icon_A"></i>
+											<p>动态监测</p>
+										</a>
+									</li>
+									<li class="technocal">
+										<a href="/live/technical" target="_blank" data-item="4">
+											<i class="iconfont icon-peixun"></i>
+											<p>技术培训</p>
+										</a>
+									</li>
+								</ul>
+							</nav>
+						</div>
+						<div class="homeDown">
+              <p>版权所有：吉林省技术算中心</p>
+              <p>
+                <span>技术支持：长春福瑞科技有限公司</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <span>邮编：130000</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <span>传真：239823982</span>
+              </p>
+              <p>
+                <span>地址：吉林省长春市朝阳区前进大街1244号</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <span>电话：0134-1234567</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <span>邮箱：123456@163.com</span>
+              </p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div id="particles-js" style="position: fixed; height: 100%; width: 100%;top:0px">
+			<canvas class="particles-js-canvas-el"></canvas>
+		</div>
+		<script src="./js/particles.min.js" type="text/javascript" charset="utf-8"></script>
+		<script>
+			/* ---- particles.js config ---- */
+
+			particlesJS("particles-js", {
+				"particles": {
+					"number": {
+						"value": 80,
+						"density": {
+							"enable": true,
+							"value_area": 1200
+						}
+					},
+					"color": {
+						"value": "#ffffff"
+					},
+					"shape": {
+						"type": "circle",
+						"stroke": {
+							"width": 0,
+							"color": "#000000"
+						},
+						"polygon": {
+							"nb_sides": 5
+						},
+						"image": {
+							"src": "img/github.svg",
+							"width": 100,
+							"height": 100
+						}
+					},
+					"opacity": {
+						"value": 0.5,
+						"random": false,
+						"anim": {
+							"enable": false,
+							"speed": 1,
+							"opacity_min": 0.1,
+							"sync": false
+						}
+					},
+					"size": {
+						"value": 3,
+						"random": true,
+						"anim": {
+							"enable": false,
+							"speed": 40,
+							"size_min": 0.1,
+							"sync": false
+						}
+					},
+					"line_linked": {
+						"enable": true,
+						"distance": 150,
+						"color": "#ffffff",
+						"opacity": 0.4,
+						"width": 1
+					},
+					"move": {
+						"enable": true,
+						"speed": 3,
+						"direction": "none",
+						"random": false,
+						"straight": false,
+						"out_mode": "out",
+						"bounce": false,
+						"attract": {
+							"enable": false,
+							"rotateX": 600,
+							"rotateY": 1200
+						}
+					}
+				},
+				"interactivity": {
+					"detect_on": "canvas",
+					"events": {
+						"onhover": {
+							"enable": false,
+							"mode": "grab"
+						},
+						"onclick": {
+							"enable": false,
+							"mode": "push"
+						},
+						"resize": true
+					},
+					"modes": {
+						"grab": {
+							"distance": 140,
+							"line_linked": {
+								"opacity": 1
+							}
+						},
+						"bubble": {
+							"distance": 400,
+							"size": 40,
+							"duration": 2,
+							"opacity": 8,
+							"speed": 3
+						},
+						"repulse": {
+							"distance": 200,
+							"duration": 0.4
+						},
+						"push": {
+							"particles_nb": 4
+						},
+						"remove": {
+							"particles_nb": 2
+						}
+					}
+				},
+				"retina_detect": true
+			});
+		</script>
+		<script>
+			document.addEventListener("DOMContentLoaded", function() {
+				let rise = function(trigEl) {
+					trigEl.blur();
+
+					let ul = document.querySelector("ul");
+
+					ul.classList.add("rise");
+					trigEl.classList.add("pop");
+
+					setTimeout(function() {
+						trigEl.focus();
+
+						ul.classList.remove("rise");
+						trigEl.classList.remove("pop");
+					}, 1000);
+				};
+
+				this.querySelectorAll("li a").forEach(function(el) {
+					let rt = document.querySelector(":root"),
+						di = +el.getAttribute("data-item");
+
+					el.addEventListener("blur", function() {
+						//var getRt = +window.getComputedStyle(el).getPropertyValue('--rotateTimes');
+						//console.log(getRt);
+						//this.classList.add("current");
+					});
+					el.addEventListener("focus", function() {
+						rt.style.setProperty("--rotateTimes", di);
+						//this.classList.remove("current");
+					});
+					el.addEventListener("dblclick", function() {
+						rise(this);
+					});
+					el.addEventListener("keyup", function(e) {
+						if (e.keyCode === 13) {
+							rise(this);
+						}
+					});
+				});
+			});
+		</script>
+	</body>
+</html>

public/static/js/tabs.js

@@ -0,0 +1,32 @@
+window.onload = function() {
+    var oDiv = document.getElementById("tab");
+    var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
+    var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
+    var timer = null;
+    for (var i = 0; i < oLi.length; i++) {
+        oLi[i].index = i;
+        oLi[i].onmouseover = function() {
+            show(this.index);
+        }
+    }
+    function show(a) {
+        index = a;
+        var alpha = 0;
+        for (var j = 0; j < oLi.length; j++) {
+            oLi[j].className = "";
+            aCon[j].className = "";
+            aCon[j].style.opacity = 0;
+            aCon[j].style.filter = "alpha(opacity=0);";
+        }
+        oLi[index].className = "cur";
+        clearInterval(timer);
+        timer = setInterval(function() {
+            alpha += 2;
+            alpha > 100 && (alpha = 100);
+            aCon[index].style.opacity = alpha / 100;
+            aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
+            alpha == 100 && clearInterval(timer);
+        },
+        5)
+    }
+}

public/static/liveIndex.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- saved from url=(0051)http://free.liaoningdoupo.com/static/liveIndex.html -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+  <title>吉林省计算中心</title>
+  <link rel="stylesheet" type="text/css" href="css/style.css">
+  <link rel="stylesheet" type="text/css" href="css/mubu2017.css">
+  <link rel="stylesheet" type="text/css" href="css/iconfont.css">
+  <script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
+</head>
+<styLe>
+  div[data-v-de97bcec] a {
+    color: #ff0;
+    font-size: 16px;
+    position: relative;
+    top: 97px;
+    left: -105px;
+  }
+</styLe>
+
+<body>
+  <div class="mubu">
+    <div class="mubu_main liveIndex">
+      <div class="info">
+        <div class="infoTwo">
+          <div class="infoThree">
+              <img src="./images/logo.png">
+            <p class="title">吉林省计算中心科技直播大厅</p>
+            <p>指导单位：吉林省计算中心</p>
+            <p>主办方：吉林省计算中心</p>
+            <p>支持单位：长春市福瑞科技有限公司</p>
+            <a class="childpage" href="http://localhost:8001/#/direct" target="_blink">进入活动现场<i class="iconfont icon-bofang"></i></a>
+            <br>
+            
+            <div data-v-de97bcec="" class="btn el-col el-col-24">
+          <a href="http://localhost:8001/#/live/liveApply">申请测试对接会</a>
+            </div>
+            <!-- ../live/hall -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="yanhua2"></div>
+    <div class="yanhua3"></div>
+    <div class="yanhua4"></div>
+  </div>
+  <div class="mubu_left"></div>
+  <div class="mubu_right"></div>
+  <div class="mubu_top"></div>
+
+
+</body>
+
+</html>

src/layout/live/head.vue

@@ -36,7 +36,7 @@
                 <a @click="turnTo('home')" target="">首页</a>
               </li> -->
               <li class="">
-                <a @click="zhibo()" target="_blank">直播大厅</a>
+               <a href="/static/liveIndex.html" target="_blank">直播大厅</a>
               </li>
               <li :class="isTab('market') ? 'active' : ''">
                 <a @click="turnTo('market')" target="">科技超市</a>
@@ -72,9 +72,7 @@ export default {
   },
   created() {},
   methods: {
-    zhibo() {
-      this.$router.push({ path: '/direct' });
-    },
+  
 
     fuwu() {
       this.$router.push({ path: '/live/service' });

src/views/direct.vue

@@ -81,7 +81,48 @@
                     <li v-for="(item, index) in jishulist" :key="index">
                       <el-col :span="14" class="lileft">
                         <p>
-                          <span class="title" @click="onclickjs(item)"> {{ item.name }}</span>
+                          <el-popover placement="top-start" title="" width="200" trigger="hover">
+                            <el-col :span="24">
+                              <el-col :span="24" class="infoMess">
+                                <el-col :span="24" class="info"> 专家名称:{{ policyInfo.name }} </el-col>
+                                <el-col :span="24" class="info"> 民族:{{ policyInfo.nation }} </el-col>
+                                <el-col :span="24" class="info"> 学术成就:{{ policyInfo.achievement }} </el-col>
+                                <el-col :span="24" class="info"> 身份证号:{{ policyInfo.cardnumber }} </el-col>
+                                <el-col :span="24" class="info"> 出生日期:{{ policyInfo.birth }} </el-col>
+                                <el-col :span="24" class="info"> 毕业院校:{{ policyInfo.school }} </el-col>
+                                <el-col :span="24" class="info"> 证件类型:{{ policyInfo.cardtype }} </el-col>
+                                <el-col :span="24" class="info"> 学位:{{ policyInfo.degree }} </el-col>
+                                <el-col :span="24" class="info"> 电子邮箱:{{ policyInfo.email }} </el-col>
+                                <el-col :span="24" class="info"> 学位:{{ policyInfo.degree }} </el-col>
+                                <el-col :span="24" class="info">
+                                  性别:{{ policyInfo.gender === '0' ? '男' : policyInfo.gender === '1' ? '女' : 'underdind' }}</el-col
+                                >
+                                <el-col :span="24" class="info"> 学位:{{ policyInfo.field }} </el-col>
+                                <el-col :span="24" class="info"> 学历:{{ policyInfo.eduback }} </el-col>
+                                <el-col :span="24" class="info"> 初级职称:{{ policyInfo.technical }} </el-col>
+                                <el-col :span="24" class="info"> 具体职称:{{ policyInfo.technical_actual }} </el-col>
+                                <el-col :span="24" class="info"> 职务:{{ policyInfo.position }} </el-col>
+                                <el-col :span="24" class="info"> 所学专业:{{ policyInfo.major_studied }} </el-col>
+                                <el-col :span="24" class="info"> 从事专业:{{ policyInfo.professional }} </el-col>
+                                <el-col :span="24" class="info"> 手机号:{{ policyInfo.phone }} </el-col>
+
+                                <el-col :span="24" class="info"> 主持或参与项目情况:{{ policyInfo.project_profile }} </el-col>
+                                <el-col :span="24" class="info"> 论文论著:{{ policyInfo.paper }} </el-col>
+                                <el-col :span="24" class="info"> 主要学术成就及获奖情况:{{ policyInfo.paper }} </el-col>
+                                <el-col :span="24" class="info"> 可供咨询领域:{{ policyInfo.field }} </el-col>
+                                <el-col :span="24" class="info"> 领域拼音:{{ policyInfo.field_py }} </el-col>
+                                <el-col :span="24" class="info"> 业务工作简介:{{ policyInfo.job_profile }} </el-col>
+                                <el-col :span="24" class="info"> 备注:{{ policyInfo.remark }} </el-col>
+                              </el-col>
+                            </el-col>
+
+                            <span slot="footer" class="annius">
+                              <el-button @click="dialogVisible = false">取 消</el-button>
+                              <el-button type="primary" @click="dialogVisible = false">对接</el-button>
+                            </span>
+
+                            <span class="title" slot="reference" @mouSEOut="hover(item)"> {{ item.name }}</span>
+                          </el-popover>
 
                           <span><el-button class="duijie">对接</el-button></span>
                         </p>
@@ -259,42 +300,6 @@
           <el-col :span="24" class="info"> 简介:{{ policyInfo.introduction }} </el-col>
         </el-col>
       </el-col>
-      <el-col :span="24" v-else>
-        <el-col :span="24" class="infoMess">
-          <el-col :span="24" class="info"> 专家名称:{{ policyInfo.name }} </el-col>
-          <el-col :span="24" class="info"> 民族:{{ policyInfo.nation }} </el-col>
-          <el-col :span="24" class="info"> 学术成就:{{ policyInfo.achievement }} </el-col>
-          <el-col :span="24" class="info"> 身份证号:{{ policyInfo.cardnumber }} </el-col>
-          <el-col :span="24" class="info"> 出生日期:{{ policyInfo.birth }} </el-col>
-          <el-col :span="24" class="info"> 毕业院校:{{ policyInfo.school }} </el-col>
-          <el-col :span="24" class="info"> 证件类型:{{ policyInfo.cardtype }} </el-col>
-          <el-col :span="24" class="info"> 学位:{{ policyInfo.degree }} </el-col>
-          <el-col :span="24" class="info"> 电子邮箱:{{ policyInfo.email }} </el-col>
-          <el-col :span="24" class="info"> 学位:{{ policyInfo.degree }} </el-col>
-          <el-col :span="24" class="info"> 性别:{{ policyInfo.gender === '0' ? '男' : policyInfo.gender === '1' ? '女' : 'underdind' }}</el-col>
-          <el-col :span="24" class="info"> 学位:{{ policyInfo.field }} </el-col>
-          <el-col :span="24" class="info"> 学历:{{ policyInfo.eduback }} </el-col>
-          <el-col :span="24" class="info"> 初级职称:{{ policyInfo.technical }} </el-col>
-          <el-col :span="24" class="info"> 具体职称:{{ policyInfo.technical_actual }} </el-col>
-          <el-col :span="24" class="info"> 职务:{{ policyInfo.position }} </el-col>
-          <el-col :span="24" class="info"> 所学专业:{{ policyInfo.major_studied }} </el-col>
-          <el-col :span="24" class="info"> 从事专业:{{ policyInfo.professional }} </el-col>
-          <el-col :span="24" class="info"> 手机号:{{ policyInfo.phone }} </el-col>
-
-          <el-col :span="24" class="info"> 主持或参与项目情况:{{ policyInfo.project_profile }} </el-col>
-          <el-col :span="24" class="info"> 论文论著:{{ policyInfo.paper }} </el-col>
-          <el-col :span="24" class="info"> 主要学术成就及获奖情况:{{ policyInfo.paper }} </el-col>
-          <el-col :span="24" class="info"> 可供咨询领域:{{ policyInfo.field }} </el-col>
-          <el-col :span="24" class="info"> 领域拼音:{{ policyInfo.field_py }} </el-col>
-          <el-col :span="24" class="info"> 业务工作简介:{{ policyInfo.job_profile }} </el-col>
-          <el-col :span="24" class="info"> 备注:{{ policyInfo.remark }} </el-col>
-        </el-col>
-      </el-col>
-
-      <span slot="footer" class="annius">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">对接</el-button>
-      </span>
     </el-dialog>
   </div>
 </template>
@@ -327,6 +332,7 @@ export default {
     liveFoot,
   },
   data: () => ({
+    visible: false,
     dialogVisible: false,
     dialogVisibles: false,
     dialogVisibless: false,
@@ -453,12 +459,15 @@ export default {
     },
     async searchDock() {},
     onclickjs(item) {
-      console.log();
-      this.dialogVisible = true;
+      console.log(item);
 
       this.$set(this, `policyInfo`, item);
     },
 
+    hover: function(item) {
+      console.log(item);
+    },
+
     zhuanjia(item) {
       console.log(item);
       this.dialogVisible = true;