service-platform
/
web-live


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
							<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>