查看空运价格商品清关费显示优化

src/views/ecw/channel/componrnts/packaging-type.vue

 <template>
- <div>
+ <div class="wrapper">
    <template v-if="!readonly">
     <el-row type="flex" align="align" :gutter="10" >
-      <el-col :span="6">空运订单重量上限(kg)</el-col>
+      <el-col :span="6">{{$t('空运订单重量上限')}}(kg)</el-col>
       <el-col :span="6" ><el-input v-model="value1.airWeightLimit"></el-input></el-col>
       <el-col :span="6">
         <slot></slot>
       </el-col>
     </el-row>
-    <h1>空运清关费</h1>
+    <h1>{{$t('空运清关费')}}</h1>
    </template>
       <div v-for="(item ,index) in value1[keyArr]">
         <el-row :gutter="10">
-          <el-col :span="4">
-            第{{index + 1 }}阶梯定价方案：
+          <el-col :span="5">
+            {{$t('第{index}阶梯定价方案', {index: index+1})}}：
           </el-col>
           <el-col :span="6"  v-if="!readonly">
             <el-button type="primary" @click="addInterval" v-if="index === 0" >
-              添加区间
+              {{$t('添加区间')}}
             </el-button>
             <el-button type="danger" @click="deleteFn(index)" v-else>
-              删除
+              {{$t('删除')}}
             </el-button>
           </el-col>
         </el-row>
         <el-row :gutter="10">
-          <el-col :span="3">
-            第{{index + 1}}阶梯
+          <el-col :span="5">
+            {{$t('第{index}阶梯', {index: index+1})}}
           </el-col>
-          <el-col  :span="9">
+          <el-col  :span="15">
             <div style="display: flex;align-items: center;">
-              <el-input v-model="item.startNum"></el-input> - <el-input v-model="item.endNum" ></el-input > /
+              <el-input v-model="item.startNum" class="mr-10"></el-input>
+              <span  class="mr-10">-</span>
+              <el-input v-model="item.endNum" class="mr-10"></el-input >
+              <span class="mr-10">/</span>
               <weight-select @change="changeWeight" :disabled="index > 0"  v-model="item.weightUnit" :options="unitList"></weight-select>
             </div>
           </el-col>
         </el-row>
         <el-row :gutter="10">
-          <el-col :span="3" >
-            空运清关费
+          <el-col :span="5" >
+            {{$t('空运清关费')}}
           </el-col>
-          <el-col :span="9">
+          <el-col :span="15">
             <div style="display: flex;align-items: center;">
-              <el-input v-model="item.clearancePrice"></el-input>
-              <currency-select @change="setCurrency" :disabled="index > 0" :options="currencyList" v-model="item.clearancePriceUnit"></currency-select>
-              / <weight-select :disabled="index > 0" @change="setAirFreightWeight" :options="unitList" v-model="item.clearanceVolumeUnit"></weight-select>
+              <el-input v-model="item.clearancePrice" class="w-100 mr-10"></el-input>
+              <currency-select class=" mr-10" @change="setCurrency" :disabled="index > 0" :options="currencyList" v-model="item.clearancePriceUnit"></currency-select>
+              <span class=" mr-10">/</span>
+              <weight-select :disabled="index > 0" @change="setAirFreightWeight" :options="unitList" v-model="item.clearanceVolumeUnit"></weight-select>
             </div>
           </el-col>
         </el-row>
@@ -153,6 +157,9 @@ export default {
 </script>
 
 <style scoped>
+.wrapper{
+  font-size: 14px;
+}
 .el-row {
   margin-bottom: 10px;
   display: flex;