车辆UI优化

src/app/routes/order-management/components/complaint-detail/complaint-detail.component.html

@@ -17,11 +17,27 @@
   </ng-template>
 </page-header-wrapper>
 <!-- [nzExtra]="extraTemplate" -->
-<nz-card nzTitle="投诉信息" [nzExtra]="cardTemplate">
+<nz-card [nzBorderless]="true" class="mb0">
   <ng-template #cardTemplate>
-    <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="viewEvaluate()" *ngIf="complaint?.complaintStatus == 1" [disabled]="complaintStatus">处理</button>
+    <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="viewEvaluate()"
-</ng-template>
+      *ngIf="complaint?.complaintStatus == 1" [disabled]="complaintStatus">处理</button>
-  <h2>投诉单号：{{datailList?.complaintCode}}</h2>
+  </ng-template>
+  <div class="mb-xs common-order-header" nz-row>
+    <div>
+      <button nz-button nzType="primary" nzSize="small" nzDanger>{{ datailList?.complaintStatusLabel }}</button>
+      <b class="ml-md text-md">投诉单号： : {{datailList?.complaintCode}}</b>
+    </div>
+    <div>
+      <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="viewEvaluate()"
+        *ngIf="complaint?.complaintStatus == 1" [disabled]="complaintStatus">处理</button>
+    </div>
+  </div>
+  <nz-divider class="divider-margin"></nz-divider>
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>投诉信息</span>
+  </div>
+  <!-- <h2>投诉单号：{{datailList?.complaintCode}}</h2> -->
   <sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" *ngIf="schema" [formData]="datailList">
     <ng-template sf-template="imgUrls" let-schema="schema" let-item let-ui="ui">
       <!-- <app-imagelist [imgList]="datailList?.imgUrls"></app-imagelist> -->
@@ -32,22 +48,25 @@
 
   </sf>
 </nz-card>
-
+<nz-card nzTitle="投诉处理" [nzBorderless]="true" class="mb0 dealBox">
-
+  <div class="font-weight-blod text-md detail-title">
-<nz-card class="dealBox" nzTitle="投诉处理">
+    <a class="sign"></a>
-<nz-timeline nzMode="left">
+    <span>投诉处理</span>
-  <nz-timeline-item *ngFor="let i of datailList?.processNodeVOS; let id = index" >
+  </div>
+  <nz-timeline nzMode="left">
+    <nz-timeline-item *ngFor="let i of datailList?.processNodeVOS; let id = index">
       <div class="p mt-sm">{{i?.nodeNameLabel}}</div>
       <p>
         {{i?.timeLabel}}：<span class="p-line">{{i?.time}}</span>
       </p>
-    <p >
+      <p>
         {{i?.resultLabel}}：<span class="p-line">{{i?.result}}</span>
       </p>
     </nz-timeline-item>
-</nz-timeline>
+  </nz-timeline>
 </nz-card>
-<nz-modal [(nzVisible)]="isVisibleRE"  [nzWidth]="600" [nzFooter]="nzModalFooterview2"  (nzOnOk)="handleOK()" nzTitle="处理" (nzOnCancel)="Cancel()">
+<nz-modal [(nzVisible)]="isVisibleRE" [nzWidth]="600" [nzFooter]="nzModalFooterview2" (nzOnOk)="handleOK()" nzTitle="处理"
+  (nzOnCancel)="Cancel()">
   <ng-container *nzModalContent>
     <sf #sfView [schema]="schemaView" [ui]="uiView" [compact]="true" [button]="'none'">
     </sf>

src/app/routes/order-management/components/risk-detail/risk-detail.component.html

@@ -15,14 +15,27 @@
     </button>
   </ng-template>
 </page-header-wrapper>
-<nz-card nzTitle="运单信息">
+<nz-card [nzBorderless]="true" class="mb0">
-  <sv-container labelWidth="150" col="2">
+  <div class="mb-xs" nz-row>
-    <sv label="订单号">{{i?.billCode}}</sv>
+    <div nz-col nzSpan="16">
+      <button nz-button nzType="primary" nzSize="small" nzDanger>{{ i?.representationsStatusLabel }}</button>
+      <b class="ml-md text-md">订单号 : {{ i?.billCode }}</b>
+    </div>
+  </div>
+  <nz-divider class="divider-margin"></nz-divider>
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>运单信息</span>
+  </div>
+  <sv-container labelWidth="100" col="3" class="new-sv-container">
+    <!-- <sv label="订单号">{{i?.billCode}}</sv>
     <sv label="申诉状态">
       <span >{{i?.representationsStatusLabel}}</span>
-    </sv>
+    </sv> -->
-    <sv label="承运司机">{{i?.driverName ? i?.driverName + '/': ''}} {{i?.driverPhone ?i?.driverPhone + '/': '' }}  {{i?.carNo}}</sv>
+    <sv label="承运司机">{{i?.driverName ? i?.driverName + '/': ''}} {{i?.driverPhone ?i?.driverPhone + '/': '' }}
-    <sv label="车队长"  *ngIf="i?.payeeId !== i?.driverId"> {{i?.carCaptainName ? i?.carCaptainName+ '/' : ''}}{{i?.carCaptainPhone}} </sv>
+      {{i?.carNo}}</sv>
+    <sv label="车队长" *ngIf="i?.payeeId !== i?.driverId"> {{i?.carCaptainName ? i?.carCaptainName+ '/' :
+      ''}}{{i?.carCaptainPhone}} </sv>
     <sv label="装货时间">{{i?.loadTime}}</sv>
     <sv label="卸货时间">{{i?.unloadTime}}</sv>
     <sv label="装货地">{{i?.loadingPlace}}</sv>
@@ -43,8 +56,13 @@
     </ng-template>
   </sf>
 </nz-card> -->
-<nz-card nzTitle="申诉信息" >
+<nz-card [nzBorderless]="true" class="mb0">
-  <sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" *ngIf="i" [formData]="i">
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>申诉信息</span>
+  </div>
+  <sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" *ngIf="i" [formData]="i"
+    class="new-sf-container">
     <ng-template sf-template="uploadVanchor" let-schema="schema" let-me let-ui="ui">
       <!-- <nz-upload *ngIf="me.formProperty.value" [nzFileList]="me.formProperty.value" [nzShowButton]="false"
         [nzShowUploadList]="{showRemoveIcon:false}">
@@ -53,7 +71,11 @@
     </ng-template>
   </sf>
 </nz-card>
-<nz-card class="dealBox" nzTitle="申诉处理">
+<nz-card [nzBorderless]="true" class="dealBox mb0">
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>申诉处理</span>
+  </div>
   <nz-timeline nzMode="left">
     <nz-timeline-item [nzLabel]="item?.operatorTimestamp" nzColor="green" *ngFor="let item of logList">
       <div>{{item?.operationContent}}</div>

src/app/routes/order-management/components/risk-detail/risk-detail.component.ts

@@ -31,8 +31,7 @@ export class OrderManagementRiskDetailComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    if (this.id)
+    if (this.id) {
-    {
       this.getDetail(this.id);
       this.initSF();
     }
@@ -77,26 +76,16 @@ export class OrderManagementRiskDetailComponent implements OnInit {
 
     this.ui = {
       '*': {
-        spanLabelFixed: 180,
+        spanLabelFixed: 100,
         grid: { span: 18 },
       },
-      $title1: {
-        spanLabelFixed: 0,
-      },
-      $title2: {
-        spanLabelFixed: 0,
-      },
-      $title3: {
-        spanLabelFixed: 0,
-      },
-      $unit: {
-        spanLabelFixed: 20,
-        grid: { span: 3 },
-      },
       $uploadVanchor: {
-        spanLabelFixed: 180,
+        spanLabelFixed: 100,
         grid: { span: 24 },
       },
+      $representationsDescribe: {
+        grid: { span: 24 },
+      }
     };
   }
   /**

src/app/routes/vehicle/components/audit/detail/detail.component.html

@@ -1,34 +1,29 @@
 <!-- 页头 -->
-<page-header-wrapper [logo]="logo" title="车辆详情" [content]="content" [ngClass]="{ affix: scrollTop > 210 }">
+<page-header-wrapper [logo]="logo" title="车辆详情" [ngClass]="{ affix: scrollTop > 210 }">
   <ng-template #logo>
     <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
       <i nz-icon nzType="left" nzTheme="outline"></i>
     </button>
   </ng-template>
   <ng-template #content>
-    <sv-container col="3">
+    <sv-container col="3" class="new-sv-container">
       <h2>车牌号：{{ detailData?.carNo }}</h2>
       <sv-title style="font-weight: 700">
-        <span *ngIf="detailData?.approvalStatus === 1 || detailData?.approvalStatus === '1'">未上传</span>
+        <!-- <span *ngIf="detailData?.approvalStatus === 1 || detailData?.approvalStatus === '1'">未上传</span>
         <span *ngIf="detailData?.approvalStatus === 0 || detailData?.approvalStatus === '0'">草稿</span>
         <span *ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">待审核</span>
         <span *ngIf="detailData?.approvalStatus === 20 || detailData?.approvalStatus === '20'">已审核</span>
         <span *ngIf="detailData?.approvalStatus === 30 || detailData?.approvalStatus === '30'">已驳回</span>
-        <span *ngIf="detailData?.approvalStatus === 40 || detailData?.approvalStatus === '40'">证件过期</span>
+        <span *ngIf="detailData?.approvalStatus === 40 || detailData?.approvalStatus === '40'">证件过期</span> -->
         <div style="float: right" *ngIf="detailData?.approvalStatus !== 20 && detailData?.approvalStatus !== '20'">
           <ng-container *ngIf="!isEdit">
-            <button nz-button nzType="default" nzDanger (click)="approveDriver()" acl acl-ability="VEHICLE-AUDIT-DETAIL-pass">通过</button>
+            <button nz-button nzType="default" nzDanger (click)="approveDriver()" acl
-            <button
+              acl-ability="VEHICLE-AUDIT-DETAIL-pass">通过</button>
-              nz-button
+            <button nz-button nzType="default" nzDanger (click)="rejectedDriver()" acl
-              nzType="default"
-              nzDanger
-              (click)="rejectedDriver()"
-              acl
               acl-ability="VEHICLE-AUDIT-DETAIL-reject"
-              *ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'"
+              *ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">驳回</button>
-              >驳回</button
+            <button nz-button nzType="default" nzDanger (click)="ratify()" acl
-            >
+              acl-ability="VEHICLE-AUDIT-DETAIL-save">修改</button>
-            <button nz-button nzType="default" nzDanger (click)="ratify()" acl acl-ability="VEHICLE-AUDIT-DETAIL-save">修改</button>
           </ng-container>
           <ng-container *ngIf="isEdit">
             <button nz-button nzType="default" (click)="reset()">取消</button>
@@ -46,17 +41,40 @@
   </ng-template>
 </page-header-wrapper>
 
-<nz-card [class]="isEdit ? 'edit-box' : 'readOnly-box'">
+<nz-card [class]="isEdit ? 'edit-box' : 'readOnly-box'" [ngClass]="'mb0'" [nzBorderless]="true">
-  <sv-container col="3">
+  <div>
-    <sv-title style="font-weight: 700">车辆基础信息 </sv-title>
+    <div class="mb-xs common-order-header" nz-row>
+      <div>
+        <button nz-button nzType="primary" nzSize="small" nzDanger>{{ carStatus[detailData?.approvalStatus] }}</button>
+        <b class="ml-md" style="font-size: 18px">车牌号: {{ detailData?.carNo }}</b>
+      </div>
+      <div>
+        <ng-container *ngIf="!isEdit">
+          <button nz-button nzType="default" nzDanger (click)="approveDriver()" acl
+            acl-ability="VEHICLE-AUDIT-DETAIL-pass">通过</button>
+          <button nz-button nzType="default" nzDanger (click)="rejectedDriver()" acl
+            acl-ability="VEHICLE-AUDIT-DETAIL-reject"
+            *ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">驳回</button>
+          <button nz-button nzType="default" nzDanger (click)="ratify()" acl
+            acl-ability="VEHICLE-AUDIT-DETAIL-save">修改</button>
+        </ng-container>
+        <ng-container *ngIf="isEdit">
+          <button nz-button nzType="default" (click)="reset()">取消</button>
+          <button nz-button nzType="default" (click)="save()" nzDanger>保存</button>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+  <nz-divider class="divider-margin"></nz-divider>
+  <div class="mb-lg">
+    <div class="font-weight-blod text-md detail-title">
+      <a class="sign"></a>
+      <span>车辆基础信息</span>
+    </div>
+    <sv-container col="3" labelWidth="140">
       <sv label="车牌颜色">
-      <nz-select
+        <nz-select [(ngModel)]="detailData.carNoColor" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        [(ngModel)]="detailData.carNoColor"
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzShowArrow]="isEdit"
-        [nzDisabled]="!isEdit"
-      >
           <nz-option *ngFor="let i of contenCarNoColor" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
         </nz-select>
       </sv>
@@ -65,294 +83,184 @@
         [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
         <nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
       </nz-select> -->
-      <input
+        <input nz-input type="text" [(ngModel)]="detailData.carModel" [readonly]="!isEdit" [nzBorderless]="!isEdit"
-        nz-input
+          [placeholder]="isEdit ? '' : '-'" />
-        type="text"
-        [(ngModel)]="detailData.carModel"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
       </sv>
       <sv label="车长">
-      <nz-select
+        <nz-select [(ngModel)]="detailData.carLength" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        [(ngModel)]="detailData.carLength"
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzShowArrow]="isEdit"
-        [nzDisabled]="!isEdit"
-      >
           <nz-option *ngFor="let i of contenCarLength" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
         </nz-select>
       </sv>
       <sv label="车辆能源类型">
-      <nz-select
+        <nz-select [(ngModel)]="detailData.carEnergyType" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        [(ngModel)]="detailData.carEnergyType"
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzShowArrow]="isEdit"
-        [nzDisabled]="!isEdit"
-      >
           <nz-option *ngFor="let i of contenCarEnergy" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
         </nz-select>
       </sv>
       <sv label="是否为挂车">
-      <nz-select
+        <nz-select [(ngModel)]="detailData.isTrailer" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        [(ngModel)]="detailData.isTrailer"
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzShowArrow]="isEdit"
-        [nzDisabled]="!isEdit"
-      >
           <nz-option [nzValue]="false" nzLabel="否"></nz-option>
           <nz-option [nzValue]="true" nzLabel="是"></nz-option>
         </nz-select>
       </sv>
       <sv label="是否挂靠">
-      <nz-select
+        <nz-select [(ngModel)]="detailData.isSelf" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        [(ngModel)]="detailData.isSelf"
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzShowArrow]="isEdit"
-        [nzDisabled]="!isEdit"
-      >
           <nz-option [nzValue]="false" nzLabel="否"></nz-option>
           <nz-option [nzValue]="true" nzLabel="是"></nz-option>
         </nz-select>
       </sv>
     </sv-container>
-  <sv-container col="1" class="mt-md">
+    <sv-container col="1" class="mt-md" labelWidth="140">
       <sv label="车头照">
-      <ng-container
+        <ng-container *ngTemplateOutlet="
-        *ngTemplateOutlet="
           uploadTemplate;
           context: { image: detailData?.carFrontPhotoWatermark, key: 'carFrontPhotoWatermark', hover: 'PhotoWatermark2' }
-        "
+        ">
-      >
         </ng-container>
       </sv>
     </sv-container>
-  <nz-divider></nz-divider>
+  </div>
-
+  <div class="mb-lg">
-  <sv-container col="3">
+    <div class="font-weight-blod text-md detail-title">
-    <sv-title style="font-weight: 700">行驶证信息</sv-title>
+      <a class="sign"></a>
+      <span>行驶证信息</span>
+    </div>
+    <sv-container col="3" labelWidth="140" class="new-sv-container">
       <sv label="档案编号">
-      <input
+        <input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
-        nz-input
+          [placeholder]="isEdit ? '' : '-'" />
-        type="text"
-        [(ngModel)]="detailData.archivesNo"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
       </sv>
       <sv label="行驶证注册日期">
         <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseRegisterTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
       [placeholder]="isEdit?'':'-'"> -->
-      <nz-date-picker
+        <nz-date-picker [(ngModel)]="detailData.driverLicenseRegisterTime" [nzDisabled]="!isEdit"
-        [(ngModel)]="detailData.driverLicenseRegisterTime"
+          [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit ? 'calendar' : ''">
-        [nzDisabled]="!isEdit"
+        </nz-date-picker>
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
-      ></nz-date-picker>
       </sv>
     </sv-container>
+  </div>
 
-  <sv-container col="3">
+  <div class="mb-lg">
+    <div class="font-weight-blod text-md detail-title">
+      <a class="sign"></a>
+      <span>行驶证信息</span>
+    </div>
+    <sv-container col="3" class="new-sv-container" labelWidth="140">
       <sv label="行驶证到期日">
         <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
         [placeholder]="isEdit?'':'-'"> -->
-      <nz-date-picker
+        <nz-date-picker [(ngModel)]="detailData.driverLicenseEndTime" [nzDisabled]="!isEdit"
-        [(ngModel)]="detailData.driverLicenseEndTime"
+          [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit ? 'calendar' : ''">
-        [nzDisabled]="!isEdit"
+        </nz-date-picker>
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
-      ></nz-date-picker>
       </sv>
       <sv label="行驶证签发机关">
-      <input
+        <input nz-input style="width: '300px'" type="text" [(ngModel)]="detailData.driverLicenseSigningOrg"
-        nz-input
+          [readonly]="!isEdit" [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
-        style="width: '300px'"
-        type="text"
-        [(ngModel)]="detailData.driverLicenseSigningOrg"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
       </sv>
     </sv-container>
 
-  <sv-container col="3">
+    <sv-container class="new-sv-container" labelWidth="140" col="3">
       <sv label="行驶证发证日期">
         <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseGetTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
       [placeholder]="isEdit?'':'-'"> -->
-      <nz-date-picker
+        <nz-date-picker [(ngModel)]="detailData.driverLicenseGetTime" [nzDisabled]="!isEdit"
-        [(ngModel)]="detailData.driverLicenseGetTime"
+          [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit ? 'calendar' : ''">
-        [nzDisabled]="!isEdit"
+        </nz-date-picker>
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
-      ></nz-date-picker>
       </sv>
       <sv label="车辆识别代码">
-      <input
+        <input nz-input type="text" [(ngModel)]="detailData.carDistinguishCode" [readonly]="!isEdit"
-        nz-input
+          [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
-        type="text"
-        [(ngModel)]="detailData.carDistinguishCode"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
       </sv>
       <sv label="使用性质">
-      <nz-select
+        <nz-select [(ngModel)]="detailData.useNature" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        [(ngModel)]="detailData.useNature"
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzShowArrow]="isEdit"
-        [nzDisabled]="!isEdit"
-      >
           <nz-option [nzValue]="'1'" nzLabel="营运"></nz-option>
           <nz-option [nzValue]="'0'" nzLabel="非营运"></nz-option>
         </nz-select>
       </sv>
     </sv-container>
 
-  <sv-container col="3">
+    <sv-container class="new-sv-container" labelWidth="140" col="3">
       <sv label="核定载质量（吨）">
-      <input
+        <input nz-input type="text" [(ngModel)]="detailData.carLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
-        nz-input
+          [placeholder]="isEdit ? '' : '-'" />
-        type="text"
-        [(ngModel)]="detailData.carLoad"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
       </sv>
       <sv label="整备质量">
-      <input
+        <input nz-input type="text" [(ngModel)]="detailData.curbWeight" [readonly]="!isEdit" [nzBorderless]="!isEdit"
-        nz-input
+          [placeholder]="isEdit ? '' : '-'" />
-        type="text"
-        [(ngModel)]="detailData.curbWeight"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
       </sv>
       <sv label="总质量">
-      <input
+        <input nz-input type="text" [(ngModel)]="detailData.carTotalLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
-        nz-input
+          [placeholder]="isEdit ? '' : '-'" />
-        type="text"
-        [(ngModel)]="detailData.carTotalLoad"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
       </sv>
       <sv label="所有人">
-      <input
+        <input nz-input style="width: '300px'" type="text" [(ngModel)]="detailData.carOwner" [readonly]="!isEdit"
-        nz-input
+          [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
-        style="width: '300px'"
-        type="text"
-        [(ngModel)]="detailData.carOwner"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
       </sv>
     </sv-container>
-  <sv-container col="1">
+    <sv-container class="new-sv-container" labelWidth="140" col="1">
       <sv label="行驶证照片">
-      <ng-container
+        <ng-container *ngTemplateOutlet="
-        *ngTemplateOutlet="
           uploadTemplate;
           context: { image: detailData?.certificatePhotoFrontWatermark, key: 'certificatePhotoFrontWatermark', hover: 'FrontWatermark' }
-        "
+        ">
-      >
         </ng-container>
-      <ng-container
+        <ng-container *ngTemplateOutlet="
-        *ngTemplateOutlet="
           uploadTemplate;
           context: { image: detailData?.certificatePhotoBackWatermark, key: 'certificatePhotoBackWatermark', hover: 'BackWatermark' }
-        "
+        ">
-      >
         </ng-container>
       </sv>
     </sv-container>
-  <nz-divider></nz-divider>
+  </div>
-  <sv-container col="3" class="mt16">
+  <div class="mb-lg">
-    <sv-title style="font-weight: 700">道路运输证信息</sv-title>
+    <div class="font-weight-blod text-md detail-title">
+      <a class="sign"></a>
+      <span>道路运输证信息</span>
+    </div>
+    <sv-container col="3" class="mt16 new-sv-container" labelWidth="140">
       <sv label="道路运输证号">
-      <input
+        <input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit"
-        nz-input
+          [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
-        type="text"
-        [(ngModel)]="detailData.roadTransportNo"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
       </sv>
       <sv label="经营许可证号">
-      <input
+        <input nz-input type="text" [(ngModel)]="detailData.roadTransportLicenceNo" [readonly]="!isEdit"
-        nz-input
+          [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
-        type="text"
-        [(ngModel)]="detailData.roadTransportLicenceNo"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
       </sv>
       <sv label="发证日期">
         <!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportStartTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
       [placeholder]="isEdit?'':'-'"> -->
-      <nz-date-picker
+        <nz-date-picker [(ngModel)]="detailData.roadTransportStartTime" [nzDisabled]="!isEdit"
-        [(ngModel)]="detailData.roadTransportStartTime"
+          [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit ? 'calendar' : ''">
-        [nzDisabled]="!isEdit"
+        </nz-date-picker>
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
-      ></nz-date-picker>
       </sv>
       <sv label="有效期至">
         <!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
       [placeholder]="isEdit?'':'-'"> -->
-      <nz-date-picker
+        <nz-date-picker [(ngModel)]="detailData.roadTransportEndTime" [nzDisabled]="!isEdit"
-        [(ngModel)]="detailData.roadTransportEndTime"
+          [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit ? 'calendar' : ''">
-        [nzDisabled]="!isEdit"
+        </nz-date-picker>
-        [nzPlaceHolder]="isEdit ? '' : '-'"
-        [nzBorderless]="!isEdit"
-        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
-      ></nz-date-picker>
       </sv>
       <sv label="道路运输证照片">
-      <ng-container
+        <ng-container *ngTemplateOutlet="
-        *ngTemplateOutlet="
           uploadTemplate;
           context: { image: detailData?.roadTransportPhotoWatermark, key: 'roadTransportPhotoWatermark', hover: 'Watermark' }
-        "
+        ">
-      >
         </ng-container>
       </sv>
     </sv-container>
-  <nz-divider></nz-divider>
+  </div>
-  <sv-container col="2" class="mt16">
+  <div class="mb-lg">
-    <sv-title style="font-weight: 700">认证司机</sv-title>
+    <div class="font-weight-blod text-md detail-title">
-  </sv-container>
+      <a class="sign"></a>
-  <st
+      <span>认证司机</span>
-    #st
+    </div>
-    [bordered]="true"
+    <st #st [bordered]="true" [columns]="columns" [scroll]="{x: '1400px'}" [data]="service.$api_get_queryDriverByCarId"
-    [columns]="columns"
+      [req]="{ method: 'POST', allInBody: true, params: reqParams }" [res]="{ reName: { list: 'data', total: 'data' } }"
-    [scroll]="{x: '1200px'}"
+      [ngStyle]="{ margin: '1rem 0' }" multiSort size="small" [page]="{ show: false }">
-    [data]="service.$api_get_queryDriverByCarId"
-    [req]="{ method: 'POST', allInBody: true, params: reqParams }"
-    [res]="{ reName: { list: 'data', total: 'data' } }"
-    [ngStyle]="{ margin: '1rem 0' }"
-    multiSort
-    size="small"
-    [page]="{ show: false }"
-  >
       <ng-template st-row="auditStatusEnum" let-item let-index="index">
         <div>
           <span *ngIf="item?.auditStatusEnum === -1 || item?.auditStatusEnum === '-1'">未上传</span>
@@ -364,11 +272,12 @@
         </div>
       </ng-template>
     </st>
+  </div>
 </nz-card>
 
 <ng-template #redectModal>
   <div nz-row nzGutter="8">
-    <div nz-col nzSpan="24" se-container [labelWidth]="120">
+    <div nz-col nzSpan="24" se-container [labelWidth]="140">
       <se [col]="1" label="车牌号">
         {{ detailData?.carNo }}
       </se>
@@ -380,27 +289,15 @@
 </ng-template>
 
 <ng-template #uploadTemplate let-image="image" let-key="key" let-hover="hover">
-  <nz-upload
+  <nz-upload class="avatar-uploader" [nzAction]="uploadURl" nzName="multipartFile" nzListType="picture-card"
-    class="avatar-uploader"
+    [nzShowUploadList]="false" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
-    [nzAction]="uploadURl"
+    [nzDisabled]="!isEdit || disabledUpload" (nzChange)="changeUpload($event, key)">
-    nzName="multipartFile"
-    nzListType="picture-card"
-    [nzShowUploadList]="false"
-    nzFileType="image/png,image/jpeg,image/jpg,image/gif"
-    [nzDisabled]="!isEdit || disabledUpload"
-    (nzChange)="changeUpload($event, key)"
-  >
     <ng-container *ngIf="!image && isEdit">
       <i class="upload-icon" nz-icon [nzType]="false ? 'loading' : 'plus'"></i>
       <div class="ant-upload-text">上传</div>
     </ng-container>
-    <div
+    <div *ngIf="image" (mouseover)="detailData[hover] = true" (mouseleave)="detailData[hover] = false"
-      *ngIf="image"
+      (click)="$event.cancelBubble = true" class="image-hover">
-      (mouseover)="detailData[hover] = true"
-      (mouseleave)="detailData[hover] = false"
-      (click)="$event.cancelBubble = true"
-      class="image-hover"
-    >
       <img (click)="showImg(image)" [src]="image" style="width: 200px; height: 160px" />
       <div class="mask" *ngIf="detailData[hover] && isEdit"></div>
       <div class="mask-over" *ngIf="detailData[hover] && isEdit">

src/app/routes/vehicle/components/audit/detail/detail.component.ts

@@ -36,6 +36,14 @@ export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy
   approvalOpinion = '';
   uploadURl = apiConf.waterFileUpload;
   disabledUpload = false;
+  carStatus: any = {
+    1: '未上传',
+    0: '草稿',
+    10: '待审核',
+    20: '已审核',
+    30: '已驳回',
+    40: '证件过期',
+  }
 
 
   scrollTop = 0;
@@ -46,7 +54,7 @@ export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy
     private nzModalService: NzModalService,
     private modal: ModalHelper,
     private nzImageService: NzImageService
-  ) {}
+  ) { }
   ngOnDestroy(): void {
     this.subscribeScoll.unsubscribe();
   }
@@ -63,9 +71,9 @@ export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy
   initST() {
     this.columns = [
       { title: '司机姓名', index: 'name', width: 150, className: 'text-center' },
-      { title: '司机手机号', index: 'mobile',  width: 200,className: 'text-center' },
+      { title: '司机手机号', index: 'mobile', width: 200, className: 'text-center' },
       { title: '身份证号', index: 'idCardNo', width: 200, className: 'text-center' },
-      { title: '挂靠协议', render: 'auditStatusEnum', width: 100,className: 'text-center' },
+      { title: '挂靠协议', render: 'auditStatusEnum', width: 100, className: 'text-center' },
       {
         title: '车主申明/挂靠协议',
         fixed: 'right',
@@ -152,7 +160,7 @@ export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy
 
     this.detailData.roadTransportEndTime = EADateUtil.yearToDate(this.detailData?.roadTransportEndTime);
     console.log(this.detailData.roadTransportStartTime)
-    if((this.detailData.roadTransportStartTime > this.detailData.roadTransportEndTime) || (this.detailData.driverLicenseRegisterTime > this.detailData.driverLicenseEndTime)) {
+    if ((this.detailData.roadTransportStartTime > this.detailData.roadTransportEndTime) || (this.detailData.driverLicenseRegisterTime > this.detailData.driverLicenseEndTime)) {
       this.service.msgSrv.error('发证日期起始不能大于结束日期！')
       return;
     }
@@ -276,7 +284,7 @@ export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy
       imgList: [item.carProtocal],
       index: 0
     };
-      this.nzImageService.preview([{ src: item.carProtocal}]);
+    this.nzImageService.preview([{ src: item.carProtocal }]);
     this.st.reload();
     this.getDetailList();
   }

src/app/routes/waybill-management/components/abnormal-appear/abnormal-appear.component.html

@@ -85,19 +85,19 @@
 <ng-template #detailModal>
   <div nz-row nzGutter="8">
     <div nz-col nzSpan="24" se-container [labelWidth]="110" [col]="1">
-      <se label="异常编号">
+      <se label="异常编号" class="mb-sm">
         {{itemInfo.exceptionCode}}
       </se>
-      <se label="装货地">
+      <se label="装货地" class="mb-sm">
         {{itemInfo.loadingAddressArr}}
       </se>
-      <se label="卸货地">
+      <se label="卸货地" class="mb-sm">
         {{itemInfo.unloadingAddressArr}}
       </se>
-      <se label="异常信息">
+      <se label="异常信息" class="mb-sm">
         {{itemInfo.exceptionContent}}
       </se>
-      <se label="异常图片">
+      <se label="异常图片" class="mb-sm">
         <div style="display: flex;">
           <div *ngIf="itemInfo?.exceptionCertificateFirstFilePath" style="cursor: pointer;">
             <app-imagelist [imgList]="[itemInfo?.exceptionCertificateFirstFilePath]"> </app-imagelist>
@@ -111,13 +111,13 @@
         </div>
       </se>
       <ng-container *ngIf="itemInfo.replyAppUserName">
-        <se label="回复内容">
+        <se label="回复内容" class="mb-sm">
           {{itemInfo.replyContent}}
         </se>
-        <se label="回复人">
+        <se label="回复人" class="mb-sm">
           {{itemInfo.replyAppUserName}}
         </se>
-        <se label="回复时间">
+        <se label="回复时间" class="mb-sm">
           {{itemInfo.replyTime}}
         </se>
       </ng-container>

src/styles/common/global.less

@@ -31,13 +31,16 @@
   &.sv__horizontal {
     .sv__label-width {
       justify-content: left;
+
     }
   }
+
 }
 
 .new-sf-container {
   &.sf__horizontal .ant-form-item-label>label {
     justify-content: left;
+    color: rgba(0, 0, 0, 0.5);
   }
 }