|
|
@@ -1,140 +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; height: 100vh; 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="../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>
|
|
|
+
|
|
|
+ <span>邮编：130000</span>
|
|
|
+
|
|
|
+ <span>传真：239823982</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>地址：吉林省长春市朝阳区前进大街1244号</span>
|
|
|
+
|
|
|
+ <span>电话：0134-1234567</span>
|
|
|
+
|
|
|
+ <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 ---- */
|
|
|
|
|
|
-<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" href="css/style.css">
|
|
|
-</head>
|
|
|
+ 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();
|
|
|
|
|
|
-<body style="margin: 0 !important;">
|
|
|
- <div class="home">
|
|
|
-
|
|
|
- </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>
|
|
|
+ let ul = document.querySelector("ul");
|
|
|
|
|
|
- /* ---- particles.js config ---- */
|
|
|
+ ul.classList.add("rise");
|
|
|
+ trigEl.classList.add("pop");
|
|
|
|
|
|
- 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
|
|
|
- });
|
|
|
+ setTimeout(function() {
|
|
|
+ trigEl.focus();
|
|
|
|
|
|
- </script>
|
|
|
-</body>
|
|
|
+ ul.classList.remove("rise");
|
|
|
+ trigEl.classList.remove("pop");
|
|
|
+ }, 1000);
|
|
|
+ };
|
|
|
|
|
|
-</html>
|
|
|
+ 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>
|
