公共部分样式修改及table表头固定

src/app/pages/main/main.component.html

@@ -145,13 +145,32 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)" [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
+                        <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
+                            [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
                             <td>{{i+1}}</td>
                             <td></td>
                             <td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
                         </tr>
                     </tbody>
                 </table>
+
+                <!-- <nz-table #nzTable nzBordered [nzData]="render_data" [nzFrontPagination]="false" [nzScroll]="{ y: '700px' }">
+                    <thead>
+                        <tr>
+                            <th nzWidth="50px">序号</th>
+                            <th nzWidth="80px">重要提示</th>
+                            <th nzWidth="80px" *ngFor="let airline_col of col_lists">{{airline_col.COL_CN}}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let airline_row of nzTable.data;let i = index" (click)="selectRow(airline_row)"
+                            [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
+                            <td>{{i+1}}</td>
+                            <td></td>
+                            <td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
+                        </tr>
+                    </tbody>
+                </nz-table> -->
             </div>
         </div>
     </div>

src/app/pages/main/main.component.scss

@@ -1,6 +1,7 @@
 .main-page {
     width: 100%;
-    height: calc(100% - 66px);
+    height: 100%;
+    overflow-y: scroll;
     padding: 15px 10px;
     background-color: #fff;
     .page-content {
@@ -31,7 +32,8 @@
                 // border: 1px solid #ccc;
                 width: 100%;
                 height: 700px;
-                overflow: scroll;
+                overflow: auto;
+                box-shadow: 0 0 1px .5px #ddd;
                 table{
                     width: max-content;
                     tr{
@@ -40,6 +42,9 @@
                             background: rgb(181, 215, 255);
                         }
                     }
+                    th{
+                        background-color: #ddd;
+                    }
                     th,td{
                         // border: none;
                         text-align: center;

src/app/pages/main/main.component.ts

@@ -103,7 +103,6 @@ export class MainComponent implements OnInit {
     }
 
     ngOnInit() {
-        // console.log($)
         this.changeDetectorRef.detach();
         /* 获取显示列 */
         this.httpCilent.get('/assets/mock-data/airline-col_code.json').subscribe(
@@ -195,6 +194,16 @@ export class MainComponent implements OnInit {
                 this.doSequence(this.combined_data);
             }
         )
+
+        /**
+         * 固定表头
+         */
+        var tableCont = document.querySelector('#table-container')
+        function scrollHandle (){
+          var scrollTop = this.scrollTop;
+          this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
+        }
+        tableCont.addEventListener('scroll',scrollHandle)
     }
 
 
@@ -439,7 +448,7 @@ export class MainComponent implements OnInit {
 
         let tr = $(".selected");
         let objTr = tr[0];
-        $("#table-container").animate({ scrollTop: objTr.offsetTop }, "slow");
+        $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
     }
 
     /**

src/app/pages/main/main.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgZorroAntdModule } from 'ng-zorro-antd'
+
 import { PipesModule } from '../../pipes/pipes.module';
 import { MainComponent } from './main.component';
 import { MainRoutingModule } from './main-routing.module'
@@ -10,6 +12,7 @@ import { MainRoutingModule } from './main-routing.module'
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
+        NgZorroAntdModule,
         PipesModule,
         MainRoutingModule
     ],

src/app/pages/pages.component.html

@@ -1,15 +1,9 @@
 <div class="wrapper">
-    <div class="left-wrapper">
+    <div class="header-wrapper">
-        <div class="left-header">
-            <!-- <img src="/assets/images/logo.png" /> -->
-            <h3>航班信息查询系统</h3>
-        </div>
-        <div class="left-menu">
-            <app-sidebar-menu [data]="menuData"></app-sidebar-menu>
-        </div>
-    </div>
-    <div class="right-wrapper">
         <nav class="navbar navbar-expand navbar-dark bg-dark">
+            <a class="navbar-brand">
+                航班信息查询系统
+            </a>
             <a class="navbar-brand">
                 <i class=" fa fa-dedent"></i>
             </a>
@@ -61,7 +55,16 @@
                 </ul>
             </div>
         </nav>
+    </div>
+    <div class="content-wrapper">
+        <div class="left-wrapper">
+            <div class="left-menu">
+                <app-sidebar-menu [data]="menuData"></app-sidebar-menu>
+            </div>
+        </div>
+        <div class="right-wrapper">
             <router-outlet></router-outlet>
         </div>
+    </div>
 
 </div>

src/app/pages/pages.component.scss

@@ -3,37 +3,8 @@
 .wrapper {
     width: 100%;
     height: 100%;
-    .left-wrapper {
+    overflow: hidden;
-        height: 100%;
+    .header-wrapper {
-        width: 235px;
-        position: fixed;
-        top: 0;
-        left: 0;
-        background-color: rgb(46, 59, 76);
-        float: left;
-        .left-header {
-            height: 66px;
-            border-bottom: 1px solid $gray-900;
-            text-align: center;
-            line-height: 66px;
-            img {
-                width: 32px;
-                height: 32px;
-                vertical-align: middle;
-                margin-right: 12px;
-            }
-            h3 {
-                display: inline-block;
-                color: $white;
-                vertical-align: middle;
-                margin: 0;
-            }
-        }
-    }
-    .right-wrapper {
-        // width: 100%;
-        height: 100%;
-        margin-left: 235px;
         .navbar {
             height: 66px;
             background-color: rgb(46, 59, 76) !important;
@@ -95,4 +66,40 @@
             }
         }
     }
+
+    .content-wrapper {
+        height: 100%;
+        .left-wrapper {
+            height: calc(100% - 66px);
+            width: 235px;
+            position: fixed;
+            top: 66px;
+            left: 0;
+            background-color: rgb(46, 59, 76);
+            padding-bottom: 30px;
+            overflow-y: scroll;
+            .left-header {
+                height: 66px;
+                border-bottom: 1px solid $gray-900;
+                text-align: center;
+                line-height: 66px;
+                img {
+                    width: 32px;
+                    height: 32px;
+                    vertical-align: middle;
+                    margin-right: 12px;
+                }
+                h3 {
+                    display: inline-block;
+                    color: $white;
+                    vertical-align: middle;
+                    margin: 0;
+                }
+            }
+        }
+        .right-wrapper {
+            height: calc(100% - 66px);
+            margin-left: 235px;
+        }
+    }
 }

src/app/pages/pages.component.ts

@@ -193,18 +193,7 @@ export class PagesComponent implements OnInit {
 
         this.router.events.pipe(
             filter(event => event instanceof NavigationEnd),
-            // map(() => this.activatedRoute),
-            // map(route => {
-            //     console.log(route)
-            //     while (route.firstChild) route = route.firstChild;
-            //     console.log('-----')
-            //     return route;
-            // }),
-            // filter(route => route.outlet === 'primary'),
-            // mergeMap(route => route.data)
-
         ).subscribe((event) => {
-            // console.log(event['urlAfterRedirects'])
             this.selectActiveMenu(this.menuData,event['urlAfterRedirects'])
         });
 
@@ -227,7 +216,6 @@ export class PagesComponent implements OnInit {
                     item.isActive = false;
                 }
             }else{
-                // item.isExpend = !item.isExpend;
                 this.selectActiveMenu(item.children,activeRoute)
             }
         })

src/app/theme/scss/base.scss

@@ -5,7 +5,7 @@ body {
     height: 100%;
     font-size: 14px !important;
     font-family: "Roboto", sans-serif !important;
-    background-color: #1190d6 !important;
+    background-color: #fff !important;
     // color: rgb(0, 0, 0) !important;
 }
 /*添加手形*/