windy/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhouyuejun
2018-11-15 18:29:19 +08:00
parent f30867e92b
commit 11cb7c366a
8 changed files with 97 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/main/main.component.html
+22 -3
View File
@@ -14,7 +14,7 @@
<input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
<span>查找定位</span>
</label>
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter)="inputEnter()">
</div>
<div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1">
<!-- <button type="button" class="btn btn-info mr-3">灯光关闭</button>
@@ -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']}">
<td>{{i+1}}</td>
<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
+7 -2
View File
@@ -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
+11 -2
View File
@@ -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
+3
View File
@@ -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
+14 -11
View File
@@ -1,15 +1,9 @@
<div class="wrapper">
<div class="left-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">
<div class="header-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>
<router-outlet></router-outlet>
</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
+39 -32
View File
@@ -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;
}
}
}
src/app/pages/pages.component.ts
-12
View File
@@ -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
+1 -1
View File
@@ -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;
}
/*添加手形*/