feats

resources/static/css/common.css

   background: rgba(66, 118, 245, 0.2);
 }
 .dashboard-page {
+  position: relative;
   background-color: #081a48;
+  height: 100vh;
+  overflow: hidden;
   scrollbar-width: none;
   /* firefox */
   -ms-overflow-style: none;
 .dashboard-page::-webkit-scrollbar {
   display: none;
 }
+.dashboard-page .carousel-container,
+.dashboard-page .act-list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 .dashboard-page .dash-carousel {
   box-sizing: border-box;
-  height: 100vh;
   margin: 0;
   overflow: hidden;
 }
-.dashboard-page .dash-carousel .left {
-  background: transparent;
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.0001) 100%);
-  width: 10%;
-  box-shadow: none;
-}
-.dashboard-page .dash-carousel .left,
-.dashboard-page .dash-carousel .right {
-  height: calc(100% - 100px);
-}
 .dashboard-page .dash-carousel .item {
   height: 100vh;
 }
-.dashboard-page .dash-carousel .item.left {
-  width: auto;
-}
 .dashboard-page .dash-carousel .item .item-image {
   height: 100%;
   width: 100%;
   background-repeat: no-repeat;
   background-position: center center;
   background-origin: border-box;
-  background-size: contain;
+  background-size: cover;
 }
 .dashboard-page .dash-carousel .item .item-video {
   height: 100%;
   height: 100%;
 }
 .dashboard-page .act-list {
-  margin: 96px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 .dashboard-page .act-list .row {
-  height: calc(25vh - 64px);
+  width: 100%;
+  height: calc(35vh - 64px);
   padding: 0 80px;
 }
 .dashboard-page .act-list .row + .row {

resources/static/css/public.css

 /*主题框架*/
 
 /* .header{position:absolute;z-index:100;top:0;left:0;width:100%;}
-.left{position:absolute;z-index:98;top:98px;bottom:40px;left:0;}
+.left1{position:absolute;z-index:98;top:98px;bottom:40px;left:0;}
 .layout-content{position:absolute;z-index:97;top:74px;bottom:40px;left:240px;right:0;} */
 .header{width:100%; height: 94px;}
 .layout{ display: flex; position: relative; min-height: calc(100% - 94px);}
-.layout .left { flex: none; height: 100%; }
+.layout .left1 { flex: none; height: 100%; }
 .layout .layout-content { flex: 1; }
 
 .footer{background:var(--main-bg);text-align:center;height:40px;line-height:40px;color:#FFF;position:absolute;left:0;right:0;bottom:0;}
 
 
 /*左侧*/
-.left{background:#fff;width: 240px;-moz-box-shadow:2px 0 3px rgba(0,0,0,.3);-webkit-box-shadow:2px 0 3px rgba(0,0,0,.3);box-shadow:2px 0 3px rgba(0,0,0,.3);}
+.left1{background:#fff;width: 240px;-moz-box-shadow:2px 0 3px rgba(0,0,0,.3);-webkit-box-shadow:2px 0 3px rgba(0,0,0,.3);box-shadow:2px 0 3px rgba(0,0,0,.3);}
 .leftNav{top:10px;right:0;bottom:10px;left:0;overflow-y: auto;padding:10px 0;}
 .leftNav::-webkit-scrollbar {display:none}
 
 /* 1280兼容 */
 @media (max-width: 1280px) {
 .panel{margin:0 15px 30px 15px}
-.left{width: 180px;}
+.left1{width: 180px;}
 .layout-content{left:180px;}
 
 .count > dl{margin: 0 10px;}

resources/static/js/common.js

 var urlPre = "";
 var myModalTrigger;
 const uploadFile = "/uploadFile"
-var TH_DOMAIN = location.host
-var TH_SERVER = 'http://' + TH_DOMAIN + '/api'
+var TH_DOMAIN = '192.168.89.147' // location.host
+var TH_SERVER = 'http://' + TH_DOMAIN + ':8087/api'
 var TH_WS_SERVER = 'ws://'+ TH_DOMAIN +':8888/ws'
 window.onload = function() {
 	$('[data-toggle="tooltip"]').tooltip();

resources/static/js/slidePage/slidePage.min.css

+.slide-container{width:100%;height:100%;overflow:hidden;position:relative}.slide-container .slide-page{position:absolute;top:0;left:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-text-size-adjust:none;-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;background-position:center}.slide-container .slide-page{transform:translate3d(0,100%,0);-webkit-transform:translate3d(0,100%,0)}.slide-container .slide-page.transition{transition:transform .7s cubic-bezier(.55,.085,0,.99);-webkit-transition:transform .7s cubic-bezier(.55,.085,0,.99)}

resources/static/less/ext-page.less

 }
 
 .dashboard-page {
+  position: relative;
   background-color: #081a48;
+  height: 100vh;
+  overflow: hidden;
   scrollbar-width: none; /* firefox */
   -ms-overflow-style: none; /* IE 10+ */
 
     display: none;
   }
 
+  .carousel-container, .act-list {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   .dash-carousel {
     box-sizing: border-box;
     // 94 = header height
-    height: 100vh;
+    // height: 100vh;
     margin: 0;
     overflow: hidden;
 
-    .left {
-      background: transparent;
-      background-image: linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0.3) 0%,
-        rgba(0, 0, 0, 0.0001) 100%
-      );
-      width: 10%;
-      box-shadow: none;
-    }
-
-    .left, .right {
-      height: calc(100% - 100px);
-    }
-
     .item {
-      &.left {
-        width: auto;
-      }
-
       height: 100vh;
       .item-image {
         height: 100%;
   }
 
   .act-list {
-    margin: 96px 0;
+    // height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
     .row {
-      height: calc(25vh - 64px);
+      width: 100%;
+      height: calc(35vh - 64px);
       padding: 0 80px;
 
       & + .row {

resources/templates/common/common_menu.html

   <script>
     function showSider(visible) {
       if (visible) {
-        $('.layout .left').attr("style","display: block");
+        $('.layout .left1').attr("style","display: block");
       } else {
-        $('.layout .left').attr("style","display: none");
+        $('.layout .left1').attr("style","display: none");
       }
     }
 

resources/templates/index.html

 		<div th:replace="common/common_menu::nav-menu"></div>
 	</div>
 	<div class="layout">
-		<div class="left" style="display: none;">
+		<div class="left1" style="display: none;">
 			<div class="leftNav">
 				<nav class="menu" data-ride="menu">
 					<ul id="treeMenu" class="tree tree-menu nav-menu-submenu nav-menu-report active" data-ride="tree">

resources/templates/main.html

 <!DOCTYPE html>
 <html>
 <head
-	th:replace="common/common_header::common_header(~{},~{},~{::style},~{::script},'')">
+	th:replace="common/common_header::common_header(~{},~{::link},~{::style},~{::script},'')">
 <script th:src="@{/js/chart/echarts.min.js}" type="text/javascript"></script>
 <script th:src="@{/js/chart/chart.js}"></script>
 <script th:src="@{/js/chart/pie.js}"></script>
 <script th:src="@{/js/chart/bar.js}"></script>
 <script th:src="@{/js/chart/line.js}"></script>
+<link rel="stylesheet" th:href="@{/js/slidePage/slidePage.min.css}">
+<script th:src="@{/js/slidePage/slidePage.min.js}"></script>
 <style>
 .panel{margin:30px 0 0 30px;}
 .panelGroup .panel>.panel-body{height: 315px;overflow: hidden;}

resources/templates/main/dashboard.html

 <!DOCTYPE html>
 <html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
-<div id="t1" th:fragment="main-dashboard" class="dashboard-page" style="display: none;">
-  <div>
+<div id="t1" th:fragment="main-dashboard" class="dashboard-page slide-container" style="display: none;">
+  <div class="slide-page carousel-container">
     <div id="myNiceCarousel" class="dash-carousel carousel slide">
       <!-- 轮播项目 -->
       <div class="carousel-inner">
     </div>
   
   </div>
-  <div class="act-list">
+  <div class="slide-page act-list">
     <div class="row">
       <div class="col-md-3" onclick="onAction('nav-menu-report','年度任务汇总')">
         <div class="act-bg">
     }
     
     function loadPage2() {
+      new slidePage({ slideContainer: '.slide-container' });
+
       var imageTpl = [
         '<div class="item {active}">',
         '  <div class="item-image" style="background-image: url({src});"></div>',