车辆对接

src/app/routes/supply-management/components/vehicle-detail/vehicle-detail.component.less

@@ -1,37 +1,84 @@
-:host{
-    .btn-size{
-        font-size: 14px;
+:host {
+  .source-info {
+    min-height: 210px;
+
+    p {
+      margin-bottom: .5em;
     }
-    .bdr{
-        border-right: 1px solid #ccc;
+  }
+
+  .btn-size {
+    font-size: 14px;
+  }
+
+  .bdr {
+    border-right: 1px solid #ccc;
+  }
+
+  .bdl {
+    border-left: 1px solid #ccc;
+  }
+
+  .title {
+    font-weight: bold;
+    font-size: 26;
+  }
+
+  .freight-info-box {
+    width: 95%;
+
+    p {
+      margin-bottom: 5px;
     }
-    .bdl{
-        border-left: 1px solid #ccc;
+  }
+
+  .freigth-label {
+    display: inline-block;
+    width: 50px;
+    text-align: right;
+  }
+
+  ::ng-deep {
+    .approval-status {
+      .ant-steps {
+        width: 70%;
+        margin: 0 auto;
+      }
     }
-    .title{
-        font-size: 26;
-        font-weight: bold;
-    }
-    .source-info{
-        p{
-            margin-bottom: .5em;
-        }
-    }
-    .freight-info-box{
-        width: 95%;
-    }
-    .freigth-label{
-        display: inline-block;
-        width: 50px;
-        text-align: right;
+  }
+
+  .handling-info {
+    min-height: 176px;
+    border: 1px solid #ccc;
+
+    .loading-row {
+      display: flex;
     }
 
-    ::ng-deep{
-      .approval-status{
-         .ant-steps{
-             width: 70%;
-             margin: 0 auto;
-         } 
-      }  
+    .handling-info-icon {
+      width: 32px;
+      height: 32px;
+      margin-right: 24px;
+      color: #fff;
+      line-height: 32px;
+      text-align: center;
+      border-radius: 50%;
+
+      &.loading-bg {
+        background-color: #50D4AB;
+      }
+
+      &.unloaing-bg {
+        background: #F66F6A;
+      }
     }
-}
+
+    .info {
+      flex: 1;
+    }
+
+    .time-info {
+      margin-left: 56px;
+    }
+  }
+}