8 changed files with 221 additions and 15 deletions
@ -1,2 +1,72 @@ |
|||||||
<button (click)="next()">下一页</button> |
<div class="orbox" id="orbox"> |
||||||
<input placeholder="label" value="value"> |
<div class="topbox"> |
||||||
|
<!-- <div class="lefttop"> |
||||||
|
<span>菜单列表</span> |
||||||
|
|
||||||
|
</div> --> |
||||||
|
<div class="righttop"> |
||||||
|
<!-- <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" nz-input placeholder="请输入单位" formControlName="search" [(ngModel)]="searchValue"/> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
<button style="display: none;" type="submit"></button> |
||||||
|
</nz-form-item> |
||||||
|
</form> --> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" nz-input placeholder="请输入单位" /> |
||||||
|
</nz-input-group> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" nz-input placeholder="请输入单位" /> |
||||||
|
</nz-input-group> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" nz-input placeholder="请输入单位" /> |
||||||
|
</nz-input-group> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<button nz-button nzType="primary"><i nz-icon nzType="plus-circle" nzTheme="outline"></i>查询</button> |
||||||
|
<button nz-button nzType="primary"><i nz-icon nzType="plus-circle" nzTheme="outline"></i>重置</button> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<nz-table [nzBordered]="true" #basicTable [nzData]="listOfData"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<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"> |
||||||
|
<td >{{ data.name }}</td> |
||||||
|
<td ><div style="height: 20px; background: #eee; border-radius: 4px;"> |
||||||
|
<div [ngStyle]="{'width':data.integrity+'%'}" style=" height: 100%; background: #46B783; border-radius: 4px; text-align: center; color: #fff;">{{data.integrity}}%</div> |
||||||
|
</div></td> |
||||||
|
<td >{{ data.organization }}</td> |
||||||
|
<td >{{ data.level }}</td> |
||||||
|
<td >{{ data.nature }}</td> |
||||||
|
<td >{{ data.time }}</td> |
||||||
|
<td >{{ data.addr }}</td> |
||||||
|
<td >{{ data.state }}</td> |
||||||
|
<td > |
||||||
|
<a>查看详情</a> |
||||||
|
|
||||||
|
<a>关闭</a> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</nz-table> |
||||||
|
<!-- <button (click)="next()">下一页</button> |
||||||
|
<input placeholder="label" value="value"> --> |
||||||
|
</div> |
||||||
|
@ -1,6 +1,91 @@ |
|||||||
p{ |
.orbox { |
||||||
color: black; |
width: 100%; |
||||||
} |
height: 100%; |
||||||
input{ |
overflow-y: auto; |
||||||
color: red; |
background: #fff; |
||||||
} |
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.topbox { |
||||||
|
width: 100%; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.lefttop { |
||||||
|
span:nth-child(1) { |
||||||
|
color: #000D21; |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
span:nth-child(2) { |
||||||
|
color: rgba(36, 36, 36, 0.24); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.righttop { |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
button { |
||||||
|
margin-left: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
nz-input-group { |
||||||
|
height: 32px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.treeTitle { |
||||||
|
width: 700px; |
||||||
|
height: 36px; |
||||||
|
line-height: 36px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
color: #000D21; |
||||||
|
box-sizing: border-box; |
||||||
|
padding-left: 30px; |
||||||
|
padding-right: 180px; |
||||||
|
background: rgba(145, 204, 255, 0.2); |
||||||
|
margin: 12px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.nodebox { |
||||||
|
font-size: 15px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.operation { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
|
||||||
|
span { |
||||||
|
margin-left: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
span:nth-child(1), |
||||||
|
span:nth-child(2), |
||||||
|
span:nth-child(3) { |
||||||
|
color: #2399FF; |
||||||
|
} |
||||||
|
|
||||||
|
.grey{ |
||||||
|
color: rgba(0, 13, 33, 0.48)!important; |
||||||
|
} |
||||||
|
.progress{ |
||||||
|
width: 100%; |
||||||
|
height: 20px; |
||||||
|
background: #eee; |
||||||
|
border-radius: 2px; |
||||||
|
.bg{ |
||||||
|
width: 32%; |
||||||
|
height: 100%; |
||||||
|
background: #46B783; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
Loading…
Reference in new issue