调整查看详情中费用展示格式对齐

src/views/Letter/Letter.vue

@@ -1960,63 +1960,75 @@
             ￥{{queryOrders.orderCommissionVo&&queryOrders.orderCommissionVo.totalFeePremium?queryOrders.orderCommissionVo.totalFeePremium:0 }}</span>
         </div>
         <div class="headers headers_Custom" >
-          <div v-show="queryOrders.jqpremium">
-            交强险金额：
-            <span>
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="queryOrders.jqpremium">
+              交强险金额：
+              <span>
               ￥{{
               queryOrders.jqpremium }}
             </span>
-          </div>
-          <div v-if="queryOrders.orderCommissionVo&&queryOrders.orderCommissionVo.jqFeeRate">
-            手续费比例：
-            <span>
+            </div></el-col>
+            <el-col :span="4" v-if="queryOrders.orderCommissionVo&&queryOrders.orderCommissionVo.jqFeeRate"><div>
+              手续费比例：
+              <span>
               {{
                 queryOrders.orderCommissionVo.jqFeeRate  }}%
             </span>
-          </div>
-          <div v-if="queryOrders.orderCommissionVo&&queryOrders.orderCommissionVo.jqFeePremium">
-            手续费金额：
-            <span>
+            </div></el-col>
+            <el-col :span="5" v-if="queryOrders.orderCommissionVo&&queryOrders.orderCommissionVo.jqFeePremium"><div>
+              手续费金额：
+              <span>
               ￥{{queryOrders.orderCommissionVo.jqFeePremium}}
             </span>
-          </div>
-          <div v-show="queryOrders.taxamount">
-            车船税：
-            <span>￥{{ queryOrders.taxamount }}</span>
-          </div>
-          <div v-show="queryOrders.jqstartdate">
-            交强险起保日期：
-            <span>{{ queryOrders.jqstartdate }}</span>
-          </div>
+            </div></el-col>
+            <el-col :span="6"><div v-show="queryOrders.jqstartdate">
+              交强险起保日期：
+              <span>{{ queryOrders.jqstartdate }}</span>
+            </div></el-col>
+            <el-col :span="3"><div v-show="queryOrders.taxamount">
+              车船税：
+              <span>￥{{ queryOrders.taxamount }}</span>
+            </div></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-show="queryOrders.sypremium">
-            商业险金额：
-            <span>￥{{ queryOrders.sypremium }}</span>
-          </div>
-          <div v-if="queryOrders.orderCommissionVo&&queryOrders.orderCommissionVo.syFeeRate">
-            手续费比例：
-            <span>
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="queryOrders.sypremium">
+              商业险金额：
+              <span>￥{{ queryOrders.sypremium }}</span>
+            </div></el-col>
+            <el-col :span="4" v-if="queryOrders.orderCommissionVo&&queryOrders.orderCommissionVo.syFeeRate"><div>
+              手续费比例：
+              <span>
               {{
                 queryOrders.orderCommissionVo.syFeeRate  }}%
             </span>
-          </div>
-          <div v-if="queryOrders.orderCommissionVo&&queryOrders.orderCommissionVo.syFeePremium">
-            手续费金额：
-            <span>
+            </div></el-col>
+            <el-col :span="5" v-if="queryOrders.orderCommissionVo&&queryOrders.orderCommissionVo.syFeePremium"><div>
+              手续费金额：
+              <span>
               ￥{{queryOrders.orderCommissionVo.syFeePremium}}
             </span>
-          </div>
-          <div v-show="queryOrders.systartdate">
-            商业险起保日期：
-            <span>{{ queryOrders.systartdate }}</span>
-          </div>
+            </div></el-col>
+            <el-col :span="6"><div v-show="queryOrders.systartdate">
+              商业险起保日期：
+              <span>{{ queryOrders.systartdate }}</span>
+            </div></el-col>
+            <el-col :span="3"></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-if="queryOrders.jypremium">
-            驾意险：
-            <span>￥{{ queryOrders.jypremium }}</span>
-          </div>
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5" v-if="queryOrders.jypremium"><div>
+              驾意险：
+              <span>￥{{ queryOrders.jypremium }}</span>
+            </div></el-col>
+            <el-col :span="18"></el-col>
+          </el-row>
+
         </div>
       </div>
       <div class="Enclosure" v-if="queryOrders">
@@ -9011,8 +9023,8 @@ export default {
 /* 内容待定 */
 .headers_Custom {
   div {
-    padding: 5px 40px;
-    font-size: 16px;
+    padding: 2px 0px;
+    font-size: 14px;
 
     & > span {
       color: rgb(226, 118, 10);

src/views/Letter/Orderlist.vue

@@ -240,63 +240,74 @@
             ￥{{orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.totalFeePremium?orderInfo.orderCommissionVo.totalFeePremium:0 }}</span>
         </div>
         <div class="headers headers_Custom" >
-          <div v-show="orderInfo.jqpremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.jqpremium">
             交强险金额：
             <span>
               ￥{{
                 orderInfo.jqpremium }}
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.jqFeeRate  }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.jqFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.taxamount">
-            车船税：
-            <span>￥{{ orderInfo.taxamount }}</span>
-          </div>
-          <div v-show="orderInfo.jqstartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.jqstartdate">
             交强险起保日期：
             <span>{{ orderInfo.jqstartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"><div v-show="orderInfo.taxamount">
+            车船税：
+            <span>￥{{ orderInfo.taxamount }}</span>
+          </div></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-        <div v-show="orderInfo.sypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.sypremium">
           商业险金额：
           <span>￥{{ orderInfo.sypremium }}</span>
-        </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate">
+        </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.syFeeRate  }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.syFeePremium }}
             </span>
-          </div>
-        <div v-show="orderInfo.systartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.systartdate">
           商业险起保日期：
           <span>{{ orderInfo.systartdate }}</span>
-        </div>
+        </div></el-col>
+            <el-col :span="3"></el-col>
+          </el-row>
       </div>
         <div class="headers headers_Custom" >
-          <div v-if="orderInfo.jypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5" v-if="orderInfo.jypremium"><div>
             驾意险：
             <span>￥{{ orderInfo.jypremium }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="18"></el-col>
+          </el-row>
         </div>
       </div>
       <div class="Enclosure" v-if="orderInfo.extendInfo">
@@ -2695,13 +2706,17 @@ export default {
   font-weight: bold;
   color: #333;
 }
+
 /* 内容待定 */
-.headers_Custom >div{
-  padding: 5px 40px;
-  font-size: 16px;
-}
-.headers_Custom >div>span {
-  color: rgb(226, 118, 10);
+.headers_Custom {
+  div {
+    padding: 2px 0px;
+    font-size: 14px;
+
+  & > span {
+      color: rgb(226, 118, 10);
+    }
+  }
 }
 
   .back {

src/views/Task/Complete.vue

@@ -256,63 +256,74 @@
             ￥{{orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.totalFeePremium?orderInfo.orderCommissionVo.totalFeePremium:0 }}</span>
         </div>
         <div class="headers headers_Custom">
-          <div v-show="orderInfo.jqpremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.jqpremium">
             交强险金额：
             <span>
               ￥{{
                 orderInfo.jqpremium }}
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.jqFeeRate }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.jqFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.taxamount">
-            车船税：
-            <span>￥{{ orderInfo.taxamount }}</span>
-          </div>
-          <div v-show="orderInfo.jqstartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.jqstartdate">
             交强险起保日期：
             <span>{{ orderInfo.jqstartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"><div v-show="orderInfo.taxamount">
+            车船税：
+            <span>￥{{ orderInfo.taxamount }}</span>
+          </div></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-show="orderInfo.sypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.sypremium">
             商业险金额：
             <span>￥{{ orderInfo.sypremium }}</span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.syFeeRate  }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.syFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.systartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.systartdate">
             商业险起保日期：
             <span>{{ orderInfo.systartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-if="orderInfo.jypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5" v-if="orderInfo.jypremium"><div>
             驾意险：
             <span>￥{{ orderInfo.jypremium }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="18"></el-col>
+          </el-row>
         </div>
       </div>
       <div class="Enclosure" v-if="orderInfo.extendInfo">
@@ -2684,8 +2695,8 @@
   /* 内容待定 */
   .headers_Custom {
     div {
-      padding: 5px 30px;
-      font-size: 16px;
+      padding: 2px 0px;
+      font-size: 14px;
 
       &>span {
         color: rgb(226, 118, 10);

src/views/Task/OfflinePay.vue

@@ -260,63 +260,74 @@
             ￥{{orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.totalFeePremium?orderInfo.orderCommissionVo.totalFeePremium:0 }}</span>
         </div>
         <div class="headers headers_Custom">
-          <div v-show="orderInfo.jqpremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.jqpremium">
             交强险金额：
             <span>
               ￥{{
                 orderInfo.jqpremium }}
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.jqFeeRate }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.jqFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.taxamount">
-            车船税：
-            <span>￥{{ orderInfo.taxamount }}</span>
-          </div>
-          <div v-show="orderInfo.jqstartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.jqstartdate">
             交强险起保日期：
             <span>{{ orderInfo.jqstartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"><div v-show="orderInfo.taxamount">
+            车船税：
+            <span>￥{{ orderInfo.taxamount }}</span>
+          </div></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-show="orderInfo.sypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.sypremium">
             商业险金额：
             <span>￥{{ orderInfo.sypremium }}</span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.syFeeRate  }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.syFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.systartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.systartdate">
             商业险起保日期：
             <span>{{ orderInfo.systartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-if="orderInfo.jypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5" v-if="orderInfo.jypremium"><div>
             驾意险：
             <span>￥{{ orderInfo.jypremium }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="18"></el-col>
+          </el-row>
         </div>
       </div>
       <div class="Enclosure" v-if="orderInfo.extendInfo">
@@ -2692,8 +2703,8 @@ export default {
 /* 内容待定 */
 .headers_Custom {
   div {
-      padding: 5px 30px;
-    font-size: 16px;
+      padding: 2px 0px;
+      font-size: 14px;
 
     &>span {
       color: rgb(226, 118, 10);

src/views/Task/Quote.vue

@@ -260,63 +260,74 @@
             ￥{{orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.totalFeePremium?orderInfo.orderCommissionVo.totalFeePremium:0 }}</span>
         </div>
         <div class="headers headers_Custom">
-          <div v-show="orderInfo.jqpremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.jqpremium">
             交强险金额：
             <span>
               ￥{{
                 orderInfo.jqpremium }}
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.jqFeeRate }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.jqFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.taxamount">
-            车船税：
-            <span>￥{{ orderInfo.taxamount }}</span>
-          </div>
-          <div v-show="orderInfo.jqstartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.jqstartdate">
             交强险起保日期：
             <span>{{ orderInfo.jqstartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"><div v-show="orderInfo.taxamount">
+            车船税：
+            <span>￥{{ orderInfo.taxamount }}</span>
+          </div></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-show="orderInfo.sypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.sypremium">
             商业险金额：
             <span>￥{{ orderInfo.sypremium }}</span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.syFeeRate  }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.syFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.systartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.systartdate">
             商业险起保日期：
             <span>{{ orderInfo.systartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-if="orderInfo.jypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5" v-if="orderInfo.jypremium"><div>
             驾意险：
             <span>￥{{ orderInfo.jypremium }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="18"></el-col>
+          </el-row>
         </div>
       </div>
       <div class="Enclosure" v-if="orderInfo.extendInfo">
@@ -2680,8 +2691,8 @@
   /* 内容待定 */
   .headers_Custom {
     div {
-      padding: 5px 30px;
-      font-size: 16px;
+      padding: 2px 0px;
+      font-size: 14px;
 
       &>span {
         color: rgb(226, 118, 10);

src/views/Task/TaskpoolAll.vue

@@ -288,63 +288,74 @@
             ￥{{orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.totalFeePremium?orderInfo.orderCommissionVo.totalFeePremium:0 }}</span>
         </div>
         <div class="headers headers_Custom">
-          <div v-show="orderInfo.jqpremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.jqpremium">
             交强险金额：
             <span>
               ￥{{
                 orderInfo.jqpremium }}
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.jqFeeRate }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.jqFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.taxamount">
-            车船税：
-            <span>￥{{ orderInfo.taxamount }}</span>
-          </div>
-          <div v-show="orderInfo.jqstartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.jqstartdate">
             交强险起保日期：
             <span>{{ orderInfo.jqstartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"><div v-show="orderInfo.taxamount">
+            车船税：
+            <span>￥{{ orderInfo.taxamount }}</span>
+          </div></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-show="orderInfo.sypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.sypremium">
             商业险金额：
             <span>￥{{ orderInfo.sypremium }}</span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.syFeeRate  }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.syFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.systartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.systartdate">
             商业险起保日期：
             <span>{{ orderInfo.systartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-if="orderInfo.jypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5" v-if="orderInfo.jypremium"><div>
             驾意险：
             <span>￥{{ orderInfo.jypremium }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="18"></el-col>
+          </el-row>
         </div>
       </div>
       <div class="Enclosure" v-if="orderInfo.extendInfo">
@@ -2724,8 +2735,8 @@ export default {
   /* 内容待定 */
   .headers_Custom {
     div {
-      padding: 5px 30px;
-      font-size: 16px;
+      padding: 2px 0px;
+      font-size: 14px;
       &>span {
         color: rgb(226, 118, 10);
       }

src/views/Task/Underwrite.vue

@@ -261,63 +261,74 @@
             ￥{{orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.totalFeePremium?orderInfo.orderCommissionVo.totalFeePremium:0 }}</span>
         </div>
         <div class="headers headers_Custom">
-          <div v-show="orderInfo.jqpremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.jqpremium">
             交强险金额：
             <span>
               ￥{{
                 orderInfo.jqpremium }}
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.jqFeeRate }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.jqFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.taxamount">
-            车船税：
-            <span>￥{{ orderInfo.taxamount }}</span>
-          </div>
-          <div v-show="orderInfo.jqstartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.jqstartdate">
             交强险起保日期：
             <span>{{ orderInfo.jqstartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"><div v-show="orderInfo.taxamount">
+            车船税：
+            <span>￥{{ orderInfo.taxamount }}</span>
+          </div></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-show="orderInfo.sypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.sypremium">
             商业险金额：
             <span>￥{{ orderInfo.sypremium }}</span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.syFeeRate  }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.syFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.systartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.systartdate">
             商业险起保日期：
             <span>{{ orderInfo.systartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-if="orderInfo.jypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5" v-if="orderInfo.jypremium"><div>
             驾意险：
             <span>￥{{ orderInfo.jypremium }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="18"></el-col>
+          </el-row>
         </div>
       </div>
       <div class="Enclosure" v-if="orderInfo.extendInfo">
@@ -2699,8 +2710,8 @@
   /* 内容待定 */
   .headers_Custom {
     div {
-      padding: 5px 30px;
-      font-size: 16px;
+      padding: 2px 0px;
+      font-size: 14px;
       &>span {
         color: rgb(226, 118, 10);
       }

src/views/Task/UnderwriteBack.vue

@@ -261,63 +261,74 @@
             ￥{{orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.totalFeePremium?orderInfo.orderCommissionVo.totalFeePremium:0 }}</span>
         </div>
         <div class="headers headers_Custom">
-          <div v-show="orderInfo.jqpremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.jqpremium">
             交强险金额：
             <span>
               ￥{{
                 orderInfo.jqpremium }}
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.jqFeeRate }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.jqFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.jqFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.taxamount">
-            车船税：
-            <span>￥{{ orderInfo.taxamount }}</span>
-          </div>
-          <div v-show="orderInfo.jqstartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.jqstartdate">
             交强险起保日期：
             <span>{{ orderInfo.jqstartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"><div v-show="orderInfo.taxamount">
+            车船税：
+            <span>￥{{ orderInfo.taxamount }}</span>
+          </div></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-show="orderInfo.sypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5"><div v-show="orderInfo.sypremium">
             商业险金额：
             <span>￥{{ orderInfo.sypremium }}</span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate">
+          </div></el-col>
+            <el-col :span="4" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeeRate"><div>
             手续费比例：
             <span>
               {{
                 orderInfo.orderCommissionVo.syFeeRate  }}%
             </span>
-          </div>
-          <div v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium">
+          </div></el-col>
+            <el-col :span="5" v-if="orderInfo.orderCommissionVo&&orderInfo.orderCommissionVo.syFeePremium"><div>
             手续费金额：
             <span>
               ￥{{orderInfo.orderCommissionVo.syFeePremium }}
             </span>
-          </div>
-          <div v-show="orderInfo.systartdate">
+          </div></el-col>
+            <el-col :span="6"><div v-show="orderInfo.systartdate">
             商业险起保日期：
             <span>{{ orderInfo.systartdate }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="3"></el-col>
+          </el-row>
         </div>
         <div class="headers headers_Custom" >
-          <div v-if="orderInfo.jypremium">
+          <el-row style="width: 100%">
+            <el-col :span="1"></el-col>
+            <el-col :span="5" v-if="orderInfo.jypremium"><div>
             驾意险：
             <span>￥{{ orderInfo.jypremium }}</span>
-          </div>
+          </div></el-col>
+            <el-col :span="18"></el-col>
+          </el-row>
         </div>
       </div>
       <div class="Enclosure" v-if="orderInfo.extendInfo">
@@ -2699,8 +2710,8 @@
   /* 内容待定 */
   .headers_Custom {
     div {
-      padding: 5px 30px;
-      font-size: 16px;
+      padding: 2px 0px;
+      font-size: 14px;
       &>span {
         color: rgb(226, 118, 10);
       }