|
|
@@ -0,0 +1,369 @@
|
|
|
+<!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/mainJiangjin.css" th:href="@{/css/mainJiangjin.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:27%;
|
|
|
+ transform: translateY(100px);
|
|
|
+ font-size: 30px;
|
|
|
+ animation: myanimation 2s;
|
|
|
+ animation-iteration-count: 1;
|
|
|
+ }
|
|
|
+ .gradient-text {
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: bold;
|
|
|
+ background: -webkit-linear-gradient( white, rgb(188,214,249),white); /* Chrome, Safari */
|
|
|
+ background: linear-gradient( white, rgb(188,214,249),white); /* 标准语法 */
|
|
|
+ -webkit-background-clip: text; /* Chrome, Safari */
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent; /* Chrome, Safari */
|
|
|
+ color: transparent; /* 标准语法, 如果背景剪辑支持的好 */
|
|
|
+ -webkit-font-smoothing: antialiased; /* 针对WebKit浏览器 */
|
|
|
+ -moz-osx-font-smoothing: grayscale; /* 针对Firefox浏览器 */
|
|
|
+ text-rendering: optimizeLegibility; /* 更一般的CSS属性 */
|
|
|
+ /*font-family: 'Arial Italic', 'Arial', sans-serif!important;*/
|
|
|
+ /*font-style: italic;*/
|
|
|
+ }
|
|
|
+ @keyframes myanimation {
|
|
|
+ 0%{
|
|
|
+ transform: translateY(-100px);
|
|
|
+ }
|
|
|
+ 100%{
|
|
|
+ transform: translateY(100px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<body class="gray-bg">
|
|
|
+<h4 class="hClass">
|
|
|
+ <span class="gradient-text">襄阳市保康供水智慧管理服务平台</span>
|
|
|
+</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 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);
|
|
|
+
|
|
|
+ function insertChar(str, index, char) {
|
|
|
+ return str.replace(/./g, (match, i) => {
|
|
|
+ if (i === index) {
|
|
|
+ return char + match;
|
|
|
+ } else {
|
|
|
+ return match;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ var danganList = [[${danganList}]];
|
|
|
+ function initDy(){
|
|
|
+ var $contentDiv = $("#contentDiv");
|
|
|
+ if(danganList!==null&&danganList!==undefined&&danganList.length>0){
|
|
|
+ for (let i = 1;i <= danganList.length;i++){
|
|
|
+ let str = "";
|
|
|
+ if(i===1){
|
|
|
+ str += "<div style=\"\" class=\"leftOneDiv\">"+
|
|
|
+ "<div class=\"leftOneTopLine\"></div>" +
|
|
|
+ "<div>" +
|
|
|
+ "<p style=\"line-height: 6em;margin-left:-1em;display: inline-block;\">"+danganList[i-1].danganName+"</p>" +
|
|
|
+ "<img class=\"leftOneIcon\" alt=\"[ "+danganList[i-1].danganName+" ]\" src=\"../img/jiangjin/左一.png\" " +
|
|
|
+ " style=\"width: 150px;height: 150px;vertical-align:middle;position: absolute;top: 75px;margin-left: 1em\">" +
|
|
|
+ "</div>" +
|
|
|
+ "<div class=\"leftOneBottomLine\"></div>"+
|
|
|
+ "<input style='display: none' value='"+danganList[i-1].danganUrl+"' class='.divUrl'>";
|
|
|
+ }
|
|
|
+ if(i===2){
|
|
|
+ str +="<div style=\"\" class=\"leftTwoDiv\">"+
|
|
|
+ "<div class=\"leftTwoTopLine\"></div>" +
|
|
|
+ "<div>" +
|
|
|
+ "<p class='pWidth' style=\"line-height: 60px;padding-left: 0;display: inline-block;white-space: pre-wrap;" +
|
|
|
+ "margin-top:80px;text-align: right;";
|
|
|
+ //配合样式white-space: pre-wrap;使用该逻辑
|
|
|
+ let left2DanganName = danganList[i-1].danganName;
|
|
|
+ if(left2DanganName.includes("供水运营")){
|
|
|
+ left2DanganName = insertChar(left2DanganName,4,"\n")
|
|
|
+ }
|
|
|
+ str+="\">"+left2DanganName+"</p>" +
|
|
|
+ "<img class=\"leftTwoIcon\" alt=\"[ "+danganList[i-1].danganName+" ]\" src=\"../img/jiangjin/左二.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>"+
|
|
|
+ "<input style='display: none' value='"+danganList[i-1].danganUrl+"' class='.divUrl'>";
|
|
|
+ }
|
|
|
+ if(i===3){
|
|
|
+ str += "<div style=\"\" class=\"leftThreeDiv\">"+
|
|
|
+ "<div class=\"leftThreeTopLine\"></div>" +
|
|
|
+ "<div>" +
|
|
|
+ "<p style=\"line-height: 6em;padding-left: 1em;display: inline-block;\">"+danganList[i-1].danganName+"</p>" +
|
|
|
+ "<img class=\"leftThreeIcon\" alt=\"[ "+danganList[i-1].danganName+" ]\" src=\"../img/jiangjin/左三.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>"+
|
|
|
+ "<input style='display: none' value='"+danganList[i-1].danganUrl+"' class='.divUrl'>";
|
|
|
+ }
|
|
|
+ if(i===4){
|
|
|
+ str += "<div style=\"\" class=\"rightOneDiv\">"+
|
|
|
+ "<div class=\"rightOneTopLine\"></div>" +
|
|
|
+ "<div>" +
|
|
|
+ "<img class=\"rightOneIcon\" alt=\"[ "+danganList[i-1].danganName+" ]\" src=\"../img/jiangjin/右一.png\" th:src=\"@{/img/yining/icon/智慧营业系统,未选中.png}\"" +
|
|
|
+ " style=\"width: 150px;height: 150px;vertical-align:middle;position: absolute;top: 75px;left: 120px;margin-left: 1em\">" +
|
|
|
+ "<p style=\"line-height: 60px;margin-left: 360px;display: inline-block;white-space: pre-wrap;" +
|
|
|
+ "margin-top:80px;text-align: right;" +
|
|
|
+ "\">";
|
|
|
+ //配合样式white-space: pre-wrap;使用该逻辑
|
|
|
+ let right1DanganName = danganList[i-1].danganName;
|
|
|
+ if(right1DanganName .includes("DMA")){
|
|
|
+ right1DanganName = insertChar(right1DanganName ,8,"\n")
|
|
|
+ }
|
|
|
+ str += right1DanganName+"</p>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div class=\"rightOneBottomLine\"></div>"+
|
|
|
+ "<input style='display: none' value='"+danganList[i-1].danganUrl+"' class='.divUrl'>";
|
|
|
+ }
|
|
|
+ if(i===5){
|
|
|
+ str += "<div style=\"\" class=\"rightTwoDiv\">"+
|
|
|
+ "<div class=\"rightTwoTopLine\"></div>" +
|
|
|
+ "<div>" +
|
|
|
+ "<img class=\"rightTwoIcon\" alt=\"[ "+danganList[i-1].danganName+" ]\" src=\"../img/jiangjin/右二.png\" th:src=\"@{/img/yining/icon/智慧客服系统,未选中.png}\"" +
|
|
|
+ " style=\"width: 150px;height: 150px;vertical-align:middle;position: absolute;top: 75px;left: 60px;margin-left: 1em\">" +
|
|
|
+ "<p style=\"line-height: 6em;margin-left: 300px;display: inline-block;\">"+danganList[i-1].danganName+"</p>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div class=\"leftOneBottomLine\"></div>"+
|
|
|
+ "<input style='display: none' value='"+danganList[i-1].danganUrl+"' class='.divUrl'>";
|
|
|
+ }
|
|
|
+ if(i===6){
|
|
|
+ str += "<div style=\"\" class=\"rightThreeDiv\">"+
|
|
|
+ "<div class=\"rightThreeTopLine\"></div>" +
|
|
|
+ "<div>" +
|
|
|
+ "<img class=\"rightThreeIcon\" alt=\"[ "+danganList[i-1].danganName+" ]\" src=\"../img/jiangjin/右三.png\" th:src=\"@{/img/yining/icon/智慧办公系统,未选中.png}\"" +
|
|
|
+ " style=\"width: 150px;height: 150px;vertical-align:middle;position: absolute;top: 75px;left: 120px;margin-left: 1em\">" +
|
|
|
+ "<p style=\"line-height: 6em;margin-left: 360px;display: inline-block;\">"+danganList[i-1].danganName+"</p>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div class=\"rightThreeBottomLine\"></div>"+
|
|
|
+ "<input style='display: none' value='"+danganList[i-1].danganUrl+"' class='.divUrl'>";
|
|
|
+ }
|
|
|
+ str += "</div>";
|
|
|
+ $contentDiv.append(str);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ initDy();
|
|
|
+
|
|
|
+ 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").click(function() {
|
|
|
+ opennewpage($(".leftOneDiv").find("input").val()+"");
|
|
|
+ });
|
|
|
+ $(".leftTwoDiv").click(function() {
|
|
|
+ opennewpage($(".leftTwoDiv").find("input").val()+"");
|
|
|
+ });
|
|
|
+ $(".leftThreeDiv").click(function() {
|
|
|
+ opennewpage($(".leftThreeDiv").find("input").val()+"");
|
|
|
+ });
|
|
|
+ $(".rightOneDiv").click(function() {
|
|
|
+ opennewpage($(".rightOneDiv").find("input").val()+"");
|
|
|
+ });
|
|
|
+ $(".rightTwoDiv").click(function() {
|
|
|
+ opennewpage($(".rightTwoDiv").find("input").val()+"");
|
|
|
+ });
|
|
|
+ $(".rightThreeDiv").click(function() {
|
|
|
+ opennewpage($(".rightThreeDiv").find("input").val()+"");
|
|
|
+ });
|
|
|
+
|
|
|
+ $(".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>
|
