H5
/
jgz
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

feats

张延森 2 years ago
parent
979af2257e
commit
1fbf9edc9c
7 changed files with 100 additions and 80 deletions
Unified View Show Diff Stats
  1. 32
    22
      resources/static/css/common.css
  2. 2
    0
      resources/static/css/public.css
  3. 4
    0
      resources/static/less/chart-card.less
  4. 29
    26
      resources/static/less/ext-page.less
  5. 1
    1
      resources/templates/main.html
  6. 14
    11
      resources/templates/main/dashboard.html
  7. 18
    20
      resources/templates/main/data.html

+ 32
- 22
resources/static/css/common.css View File

177 
   border: 0;
 177 
   border: 0;
178 
   color: #FFFFFF;
 178 
   color: #FFFFFF;
179 
 }
 179 
 }
180 
+.chart-card.panel .panel-heading .selectGroup select option {
181 
+  color: #222;
182 
+}
180 
 .chart-card.panel .panel-heading img {
 183 
 .chart-card.panel .panel-heading img {
181 
   width: 28px;
 184 
   width: 28px;
182 
   height: 28px;
 185 
   height: 28px;
342 
   background: rgba(66, 118, 245, 0.2);
 345 
   background: rgba(66, 118, 245, 0.2);
343 
 }
 346 
 }
344 
 .dashboard-page {
 347 
 .dashboard-page {
345 
-  height: 100%;
346 
   background-color: #081A48;
 348 
   background-color: #081A48;
349 
+  scrollbar-width: none;
350 
+  /* firefox */
351 
+  -ms-overflow-style: none;
352 
+  /* IE 10+ */
347 
 }
 353 
 }
348 
-.dashboard-page > div {
349 
-  height: 50%;
350 
-  overflow: hidden;
354 
+.dashboard-page::-webkit-scrollbar {
355 
+  display: none;
351 
 }
 356 
 }
352 
 .dashboard-page .dash-carousel {
 357 
 .dashboard-page .dash-carousel {
353 
-  max-width: 1200px;
354 
-  margin: 0 auto;
355 
-  height: 100%;
356 
-}
357 
-.dashboard-page .dash-carousel .ratio-static {
358 
-  height: 0;
359 
-  padding-bottom: 32%;
360 
-  position: relative;
358 
+  box-sizing: border-box;
359 
+  height: 100vh;
360 
+  margin: 0;
361 
   overflow: hidden;
 361 
   overflow: hidden;
362 
 }
 362 
 }
363 
-.dashboard-page .dash-carousel .ratio-static > div {
364 
-  position: absolute;
365 
-  top: 0;
366 
-  left: 0;
367 
-  width: 100%;
368 
-  height: 100%;
363 
+.dashboard-page .dash-carousel .left {
369 
   background: transparent;
 364 
   background: transparent;
365 
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.0001) 100%);
366 
+  width: 10%;
367 
+  box-shadow: none;
368 
+}
369 
+.dashboard-page .dash-carousel .item {
370 
+  height: 100vh;
370 
 }
 371 
 }
371 
-.dashboard-page .dash-carousel .ratio-static .left {
372 
+.dashboard-page .dash-carousel .item.left {
372 
   width: auto;
 373 
   width: auto;
373 
-  background: transparent;
374 
-  box-shadow: none;
374 
+}
375 
+.dashboard-page .dash-carousel .item .item-image {
376 
+  height: 100%;
377 
+  width: 100%;
378 
+  background-repeat: no-repeat;
379 
+  background-position: center center;
380 
+  background-origin: border-box;
381 
+  background-size: contain;
382 
+}
383 
+.dashboard-page .act-list {
384 
+  margin: 96px 0;
375 
 }
 385 
 }
376 
 .dashboard-page .act-list .row {
 386 
 .dashboard-page .act-list .row {
377 
-  height: calc(50% - 64px);
387 
+  height: calc(25vh - 64px);
378 
   padding: 0 80px;
 388 
   padding: 0 80px;
379 
 }
 389 
 }
380 
 .dashboard-page .act-list .row + .row {
 390 
 .dashboard-page .act-list .row + .row {

+ 2
- 0
resources/static/css/public.css View File

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

+ 4
- 0
resources/static/less/chart-card.less View File

119 
           background: transparent;
 119 
           background: transparent;
120 
           border: 0;
 120 
           border: 0;
121 
           color: #FFFFFF;
 121 
           color: #FFFFFF;
122 
+
123 
+          option {
124 
+            color: #222;
125 
+          }
122 
         }
 126 
         }
123 
       }
 127 
       }
124
128

+ 29
- 26
resources/static/less/ext-page.less View File

121 
 }
 121 
 }
122
122
123 
 .dashboard-page {
 123 
 .dashboard-page {
124 
-  height: 100%;
125 
   background-color: #081A48;
 124 
   background-color: #081A48;
125 
+  scrollbar-width: none; /* firefox */
126 
+  -ms-overflow-style: none; /* IE 10+ */
126
127
127 
-  & > div {
128 
-    height: 50%;
129 
-    overflow: hidden;
128 
+  &::-webkit-scrollbar {
129 
+    display: none;
130 
   }
 130 
   }
131
131
132 
   .dash-carousel {
 132 
   .dash-carousel {
133 
-    max-width: 1200px;
134 
-    margin: 0 auto;
135 
-    height: 100%;
133 
+    box-sizing: border-box;
134 
+    // 94 = header height
135 
+    height: 100vh;
136 
+    margin: 0;
137 
+    overflow: hidden;
136
138
137 
-    .ratio-static {
138 
-      height: 0;
139 
-      padding-bottom: 32%; // 大约 10:3
140 
-      position: relative;
141 
-      overflow: hidden;
139 
+    .left {
140 
+      background: transparent;
141 
+      background-image: linear-gradient(to right, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .0001) 100%);
142 
+      width: 10%;
143 
+      box-shadow: none;
144 
+    }
142
145
143 
-      & > div {
144 
-        position: absolute;
145 
-        top: 0;
146 
-        left: 0;
147 
-        width: 100%;
148 
-        height: 100%;
149 
-        background: transparent;
146 
+    .item {
147 
+      &.left {
148 
+        width: auto;
150 
       }
 149 
       }
151
150
152 
-      .left {
153 
-        width: auto;
154 
-        background: transparent;
155 
-        box-shadow: none;
151 
+      height: 100vh;
152 
+      .item-image {
153 
+        height: 100%;
154 
+        width: 100%;
155 
+        background-repeat: no-repeat;
156 
+        background-position: center center;
157 
+        background-origin: border-box;
158 
+        background-size: contain;
156 
       }
 159 
       }
157 
     }
 160 
     }
158 
-
159 
   }
 161 
   }
160
162
161 
-
162 
   .act-list {
 163 
   .act-list {
164 
+    margin: 96px 0;
165 
+
163 
     .row {
 166 
     .row {
164 
-      height: calc(50% - 64px);
167 
+      height: calc(25vh - 64px);
165 
       padding: 0 80px;
 168 
       padding: 0 80px;
166
169
167 
       & + .row {
 170 
       & + .row {

+ 1
- 1
resources/templates/main.html View File

16 
 body { background-color: #081A48; }
16 
 body { background-color: #081A48; }
17 
 </style>
17 
 </style>
18 
 </head>
18 
 </head>
19 
-<body>
19 
+<body class="main-page">
20 
 	<div th:replace="main/data::main-data"></div>
20 
 	<div th:replace="main/data::main-data"></div>
21 
 	<div th:replace="main/dashboard::main-dashboard"></div>
21 
 	<div th:replace="main/dashboard::main-dashboard"></div>
22 
 </body>
22 
 </body>

+ 14
- 11
resources/templates/main/dashboard.html View File

2 
 <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">
 2 
 <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">
3 
 <div id="t1" th:fragment="main-dashboard" class="dashboard-page" style="display: none;">
 3 
 <div id="t1" th:fragment="main-dashboard" class="dashboard-page" style="display: none;">
4 
   <div>
 4 
   <div>
5 
-    <div class="dash-carousel">
6 
-      <div class="ratio-static">
7 
-
8 
-
9 
-    <div id="myNiceCarousel" class="carousel slide">
5 
+    <div id="myNiceCarousel" class="dash-carousel carousel slide">
10 
       <!-- 轮播项目 -->
 6 
       <!-- 轮播项目 -->
11 
       <div class="carousel-inner">
 7 
       <div class="carousel-inner">
12 
       </div>
 8 
       </div>
19 
         <span class="icon icon-chevron-right"></span>
 15 
         <span class="icon icon-chevron-right"></span>
20 
       </a>
 16 
       </a>
21 
     </div>
 17 
     </div>
22 
-      </div>
23 
-    </div>
24
18
25 
   </div>
 19 
   </div>
26 
   <div class="act-list">
 20 
   <div class="act-list">
183 
     function loadPage2() {
 177 
     function loadPage2() {
184 
       var TH_SERVER = 'http://192.168.89.147:8087/api'
 178 
       var TH_SERVER = 'http://192.168.89.147:8087/api'
185
179
186 
-      var itemTpl = [
180 
+      var imageTpl = [
187 
         '<div class="item {active}">',
 181 
         '<div class="item {active}">',
188 
-        '  <img alt="" src="{src}">',
182 
+        '  <div class="item-image" style="background-image: url({src});"></div>',
189 
         '  <div class="carousel-caption">',
 183 
         '  <div class="carousel-caption">',
190 
         '    <h3>{title}</h3>',
 184 
         '    <h3>{title}</h3>',
191 
         '  </div>',
 185 
         '  </div>',
192 
         '</div>',
 186 
         '</div>',
193 
       ].join('');
 187 
       ].join('');
188 
+      var videoTpl = [
189 
+        '<div class="item {active}">',
190 
+        '  <div class="item-video">',
191 
+        '    <video src="{src}" controls="controls"></video>',
192 
+        '  </div>',
193 
+        '</div>',
194 
+      ].join('');
194
195
195 
       $.ajax({
 196 
       $.ajax({
196 
         url: TH_SERVER+'/banner?pageNum=1&pageSize=20',
 197 
         url: TH_SERVER+'/banner?pageNum=1&pageSize=20',
200 
           if (list && list.length > 0) {
 201 
           if (list && list.length > 0) {
201 
             var html = list.map(function(item, index) {
 202 
             var html = list.map(function(item, index) {
202 
               var active = index == 0 ? 'active' : '';
 203 
               var active = index == 0 ? 'active' : '';
203 
-              var src = item.image;
204 
+              var src = item.type === '1' ? item.image : item.video;
204 
               var title = item.desc || '';
 205 
               var title = item.desc || '';
206 
+              var tpl = item.type === '1' ? imageTpl : videoTpl;
205
207
206 
-              return itemTpl.replace('{active}', active).replace('{src}', src).replace('{title}', title);
208 
+              return tpl.replace('{active}', active).replace('{src}', src).replace('{title}', title);
207 
             }).join('')
 209 
             }).join('')
208
210
209 
             $("#myNiceCarousel .carousel-inner").children().remove();
 211 
             $("#myNiceCarousel .carousel-inner").children().remove();
210 
             $("#myNiceCarousel .carousel-inner").append(html);
 212 
             $("#myNiceCarousel .carousel-inner").append(html);
211 
             $('#myNiceCarousel').carousel()
 213 
             $('#myNiceCarousel').carousel()
214 
+            // $('#myNiceCarousel .left').on('click', console.log);
212 
           }
 215 
           }
213 
         }
 216 
         }
214 
       })
 217 
       })

+ 18
- 20
resources/templates/main/data.html View File

120 
            dataType : 'json',
 120 
            dataType : 'json',
121 
             success : function(data) {
 121 
             success : function(data) {
122
122
123 
-             (function mockData(dt) {
124 
-               function rand() {
125 
-                 return Math.floor(100 * Math.random() + 10);
126 
-               }
123 
+            //  (function mockData(dt) {
124 
+            //    function rand() {
125 
+            //      return Math.floor(100 * Math.random() + 10);
126 
+            //    }
127
127
128 
-               dt.countData.ageArrNum = dt.countData.ageArrNum.split(',').map(rand).join(',')
129 
-               dt.countData.devArrNum = dt.countData.devArrNum.split(',').map(rand).join(',')
130 
-               dt.countData.guaArrNum = dt.countData.guaArrNum.split(',').map(rand).join(',')
131 
-               dt.countData.eduNum = dt.countData.eduNum.split(',').map(rand).join(',')
132 
-               dt.countData.guaAbiJson.clzs = rand()
133 
-               dt.countData.guaAbiJson.dcztssgynl = rand()
134 
-               dt.countData.guaAbiJson.yjdcztssgynl = rand()
135 
-               dt.countData.guaAbiJson.yjztssgynl = rand()
136 
-               dt.countData.guaAbiJson.ztssgynl = rand()
137 
-               dt.countData.guaAbiJson.ztzsgynl = rand()
138 
-               dt.yearTask = Object.keys(dt.yearTask).map((key) => {
139 
-                 return {[key]: rand()}
140 
-               }).reduce((acc, item) => ({ ...acc, ...item }), {})
141 
-             })(data)
142 
-
143 
-             console.log(data)
128 
+            //    dt.countData.ageArrNum = dt.countData.ageArrNum.split(',').map(rand).join(',')
129 
+            //    dt.countData.devArrNum = dt.countData.devArrNum.split(',').map(rand).join(',')
130 
+            //    dt.countData.guaArrNum = dt.countData.guaArrNum.split(',').map(rand).join(',')
131 
+            //    dt.countData.eduNum = dt.countData.eduNum.split(',').map(rand).join(',')
132 
+            //    dt.countData.guaAbiJson.clzs = rand()
133 
+            //    dt.countData.guaAbiJson.dcztssgynl = rand()
134 
+            //    dt.countData.guaAbiJson.yjdcztssgynl = rand()
135 
+            //    dt.countData.guaAbiJson.yjztssgynl = rand()
136 
+            //    dt.countData.guaAbiJson.ztssgynl = rand()
137 
+            //    dt.countData.guaAbiJson.ztzsgynl = rand()
138 
+            //    dt.yearTask = Object.keys(dt.yearTask).map((key) => {
139 
+            //      return {[key]: rand()}
140 
+            //    }).reduce((acc, item) => ({ ...acc, ...item }), {})
141 
+            //  })(data)
144
142
145 
               $("#totalTask").text(data.totalTask);
 143 
               $("#totalTask").text(data.totalTask);
146 
               $("#totalOrg").text(data.totalOrg);
 144 
               $("#totalOrg").text(data.totalOrg);