Browse Source

[完善]修改表格样式

dev
邵佳豪 3 years ago
parent
commit
767c86db02
  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

@ -1,97 +1,97 @@
<!-- <p>站点预案!</p> --> <!-- <p>站点预案!</p> -->
<div class="stationPlanBox" id="stationPlanBox"> <div class="stationPlanBox" id="stationPlanBox">
<div class="orbox"> <div class="orbox">
<div class="title"> <div class="title">
<app-title [name]="'组织机构'"></app-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> </div>
<div class="stationList"> <div class="or">
<div class="title"> <nz-tree [nzExpandedKeys]="nzExpandedKeys" [nzShowExpand]="false" #nzTreeComponent [nzExpandAll]="nzExpandAll"
<app-title [name]="'站点管理'"></app-title> nzBlockNode [nzData]="nodes" (nzClick)="activeNode($event)" [nzTreeTemplate]="nzTreeTemplate"
</div> [nzMultiple]="false"></nz-tree>
<div class="search"> <ng-template #nzTreeTemplate let-node let-origin="origin">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> <ng-container *ngIf="node.origin.parentId == null; else elseTemplate">
<nz-form-item class="searchParams"> <img style="vertical-align: bottom;" src="../../../assets/images/flower.png" alt="">
<nz-form-control> </ng-container>
<nz-input-group> <ng-template #elseTemplate>
<input required nz-input type="text" formControlName="name" placeholder="请输入名称" /> <img src="../../../assets/images/point.png" alt="">
</nz-input-group> </ng-template>
</nz-form-control> <span>{{ node.title }}</span>
</nz-form-item> <img (click)="expand($event,node)" *ngIf="node.isExpanded && node.children.length != 0 "
<nz-form-item class="btn"> src="../../../assets/images/expand.png" alt="">
<nz-form-control> <img (click)="expand($event,node)" *ngIf="!node.isExpanded && node.children.length != 0"
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button> src="../../../assets/images/unexpand.png" alt="">
</nz-form-control> </ng-template>
</nz-form-item> </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-item class="btn">
<nz-form-control> <nz-form-control>
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon <button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
[nzType]="'sync'"></i>重置</button> [nzType]="'sync'"></i>重置</button>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</form> </form>
</div> </div>
<div class="tablebox"> <div class="tablebox">
<nz-table #basicTable [nzData]="list" [nzShowPagination]="false"> <nz-table #basicTable [nzData]="list" [nzShowPagination]="false">
<thead> <thead>
<tr> <tr>
<th>加油站名称</th> <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>
<th>经营品类</th> <th>经营品类</th>
<th>油机数量</th> <th>油机数量</th>
<th>车道数量</th> <th>车道数量</th>
<th>油罐容积</th> <th>油罐容积</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of basicTable.data"> <tr *ngFor="let data of basicTable.data">
<th>加油站名称</th> <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>
<th>经营品类</th> <th>经营品类</th>
<th>油机数量</th> <th>油机数量</th>
<th>车道数量</th> <th>车道数量</th>
<th>油罐容积</th> <th>油罐容积</th>
<th (click)="look()">查看</th> <th class="look" (click)="look()" style="cursor:pointer;color: #36A2FF">查看</th>
</tr> </tr>
</tbody> </tbody>
</nz-table> </nz-table>
<div class="pagination"> <div class="pagination">
<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate" <nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"
nzShowQuickJumper></nz-pagination> nzShowQuickJumper></nz-pagination>
<ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template> <ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template>
</div> </div>
</div>
</div> </div>
</div> </div>
</div>

10
src/app/pages/plan-admin/plan-admin.component.scss

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

76
src/theme.less

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

Loading…
Cancel
Save