feats

resources/static/css/common.css

@@ -177,6 +177,9 @@
   border: 0;
   color: #FFFFFF;
 }
+.chart-card.panel .panel-heading .selectGroup select option {
+  color: #222;
+}
 .chart-card.panel .panel-heading img {
   width: 28px;
   height: 28px;
@@ -342,39 +345,46 @@
   background: rgba(66, 118, 245, 0.2);
 }
 .dashboard-page {
-  height: 100%;
   background-color: #081A48;
+  scrollbar-width: none;
+  /* firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
 }
-.dashboard-page > div {
-  height: 50%;
-  overflow: hidden;
+.dashboard-page::-webkit-scrollbar {
+  display: none;
 }
 .dashboard-page .dash-carousel {
-  max-width: 1200px;
-  margin: 0 auto;
-  height: 100%;
-}
-.dashboard-page .dash-carousel .ratio-static {
-  height: 0;
-  padding-bottom: 32%;
-  position: relative;
+  box-sizing: border-box;
+  height: 100vh;
+  margin: 0;
   overflow: hidden;
 }
-.dashboard-page .dash-carousel .ratio-static > div {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+.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 .item {
+  height: 100vh;
 }
-.dashboard-page .dash-carousel .ratio-static .left {
+.dashboard-page .dash-carousel .item.left {
   width: auto;
-  background: transparent;
-  box-shadow: none;
+}
+.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;
+}
+.dashboard-page .act-list {
+  margin: 96px 0;
 }
 .dashboard-page .act-list .row {
-  height: calc(50% - 64px);
+  height: calc(25vh - 64px);
   padding: 0 80px;
 }
 .dashboard-page .act-list .row + .row {

resources/static/css/public.css

@@ -2,6 +2,8 @@
 /* CSS Document */
 
 *{padding:0;margin:0;font-family:"微软雅黑";font-size: 16px;font-weight:400;}
+html { scrollbar-width: none; -ms-overflow-style: none; }
+html::-webkit-scrollbar { display: none; }
 html,body{ width:100%; height:100%;}
 body{background:#edf1fa;}
 

resources/static/less/chart-card.less

@@ -119,6 +119,10 @@
           background: transparent;
           border: 0;
           color: #FFFFFF;
+
+          option {
+            color: #222;
+          }
         }
       }
 

resources/static/less/ext-page.less

@@ -121,47 +121,50 @@
 }
 
 .dashboard-page {
-  height: 100%;
   background-color: #081A48;
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
 
-  & > div {
-    height: 50%;
-    overflow: hidden;
+  &::-webkit-scrollbar {
+    display: none;
   }
 
   .dash-carousel {
-    max-width: 1200px;
-    margin: 0 auto;
-    height: 100%;
+    box-sizing: border-box;
+    // 94 = header height
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
 
-    .ratio-static {
-      height: 0;
-      padding-bottom: 32%; // 大约 10:3
-      position: relative;
-      overflow: hidden;
+    .left {
+      background: transparent;
+      background-image: linear-gradient(to right, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .0001) 100%);
+      width: 10%;
+      box-shadow: none;
+    }
 
-      & > div {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: transparent;
+    .item {
+      &.left {
+        width: auto;
       }
 
-      .left {
-        width: auto;
-        background: transparent;
-        box-shadow: none;
+      height: 100vh;
+      .item-image {
+        height: 100%;
+        width: 100%;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-origin: border-box;
+        background-size: contain;
       }
     }
-
   }
   
-
   .act-list {
+    margin: 96px 0;
+
     .row {
-      height: calc(50% - 64px);
+      height: calc(25vh - 64px);
       padding: 0 80px;
 
       & + .row {

resources/templates/main.html

@@ -16,7 +16,7 @@
 body { background-color: #081A48; }
 </style>
 </head>
-<body>
+<body class="main-page">
 	<div th:replace="main/data::main-data"></div>
 	<div th:replace="main/dashboard::main-dashboard"></div>
 </body>

resources/templates/main/dashboard.html

@@ -2,11 +2,7 @@
 <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 class="dash-carousel">
-      <div class="ratio-static">
-        
-  
-    <div id="myNiceCarousel" class="carousel slide">
+    <div id="myNiceCarousel" class="dash-carousel carousel slide">
       <!-- 轮播项目 -->
       <div class="carousel-inner">
       </div>
@@ -19,8 +15,6 @@
         <span class="icon icon-chevron-right"></span>
       </a>
     </div>
-      </div>
-    </div>
   
   </div>
   <div class="act-list">
@@ -183,14 +177,21 @@
     function loadPage2() {
       var TH_SERVER = 'http://192.168.89.147:8087/api'
 
-      var itemTpl = [
+      var imageTpl = [
         '<div class="item {active}">',
-        '  <img alt="" src="{src}">',
+        '  <div class="item-image" style="background-image: url({src});"></div>',
         '  <div class="carousel-caption">',
         '    <h3>{title}</h3>',
         '  </div>',
         '</div>',
       ].join('');
+      var videoTpl = [
+        '<div class="item {active}">',
+        '  <div class="item-video">',
+        '    <video src="{src}" controls="controls"></video>',
+        '  </div>',
+        '</div>',
+      ].join('');
 
       $.ajax({
         url: TH_SERVER+'/banner?pageNum=1&pageSize=20',
@@ -200,15 +201,17 @@
           if (list && list.length > 0) {
             var html = list.map(function(item, index) {
               var active = index == 0 ? 'active' : '';
-              var src = item.image;
+              var src = item.type === '1' ? item.image : item.video;
               var title = item.desc || '';
+              var tpl = item.type === '1' ? imageTpl : videoTpl;
 
-              return itemTpl.replace('{active}', active).replace('{src}', src).replace('{title}', title);
+              return tpl.replace('{active}', active).replace('{src}', src).replace('{title}', title);
             }).join('')
 
             $("#myNiceCarousel .carousel-inner").children().remove();
             $("#myNiceCarousel .carousel-inner").append(html);
             $('#myNiceCarousel').carousel()
+            // $('#myNiceCarousel .left').on('click', console.log);
           }
         }
       })

resources/templates/main/data.html

@@ -120,27 +120,25 @@
            dataType : 'json',
             success : function(data) {
  
-             (function mockData(dt) {
-               function rand() {
-                 return Math.floor(100 * Math.random() + 10);
-               }
+            //  (function mockData(dt) {
+            //    function rand() {
+            //      return Math.floor(100 * Math.random() + 10);
+            //    }
  
-               dt.countData.ageArrNum = dt.countData.ageArrNum.split(',').map(rand).join(',')
-               dt.countData.devArrNum = dt.countData.devArrNum.split(',').map(rand).join(',')
-               dt.countData.guaArrNum = dt.countData.guaArrNum.split(',').map(rand).join(',')
-               dt.countData.eduNum = dt.countData.eduNum.split(',').map(rand).join(',')
-               dt.countData.guaAbiJson.clzs = rand()
-               dt.countData.guaAbiJson.dcztssgynl = rand()
-               dt.countData.guaAbiJson.yjdcztssgynl = rand()
-               dt.countData.guaAbiJson.yjztssgynl = rand()
-               dt.countData.guaAbiJson.ztssgynl = rand()
-               dt.countData.guaAbiJson.ztzsgynl = rand()
-               dt.yearTask = Object.keys(dt.yearTask).map((key) => {
-                 return {[key]: rand()}
-               }).reduce((acc, item) => ({ ...acc, ...item }), {})
-             })(data)
- 
-             console.log(data)
+            //    dt.countData.ageArrNum = dt.countData.ageArrNum.split(',').map(rand).join(',')
+            //    dt.countData.devArrNum = dt.countData.devArrNum.split(',').map(rand).join(',')
+            //    dt.countData.guaArrNum = dt.countData.guaArrNum.split(',').map(rand).join(',')
+            //    dt.countData.eduNum = dt.countData.eduNum.split(',').map(rand).join(',')
+            //    dt.countData.guaAbiJson.clzs = rand()
+            //    dt.countData.guaAbiJson.dcztssgynl = rand()
+            //    dt.countData.guaAbiJson.yjdcztssgynl = rand()
+            //    dt.countData.guaAbiJson.yjztssgynl = rand()
+            //    dt.countData.guaAbiJson.ztssgynl = rand()
+            //    dt.countData.guaAbiJson.ztzsgynl = rand()
+            //    dt.yearTask = Object.keys(dt.yearTask).map((key) => {
+            //      return {[key]: rand()}
+            //    }).reduce((acc, item) => ({ ...acc, ...item }), {})
+            //  })(data)
  
               $("#totalTask").text(data.totalTask);
               $("#totalOrg").text(data.totalOrg);