车辆UI优化

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

@@ -1,5 +1,5 @@
 <!--
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2022-01-04 17:29:18
@@ -13,41 +13,60 @@
     <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
       <i nz-icon nzType="left" nzTheme="outline"></i>
     </button>
-    
+
   </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> -->
+      <!-- <app-imagelist [imgList]="datailList?.imgUrls"></app-imagelist> -->
 
-    <img nz-image width="100px" height="100%" *ngFor="let item of datailList?.imgUrls" [nzSrc]="item"
+      <img nz-image width="100px" height="100%" *ngFor="let item of datailList?.imgUrls" [nzSrc]="item"
-    style="margin:0 10px 0 0" alt="" />
+        style="margin:0 10px 0 0" alt="" />
     </ng-template>
 
   </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>
-    <div class="p mt-sm">{{i?.nodeNameLabel}}</div>
+  <nz-timeline nzMode="left">
-    <p>
+    <nz-timeline-item *ngFor="let i of datailList?.processNodeVOS; let id = index">
-      {{i?.timeLabel}}：<span class="p-line">{{i?.time}}</span>
+      <div class="p mt-sm">{{i?.nodeNameLabel}}</div>
-    </p>
+      <p>
-    <p >
+        {{i?.timeLabel}}：<span class="p-line">{{i?.time}}</span>
-      {{i?.resultLabel}}：<span class="p-line">{{i?.result}}</span>
+      </p>
-    </p>
+      <p>
-  </nz-timeline-item>
+        {{i?.resultLabel}}：<span class="p-line">{{i?.result}}</span>
-</nz-timeline>
+      </p>
+    </nz-timeline-item>
+  </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>
@@ -57,4 +76,4 @@
     <button nz-button nzType="primary" (click)="handleOK()">通过</button>
     <button nz-button nzType="primary" (click)="handleCancel2()">强制取消</button>
   </ng-template>
-</nz-modal>
+</nz-modal>

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

@@ -1,5 +1,5 @@
 <!--
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2021-12-16 10:19:08
@@ -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,12 +31,11 @@ export class OrderManagementRiskDetailComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    if (this.id)
+    if (this.id) {
-    {
       this.getDetail(this.id);
       this.initSF();
-    } 
+    }
-    
+
   }
   initSF() {
     this.schema = {
@@ -77,53 +76,43 @@ 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 },
+      }
     };
   }
-    /**
+  /**
-   * 获取详情
+ * 获取详情
-   * @param id
+ * @param id
-   */
+ */
-     getDetail(id: string) {
+  getDetail(id: string) {
-      this.service.request(this.service.$api_get_getRiskDetail, { id }).subscribe(res => {
+    this.service.request(this.service.$api_get_getRiskDetail, { id }).subscribe(res => {
-        if (res) {
+      if (res) {
-          this.i = Object.assign({}, res);
+        this.i = Object.assign({}, res);
-          console.log(this.i);
+        console.log(this.i);
-          let list: any = [];
+        let list: any = [];
-          this.i.fileArr.map((item: any, index: number) => {
+        this.i.fileArr.map((item: any, index: number) => {
-            const obj = {
+          const obj = {
-              uid: index,
+            uid: index,
-              name: '文件' + (index + 1),
+            name: '文件' + (index + 1),
-              status: 'done',
+            status: 'done',
-              url: item,
+            url: item,
-            };
+          };
-            list.push(obj);
+          list.push(obj);
-          });
+        });
-          this.i.uploadVanchor = list;
+        this.i.uploadVanchor = list;
-          this.initSF();
+        this.initSF();
-          this.getLog(this.i?.billCode);
+        this.getLog(this.i?.billCode);
-        }
+      }
-      })
+    })
-    }
+  }
   // getDetail(id: string) {
 
   //   this.service.request(this.service.$api_get_getRiskDetail, { id }).subscribe(res => {
@@ -152,9 +141,9 @@ export class OrderManagementRiskDetailComponent implements OnInit {
   goBack() {
     window.history.go(-1)
   }
- /**
+  /**
-   * 获取操作日志
+    * 获取操作日志
-   */
+    */
   getLog(operateObject: any) {
     this.service.request(this.service.$api_get_risk_order_log, { operateObject, operateType: '8', size: 100 }).subscribe(res => {
       this.logList = res?.records;

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,329 +41,243 @@
   </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>
-    <sv label="车牌颜色">
+      <div>
-      <nz-select
+        <button nz-button nzType="primary" nzSize="small" nzDanger>{{ carStatus[detailData?.approvalStatus] }}</button>
-        [(ngModel)]="detailData.carNoColor"
+        <b class="ml-md" style="font-size: 18px">车牌号: {{ detailData?.carNo }}</b>
-        [nzPlaceHolder]="isEdit ? '' : '-'"
+      </div>
-        [nzBorderless]="!isEdit"
+      <div>
-        [nzShowArrow]="isEdit"
+        <ng-container *ngIf="!isEdit">
-        [nzDisabled]="!isEdit"
+          <button nz-button nzType="default" nzDanger (click)="approveDriver()" acl
-      >
+            acl-ability="VEHICLE-AUDIT-DETAIL-pass">通过</button>
-        <nz-option *ngFor="let i of contenCarNoColor" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
+          <button nz-button nzType="default" nzDanger (click)="rejectedDriver()" acl
-      </nz-select>
+            acl-ability="VEHICLE-AUDIT-DETAIL-reject"
-    </sv>
+            *ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">驳回</button>
-    <sv label="车型">
+          <button nz-button nzType="default" nzDanger (click)="ratify()" acl
-      <!-- <nz-select [(ngModel)]="detailData.carModel" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+            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 [(ngModel)]="detailData.carNoColor" [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>
+      <sv label="车型">
+        <!-- <nz-select [(ngModel)]="detailData.carModel" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
         [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"
+      </sv>
-        [(ngModel)]="detailData.carModel"
+      <sv label="车长">
-        [readonly]="!isEdit"
+        <nz-select [(ngModel)]="detailData.carLength" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        [nzBorderless]="!isEdit"
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-        [placeholder]="isEdit ? '' : '-'"
+          <nz-option *ngFor="let i of contenCarLength" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
-      />
+        </nz-select>
-    </sv>
+      </sv>
-    <sv label="车长">
+      <sv label="车辆能源类型">
-      <nz-select
+        <nz-select [(ngModel)]="detailData.carEnergyType" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        [(ngModel)]="detailData.carLength"
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-        [nzPlaceHolder]="isEdit ? '' : '-'"
+          <nz-option *ngFor="let i of contenCarEnergy" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
-        [nzBorderless]="!isEdit"
+        </nz-select>
-        [nzShowArrow]="isEdit"
+      </sv>
-        [nzDisabled]="!isEdit"
+      <sv label="是否为挂车">
-      >
+        <nz-select [(ngModel)]="detailData.isTrailer" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        <nz-option *ngFor="let i of contenCarLength" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-      </nz-select>
+          <nz-option [nzValue]="false" nzLabel="否"></nz-option>
-    </sv>
+          <nz-option [nzValue]="true" nzLabel="是"></nz-option>
-    <sv label="车辆能源类型">
+        </nz-select>
-      <nz-select
+      </sv>
-        [(ngModel)]="detailData.carEnergyType"
+      <sv label="是否挂靠">
-        [nzPlaceHolder]="isEdit ? '' : '-'"
+        <nz-select [(ngModel)]="detailData.isSelf" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        [nzBorderless]="!isEdit"
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-        [nzShowArrow]="isEdit"
+          <nz-option [nzValue]="false" nzLabel="否"></nz-option>
-        [nzDisabled]="!isEdit"
+          <nz-option [nzValue]="true" nzLabel="是"></nz-option>
-      >
+        </nz-select>
-        <nz-option *ngFor="let i of contenCarEnergy" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
+      </sv>
-      </nz-select>
+    </sv-container>
-    </sv>
+    <sv-container col="1" class="mt-md" labelWidth="140">
-    <sv label="是否为挂车">
+      <sv label="车头照">
-      <nz-select
+        <ng-container *ngTemplateOutlet="
-        [(ngModel)]="detailData.isTrailer"
-        [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
-        [(ngModel)]="detailData.isSelf"
-        [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 label="车头照">
-      <ng-container
-        *ngTemplateOutlet="
           uploadTemplate;
           context: { image: detailData?.carFrontPhotoWatermark, key: 'carFrontPhotoWatermark', hover: 'PhotoWatermark2' }
-        "
+        ">
-      >
+        </ng-container>
-      </ng-container>
+      </sv>
-    </sv>
+    </sv-container>
-  </sv-container>
+  </div>
-  <nz-divider></nz-divider>
+  <div class="mb-lg">
-
+    <div class="font-weight-blod text-md detail-title">
-  <sv-container col="3">
+      <a class="sign"></a>
-    <sv-title style="font-weight: 700">行驶证信息</sv-title>
+      <span>行驶证信息</span>
-    <sv label="档案编号">
+    </div>
-      <input
+    <sv-container col="3" labelWidth="140" class="new-sv-container">
-        nz-input
+      <sv label="档案编号">
-        type="text"
+        <input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
-        [(ngModel)]="detailData.archivesNo"
+          [placeholder]="isEdit ? '' : '-'" />
-        [readonly]="!isEdit"
+      </sv>
-        [nzBorderless]="!isEdit"
+      <sv label="行驶证注册日期">
-        [placeholder]="isEdit ? '' : '-'"
+        <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseRegisterTime" [readonly]="!isEdit" [nzBorderless]="!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 ? '' : '-'"
+      </sv>
-        [nzBorderless]="!isEdit"
+    </sv-container>
-        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+  </div>
-      ></nz-date-picker>
-    </sv>
-  </sv-container>
 
-  <sv-container col="3">
+  <div class="mb-lg">
-    <sv label="行驶证到期日">
+    <div class="font-weight-blod text-md detail-title">
-      <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+      <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 ? '' : '-'"
+      </sv>
-        [nzBorderless]="!isEdit"
+      <sv label="行驶证签发机关">
-        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+        <input nz-input style="width: '300px'" type="text" [(ngModel)]="detailData.driverLicenseSigningOrg"
-      ></nz-date-picker>
+          [readonly]="!isEdit" [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
-    </sv>
+      </sv>
-    <sv label="行驶证签发机关">
+    </sv-container>
-      <input
-        nz-input
-        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="行驶证发证日期">
+      <sv label="行驶证发证日期">
-      <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseGetTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        <!-- <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 ? '' : '-'"
+      </sv>
-        [nzBorderless]="!isEdit"
+      <sv label="车辆识别代码">
-        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+        <input nz-input type="text" [(ngModel)]="detailData.carDistinguishCode" [readonly]="!isEdit"
-      ></nz-date-picker>
+          [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
-    </sv>
+      </sv>
-    <sv label="车辆识别代码">
+      <sv label="使用性质">
-      <input
+        <nz-select [(ngModel)]="detailData.useNature" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
-        nz-input
+          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
-        type="text"
+          <nz-option [nzValue]="'1'" nzLabel="营运"></nz-option>
-        [(ngModel)]="detailData.carDistinguishCode"
+          <nz-option [nzValue]="'0'" nzLabel="非营运"></nz-option>
-        [readonly]="!isEdit"
+        </nz-select>
-        [nzBorderless]="!isEdit"
+      </sv>
-        [placeholder]="isEdit ? '' : '-'"
+    </sv-container>
-      />
-    </sv>
-    <sv label="使用性质">
-      <nz-select
-        [(ngModel)]="detailData.useNature"
-        [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="核定载质量（吨）">
+      <sv label="核定载质量（吨）">
-      <input
+        <input nz-input type="text" [(ngModel)]="detailData.carLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
-        nz-input
+          [placeholder]="isEdit ? '' : '-'" />
-        type="text"
+      </sv>
-        [(ngModel)]="detailData.carLoad"
+      <sv label="整备质量">
-        [readonly]="!isEdit"
+        <input nz-input type="text" [(ngModel)]="detailData.curbWeight" [readonly]="!isEdit" [nzBorderless]="!isEdit"
-        [nzBorderless]="!isEdit"
+          [placeholder]="isEdit ? '' : '-'" />
-        [placeholder]="isEdit ? '' : '-'"
+      </sv>
-      />
+      <sv label="总质量">
-    </sv>
+        <input nz-input type="text" [(ngModel)]="detailData.carTotalLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
-    <sv label="整备质量">
+          [placeholder]="isEdit ? '' : '-'" />
-      <input
+      </sv>
-        nz-input
+      <sv label="所有人">
-        type="text"
+        <input nz-input style="width: '300px'" type="text" [(ngModel)]="detailData.carOwner" [readonly]="!isEdit"
-        [(ngModel)]="detailData.curbWeight"
+          [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
-        [readonly]="!isEdit"
+      </sv>
-        [nzBorderless]="!isEdit"
+    </sv-container>
-        [placeholder]="isEdit ? '' : '-'"
+    <sv-container class="new-sv-container" labelWidth="140" col="1">
-      />
+      <sv label="行驶证照片">
-    </sv>
+        <ng-container *ngTemplateOutlet="
-    <sv label="总质量">
-      <input
-        nz-input
-        type="text"
-        [(ngModel)]="detailData.carTotalLoad"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
-    </sv>
-    <sv label="所有人">
-      <input
-        nz-input
-        style="width: '300px'"
-        type="text"
-        [(ngModel)]="detailData.carOwner"
-        [readonly]="!isEdit"
-        [nzBorderless]="!isEdit"
-        [placeholder]="isEdit ? '' : '-'"
-      />
-    </sv>
-  </sv-container>
-  <sv-container col="1">
-    <sv label="行驶证照片">
-      <ng-container
-        *ngTemplateOutlet="
           uploadTemplate;
           context: { image: detailData?.certificatePhotoFrontWatermark, key: 'certificatePhotoFrontWatermark', hover: 'FrontWatermark' }
-        "
+        ">
-      >
+        </ng-container>
-      </ng-container>
+        <ng-container *ngTemplateOutlet="
-      <ng-container
-        *ngTemplateOutlet="
           uploadTemplate;
           context: { image: detailData?.certificatePhotoBackWatermark, key: 'certificatePhotoBackWatermark', hover: 'BackWatermark' }
-        "
+        ">
-      >
+        </ng-container>
-      </ng-container>
+      </sv>
-    </sv>
+    </sv-container>
-  </sv-container>
+  </div>
-  <nz-divider></nz-divider>
+  <div class="mb-lg">
-  <sv-container col="3" class="mt16">
+    <div class="font-weight-blod text-md detail-title">
-    <sv-title style="font-weight: 700">道路运输证信息</sv-title>
+      <a class="sign"></a>
-    <sv label="道路运输证号">
+      <span>道路运输证信息</span>
-      <input
+    </div>
-        nz-input
+    <sv-container col="3" class="mt16 new-sv-container" labelWidth="140">
-        type="text"
+      <sv label="道路运输证号">
-        [(ngModel)]="detailData.roadTransportNo"
+        <input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit"
-        [readonly]="!isEdit"
+          [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
-        [nzBorderless]="!isEdit"
+      </sv>
-        [placeholder]="isEdit ? '' : '-'"
+      <sv label="经营许可证号">
-      />
+        <input nz-input type="text" [(ngModel)]="detailData.roadTransportLicenceNo" [readonly]="!isEdit"
-    </sv>
+          [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
-    <sv label="经营许可证号">
+      </sv>
-      <input
+      <sv label="发证日期">
-        nz-input
+        <!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportStartTime" [readonly]="!isEdit" [nzBorderless]="!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 ? '' : '-'"
+      </sv>
-        [nzBorderless]="!isEdit"
+      <sv label="有效期至">
-        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+        <!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
-      ></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 ? '' : '-'"
+      </sv>
-        [nzBorderless]="!isEdit"
+      <sv label="道路运输证照片">
-        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+        <ng-container *ngTemplateOutlet="
-      ></nz-date-picker>
-    </sv>
-    <sv label="道路运输证照片">
-      <ng-container
-        *ngTemplateOutlet="
           uploadTemplate;
           context: { image: detailData?.roadTransportPhotoWatermark, key: 'roadTransportPhotoWatermark', hover: 'Watermark' }
-        "
+        ">
-      >
+        </ng-container>
-      </ng-container>
+      </sv>
-    </sv>
+    </sv-container>
-  </sv-container>
+  </div>
-  <nz-divider></nz-divider>
+  <div class="mb-lg">
-  <sv-container col="2" class="mt16">
+    <div class="font-weight-blod text-md detail-title">
-    <sv-title style="font-weight: 700">认证司机</sv-title>
+      <a class="sign"></a>
-  </sv-container>
+      <span>认证司机</span>
-  <st
+    </div>
-    #st
+    <st #st [bordered]="true" [columns]="columns" [scroll]="{x: '1400px'}" [data]="service.$api_get_queryDriverByCarId"
-    [bordered]="true"
+      [req]="{ method: 'POST', allInBody: true, params: reqParams }" [res]="{ reName: { list: 'data', total: 'data' } }"
-    [columns]="columns"
+      [ngStyle]="{ margin: '1rem 0' }" multiSort size="small" [page]="{ show: false }">
-    [scroll]="{x: '1200px'}"
+      <ng-template st-row="auditStatusEnum" let-item let-index="index">
-    [data]="service.$api_get_queryDriverByCarId"
+        <div>
-    [req]="{ method: 'POST', allInBody: true, params: reqParams }"
+          <span *ngIf="item?.auditStatusEnum === -1 || item?.auditStatusEnum === '-1'">未上传</span>
-    [res]="{ reName: { list: 'data', total: 'data' } }"
+          <span *ngIf="item?.auditStatusEnum === 0 || item?.auditStatusEnum === '0'">草稿</span>
-    [ngStyle]="{ margin: '1rem 0' }"
+          <span *ngIf="item?.auditStatusEnum === 10 || item?.auditStatusEnum === '10'">待审核</span>
-    multiSort
+          <span *ngIf="item?.auditStatusEnum === 20 || item?.auditStatusEnum === '20'">已审核</span>
-    size="small"
+          <span *ngIf="item?.auditStatusEnum === 30 || item?.auditStatusEnum === '30'">已驳回</span>
-    [page]="{ show: false }"
+          <span *ngIf="item?.auditStatusEnum === 40 || item?.auditStatusEnum === '40'">证件过期</span>
-  >
+        </div>
-    <ng-template st-row="auditStatusEnum" let-item let-index="index">
+      </ng-template>
-      <div>
+    </st>
-        <span *ngIf="item?.auditStatusEnum === -1 || item?.auditStatusEnum === '-1'">未上传</span>
+  </div>
-        <span *ngIf="item?.auditStatusEnum === 0 || item?.auditStatusEnum === '0'">草稿</span>
-        <span *ngIf="item?.auditStatusEnum === 10 || item?.auditStatusEnum === '10'">待审核</span>
-        <span *ngIf="item?.auditStatusEnum === 20 || item?.auditStatusEnum === '20'">已审核</span>
-        <span *ngIf="item?.auditStatusEnum === 30 || item?.auditStatusEnum === '30'">已驳回</span>
-        <span *ngIf="item?.auditStatusEnum === 40 || item?.auditStatusEnum === '40'">证件过期</span>
-      </div>
-    </ng-template>
-  </st>
 </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

@@ -22,7 +22,7 @@ import { fromEvent, Subscription } from 'rxjs';
   templateUrl: './detail.component.html',
   styleUrls: ['./detail.component.less']
 })
-export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy  {
+export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy {
   @ViewChild('st', { static: false }) st!: STComponent;
   @ViewChild('redectModal', { static: false }) redectModal!: any;
   columns!: STColumn[];
@@ -36,8 +36,16 @@ export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy
   approvalOpinion = '';
   uploadURl = apiConf.waterFileUpload;
   disabledUpload = false;
+  carStatus: any = {
+    1: '未上传',
+    0: '草稿',
+    10: '待审核',
+    20: '已审核',
+    30: '已驳回',
+    40: '证件过期',
+  }
+
 
-  
   scrollTop = 0;
   subscribeScoll!: Subscription;
   constructor(
@@ -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,14 +160,14 @@ 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;
+      return;
     }
     this.service.request(this.service.$api_get_update_audit, this.detailData).subscribe(res => {
       if (res) {
         this.getDetailList();
-         this.isEdit = false;
+        this.isEdit = false;
         this.service.msgSrv.success('修改成功！');
       }
     });
@@ -271,14 +279,14 @@ export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy
     //   this.getDetailList();
     // });
     console.log(item);
-    
+
-      const params = {
+    const params = {
-        imgList: [item.carProtocal],
+      imgList: [item.carProtocal],
-        index: 0
+      index: 0
-      };
+    };
-      this.nzImageService.preview([{ src: item.carProtocal}]);
+    this.nzImageService.preview([{ src: item.carProtocal }]);
-      this.st.reload();
+    this.st.reload();
-      this.getDetailList();
+    this.getDetailList();
   }
   updateEvaluate(item: any) {
     this.modal.createStatic(VehicleComponentsListEditComponent, { i: item }).subscribe(i => {

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>
@@ -135,4 +135,4 @@
       </se>
     </div>
   </div>
-</ng-template>
+</ng-template>

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);
   }
 }