chenjingyu
4 years ago
12 changed files with 375 additions and 18 deletions
@ -0,0 +1,35 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2021-05-20 16:11:57 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-05-20 17:05:21 |
||||
--> |
||||
<div class="box"> |
||||
<div class="top"> |
||||
<span style="font-size: 20px;">新增预案模板</span> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">预案名称:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input matInput placeholder="请输入预案名称" name="companyName" autocomplete="off" [(ngModel)]="unitname" required> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">预案级别:</label> |
||||
<mat-form-field> |
||||
<mat-select placeholder='请选择预案级别' name="unittype" [(ngModel)]="level" required> |
||||
<mat-option value="Ⅲ级">Ⅲ级</mat-option> |
||||
<mat-option value="Ⅳ级">Ⅳ级</mat-option> |
||||
<mat-option value="Ⅴ级">Ⅴ级</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="bottom"> |
||||
<button mat-raised-button color="primary" (click)='newplan()'>确定</button> |
||||
<button mat-raised-button style="margin-left: 50px;" (click)="close()">取消</button> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,77 @@
|
||||
.box{ |
||||
height: 100%; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.queryField { |
||||
margin: 3px 5px; |
||||
input { |
||||
width: 100%; |
||||
height: 18px; |
||||
line-height: 18px; |
||||
border-radius: 3px;} |
||||
button{ |
||||
width: 140px; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
.top{ |
||||
width: 100%; |
||||
margin-bottom: 20px; |
||||
span{ |
||||
color: #2196F3; |
||||
margin-left: 100px; |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
.bottom{ |
||||
margin: 10% 30px; |
||||
button{ |
||||
width: 80px; |
||||
height: 36px; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
.fileinput-button { |
||||
width: 148px; |
||||
height: 36px; |
||||
top: 10px; |
||||
position: relative; |
||||
display: inline-block; |
||||
overflow: hidden; |
||||
background-color: #2196F3; |
||||
color: #FFFFFF; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.fileinput-button input{ |
||||
position: absolute; |
||||
right: 0px; |
||||
top: 0px; |
||||
opacity: 0; |
||||
-ms-filter: 'alpha(opacity=0)'; |
||||
} |
||||
|
||||
.uping{ |
||||
display:flex; |
||||
.upclass{ |
||||
margin-left: 3px; |
||||
height: 30px; |
||||
} |
||||
.progress{ |
||||
position: relative; |
||||
top:3% |
||||
} |
||||
button{ |
||||
width: 80px; |
||||
height: 30px; |
||||
font-size: 10px; |
||||
margin-top: 5px; |
||||
} |
||||
span{ |
||||
font-size: 10px; |
||||
position: relative; |
||||
top: 8px; |
||||
} |
||||
} |
||||
@ -1 +1,34 @@
|
||||
<p>plan-template works!</p> |
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2021-05-19 15:50:20 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-05-20 17:03:52 |
||||
--> |
||||
<div class="box"> |
||||
<div class="boxleft"> |
||||
<div class="lefthead"> |
||||
<div class="leftheadone"> |
||||
<span>预案列表</span> |
||||
</div> |
||||
<div class="leftheadtwo" (click)='addKeyunit()'> |
||||
<img src="../../../assets/images/add.png"> |
||||
<span>新增</span> |
||||
</div> |
||||
</div> |
||||
<div class="leftbox"> |
||||
<div class="leftbody" *ngFor="let item of newleftTabledata"> |
||||
<div class="bodyname"> |
||||
<span>{{item.name}}</span> |
||||
</div> |
||||
<div class="bodycz"> |
||||
<span>{{item.level}}</span> |
||||
<img src="../../../assets/images/updatehui.png"> |
||||
<img src="../../../assets/images/deletehui.png"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="boxright"></div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,97 @@
|
||||
/* |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2021-05-19 15:50:20 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-05-20 15:46:44 |
||||
*/ |
||||
.box{ |
||||
height: 97%; |
||||
width: 100%; |
||||
padding: 10px; |
||||
background-color: #F7F8FA; |
||||
display: flex; |
||||
.boxleft{ |
||||
width: 20%; |
||||
height: 100%; |
||||
background-color: #FFFFFF; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.lefthead{ |
||||
height: 50px; |
||||
width: 100%; |
||||
display: flex; |
||||
border-bottom: 1px solid #F7F8FA; |
||||
span{ |
||||
font-size: 16px; |
||||
} |
||||
.leftheadone{ |
||||
width: 40%; |
||||
height: 100%; |
||||
span{ |
||||
margin: 10px 10px; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
} |
||||
} |
||||
.leftheadtwo{ |
||||
width: 20%; |
||||
height: 100%; |
||||
margin-left: 50%; |
||||
cursor: pointer; |
||||
img{ |
||||
position: relative; |
||||
top: 2px; |
||||
} |
||||
span{ |
||||
//margin-left: 70%; |
||||
//margin: 10px 10px; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
} |
||||
} |
||||
} |
||||
.leftbox{ |
||||
height: 100%; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.leftbody{ |
||||
width: 100%; |
||||
height: 40px; |
||||
display: flex; |
||||
.bodyname{ |
||||
height: 40px; |
||||
width: 60%; |
||||
span{ |
||||
font-size: 16px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
.bodycz{ |
||||
height: 40px; |
||||
width: 40%; |
||||
img{ |
||||
margin-left: 10px; |
||||
} |
||||
span{ |
||||
color: #B2BEC7; |
||||
font-size: 16px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
margin-left: 30%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.boxright{ |
||||
margin-left: 10px; |
||||
height: 100%; |
||||
width: 78%; |
||||
background-color: #FFFFFF; |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 553 B |
|
After Width: | Height: | Size: 366 B |
|
After Width: | Height: | Size: 335 B |
|
After Width: | Height: | Size: 345 B |
Loading…
Reference in new issue