10 changed files with 566 additions and 15 deletions
@ -1 +1,52 @@
|
||||
<p>details-update-category works!</p> |
||||
<div class="box" id="detailsupdatecategory"> |
||||
<div class="title"> |
||||
<div class="titlecontent"> |
||||
编辑 |
||||
</div> |
||||
<i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<p>证件名称: 营业执照</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>证件编号: Z201800041501</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>证件有效期: 2018.12.02—2025.01.12</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>办理类型: 年度公示</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>有效期类型: 1523天</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>是否年检: 是</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>证件图片: <img src="/api/Objects/sinochemweb/stationPhotos/175/timg.jpg" alt="" |
||||
(click)="viewImg('/api/Objects/sinochemweb/stationPhotos/175/timg.jpg')"></p> |
||||
<div class="cutoffrule"></div> |
||||
<p>审核记录</p> |
||||
<nz-timeline> |
||||
<nz-timeline-item> |
||||
<span style="margin-right: 12px;">2022.04.02</span> |
||||
<span>审核完成</span> |
||||
</nz-timeline-item> |
||||
<nz-timeline-item> |
||||
<span style="margin-right: 12px;">2022.04.02</span> |
||||
<span>审核完成</span> |
||||
</nz-timeline-item> |
||||
<nz-timeline-item> |
||||
<span style="margin-right: 12px;">2022.04.02</span> |
||||
<span>审核完成</span> |
||||
</nz-timeline-item> |
||||
<nz-timeline-item> |
||||
<span style="margin-right: 12px;">2022.04.02</span> |
||||
<span>审核完成</span> |
||||
</nz-timeline-item> |
||||
</nz-timeline> |
||||
<ng-template #soccerTemplate> |
||||
<div class="circle"> |
||||
|
||||
</div> |
||||
</ng-template> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
@ -0,0 +1,54 @@
|
||||
.box { |
||||
.title { |
||||
font-family: sybold; |
||||
width: 100%; |
||||
height: 48px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
.titlecontent { |
||||
width: 100%; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
text-align: center; |
||||
color: #91CCFF; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
i { |
||||
position: absolute; |
||||
right: 12px; |
||||
color: #fff; |
||||
font-size: 18px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
box-sizing: border-box; |
||||
padding: 0 15px; |
||||
max-height: 580px; |
||||
overflow-y: auto; |
||||
.circle { |
||||
width: 8px; |
||||
height: 8px; |
||||
background: linear-gradient(180deg, #36A2FF 0%, #FFFFFF 100%); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
p { |
||||
margin-bottom: 0; |
||||
color: #C4E2FC; |
||||
margin: 12px 0; |
||||
|
||||
img { |
||||
width: 88px; |
||||
height: 56px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
@ -1 +1,68 @@
|
||||
<p>edit-update-category works!</p> |
||||
<div class="box" id="editupdatecategory"> |
||||
<div class="title"> |
||||
<div class="titlecontent"> |
||||
编辑 |
||||
</div> |
||||
<i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i> |
||||
</div> |
||||
<form nz-form [formGroup]="validateForm" class="form"> |
||||
<p>证件名称: 营业执照</p> |
||||
|
||||
<div class="cutoffrule"></div> |
||||
|
||||
<p>证件编号<span style="color: red;">*</span></p> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="number" placeholder="请输入证件编号" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<p>证件有效期<span style="color: red;">*</span></p> |
||||
|
||||
<div class="validity"> |
||||
<label nz-checkbox (ngModelChange)="validityChange($event)" formControlName="isLongTerm"> |
||||
<span>长期</span> |
||||
</label> |
||||
<nz-date-picker *ngIf="isLongTerm" nzPlaceHolder="请选择开始日期"></nz-date-picker> |
||||
<nz-range-picker *ngIf="!isLongTerm"></nz-range-picker> |
||||
</div> |
||||
|
||||
<p> |
||||
<span style="margin-right: 12px;">有效期类型: 1456天</span> |
||||
<span>是否年检: 是</span> |
||||
</p> |
||||
|
||||
<p>办理类型</p> |
||||
|
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-select formControlName="type"> |
||||
<nz-option nzValue="0" nzLabel="年度公示"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<p>证件图片</p> |
||||
|
||||
<div class="uploadDivbox"> |
||||
<div class="uploadDiv" style="margin-right: 12px;"> |
||||
<img *ngIf="imageUrl" style="width: 100%;height: 100%;cursor: pointer;" [src]="imageUrl" alt="" (click)="viewImg(imageUrl)"> |
||||
<input *ngIf="!imageUrl" (change)="filechange($event)" class="fileinput" type="file" name="" |
||||
id=""> |
||||
<button *ngIf="!imageUrl" nz-button [nzLoading]=""><i nz-icon nzType="upload" |
||||
nzTheme="outline"></i>上传图片</button> |
||||
</div> |
||||
<div class="uploadDiv" *ngIf="imageUrl"> |
||||
<input (change)="filechange($event)" class="fileinput" type="file" name="" id=""> |
||||
<button nz-button [nzLoading]=""><i nz-icon nzType="upload" nzTheme="outline"></i>重新上传</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="btnbox"> |
||||
<button nz-button type="submit" class="ok" (click)="ok()">确定</button> |
||||
<button nz-button type="button" class="cancel" (click)="destroyModal()">取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,127 @@
|
||||
.box { |
||||
.title { |
||||
font-family: sybold; |
||||
width: 100%; |
||||
height: 48px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
.titlecontent { |
||||
width: 100%; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
text-align: center; |
||||
color: #91CCFF; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
i { |
||||
position: absolute; |
||||
right: 12px; |
||||
color: #fff; |
||||
font-size: 18px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
p { |
||||
margin-bottom: 0; |
||||
color: #C4E2FC; |
||||
margin: 12px 0; |
||||
} |
||||
|
||||
.form { |
||||
box-sizing: border-box; |
||||
padding: 0 17px; |
||||
|
||||
label { |
||||
color: #C4E2FC; |
||||
margin-right: 6px; |
||||
} |
||||
|
||||
|
||||
|
||||
.validity { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
nz-date-picker { |
||||
flex: .5; |
||||
} |
||||
|
||||
nz-range-picker { |
||||
flex: 1; |
||||
} |
||||
|
||||
.btnbox { |
||||
width: 100%; |
||||
margin-top: 24px; |
||||
margin-bottom: 17px; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
button { |
||||
border-radius: 0px; |
||||
color: #91CCFF; |
||||
} |
||||
|
||||
button:nth-child(2) { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
.ok { |
||||
background: rgba(0, 129, 255, 0.4); |
||||
} |
||||
|
||||
.cancel { |
||||
border: 1px solid #C4E2FC; |
||||
background: #0c1e38; |
||||
color: rgba(99, 102, 105, 0.6); |
||||
box-shadow: 0 0 3px 0 #fff inset; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.uploadDivbox { |
||||
width: 100%; |
||||
height: 80px; |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
margin: 5px 0; |
||||
|
||||
.uploadDiv { |
||||
width: 120px; |
||||
height: 80px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
position: relative; |
||||
|
||||
.fileinput { |
||||
width: 114px; |
||||
height: 32px; |
||||
position: absolute; |
||||
z-index: 100; |
||||
opacity: 0; |
||||
top: 23px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
button { |
||||
z-index: 99; |
||||
width: 114px; |
||||
height: 32px; |
||||
background: rgba(0, 129, 255, 0.3); |
||||
border: 1px solid #36A2FF; |
||||
opacity: 1; |
||||
border-radius: 0px; |
||||
color: #91CCFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue