shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]修改表格样式

dev
邵佳豪 3 years ago
parent
d8e76dc332
commit
767c86db02
3 changed files with 129 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 176
      src/app/pages/plan-admin/plan-admin.component.html
  2. 10
      src/app/pages/plan-admin/plan-admin.component.scss
  3. 76
      src/theme.less

176
src/app/pages/plan-admin/plan-admin.component.html
Unescape View File

@ -1,97 +1,97 @@
<!-- <p>站点预案!</p> -->
<div class="stationPlanBox" id="stationPlanBox">
<div class="orbox">
<div class="title">
<app-title [name]="'组织机构'"></app-title>
</div>
<div class="or">
<nz-tree [nzExpandedKeys]="nzExpandedKeys" [nzShowExpand]="false" #nzTreeComponent
[nzExpandAll]="nzExpandAll" nzBlockNode [nzData]="nodes" (nzClick)="activeNode($event)"
[nzTreeTemplate]="nzTreeTemplate" [nzMultiple]="false"></nz-tree>
<ng-template #nzTreeTemplate let-node let-origin="origin">
<ng-container *ngIf="node.origin.parentId == null; else elseTemplate">
<img style="vertical-align: bottom;" src="../../../assets/images/flower.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img src="../../../assets/images/point.png" alt="">
</ng-template>
<span>{{ node.title }}</span>
<img (click)="expand($event,node)" *ngIf="node.isExpanded && node.children.length != 0 "
src="../../../assets/images/expand.png" alt="">
<img (click)="expand($event,node)" *ngIf="!node.isExpanded && node.children.length != 0"
src="../../../assets/images/unexpand.png" alt="">
</ng-template>
</div>
<div class="orbox">
<div class="title">
<app-title [name]="'组织机构'"></app-title>
</div>
<div class="stationList">
<div class="title">
<app-title [name]="'站点管理'"></app-title>
</div>
<div class="search">
<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>
<div class="or">
<nz-tree [nzExpandedKeys]="nzExpandedKeys" [nzShowExpand]="false" #nzTreeComponent [nzExpandAll]="nzExpandAll"
nzBlockNode [nzData]="nodes" (nzClick)="activeNode($event)" [nzTreeTemplate]="nzTreeTemplate"
[nzMultiple]="false"></nz-tree>
<ng-template #nzTreeTemplate let-node let-origin="origin">
<ng-container *ngIf="node.origin.parentId == null; else elseTemplate">
<img style="vertical-align: bottom;" src="../../../assets/images/flower.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img src="../../../assets/images/point.png" alt="">
</ng-template>
<span>{{ node.title }}</span>
<img (click)="expand($event,node)" *ngIf="node.isExpanded && node.children.length != 0 "
src="../../../assets/images/expand.png" alt="">
<img (click)="expand($event,node)" *ngIf="!node.isExpanded && node.children.length != 0"
src="../../../assets/images/unexpand.png" alt="">
</ng-template>
</div>
</div>
<div class="stationList">
<div class="title">
<app-title [name]="'站点管理'"></app-title>
</div>
<div class="search">
<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">
<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">
<nz-table #basicTable [nzData]="list" [nzShowPagination]="false">
<thead>
<tr>
<th>加油站名称</th>
<th>区域</th>
<th>所属公司</th>
<th>联系人</th>
<th>联系电话</th>
<th>油站等级</th>
<th>经营品类</th>
<th>油机数量</th>
<th>车道数量</th>
<th>油罐容积</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<th>加油站名称</th>
<th>区域</th>
<th>所属公司</th>
<th>联系人</th>
<th>联系电话</th>
<th>油站等级</th>
<th>经营品类</th>
<th>油机数量</th>
<th>车道数量</th>
<th>油罐容积</th>
<th (click)="look()">查看</th>
</tr>
</tbody>
</nz-table>
<nz-table #basicTable [nzData]="list" [nzShowPagination]="false">
<thead>
<tr>
<th style="text-align: center;">加油站名称</th>
<th>区域</th>
<th>所属公司</th>
<th>联系人</th>
<th>联系电话</th>
<th>油站等级</th>
<th>经营品类</th>
<th>油机数量</th>
<th>车道数量</th>
<th>油罐容积</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<th style="text-align: center;">加油站名称</th>
<th>区域</th>
<th>所属公司</th>
<th>联系人</th>
<th>联系电话</th>
<th>油站等级</th>
<th>经营品类</th>
<th>油机数量</th>
<th>车道数量</th>
<th>油罐容积</th>
<th class="look" (click)="look()" style="cursor:pointer;color: #36A2FF">查看</th>
</tr>
</tbody>
</nz-table>
<div class="pagination">
<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"
nzShowQuickJumper></nz-pagination>
<ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template>
</div>
</div>
<div class="pagination">
<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"
nzShowQuickJumper></nz-pagination>
<ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template>
</div>
</div>
</div>
</div>
</div>

10
src/app/pages/plan-admin/plan-admin.component.scss
Unescape View File

@ -29,7 +29,7 @@
nz-tree {
background: none;
color: #C4E2FC;
color: #c4e2fc;
}
}
}
@ -57,7 +57,7 @@
input {
background: none;
border: 1px solid #91CCFF;
border: 1px solid #91ccff;
color: #fff;
}
@ -70,8 +70,6 @@
margin-left: 16px;
}
}
}
.tablebox {
@ -80,9 +78,6 @@
flex-direction: column;
align-items: center;
overflow: hidden;
.pagination {
margin-top: 26px;
display: flex;
@ -93,6 +88,5 @@
::-webkit-scrollbar {
width: 0px;
}
}
}

76
src/theme.less
Unescape View File

@ -298,52 +298,54 @@
margin-left: 0px;
}
}
.ant-table table{
.ant-table table {
border-collapse: collapse;
}
nz-table {
flex: 1;
width: 96%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ant-table {
background: none;
}
.ant-table {
background: none;
}
.ant-table-thead>tr {
height: 40px;
line-height: 40px;
background: rgba(35, 153, 255, 0.2);
border: 1px solid rgba(35, 217, 255, 0.4);
box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset;
}
thead {
tr {
height: 40px;
line-height: 40px;
background: rgba(35, 153, 255, 0.2);
border: 1px solid rgba(35, 217, 255, 0.4);
box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset;
th {
text-align: left;
padding: 0;
background: none;
color: #23D9FF;
}
}
}
.ant-table-thead>tr>th {
background: none;
border-bottom: none;
padding: 0;
color: #23D9FF;
}
tbody {
flex: 1;
overflow-y: auto;
tr {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #0d3761;
color: #91CCFF;
.look {
color: #36A2FF;
cursor: pointer;
}
}
}
.ant-table-tbody>tr {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #0d3761;
}
.ant-table-tbody>tr>th {
font-weight: 400;
font-family: synormal;
background: none;
border-bottom: none;
padding: 0;
color: #91CCFF;
}
.look {
color: #36A2FF;
cursor: pointer;
}
}

Write Preview
Loading…
Cancel
Save