From b435b26c7291ae95d6c139255b71daefc0c6fb94 Mon Sep 17 00:00:00 2001
From: zhouxueli <2841188632@qq.com>
Date: Mon, 28 Aug 2023 17:50:18 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=93=E7=AE=97=E5=8D=95=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/mixin.scss                |  4 ++
 src/views/index/supplySettlement.vue | 99 ++++++++++++++--------------
 2 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 2b27f1a2..f9ba4f3a 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -38,4 +38,8 @@
 @mixin flexCenter(){
     display: flex;
     align-items: center;
+}
+@mixin flexBetCen{
+    @include flexColBet;
+    align-items: center;
 }
\ No newline at end of file
diff --git a/src/views/index/supplySettlement.vue b/src/views/index/supplySettlement.vue
index 623c24a9..ddb0747a 100644
--- a/src/views/index/supplySettlement.vue
+++ b/src/views/index/supplySettlement.vue
@@ -4,15 +4,17 @@
       <div class="title">公里数:</div>
       <div class="line"></div>
       <div class="metersWrap">
-        <div class="leftKiloMeters">
-          <div v-show="supplierSettlementType != 1">AB段公里数</div>
-          <div v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4">BC段公里数</div>
-          <div v-show="supplierSettlementType == 3 || supplierSettlementType == 4">CA段公里数</div>
+        <div class="item"  v-show="supplierSettlementType != 1">
+          <div class="leftKiloMeters">AB段公里数</div>
+          <div class="rightInput"><input type="number" v-model="form.reportMileageAb"/>公里</div>
         </div>
-        <div class="rightInputMeters">
-          <div v-show="supplierSettlementType != 1"><input type="number" v-model="form.reportMileageAb"/>公里</div>
-          <div v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4"><input type="number" v-model="form.reportMileageBc"/>公里</div>
-          <div v-show="supplierSettlementType == 3 || supplierSettlementType == 4"><input type="number" v-model="form.reportMileageCa"/>公里</div>
+        <div class="item"  v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4">
+          <div class="leftKiloMeters">BC段公里数</div>
+          <div class="rightInput"><input type="number" v-model="form.reportMileageBc"/>公里</div>
+        </div>
+        <div class="item"  v-show=" supplierSettlementType == 3 || supplierSettlementType == 4">
+          <div class="leftKiloMeters">CA段公里数</div>
+          <div class="rightInput"><input type="number" v-model="form.reportMileageCa"/>公里</div>
         </div>
       </div>
     </div>
@@ -20,15 +22,17 @@
       <div class="title">路桥费:</div>
       <div class="line"></div>
       <div class="metersWrap">
-        <div class="leftKiloMeters">
-          <div v-show="supplierSettlementType != 1">AB段路桥费</div>
-          <div v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4">BC段路桥费</div>
-          <div v-show=" supplierSettlementType == 3 || supplierSettlementType == 4">CA段路桥费</div>
+        <div class="item"  v-show="supplierSettlementType != 1">
+          <div class="leftKiloMeters">AB段路桥费</div>
+          <div class="rightInput"><input type="number" v-model="form.bridgeAmountAb"/>元</div>
         </div>
-        <div class="rightInputMeters">
-          <div  v-show="supplierSettlementType != 1"><input type="number" v-model="form.bridgeAmountAb"/>元</div>
-          <div v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4"><input type="number" v-model="form.bridgeAmountBc"/>元</div>
-          <div v-show="supplierSettlementType == 3 || supplierSettlementType == 4"><input type="number" v-model="form.bridgeAmountCa"/>元</div>
+        <div class="item"  v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4">
+          <div class="leftKiloMeters">BC段路桥费</div>
+          <div class="rightInput"><input type="number" v-model="form.bridgeAmountBc"/>元</div>
+        </div>
+        <div class="item"  v-show=" supplierSettlementType == 3 || supplierSettlementType == 4">
+          <div class="leftKiloMeters">CA段路桥费</div>
+          <div class="rightInput"><input type="number" v-model="form.bridgeAmountCa"/>元</div>
         </div>
       </div>
     </div >
@@ -36,31 +40,31 @@
       <div class="title">其他费用:</div>
       <div class="line"></div>
       <div class="metersWrap">
-        <div class="leftKiloMeters">
-          <div>小轮个数</div>
-          <div>等候费</div>
-          <div>困境费</div>
-          <div class="blueColor" style="font-weight: 500;font-size: 14px">已收取客户金额</div>
+        <div class="item"  >
+          <div class="leftKiloMeters">小轮个数</div>
+          <div class="rightInput"><input type="number" v-model="form.tyreNumber"/>个</div>
         </div>
-        <div class="rightInputMeters" style="opacity: 1">
-          <div class="alignRight"><input type="number" v-model="form.tyreNumber"/>个</div>
-          <div  class="alignRight"><input type="number" v-model="form.waitAmount"/>元</div>
-          <div class="alignRight"><input type="number" v-model="form.dilemmaFee"/>元</div>
-          <div class="blueColor" style="font-weight: 500;font-size: 14px ;"><input  class="blueColor" type="number" v-model="form.customerAmount"/>元</div>
+        <div class="item">
+          <div class="leftKiloMeters">等候费</div>
+          <div class="rightInput"><input type="number" v-model="form.waitAmount"/>元</div>
+        </div>
+        <div class="item"  >
+          <div class="leftKiloMeters">困境费</div>
+          <div class="rightInput"><input type="number" v-model="form.dilemmaFee"/>元</div>
+        </div>
+        <div class="item blueColor" >
+          <div class="leftKiloMeters">收取客户金额</div>
+          <div class="rightInput blueColor"><input class="blueColor" type="number" v-model="form.customerAmount"/>元</div>
         </div>
       </div>
     </div>
     <div class="btn">
       <button @click="submit">提交</button>
     </div>
-<!--    <div class="fixed-bottom">-->
-<!--      <common-btn class="btn" @submitClick="submit" />-->
-<!--    </div>-->
   </div>
 </template>
 
 <script>
-// import CommonBtn  from "@/components/commonBtn.vue"
 import {leftCopy} from  "@/utils/common"
 import {getOrderSettlement, updateOrderSettlement} from "@/api/order"
 export default {
@@ -132,9 +136,6 @@ export default {
       }
     }
   },
-  components:{
-    // CommonBtn
-  }
 }
 </script>
 
@@ -146,7 +147,6 @@ export default {
   overflow-y: scroll;
 }
 .common {
-  //@include wh(100%, 161px);
   width: 100%;
   background: #FFFFFF;
   backdrop-filter: blur(5.602678571428572px);
@@ -156,7 +156,6 @@ export default {
 }
 .otherFee {
   @include wh(100%, 198px);
-  //margin-bottom: 20px;
 }
 .title {
   @include fontWeightSize(bold, 14px);
@@ -172,24 +171,23 @@ export default {
   border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
 }
 .metersWrap {
-  display: flex;
-  justify-content: space-between;
+  @include flexBetween;
   line-height: 37px;
   .blueColor{
     color: #4682FE;
   }
-  .alignRight{
-    text-align: right;
-    opacity: .5;
-  }
-  .leftTitle {
-    @include fontWeightSize(400, 14px);
-  }
-  .rightInputMeters {
-    margin-right: 13px;
-    @include fontWeightSize(bold, 13px);
-    color: #323643;
-    opacity: .5;
+  .item{
+    width: 100%;
+    @include flexBetCen;
+    .rightInput{
+      @include fontWeightSize(bold, 13px);
+      color: #323643;
+      opacity: .5;
+    }
+    .blueColor{
+      color: #4682FE;
+      opacity:  1 !important;
+    }
     input {
       height: 30px;
       border: none;
@@ -198,6 +196,9 @@ export default {
       opacity: .8;
     }
   }
+  .leftTitle {
+    @include fontWeightSize(400, 14px);
+  }
 }
 .btn {
   //position:absolute;