|
@@ -0,0 +1,382 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <!--360浏览器优先以webkit内核解析-->
|
|
|
+ <title></title>
|
|
|
+ <link rel="shortcut icon" href="favicon.ico">
|
|
|
+ <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
|
|
|
+ <link href="../static/css/mainYining.css" th:href="@{/css/mainYining.css}" rel="stylesheet"/>
|
|
|
+ <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
|
|
|
+ <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
|
|
|
+ <link href="../static/css/style.min862f.css" th:href="@{/css/style.min862f.css}" rel="stylesheet"/>
|
|
|
+ <script th:src="@{/js/jquery.min.js}"></script>
|
|
|
+ <th:block th:include="include :: header('首页')" />
|
|
|
+ <style type="text/css">
|
|
|
+ body{
|
|
|
+ background-color: #00173A!important;
|
|
|
+ }
|
|
|
+ #mainTrueVideo{
|
|
|
+ position: fixed;
|
|
|
+ z-index: 9999;
|
|
|
+ /*-webkit-filter: grayscale(100%);*/
|
|
|
+ }
|
|
|
+ #mainYiningVideo{
|
|
|
+ position: fixed;
|
|
|
+ z-index: -9999;
|
|
|
+ /*-webkit-filter: grayscale(100%);*/
|
|
|
+ }
|
|
|
+ .aInput {
|
|
|
+ position: relative;
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ text-decoration: none;
|
|
|
+ background-color: rgba(60,141,188,1);
|
|
|
+ font-family: 'Yanone Kaffeesatz';
|
|
|
+ /*font-weight: 700;*/
|
|
|
+ /*font-size: 2em;*/
|
|
|
+ display: block;
|
|
|
+ padding: 4px;
|
|
|
+ -webkit-border-radius: 20px;
|
|
|
+ -moz-border-radius: 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ -webkit-box-shadow: 0px 9px 0px rgba(60,141,188,1), 0px 9px 25px rgba(60,64,81,.7);
|
|
|
+ -moz-box-shadow: 0px 9px 0px rgba(60,141,188,1), 0px 9px 25px rgba(60,64,81,.7);
|
|
|
+ box-shadow: 0px 9px 0px rgba(60,141,188,1), 0px 9px 25px rgba(60,64,81,.7);
|
|
|
+ margin: 20px auto;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ -webkit-transition: all .1s ease;
|
|
|
+ -moz-transition: all .1s ease;
|
|
|
+ -ms-transition: all .1s ease;
|
|
|
+ -o-transition: all .1s ease;
|
|
|
+ transition: all .1s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .aInput:active {
|
|
|
+ -webkit-box-shadow: 0px 3px 0px rgba(60,141,188,1), 0px 3px 6px rgba(60,64,81,.9);
|
|
|
+ -moz-box-shadow: 0px 3px 0px rgba(60,141,188,1), 0px 3px 6px rgba(60,64,81,.9);
|
|
|
+ box-shadow: 0px 3px 0px rgba(60,141,188,1), 0px 3px 6px rgba(60,64,81,.9);
|
|
|
+ position: relative;
|
|
|
+ top: 6px;
|
|
|
+ }
|
|
|
+ .hClass{
|
|
|
+ position:fixed;
|
|
|
+ left:33%;
|
|
|
+ transform: translateY(100px);
|
|
|
+ font-size: 25px;
|
|
|
+ animation: myanimation 2s;
|
|
|
+ animation-iteration-count: 1;
|
|
|
+ }
|
|
|
+ @keyframes myanimation {
|
|
|
+ 0%{
|
|
|
+ transform: translateY(-100px);
|
|
|
+ }
|
|
|
+ 100%{
|
|
|
+ transform: translateY(100px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<body class="gray-bg">
|
|
|
+<h4 class="hClass">
|
|
|
+ <img id="logImg" alt="[ 水务系统 ]" src="../static/img/yining/logo.png" th:src="@{/img/yining/logo.png}"
|
|
|
+ style="width: 100%;height: 60px;">
|
|
|
+</h4>
|
|
|
+<video src="mainTrue.mp4" th:src="@{/mainTrue.mp4}" id="mainTrueVideo" width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted">
|
|
|
+</video>
|
|
|
+<video src="mainYining.mp4" th:src="@{/mainYining.mp4}" id="mainYiningVideo" width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted">
|
|
|
+</video>
|
|
|
+<div class="leftAllLine">
|
|
|
+ <div class="leftMenuMedLine"></div>
|
|
|
+ <div class="leftMenuLeftLine"></div>
|
|
|
+</div>
|
|
|
+<div class="rightAllLine">
|
|
|
+ <div class="rightMenuMedLine"></div>
|
|
|
+ <div class="rightMenuLeftLine"></div>
|
|
|
+</div>
|
|
|
+<div style="z-index: 9999!important;" class="leftMenu">
|
|
|
+</div>
|
|
|
+<div style="z-index: 9999!important;" class="rightMenu">
|
|
|
+</div>
|
|
|
+<div class="topDiv">
|
|
|
+ <a style="" id="showMenuEsc" onclick="showMenuEsc()" title="模式切换"><i class="fa fa-cog" style="color:#FFFFFF!important;font-size: 30px!important;"></i></a>
|
|
|
+</div>
|
|
|
+<div class="bottomDiv"></div>
|
|
|
+<div class="container-div" style="z-index: 99999">
|
|
|
+ <div id="contentDiv" style="position: absolute;top: 20%;width: 100%;height: 700px;">
|
|
|
+ <div style="display: none" class="leftOneDiv">
|
|
|
+ <div class="leftOneTopLine"></div>
|
|
|
+ <div>
|
|
|
+ <p style="line-height: 6em;padding-left: 1em;display: inline-block;">基础支撑系统</p>
|
|
|
+ <img class="leftOneIcon" alt="[ 基础支撑系统 ]" src="../static/img/yining/icon/基础支撑系统,未选中.png" th:src="@{/img/yining/icon/基础支撑系统,未选中.png}"
|
|
|
+ style="width: 150px;height: 150px;vertical-align:middle;position: absolute;top: 75px;margin-left: 1em">
|
|
|
+ </div>
|
|
|
+ <div class="leftOneBottomLine"></div>
|
|
|
+ </div>
|
|
|
+ <div style="display: none" class="leftTwoDiv">
|
|
|
+ <div class="leftTwoTopLine"></div>
|
|
|
+ <div>
|
|
|
+ <p style="line-height: 6em;display: inline-block;">智慧管网系统</p>
|
|
|
+ <img class="leftTwoIcon" alt="[ 智慧管网系统 ]" src="../static/img/yining/icon/智慧生产系统,未选中.png" th:src="@{/img/yining/icon/智慧生产系统,未选中.png}"
|
|
|
+ style="width: 150px;height: 150px;vertical-align:middle;position: absolute;top: 75px;margin-left: 1em">
|
|
|
+ </div>
|
|
|
+ <div class="leftTwoBottomLine"></div>
|
|
|
+ </div>
|
|
|
+ <div style="display: none" class="leftThreeDiv">
|
|
|
+ <div class="leftThreeTopLine"></div>
|
|
|
+ <div>
|
|
|
+ <p style="line-height: 6em;padding-left: 1em;display: inline-block;">智慧办公系统</p>
|
|
|
+ <img class="leftThreeIcon" alt="[ 智慧办公系统 ]" src="../static/img/yining/icon/智慧管网系统,未选中.png" th:src="@{/img/yining/icon/智慧管网系统,未选中.png}"
|
|
|
+ style="width: 150px;height: 150px;vertical-align:middle;position: absolute;top: 75px;margin-left: 1em">
|
|
|
+ </div>
|
|
|
+ <div class="leftThreeBottomLine"></div>
|
|
|
+ </div>
|
|
|
+ <div style="display: none" class="rightOneDiv">
|
|
|
+ <div class="rightOneTopLine"></div>
|
|
|
+ <div>
|
|
|
+ <img class="rightOneIcon" alt="[ 智慧生产系统 ]" src="../static/img/yining/icon/智慧营业系统,未选中.png" th:src="@{/img/yining/icon/智慧营业系统,未选中.png}"
|
|
|
+ style="width: 150px;height: 150px;vertical-align:middle;position: absolute;top: 75px;left: 4em;">
|
|
|
+ <p style="line-height: 6em;position:absolute;left:8em;display: inline-block;">智慧生产系统</p>
|
|
|
+ </div>
|
|
|
+ <div class="rightOneBottomLine"></div>
|
|
|
+ </div>
|
|
|
+ <div style="display: none" class="rightTwoDiv">
|
|
|
+ <div class="rightTwoTopLine"></div>
|
|
|
+ <div>
|
|
|
+ <img class="rightTwoIcon" alt="[ 智慧客服系统 ]" src="../static/img/yining/icon/智慧客服系统,未选中.png" th:src="@{/img/yining/icon/智慧客服系统,未选中.png}"
|
|
|
+ style="width: 150px;height: 150px;vertical-align:middle;position: absolute;top: 75px;left: 2em">
|
|
|
+ <p style="line-height: 6em;position:absolute;left:6em;display: inline-block;">智慧客服系统</p>
|
|
|
+ </div>
|
|
|
+ <div class="rightTwoBottomLine"></div>
|
|
|
+ </div>
|
|
|
+ <div style="display: none" class="rightThreeDiv">
|
|
|
+ <div class="rightThreeTopLine"></div>
|
|
|
+ <div>
|
|
|
+ <img class="rightThreeIcon" alt="[ 水质实验室 ]" src="../static/img/yining/icon/智慧办公系统,未选中.png" th:src="@{/img/yining/icon/智慧办公系统,未选中.png}"
|
|
|
+ style="width: 150px;height: 150px;vertical-align:middle;position: absolute;top: 75px;left: 4em">
|
|
|
+ <p style="line-height: 6em;position:absolute;left:8em;display: inline-block;">水质实验室</p>
|
|
|
+ </div>
|
|
|
+ <div class="rightThreeBottomLine"></div>
|
|
|
+ </div>
|
|
|
+ <div class="centerDiv"></div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script th:inline="javascript">
|
|
|
+ //TODO 逻辑解释:
|
|
|
+ //第一段视频放到第4秒的时候,就可以降低透明度了
|
|
|
+ //第一段视频放到第4秒时,降低透明度,再过1秒后透明度降到0。
|
|
|
+ $("#mainTrueVideo").css("z-index", "-10000");
|
|
|
+ $("#mainYiningVideo").css("z-index","-10001");
|
|
|
+ $(".leftOneDiv").show(500);
|
|
|
+ $(".leftTwoDiv").show(500);
|
|
|
+ $(".leftThreeDiv").show(500);
|
|
|
+ $(".rightOneDiv").show(500);
|
|
|
+ $(".rightTwoDiv").show(500);
|
|
|
+ $(".rightThreeDiv").show(500);
|
|
|
+ setTimeout(function () {
|
|
|
+ console.log("4秒钟到了");
|
|
|
+ $("#mainTrueVideo").css("opacity", "0.5");
|
|
|
+ setTimeout(function () {
|
|
|
+ $("#mainTrueVideo").css("opacity", "0");
|
|
|
+ $("#mainYiningVideo").css("z-index","-9998");
|
|
|
+ },1000);
|
|
|
+ }, 4000);
|
|
|
+
|
|
|
+ var sessionId = [[${sessionId}]];
|
|
|
+ function opennewpage(url) {
|
|
|
+
|
|
|
+ // window.location.href=url;
|
|
|
+
|
|
|
+ if(url.indexOf("?")>0) {
|
|
|
+ url = url + "&" + "reqid=" + sessionId;
|
|
|
+ }else{
|
|
|
+ url = url + "?"+"reqid=" + sessionId;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ console.log(url)
|
|
|
+
|
|
|
+ window.open(url)
|
|
|
+ // console.log(danganLoginName)
|
|
|
+ //
|
|
|
+ // console.log(sessionId)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //TODO div与空白处点击事件
|
|
|
+ $(".leftOneDiv").hover(function() {
|
|
|
+ var list = [[${leftOneList}]];
|
|
|
+ $(".leftAllLine").animate({left:'20px'},100);
|
|
|
+ $(".leftAllLine").find(".leftMenuLeftLine").hide();
|
|
|
+ $(".leftMenu").animate({width:'424px',opacity:'1'},100);
|
|
|
+ $(".leftMenu").empty();
|
|
|
+ $(".leftMenu").append("<div class='leftMenuLeftLine'></div>" +
|
|
|
+ "<div class='leftMenuRightLine'></div>");
|
|
|
+ let strHtml = "<ul class='menuUl'>";
|
|
|
+ list.forEach(function (e) {
|
|
|
+ strHtml += "<li class='menuUlLi'><span onclick='opennewpage(\""+e.danganUrl+"\")'>" + e.danganName + "</span></li>";
|
|
|
+ });
|
|
|
+ strHtml += "</ul>";
|
|
|
+ $(".leftMenu").append(strHtml);
|
|
|
+ ulClass();
|
|
|
+ });
|
|
|
+ $(".leftTwoDiv").hover(function() {
|
|
|
+ var list = [[${leftTwoList}]];
|
|
|
+ $(".leftAllLine").animate({left:'20px'},100);
|
|
|
+ $(".leftAllLine").find(".leftMenuLeftLine").hide();
|
|
|
+ $(".leftMenu").animate({width:'424px',opacity:'1'},100);
|
|
|
+ $(".leftMenu").empty();
|
|
|
+ $(".leftMenu").append("<div class='leftMenuLeftLine'></div>" +
|
|
|
+ "<div class='leftMenuRightLine'></div>");
|
|
|
+ let strHtml = "<ul class='menuUl'>";
|
|
|
+ list.forEach(function (e) {
|
|
|
+ strHtml += "<li class='menuUlLi'><span onclick='opennewpage(\""+e.danganUrl+"\")'>" + e.danganName + "</span></li>";
|
|
|
+ });
|
|
|
+ strHtml += "</ul>";
|
|
|
+ $(".leftMenu").append(strHtml);
|
|
|
+ ulClass();
|
|
|
+ });
|
|
|
+ $(".leftThreeDiv").hover(function() {
|
|
|
+ var list = [[${leftThreeList}]];
|
|
|
+ $(".leftAllLine").animate({left:'20px'},100);
|
|
|
+ $(".leftAllLine").find(".leftMenuLeftLine").hide();
|
|
|
+ $(".leftMenu").animate({width:'424px',opacity:'1'},100);
|
|
|
+ $(".leftMenu").empty();
|
|
|
+ $(".leftMenu").append("<div class='leftMenuLeftLine'></div>" +
|
|
|
+ "<div class='leftMenuRightLine'></div>");
|
|
|
+ let strHtml = "<ul class='menuUl'>";
|
|
|
+ list.forEach(function(e) {
|
|
|
+ strHtml += "<li class='menuUlLi'><span onclick='opennewpage(\""+e.danganUrl+"\")'>"+e.danganName+"</span></li>";
|
|
|
+ });
|
|
|
+ strHtml += "</ul>";
|
|
|
+ $(".leftMenu").append(strHtml);
|
|
|
+ ulClass();
|
|
|
+ });
|
|
|
+ $(".rightOneDiv").hover(function() {
|
|
|
+ var list = [[${rightOneList}]];
|
|
|
+ $(".rightAllLine").animate({right:'20px'},100);
|
|
|
+ $(".rightAllLine").find(".rightMenuLeftLine").hide();
|
|
|
+ $(".rightMenu").animate({width:'424px',opacity:'1'},100);
|
|
|
+ $(".rightMenu").empty();
|
|
|
+ $(".rightMenu").append("<div class='rightMenuLeftLine'></div>" +
|
|
|
+ "<div class='rightMenuRightLine'></div>");
|
|
|
+ let strHtml = "<ul class='menuUlRight'>";
|
|
|
+ list.forEach(function (e) {
|
|
|
+ strHtml += "<li class='menuUlLiRight'><span onclick='opennewpage(\""+e.danganUrl+"\")'>" + e.danganName + "</span></li>";
|
|
|
+ });
|
|
|
+ strHtml += "</ul>";
|
|
|
+ $(".rightMenu").append(strHtml);
|
|
|
+ ulRightClass();
|
|
|
+ });
|
|
|
+ $(".rightTwoDiv").hover(function() {
|
|
|
+ var list = [[${rightTwoList}]];
|
|
|
+ $(".rightAllLine").animate({right:'20px'},100);
|
|
|
+ $(".rightAllLine").find(".rightMenuLeftLine").hide();
|
|
|
+ $(".rightMenu").animate({width:'424px',opacity:'1'},100);
|
|
|
+ $(".rightMenu").empty();
|
|
|
+ $(".rightMenu").append("<div class='rightMenuLeftLine'></div>" +
|
|
|
+ "<div class='rightMenuRightLine'></div>");
|
|
|
+ let strHtml = "<ul class='menuUlRight'>";
|
|
|
+ list.forEach(function(e) {
|
|
|
+ strHtml += "<li class='menuUlLiRight'><span onclick='opennewpage(\""+e.danganUrl+"\")'>"+e.danganName+"</span></li>";
|
|
|
+ });
|
|
|
+ strHtml += "</ul>";
|
|
|
+ $(".rightMenu").append(strHtml);
|
|
|
+ ulRightClass();
|
|
|
+ });
|
|
|
+ $(".rightThreeDiv").hover(function() {
|
|
|
+ var list = [[${rightThreeList}]];
|
|
|
+ $(".rightAllLine").animate({right:'20px'},100);
|
|
|
+ $(".rightAllLine").find(".rightMenuLeftLine").hide();
|
|
|
+ $(".rightMenu").animate({width:'424px',opacity:'1'},100);
|
|
|
+ $(".rightMenu").empty();
|
|
|
+ $(".rightMenu").append("<div class='rightMenuLeftLine'></div>" +
|
|
|
+ "<div class='rightMenuRightLine'></div>");
|
|
|
+ let strHtml = "<ul class='menuUlRight'>";
|
|
|
+ list.forEach(function(e) {
|
|
|
+ strHtml += "<li class='menuUlLiRight'><span onclick='opennewpage(\""+e.danganUrl+"\")'>"+e.danganName+"</span></li>";
|
|
|
+ });
|
|
|
+ strHtml += "</ul>";
|
|
|
+ $(".rightMenu").append(strHtml);
|
|
|
+ ulRightClass();
|
|
|
+ });
|
|
|
+
|
|
|
+ $(".leftMenu").mouseover(function () {
|
|
|
+ $(".leftMenu").show();
|
|
|
+ });
|
|
|
+ $(".rightMenu").mouseover(function () {
|
|
|
+ $(".rightMenu").show();
|
|
|
+ });
|
|
|
+
|
|
|
+ $(".centerDiv").mouseover(function () {
|
|
|
+ $(".leftMenu").animate({width:'0px',opacity:'0.8'},300);
|
|
|
+ $(".leftMenu").empty();
|
|
|
+ $(".leftAllLine").animate({left:'180px'},300);
|
|
|
+ $(".leftAllLine").find(".leftMenuLeftLine").show();
|
|
|
+ $(".rightMenu").animate({width:'0px',opacity:'0.8'},300);
|
|
|
+ $(".rightMenu").empty();
|
|
|
+ $(".rightAllLine").animate({right:'180px'},300);
|
|
|
+ $(".rightAllLine").find(".rightMenuLeftLine").show();
|
|
|
+ });
|
|
|
+ $(".topDiv").mouseover(function () {
|
|
|
+ $(".leftMenu").animate({width:'0px',opacity:'0.8'},300);
|
|
|
+ $(".leftMenu").empty();
|
|
|
+ $(".leftAllLine").animate({left:'180px'},300);
|
|
|
+ $(".leftAllLine").find(".leftMenuLeftLine").show();
|
|
|
+ $(".rightMenu").animate({width:'0px',opacity:'0.8'},300);
|
|
|
+ $(".rightMenu").empty();
|
|
|
+ $(".rightAllLine").animate({right:'180px'},300);
|
|
|
+ $(".rightAllLine").find(".rightMenuLeftLine").show();
|
|
|
+ });
|
|
|
+ $(".bottomDiv").mouseover(function () {
|
|
|
+ $(".leftMenu").animate({width:'0px',opacity:'0.8'},300);
|
|
|
+ $(".leftMenu").empty();
|
|
|
+ $(".leftAllLine").animate({left:'180px'},300);
|
|
|
+ $(".leftAllLine").find(".leftMenuLeftLine").show();
|
|
|
+ $(".rightMenu").animate({width:'0px',opacity:'0.8'},300);
|
|
|
+ $(".rightMenu").empty();
|
|
|
+ $(".rightAllLine").animate({right:'180px'},300);
|
|
|
+ $(".rightAllLine").find(".rightMenuLeftLine").show();
|
|
|
+ });
|
|
|
+
|
|
|
+ function ulClass() {
|
|
|
+ $(".menuUlLi").hover(function () {
|
|
|
+ $(this).find("img").remove();
|
|
|
+ $(this).find("span").after("<img src=\"/img/yining/选中右侧.png\" style='width: 30px;height: 30px;'>")
|
|
|
+ $(this).find("span").before("<img src=\"/img/yining/选中左侧.png\" style='width: 30px;height: 30px;'>")
|
|
|
+ },function () {
|
|
|
+ $(this).find("img").remove();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function ulRightClass() {
|
|
|
+ $(".menuUlLiRight").hover(function () {
|
|
|
+ $(this).find("img").remove();
|
|
|
+ $(this).find("span").after("<img src=\"/img/yining/选中右侧.png\" style='width: 30px;height: 30px;'>")
|
|
|
+ $(this).find("span").before("<img src=\"/img/yining/选中左侧.png\" style='width: 30px;height: 30px;'>")
|
|
|
+ },function () {
|
|
|
+ $(this).find("img").remove();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ var menuFlag = top.window.tagMenu;
|
|
|
+ function showMenuEsc(){
|
|
|
+ //传入window顶级节点
|
|
|
+ top.window.tagObj();
|
|
|
+ if(!menuFlag){
|
|
|
+ // $("#showMenuEsc").show();
|
|
|
+ }else{
|
|
|
+ // $("#showMenuEsc").hide();
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|