样式修改

src/views/insurancePolicy/index.vue

@@ -292,8 +292,9 @@
               <el-form-item prop="identifyValidDate1" label="有效期起期">
                 <div id="identifyValidDate1" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.identifyValidDate1" type="date" placeholder="请选择"
-                  value-format="YYYY-MM-DD" style="width: 100%"
-                  @blur="(e: any) => insurancePolicyForm.identifyValidDate1 = changeDate(e)" @focus="inParkingDataFocus('identifyValidDate1', insurancePolicyForm.identifyValidDate1)" />
+                    value-format="YYYY-MM-DD" style="width: 100%"
+                    @blur="(e: any) => insurancePolicyForm.identifyValidDate1 = changeDate(e)"
+                    @focus="inParkingDataFocus('identifyValidDate1', insurancePolicyForm.identifyValidDate1)" />
                 </div>
 
               </el-form-item>
@@ -304,7 +305,8 @@
                 <div id="identifyValidEndDate1" style="width: 100%;display: flex;">
                   <el-date-picker v-model="insurancePolicyForm.identifyValidEndDate1" type="date" placeholder="请选择"
                     value-format="YYYY-MM-DD" style="width: calc(100% - 64px)"
-                    @blur="(e: any) => insurancePolicyForm.identifyValidEndDate1 = changeDate(e)" @focus="inParkingDataFocus('identifyValidEndDate1', insurancePolicyForm.identifyValidEndDate1)" />
+                    @blur="(e: any) => insurancePolicyForm.identifyValidEndDate1 = changeDate(e)"
+                    @focus="inParkingDataFocus('identifyValidEndDate1', insurancePolicyForm.identifyValidEndDate1)" />
                   <el-button type="primary" @click="longTime">长期</el-button>
                 </div>
               </el-form-item>
@@ -418,7 +420,7 @@
             <el-col :span="6">
               <el-form-item label="投保人手机号" prop="mobile2">
                 <el-input v-model="insurancePolicyForm.mobile2" placeholder="请输入投保人手机号" maxlength="11"
-                show-word-limit></el-input>
+                  show-word-limit></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -445,8 +447,9 @@
               <el-form-item prop="identifyValidDate2" label="有效期起期">
                 <div id="identifyValidDate2" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.identifyValidDate2" type="date" placeholder="请选择"
-                  value-format="YYYY-MM-DD" style="width: 100%"
-                  @blur="(e: any) => insurancePolicyForm.identifyValidDate2 = changeDate(e)" @focus="inParkingDataFocus('identifyValidDate2', insurancePolicyForm.identifyValidDate2)" />
+                    value-format="YYYY-MM-DD" style="width: 100%"
+                    @blur="(e: any) => insurancePolicyForm.identifyValidDate2 = changeDate(e)"
+                    @focus="inParkingDataFocus('identifyValidDate2', insurancePolicyForm.identifyValidDate2)" />
                 </div>
               </el-form-item>
             </el-col>
@@ -454,8 +457,9 @@
               <el-form-item prop="identifyValidEndDate2" label="有效期止期">
                 <div id="identifyValidEndDate2" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.identifyValidEndDate2" type="date" placeholder="请选择"
-                  value-format="YYYY-MM-DD" style="width: 100%"
-                  @blur="(e: any) => insurancePolicyForm.identifyValidEndDate2 = changeDate(e)" @focus="inParkingDataFocus('identifyValidEndDate2', insurancePolicyForm.identifyValidEndDate2)" />
+                    value-format="YYYY-MM-DD" style="width: 100%"
+                    @blur="(e: any) => insurancePolicyForm.identifyValidEndDate2 = changeDate(e)"
+                    @focus="inParkingDataFocus('identifyValidEndDate2', insurancePolicyForm.identifyValidEndDate2)" />
                 </div>
               </el-form-item>
             </el-col>
@@ -589,8 +593,9 @@
               <el-form-item prop="identifyValidDate3" label="有效期起期">
                 <div id="identifyValidDate3" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.identifyValidDate3" type="date" placeholder="请选择"
-                  value-format="YYYY-MM-DD" style="width: 100%"
-                  @blur="(e: any) => insurancePolicyForm.identifyValidDate3 = changeDate(e)" @focus="inParkingDataFocus('identifyValidDate3', insurancePolicyForm.identifyValidDate3)" />
+                    value-format="YYYY-MM-DD" style="width: 100%"
+                    @blur="(e: any) => insurancePolicyForm.identifyValidDate3 = changeDate(e)"
+                    @focus="inParkingDataFocus('identifyValidDate3', insurancePolicyForm.identifyValidDate3)" />
                 </div>
               </el-form-item>
 
@@ -599,8 +604,9 @@
               <el-form-item prop="identifyValidEndDate3" label="有效期止期">
                 <div id="identifyValidEndDate3" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.identifyValidEndDate3" type="date" placeholder="请选择"
-                  value-format="YYYY-MM-DD" style="width: 100%"
-                  @blur="(e: any) => insurancePolicyForm.identifyValidEndDate3 = changeDate(e)" @focus="inParkingDataFocus('identifyValidEndDate3', insurancePolicyForm.identifyValidEndDate3)" />
+                    value-format="YYYY-MM-DD" style="width: 100%"
+                    @blur="(e: any) => insurancePolicyForm.identifyValidEndDate3 = changeDate(e)"
+                    @focus="inParkingDataFocus('identifyValidEndDate3', insurancePolicyForm.identifyValidEndDate3)" />
                 </div>
               </el-form-item>
             </el-col>
@@ -853,16 +859,18 @@
               <el-form-item prop="startDate" label="">
                 <div id="JQStartDate" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.JQStartDate" type="datetime" placeholder="请选择"
-                  value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="jqChange"
-                  :disabled-date="disabledDate" @focus="inParkingDataFocus('JQStartDate', insurancePolicyForm.JQStartDate)" />
+                    value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="jqChange"
+                    :disabled-date="disabledDate"
+                    @focus="inParkingDataFocus('JQStartDate', insurancePolicyForm.JQStartDate)" />
                 </div>
               </el-form-item>
               <span class="ml-5 mr-5">至</span>
               <el-form-item prop="endDate" label="">
                 <div id="JQEndDate" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.JQEndDate" type="datetime" placeholder="请选择"
-                  value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="jqChange"
-                  :disabled-date="disabledDate" @focus="inParkingDataFocus('JQEndDate', insurancePolicyForm.JQEndDate)" />
+                    value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="jqChange"
+                    :disabled-date="disabledDate"
+                    @focus="inParkingDataFocus('JQEndDate', insurancePolicyForm.JQEndDate)" />
                 </div>
               </el-form-item>
             </div>
@@ -876,16 +884,18 @@
               <el-form-item prop="startDate" label="">
                 <div id="SYStartDate" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.SYStartDate" type="datetime" placeholder="请选择"
-                  value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="syChange"
-                  :disabled-date="disabledDate" @focus="inParkingDataFocus('SYStartDate', insurancePolicyForm.SYStartDate)" />
+                    value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="syChange"
+                    :disabled-date="disabledDate"
+                    @focus="inParkingDataFocus('SYStartDate', insurancePolicyForm.SYStartDate)" />
                 </div>
               </el-form-item>
               <span class="ml-5 mr-5">至</span>
               <el-form-item prop="endDate" label="">
                 <div id="SYEndDate" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.SYEndDate" type="datetime" placeholder="请选择"
-                  value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="syChange"
-                  :disabled-date="disabledDate" @focus="inParkingDataFocus('SYEndDate', insurancePolicyForm.SYEndDate)" />
+                    value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="syChange"
+                    :disabled-date="disabledDate"
+                    @focus="inParkingDataFocus('SYEndDate', insurancePolicyForm.SYEndDate)" />
                 </div>
               </el-form-item>
             </div>
@@ -1164,7 +1174,8 @@
                 </div>
               </template>
               <template #default="scope">
-                <div class="result" v-if="currentRow.some((a: any) => a.id === scope.row.id) && !scope.row.loading || isViewSuccess">
+                <div class="result"
+                  v-if="currentRow.some((a: any) => a.id === scope.row.id) && !scope.row.loading || isViewSuccess">
                   <div class="resultItem">
                     <span v-if="scope.row.quoteResult?.costs?.sumPremium">总保费：{{
                       scope.row.quoteResult?.costs?.sumPremium }}</span>
@@ -1250,30 +1261,40 @@
               报价历史
             </span>
           </template>
-          <el-table :data="tableData" style="width: calc(100% - 48px); margin: 0 24px">
-            <el-table-column label="保险公司" prop="companyName"></el-table-column>
-            <el-table-column label="报价时间" prop="quoteTime"></el-table-column>
-            <el-table-column label="险种" prop="productName"></el-table-column>
-            <el-table-column label="状态" prop="orderStatusName">
+          <el-table :data="tableData" style="width: calc(100% - 48px); margin: 0 24px"
+          :header-cell-style="{ 'background-color': '#F7F7F9', 'color': '#333', 'font-weight': 'bold', 'fontSize': '16px', 'padding': '14px 0 '}">
+            <el-table-column label="保险公司" prop="companyName"  width="200"  align="center"></el-table-column>
+            <el-table-column label="报价时间" prop="quoteTime" width="200"></el-table-column>
+            <el-table-column label="险种" prop="productName" width="170" align="center"></el-table-column>
+            <el-table-column label="状态" prop="orderStatusName" width="200">
               <template #default="scope">
-                <span v-if="scope.row.orderStatusName == '报价成功'" class="success">报价成功</span>
-                <span v-if="scope.row.orderStatus == '6' || scope.row.orderStatus == '7'"
-                  style="display: flex; align-items: center">
-                  <span class="fail">{{ scope.row.orderStatusName }}</span>
-                  <el-tooltip class="box-item" effect="dark" :content="scope.row.errorMessage" placement="bottom">
-                    <el-icon style="color: #FF4545; font-size: 18px">
+                <div class="quote_success flex a-c " v-if="scope.row.orderStatusName == '报价成功'">
+                  <div class="dot"></div>
+                  <span class="text">报价成功</span>
+                </div>
+                <div class="quote_error flex a-c " v-if="scope.row.orderStatus == '6' || scope.row.orderStatus == '7'">
+                  <div class="dot"></div>
+                  <span class="text">报价失败</span>
+                  <el-tooltip style="width: 200px;" placement="right" popper-class="error-tooltip" :popper-style="{ 'background-color': 'rgba(0,0,0,0.65)','border':'none'}">
+                    <template #content>
+                      <div style="max-width: 400px;">{{ scope.row.errorMessage }}</div>
+                    </template>
+                    <el-icon style="color: #FF4545; font-size: 14px">
                       <Warning />
                     </el-icon>
                   </el-tooltip>
-                </span>
+                </div>
               </template>
             </el-table-column>
-            <el-table-column label="保费计算" prop="sumPremium"></el-table-column>
-            <el-table-column label="交强险" prop="jqPremium"></el-table-column>
-            <el-table-column label="商业险" prop="syPremium"></el-table-column>
-            <el-table-column label="驾意险" prop="jyPremium"></el-table-column>
-            <el-table-column label="操作">
+            <el-table-column label="保费总计" prop="sumPremium" width="130" align="right">
+            </el-table-column>
+            <el-table-column label="交强险" prop="jqPremium" width="130" align="right"></el-table-column>
+            <el-table-column label="商业险" prop="syPremium" width="130" align="right"></el-table-column>
+            <el-table-column label="驾意险" prop="jyPremium" width="130" align="right"></el-table-column>
+            <el-table-column label="操作" align="left"  fixed="right"  class-name="operation-column">
               <template #default="scope">
+                <el-button link type="primary" @click="toDetail(scope.row.orderNo)">详情</el-button>
+                <el-button link type="primary" @click="toDetail(scope.row.orderNo)">详情</el-button>
                 <el-button link type="primary" @click="toDetail(scope.row.orderNo)">详情</el-button>
                 <el-popover v-if="scope.row.orderStatus === '5'" :width="200" placement="bottom" trigger="click">
                   <template #reference>
@@ -1544,7 +1565,7 @@ const initDetail = () => {
       insurancePolicyForm.value.registeredCapital1 = obj?.ownersInfo?.registeredCapital
       insurancePolicyForm.value.email1 = obj?.ownersInfo?.email
       insurancePolicyForm.value.taxpayerName = obj?.vehicleAndVesselTaxVo?.taxpayerName || obj?.ownersInfo?.name
-      insurancePolicyForm.value.taxpayerIdentifier = obj?.vehicleAndVesselTaxVo?.taxpayerIdentifier || (obj?.ownersInfo?.identifyType? ('0' + obj.ownersInfo.identifyType) : '')
+      insurancePolicyForm.value.taxpayerIdentifier = obj?.vehicleAndVesselTaxVo?.taxpayerIdentifier || (obj?.ownersInfo?.identifyType ? ('0' + obj.ownersInfo.identifyType) : '')
       insurancePolicyForm.value.identifyNumber = obj?.vehicleAndVesselTaxVo?.identifyNumber || obj?.ownersInfo?.identifyNumber
       // 设置投保人信息
       insurancePolicyForm.value.name2 = obj?.policyHolderInfo?.name
@@ -2945,7 +2966,7 @@ const handleUnderwriting = (scope: any) => {
       })
 
     } else {
-      scope.row.loading=false
+      scope.row.loading = false
       ElMessage({
         message: res.msg,
         type: 'warning'
@@ -2972,7 +2993,7 @@ const historyhandleUnderwriting = (ordersNo: String, scope: any) => {
         UnderwritingRefs.value.initEdit(data)
       })
     } else {
-      scope.row.loading=false
+      scope.row.loading = false
       ElMessage({
         message: res.msg,
         type: 'warning'
@@ -3723,7 +3744,17 @@ onMounted(() => {
 })
 
 </script>
-
+<style>
+.error-tooltip .el-popper__arrow::before {
+  border-width: 5px !important;
+  border-color: rgba(0,0,0,0.65) !important;
+  background-color: transparent !important;
+}
+/* 表格列间距样式 */
+.operation-column {
+    padding-left: 40px !important;
+  }
+</style>
 <style scoped lang="scss">
 @use "@/assets/styles/common/style";
 
@@ -3827,25 +3858,42 @@ onMounted(() => {
     }
   }
 
-  .success {
-    color: #1DAEFF;
-    border: 1px solid #1DAEFF;
-    background: #E7F7FF;
-    padding: 2px 4px;
-    border-radius: 2px;
-    font-size: 12px;
+  .quote_success {
+    .dot {
+      width: 6px;
+      height: 6px;
+      background: #10AC42;
+      border-radius: 50%;
+      margin-right: 7px;
+    }
+
+    .text {
+      color: #10AC42;
+      font-size: 14px;
+    }
   }
 
-  .fail {
-    color: #FF4545;
-    border: 1px solid #FF4545;
-    background: #FFF4F4;
-    padding: 2px 4px;
-    border-radius: 2px;
-    font-size: 12px;
-    margin-right: 10px;
+  .quote_error {
+    .dot {
+      width: 6px;
+      height: 6px;
+      background: #FF4545;
+      border-radius: 50%;
+      margin-right: 7px;
+    }
+
+    .text {
+      color: #FF4545;
+      font-size: 14px;
+      margin-right: 10px;
+    }
+
+    .box-item {
+      width: 200px;
+    }
   }
 
+
   .company {
     display: flex;
     align-items: center;
@@ -4034,6 +4082,10 @@ onMounted(() => {
     justify-content: space-between;
   }
 
+  :deep(.el-popper) {
+    background: #fff;
+  }
+
   :deep(.el-form .el-form-item) {
     margin-bottom: 10px;
   }