上传图片UI完善

src/app/pages/left-domain/left-domain.component.html

@@ -97,16 +97,10 @@
         <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
         <!-- 选中样式 -->
         <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name"></p>
-        <div class="table">
-          <div class="tableHeader">
-            <p class="tableImg">图片</p>
-          </div>
-          <div class="tableContent">
-            <p class="tableImg">
-              <img *ngIf="item.getPropertyData().img" [src]="item.getPropertyData().img">
-              <a href="javascript:;" class="bottomPlanUpload uploadImgBox" [ngStyle]="{'float': item.getPropertyData().img? 'right' : 'left'}" *ngIf="editMode"><input type="file"><i nz-icon nzType="plus" nzTheme="outline"></i></a>
-            </p>
-          </div>
+        <div class="propertyImage">
+          <p class="imgTitle" style="margin-top: 0px;">设计图纸</p>
+          <img src="../../../assets/images/upload.png">
+          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode"><input type="file"><i nz-icon nzType="plus" nzTheme="outline"></i></a>
         </div>
       </div>
     </div>
@@ -123,7 +117,6 @@
           <div class="tableHeader" style="flex: 55%;">
             <p>油气回收系统类型</p>
             <p>油气回收泵类型</p>
-            <p class="tableImg">图片</p>
           </div>
           <div class="tableContent" style="flex: 45%;">
             <p style="padding-left: 8px;">
@@ -133,12 +126,13 @@
               </nz-select>
             </p>
             <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().VRUPumpType"></p>
-            <p class="tableImg">
-              <img *ngIf="item.getPropertyData().img" [src]="item.getPropertyData().img">
-              <a href="javascript:;" class="bottomPlanUpload uploadImgBox" [ngStyle]="{'float': item.getPropertyData().img? 'right' : 'left'}" *ngIf="editMode"><input type="file"><i nz-icon nzType="plus" nzTheme="outline"></i></a>
-            </p>
           </div>
         </div>
+        <div class="propertyImage">
+          <p class="imgTitle">设计图纸</p>
+          <img src="../../../assets/images/upload.png">
+          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode"><input type="file"><i nz-icon nzType="plus" nzTheme="outline"></i></a>
+        </div>
       </div>
     </div>
     <!-- 油气回收 -->

src/app/pages/left-domain/left-domain.component.scss

@@ -37,6 +37,12 @@
 .title{ font-size: 16px; height: 20px; line-height: 20px; margin-bottom: 20px; .anticon{ margin-left: 5px; font-size: 16px; } } //头部header
 .tableInput{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; }
 .tableSelect{ width: 100%; height: 100%; color: #fff; }
+.propertyImage{
+  padding-left: 15px;
+  img{ width: auto; max-height: 130px; display: block; margin-bottom: 10px; }
+  .imgTitle{ font-size: 14px; height: 20px; line-height: 20px; margin: 10px 0; }
+  .uploadImgBox{ margin: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; }
+}
 
 .baseInfo{ //基本信息
   .interval{ margin-top: 10px; border-bottom: 1px solid rgb(197, 226, 245); } //分隔div
@@ -58,7 +64,6 @@
     border-bottom: none;
     display: flex;
     p{ height: 32px; line-height: 32px; margin: 0px; }
-    .tableImg{ height: 120px; line-height: 120px; img{ max-height: 100px; width: auto; }.uploadImgBox{ margin: 35px 0 0 0; width: 50px; height: 50px; line-height: 50px; text-align: center; } }
     .tableHeader{
       flex: 4;
       text-align: right;