7 changed files with 285 additions and 260 deletions
@ -1,36 +1,38 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2020-11-06 14:39:10 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-11-07 19:32:56 |
||||
--> |
||||
<div class="content"> |
||||
|
||||
<div class="box"> |
||||
<div class="topadd"> |
||||
<button (click)="addPermission()">新增</button> |
||||
<button (click)="savaClick()">保存</button> |
||||
</div> |
||||
<div class="center"> |
||||
<div class="one" *ngFor="let item of uploadSucced; let key=index"> |
||||
<span>{{item.name}}</span> |
||||
<div style="margin-left: 80px;width: 280px;" class="swiper-container"> |
||||
<div class="swiper-wrapper"> |
||||
<div class="swiper-slide" *ngFor="let itemx of item.src; let key=index"> |
||||
<img [src]="itemx" alt="" style="width: 200px; height: 100px;" > |
||||
<!-- <div class="swiper-lazy-preloader"></div> --> |
||||
</div> |
||||
|
||||
</div> |
||||
<!-- 如果需要导航按钮 --> |
||||
<div class="swiper-button-prev"></div> |
||||
<div class="swiper-button-next"></div> |
||||
|
||||
<div class="center"> |
||||
<div class="fatherDiv"> |
||||
|
||||
<div class="matterDiv" *ngFor="let item of imagesData;let key = index"> |
||||
<div class="leftDiv"> |
||||
<div>问题{{item.index}}:</div> |
||||
<div *ngIf="isLook == 'edit'"><button (click)='delete(key)'>删除</button></div> |
||||
</div> |
||||
<div class="rightDiv"> |
||||
<div style="height: 45%;"> |
||||
<textarea maxlength="500" [(ngModel)]="item.matter" name="matter" [readonly]="isLook == 'look'"></textarea> |
||||
</div> |
||||
<div style="height: 55%;" class="imagesBox"> |
||||
|
||||
<div class="everyImg" *ngIf="isLook == 'edit'"> |
||||
<a href="javascript:;" class="a-upload"> |
||||
<input type="file" (change)='selectFile($event,item)'>+ |
||||
</a> |
||||
</div> |
||||
<input id="selectedfile" (change)="filechange($event,key)" type="file" name="imgFile" accept=".jpg,.png,.jpeg,.gif,.webp"> |
||||
<textarea [(ngModel)]="item.text" name="" id="" cols="60" rows="6"></textarea> |
||||
<button (click)="deletePermission(key)">删除</button> |
||||
<div class="everyImg" *ngFor="let items of item.imgURL;let keys = index" id="viewerjs{{key}}{{keys}}"> |
||||
<img [src]='items' [attr.data-original]="items.split('?')[0]"> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div *ngIf="!imagesData.length" class="noData">暂无数据</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="addBox" *ngIf="isLook == 'edit'"> |
||||
<div><button (click)='add()'>新增</button></div> |
||||
<div><button style="background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%);" (click)='keep()'>保存</button></div> |
||||
</div> |
||||
</div> |
||||
@ -1,76 +1,137 @@
|
||||
.box{ |
||||
width: 100%; |
||||
.content { |
||||
width: 100%; |
||||
height: 100%; |
||||
box-sizing: border-box; |
||||
background: #F4F5F9; |
||||
padding: 0.009766rem; |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.center { |
||||
flex: 1; |
||||
overflow: hidden; |
||||
.fatherDiv { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow-x: hidden; |
||||
overflow-y: auto; |
||||
box-sizing: border-box; |
||||
padding: 0.097656rem; |
||||
} |
||||
} |
||||
.addBox { |
||||
height: 0.390625rem; |
||||
>div { |
||||
display: inline-block; |
||||
line-height: 0.390625rem; |
||||
width: 50%; |
||||
} |
||||
button { |
||||
width: 60%; |
||||
height: 0.351563rem; |
||||
line-height: 0.351563rem; |
||||
color: #fff; |
||||
background: #4582FC; |
||||
border-radius: 0.292969rem; |
||||
outline: none; |
||||
border: none; |
||||
display: block; |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.noData { |
||||
width: 100%; |
||||
text-align: center; |
||||
font-size: 0.15625rem; |
||||
margin-top: 0.292969rem; |
||||
} |
||||
//问题div |
||||
.matterDiv { |
||||
width: 100%; |
||||
height: 1.757813rem; |
||||
box-sizing: border-box; |
||||
padding: 0.048828rem; |
||||
margin-top: 0.097656rem; |
||||
background-color: #fff; |
||||
border-radius: 0.195313rem; |
||||
display: flex; |
||||
.leftDiv { |
||||
width: 0.683594rem; |
||||
text-align: center; |
||||
height: 100%; |
||||
.topadd{ |
||||
width: 100%; |
||||
margin: 0.488281rem 0.097656rem; |
||||
button{ |
||||
background-color: #008CBA; /* Green */ |
||||
border: none; |
||||
border-radius: 8px; |
||||
color: white; |
||||
padding: 0.097656rem 0.488281rem; |
||||
text-align: center; |
||||
text-decoration: none; |
||||
display: inline-block; |
||||
font-size: 0.146484rem; |
||||
margin-left: 0.488281rem; |
||||
cursor: pointer; |
||||
} |
||||
margin-right: 0.048828rem; |
||||
>div { |
||||
font-size: 0.15625rem; |
||||
} |
||||
.center{ |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction:column; |
||||
overflow: auto; |
||||
span{ |
||||
font-size: 0.146484rem; |
||||
margin-left: 0.488281rem; |
||||
position: relative; |
||||
top: 0.488281rem; |
||||
} |
||||
textarea{ |
||||
position: relative; |
||||
left: 15%; |
||||
bottom: 0.976563rem; |
||||
} |
||||
.one{ |
||||
width: 100%; |
||||
height: 140px; |
||||
input{ |
||||
z-index: 999; |
||||
width: 1.953125rem; |
||||
height: 0.976563rem; |
||||
position: relative; |
||||
left: 0.976563rem; |
||||
bottom: 180px; |
||||
opacity: 0; |
||||
margin-top: 0.048828rem; |
||||
cursor: pointer; |
||||
} |
||||
img{ |
||||
position: relative; |
||||
margin-left: 20px; |
||||
|
||||
} |
||||
} |
||||
button{ |
||||
position: relative; |
||||
bottom: 150px; |
||||
left: 15%; |
||||
background-color: #FFFFFF; /* Green */ |
||||
border: 1px solid #000000; |
||||
border-radius: 8px; |
||||
color: #000000; |
||||
padding: 0.097656rem 0.488281rem; |
||||
text-align: center; |
||||
text-decoration: none; |
||||
display: inline-block; |
||||
font-size: 0.146484rem; |
||||
margin-left: 0.488281rem; |
||||
cursor: pointer; |
||||
} |
||||
button { |
||||
height: 0.214844rem; |
||||
background-color:#fff; |
||||
border-radius: 0.097656rem; |
||||
border: 0.009766rem solid red; |
||||
color: red; |
||||
font-size: 0.136719rem; |
||||
} |
||||
} |
||||
.rightDiv { |
||||
flex: 1; |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
|
||||
textarea { |
||||
vertical-align: middle; |
||||
border-radius: 0.097656rem; |
||||
background-color: #F4F5F9; |
||||
box-sizing: border-box; |
||||
padding: 0.048828rem; |
||||
width: 100%; |
||||
height: 100%; |
||||
resize: none; |
||||
border: none; |
||||
outline: none; |
||||
} |
||||
.imagesBox::-webkit-scrollbar {display:none} |
||||
.imagesBox { |
||||
overflow-x: auto; |
||||
overflow-y: hidden; |
||||
display: flex; |
||||
align-items: center; |
||||
box-sizing: border-box; |
||||
padding: 0.048828rem; |
||||
.everyImg { |
||||
width: 0.976563rem; |
||||
min-width: 0.976563rem; |
||||
max-width: 0.976563rem; |
||||
max-height: 0.878906rem; |
||||
height: 100%; |
||||
border: 0.009766rem dashed #c5c7cc; |
||||
margin-right: 0.097656rem; |
||||
//上传CAD弹窗 inputfile |
||||
.a-upload { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
cursor: pointer; |
||||
color: #888; |
||||
text-align: center; |
||||
font-size: 0.683594rem; |
||||
overflow: hidden; |
||||
display: inline-block; |
||||
} |
||||
.a-upload input { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
right: 0; |
||||
top: 0; |
||||
opacity: 0; |
||||
cursor: pointer; |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue