baozw
4 years ago
6 changed files with 506 additions and 102 deletions
@ -1,6 +1,70 @@
|
||||
<div class="box"> |
||||
<div class="title"> |
||||
<div>危化品类型</div> |
||||
<div>危化品分布</div> |
||||
<div (click)="typeSelect(1)" [ngClass]="{'selectedBtn': istype}">危化品类型</div> |
||||
<div (click)="typeSelect(2)" [ngClass]="{'selectedBtn': !istype}">危化品分布</div> |
||||
</div> |
||||
<div class="body"> |
||||
<!-- 危化品类型 --> |
||||
<div class="type" *ngIf="istype"> |
||||
<div class="leftbox"> |
||||
|
||||
</div> |
||||
<div class="rightbox"> |
||||
<table> |
||||
<tr> |
||||
<th>品名</th> |
||||
<th>英文名</th> |
||||
<th>分子式</th> |
||||
<th>分类</th> |
||||
<th>查看详情</th> |
||||
</tr> |
||||
<tr> |
||||
<td>row 1, cell 1</td> |
||||
<td>row 1, cell 2</td> |
||||
<td>row 1, cell 1</td> |
||||
<td>row 1, cell 2</td> |
||||
<td (click)="openDetails()">查看详情</td> |
||||
</tr> |
||||
<tr> |
||||
<td>row 1, cell 1</td> |
||||
<td>row 1, cell 2</td> |
||||
<td>row 1, cell 1</td> |
||||
<td>row 1, cell 2</td> |
||||
<td>查看详情</td> |
||||
</tr> |
||||
<tr> |
||||
<td>row 1, cell 1</td> |
||||
<td>row 1, cell 2</td> |
||||
<td>row 1, cell 1</td> |
||||
<td>row 1, cell 2</td> |
||||
<td>查看详情</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
<!-- 危化品分布 --> |
||||
<div id="size" class="size" *ngIf="!istype"> |
||||
|
||||
</div> |
||||
<!-- 详情弹出框 --> |
||||
<div class="openDiv" *ngIf="isOpen" cdkDragBoundary=".box" cdkDrag> |
||||
<div class="top"> |
||||
<h4>name</h4> |
||||
<!-- <div class="btn" style="right: 33px;" title="最小化">-</div> --> |
||||
<div class="btn" title="关闭" (click)="closeDiv()">x</div> |
||||
</div> |
||||
<div class="details"> |
||||
<div class="left"> |
||||
<div>品名</div> |
||||
<div>理化属性</div> |
||||
<div>危害特性</div> |
||||
<div>灭火剂</div> |
||||
<div>储运注意事项</div> |
||||
</div> |
||||
<div class="right"> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -1,17 +1,141 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
border: 1px solid red; |
||||
// border: 1px solid red; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.title{ |
||||
flex: 2%; |
||||
width: 100%; |
||||
padding-top: 10px; |
||||
div{ |
||||
display: inline-block; |
||||
width: 200px; |
||||
height: 80%; |
||||
border: #26b5fb; |
||||
width: 126px; |
||||
height: 35px; |
||||
line-height: 35px; |
||||
text-align: center; |
||||
border:1px solid #26b5fb; |
||||
color: white; |
||||
cursor: pointer; |
||||
} |
||||
.selectedBtn{ |
||||
background-color: #e88108; |
||||
} |
||||
} |
||||
.body{ |
||||
width: 99.9%; |
||||
height: 100%; |
||||
border:1px solid #26b5fb; |
||||
.type{ |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
.leftbox{ |
||||
height: 100%; |
||||
// flex: 20%; |
||||
width: 16%; |
||||
border-right: 1px solid #26b5fb; |
||||
} |
||||
.rightbox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
table{ |
||||
width: 100%; |
||||
height: 100%; |
||||
tr{ |
||||
width: 100%; |
||||
display: flex; |
||||
height: 38px; |
||||
line-height: 38px; |
||||
th{ |
||||
text-align: center; |
||||
flex: 1; |
||||
color: #f7ba2a; |
||||
font-size: 20px; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
} |
||||
td{ |
||||
text-align: center; |
||||
flex: 1; |
||||
color: white; |
||||
} |
||||
td:last-child{ |
||||
cursor: pointer; |
||||
color: #f0c398; |
||||
} |
||||
td:last-child:hover{ |
||||
color: #f7ba2a; |
||||
} |
||||
} |
||||
tr:first-child{ |
||||
margin-top:6px; |
||||
border-bottom: 1px solid #26b5fb; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.size{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.openDiv{ |
||||
z-index: 3000; |
||||
width:600px; |
||||
height: 500px; |
||||
position: fixed; |
||||
left: 0; |
||||
top:0; |
||||
right: 0; |
||||
bottom: 0; |
||||
margin:auto; |
||||
background: #063659; |
||||
opacity: 0.9; |
||||
border: 1px solid #26b5fb; |
||||
.top{ |
||||
width: 100%; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
text-align: center; |
||||
border-bottom: 1px solid #26b5fb; |
||||
position: relative; |
||||
h4{ |
||||
color: red; |
||||
} |
||||
.btn{ |
||||
width: 30px; |
||||
height: 30px; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
color: #919191; |
||||
cursor: pointer; |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
.details{ |
||||
width: 100%; |
||||
height: 100%; |
||||
.left{ |
||||
height: 100%; |
||||
width: 24%; |
||||
border-right:1px solid #26b5fb; |
||||
div{ |
||||
width: 100%; |
||||
height: 33px; |
||||
line-height: 33px; |
||||
text-align: center; |
||||
color: #8aadce; |
||||
border-bottom:1px solid #999b9d ; |
||||
cursor: pointer; |
||||
} |
||||
div:hover{ |
||||
background: #041f33; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue