From 11cb7c366acbe1ae8250f06009fc09840ea27041 Mon Sep 17 00:00:00 2001 From: zhouyuejun <505127606@qq.com> Date: Thu, 15 Nov 2018 18:29:19 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E5=85=B1=E9=83=A8=E5=88=86=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9=E5=8F=8Atable=E8=A1=A8=E5=A4=B4?= =?UTF-8?q?=E5=9B=BA=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/main/main.component.html | 25 +++++++-- src/app/pages/main/main.component.scss | 9 +++- src/app/pages/main/main.component.ts | 13 ++++- src/app/pages/main/main.module.ts | 3 ++ src/app/pages/pages.component.html | 25 +++++---- src/app/pages/pages.component.scss | 71 ++++++++++++++------------ src/app/pages/pages.component.ts | 12 ----- src/app/theme/scss/base.scss | 2 +- 8 files changed, 97 insertions(+), 63 deletions(-) diff --git a/src/app/pages/main/main.component.html b/src/app/pages/main/main.component.html index b8ad70b..a8aff26 100644 --- a/src/app/pages/main/main.component.html +++ b/src/app/pages/main/main.component.html @@ -14,7 +14,7 @@ 查找定位 - +
diff --git a/src/app/pages/main/main.component.scss b/src/app/pages/main/main.component.scss index 61340d4..dba3c39 100644 --- a/src/app/pages/main/main.component.scss +++ b/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; diff --git a/src/app/pages/main/main.component.ts b/src/app/pages/main/main.component.ts index 40c8a99..e65d89d 100644 --- a/src/app/pages/main/main.component.ts +++ b/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"); } /** diff --git a/src/app/pages/main/main.module.ts b/src/app/pages/main/main.module.ts index 2a15960..4fd223c 100644 --- a/src/app/pages/main/main.module.ts +++ b/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 ], diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 60d3ed1..2297d57 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1,15 +1,9 @@
-
-
- -

航班信息查询系统

-
-
- -
-
-
+
- +
+
+
+
+ +
+
+
+ +
\ No newline at end of file diff --git a/src/app/pages/pages.component.scss b/src/app/pages/pages.component.scss index a93eb5e..a84adf0 100644 --- a/src/app/pages/pages.component.scss +++ b/src/app/pages/pages.component.scss @@ -3,37 +3,8 @@ .wrapper { width: 100%; height: 100%; - .left-wrapper { - height: 100%; - 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; + overflow: hidden; + .header-wrapper { .navbar { height: 66px; background-color: rgb(46, 59, 76) !important; @@ -45,7 +16,7 @@ cursor: pointer; } // .bg-dark{ - + // } .nav-icon { padding: 0.1rem 0.75rem; @@ -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; + } + } } diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index f669ae7..c7db67f 100644 --- a/src/app/pages/pages.component.ts +++ b/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) } }) diff --git a/src/app/theme/scss/base.scss b/src/app/theme/scss/base.scss index 5a2c147..2ad3122 100644 --- a/src/app/theme/scss/base.scss +++ b/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; } /*添加手形*/