UI优化

src/app/routes/waybill-management/components/vehicle-detail/vehicle-detail.component.html

@@ -129,12 +129,10 @@
     <a class="sign"></a>
     <span>基本信息</span>
   </div>
-  <sv-container col="1">
+  <sv-container col="3">
     <sv label="货物名称">
       {{i?.goodsInfos?.[0]?.goodsName}}
     </sv>
-  </sv-container>
-  <sv-container col="2">
     <sv label="货物数量">
       {{i?.goodsInfos?.[0]?.weight}}吨,{{i?.goodsInfos?.[0]?.volume}}方,{{i?.goodsInfos?.[0]?.number}}件
     </sv>
@@ -179,10 +177,10 @@
   <div class="font-weight-blod text-md detail-title">
     <a class="sign"></a>
     <span>运费信息</span>
-    <span>（到货后{{i?.paymentDays}}天内支付运费）</span>
+    <span class="pl-sm text-warning">（到货后{{i?.paymentDays}}天内支付运费）</span>
   </div>
   <st #st [data]="billExpenses" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
-    <ng-template st-row="price" let-item let-index="index">
+    <ng-template st-row="price" let-item let-index="index" [size]="'small'">
       {{ item.price | currency }}
     </ng-template>
     <ng-template st-row="prices" let-item let-index="index">
@@ -200,62 +198,73 @@
   <div *ngIf="i?.payee?.phone && i?.payee?.phone !== i?.driverVo.phone">车队长：{{ i?.payee?.name }}/{{ i?.payee?.phone
     }}/{{ i?.payee?.idNo }}</div>
 </nz-card>
+<div nz-row>
+  <div nz-col nzSpan="12">
+    <nz-card [nzBorderless]="true" class="mb0 attch-card" #distannce4>
+      <div class="font-weight-blod text-md detail-title">
+        <a class="sign"></a>
+        <span>附件信息</span>
+      </div>
+      <div class="attachment-info">
+        <sv-container>
+          <sv label="协议附件">
+            <a *ngIf="i?.contractContent?.contractContent" (click)="agreement('1')">查看附件</a> &nbsp;&nbsp;&nbsp;&nbsp;
+            <a *ngIf="i?.supplementContent?.contractContent" (click)="agreement('2')">补充协议</a>
+          </sv>
+        </sv-container>
+        <sv-container col="2" class="mt-md" layout="vertical">
+          <sv label="装货凭证">
 
-<nz-card [nzBorderless]="true" class="mb0" nzTitle="附件信息" #distannce4>
-  <div class="font-weight-blod text-md detail-title">
-    <a class="sign"></a>
-    <span>附件信息</span>
+            <app-imagelist *ngIf="i?.loadingCertificate && i?.loadingCertificate.length>0"
+              [imgList]="i?.loadingCertificate" [style]="'width:120px;height:120px;'">
+            </app-imagelist>
+          </sv>
+          <sv label="卸货凭证">
+            <app-imagelist *ngIf="i?.unLoadingCertificate && i?.unLoadingCertificate.length>0 "
+              [imgList]="i?.unLoadingCertificate" [style]="'width:120px;height:120px;'">
+            </app-imagelist>
+          </sv>
+        </sv-container>
+      </div>
+    </nz-card>
   </div>
-  <sv-container>
-    <sv label="协议附件">
-      <a *ngIf="i?.contractContent?.contractContent" (click)="agreement('1')">查看附件</a> &nbsp;&nbsp;&nbsp;&nbsp;
-      <a *ngIf="i?.supplementContent?.contractContent" (click)="agreement('2')">补充协议</a>
-    </sv>
-  </sv-container>
-  <sv-container col="2" class="mt-md">
-    <sv label="装货凭证">
-      <app-imagelist *ngIf="i?.loadingCertificate" [imgList]="i?.loadingCertificate">
-      </app-imagelist>
-    </sv>
-    <sv label="卸货凭证">
-      <app-imagelist *ngIf="i?.unLoadingCertificate" [imgList]="i?.unLoadingCertificate">
-      </app-imagelist>
-    </sv>
-  </sv-container>
-</nz-card>
-<nz-card [nzBorderless]="true" class="mb0">
-  <div class="font-weight-blod text-md detail-title">
-    <a class="sign"></a>
-    <span>补充信息</span>
+  <div nz-col nzSpan="12">
+    <nz-card [nzBorderless]="true" class="mb0 attch-card">
+      <div class="font-weight-blod text-md detail-title">
+        <a class="sign"></a>
+        <span>补充信息</span>
+      </div>
+      <div class="attachment-info">
+        <sv-container col="1">
+          <sv label="是否回单">
+            {{ i?.supplementaryInformationVO?.stateReceipt ? '是' : '否' }}
+          </sv>
+          <sv label="回单类型" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
+            {{ i?.supplementaryInformationVO?.receiptType === '1' ? '电子回单' : '纸质回单' }}
+          </sv>
+          <ng-container
+            *ngIf="i?.supplementaryInformationVO?.stateReceipt && i?.supplementaryInformationVO?.receiptType === '2'">
+            <sv label="联系人" *ngIf="i?.supplementaryInformationVO?.stateReceipt"> {{
+              i?.supplementaryInformationVO?.receiptUserName }} / {{ i?.supplementaryInformationVO?.phon }} </sv>
+            <sv label="所在地区" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
+              {{ i?.supplementaryInformationVO?.area }}
+            </sv>
+            <sv label="详细地址" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
+              {{ i?.supplementaryInformationVO?.address }}
+            </sv>
+          </ng-container>
+          <sv label="备注">
+            {{ i?.supplementaryInformationVO?.remarks }}
+          </sv>
+          <sv col="1" label="回单凭证" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
+            <app-imagelist [imgList]="i?.receiptFilePath" [style]="'width:120px;height:120px;'"></app-imagelist>
+          </sv>
+
+        </sv-container>
+      </div>
+    </nz-card>
   </div>
-  <sv-container>
-    <sv label="是否回单">
-      {{ i?.supplementaryInformationVO?.stateReceipt ? '是' : '否' }}
-    </sv>
-    <sv label="回单类型" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
-      {{ i?.supplementaryInformationVO?.receiptType === '1' ? '电子回单' : '纸质回单' }}
-    </sv>
-    <sv label="联系人" *ngIf="i?.supplementaryInformationVO?.stateReceipt"> {{
-      i?.supplementaryInformationVO?.receiptUserName }} / {{ i?.supplementaryInformationVO?.phon }} </sv>
-    <sv label="所在地区" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
-      {{ i?.supplementaryInformationVO?.area }}
-    </sv>
-    <sv label="详细地址" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
-      {{ i?.supplementaryInformationVO?.address }}
-    </sv>
-    <sv label="备注">
-      {{ i?.supplementaryInformationVO?.remarks }}
-    </sv>
-    <sv col="1" label="回单凭证" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
-      <app-imagelist [imgList]="i?.receiptFilePath"></app-imagelist>
-    </sv>
-
-  </sv-container>
-
-
-
-</nz-card>
-
+</div>
 <nz-card [nzBorderless]="true" class="mb0">
   <p class="detail_title" #distannce5><span>|</span> 轨迹信息</p>
   <div nz-row>