17 changed files with 509 additions and 58 deletions
@ -1 +1,63 @@
|
||||
<p>file-license-list works!</p> |
||||
<div class="box"> |
||||
<div class="search"> |
||||
<div class="legendbox"> |
||||
</div> |
||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input required nz-input type="text" formControlName="name" placeholder="请输入加油站名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon |
||||
[nzType]="'sync'"></i>重置</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
<div class="tablebox" id="tablebox"> |
||||
<nz-table [nzLoading]="tableSpin" [nzPageSize]='999' #headerTable [nzData]="list" [nzShowPagination]="false" |
||||
[nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed"> |
||||
<thead> |
||||
<tr> |
||||
<th style="text-align: center">序号</th> |
||||
<th *ngFor="let item of headerTable.data[0]"> |
||||
{{item.name}} |
||||
</th> |
||||
|
||||
</tr> |
||||
</thead> |
||||
<tbody id="table"> |
||||
<tr *ngFor="let item of headerTable.data;let key = index"> |
||||
<td style="text-align: center">{{key + 1}}</td> |
||||
|
||||
<td *ngFor="let i of item"> |
||||
<ng-container *ngIf="i.value; else elseTemplate"> |
||||
<ng-container *ngIf="i.value.validityType; else elseTemplate"> |
||||
<span> |
||||
{{i.value.validityType}} |
||||
</span> |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
{{i.value}} |
||||
</ng-template> |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
/ |
||||
</ng-template> |
||||
|
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
|
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,79 @@
|
||||
.search { |
||||
box-sizing: border-box; |
||||
padding-left: 38px; |
||||
padding-right: 35px; |
||||
width: 100%; |
||||
height: 32px; |
||||
margin: 12px 0; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.legendbox { |
||||
display: flex; |
||||
align-items: center; |
||||
color: #FFFFFF; |
||||
flex: 1; |
||||
|
||||
.legendItem { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-right: 12px; |
||||
|
||||
div { |
||||
width: 8px; |
||||
height: 8px; |
||||
margin-right: 3px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
form { |
||||
flex: 1; |
||||
height: 32px; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
input { |
||||
background: none; |
||||
border: 1px solid #91ccff; |
||||
color: #fff; |
||||
} |
||||
|
||||
.searchParams { |
||||
width: 35%; |
||||
} |
||||
|
||||
.btn { |
||||
margin-left: 16px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.tablebox { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.green { |
||||
color: #4BFFD4; |
||||
} |
||||
|
||||
.yellow { |
||||
color: #FFBD4B; |
||||
} |
||||
|
||||
.red { |
||||
color: #FF4B65; |
||||
} |
||||
Loading…
Reference in new issue