部分样式修正

src/views/riskCheck/resultDetail.vue

@@ -2,7 +2,8 @@
   <div class="risk-screening">
     <!-- 左侧历史风险筛选结果 -->
     <div class="left-panel">
-      <h3>历史风险筛查结果</h3>
+      <h6 class="history-text">历史风险筛查结果</h6>
+      <el-divider class="mt15 mb0"></el-divider>
       <ul>
         <li
           v-for="(result, index) in riskResults"
@@ -11,6 +12,7 @@
           @click="selectRecord(result)"
         >
           <svg-icon
+            class="svg-icon"
             :icon-class="result.hasRisk === 0 ? 'circle_tick' : 'waring'"
           ></svg-icon>
 
@@ -23,31 +25,33 @@
 
     <!-- 右侧风险筛查结果详情 -->
     <div class="right-panel">
-      <header>
-        <h2>{{ currentRecord.insuredName }}</h2>
-        <p>
-          {{ currentRecord.taOrderTime }} 共【{{
+      <div>
+        <h6>{{ currentRecord.insuredName }}</h6>
+        <span>
+          {{ currentResult.taOrderTime }} &nbsp;&nbsp;共【{{
             riskResults.length
           }}】条风险提示
-        </p>
-      </header>
+        </span>
+      </div>
 
-      <section>
-        <h3>被保险人名称：{{ currentRecord.insuredName }}</h3>
-        <p>{{ currentResult.checkSummary }}</p>
-      </section>
+      <div>
+        <el-card shadow="always">
+          <h4 class="mb20">被保险人名称：{{ currentRecord.insuredName }}</h4>
+          <p style="white-space: pre-line">{{ currentResult.checkSummary }}</p>
+        </el-card>
+      </div>
 
-      <section>
-        <h3>风险筛查结果</h3>
+      <section class="mt30">
+        <h6>风险筛查结果</h6>
         <details>
           <summary>基本信息</summary>
           <ul>
-            <li v-for="(item, index) in resultDetails" :key="index">
+            <ul v-for="(item, index) in resultDetails" :key="index">
               <span :style="{ backgroundColor: item.color }">{{
                 index + 1
               }}</span>
               {{ item.warning }}
-            </li>
+            </ul>
           </ul>
         </details>
 
@@ -101,7 +105,8 @@ export default {
       let params = { recordId: result.recordId, resultId: result.id }
       queryResultDetail(params).then(res => {
         if (res.success) {
-          this.resultDetails = res.content.content
+          this.resultDetails = res.content.content.resultDetailList
+          this.fileStorageInfos = res.content.content.fileStorageInfoList
         }
       })
     },
@@ -116,10 +121,7 @@ export default {
           )
           this.currentResultId =
             this.riskResults.length > 0 ? this.riskResults[0].id : ''
-          this.currentResult =
-            this.riskResults.length > 0 ? this.riskResults[0] : ''
-          this.resultDetails = res.content.content.latesetResultDetailList
-          this.fileStorageInfos = res.content.content.fileStorageInfoList
+          this.selectRecord(this.riskResults[0])
         }
       })
     }
@@ -139,84 +141,43 @@ export default {
 }
 
 .left-panel {
-  width: 300px;
+  width: 250px;
   background-color: #ffffff;
-  padding: 10px;
 }
 
 .right-panel {
   flex: 1;
   background-color: #fff;
-  padding: 10px;
+  padding: 20px;
+}
+.left-panel h6 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  margin-top: 15px;
+}
+ul {
+  list-style: none;
+}
+.left-panel li {
+  height: 50px;
+  text-align: center;
+  padding: 15px 0;
+  font-size: 12px;
 }
 
-//.left-panel li.active {
-//  background-color: #e0e0e0;
-//}
+.right-panel h6 {
+  font-size: 14px;
+  margin-right: 30px;
+  display: inline;
+}
 
-//.left-panel .success {
-//  display: inline-block;
-//  width: 16px;
-//  height: 16px;
-//  border-radius: 50%;
-//  background-color: green;
-//  margin-right: 5px;
-//}
-//
-//.left-panel .danger {
-//  display: inline-block;
-//  width: 16px;
-//  height: 16px;
-//  border-radius: 50%;
-//  background-color: red;
-//  margin-right: 5px;
-//}
-
-//.right-panel header {
-//  display: flex;
-//  justify-content: space-between;
-//  align-items: center;
-//  margin-bottom: 20px;
-//}
-//
-//.right-panel h2 {
-//  margin: 0;
-//}
-//
-//.right-panel p {
-//  margin: 5px 0;
-//}
-//
-//.right-panel .actions button {
-//  margin-left: 10px;
-//}
-//
-//.right-panel section {
-//  margin-bottom: 20px;
-//  white-space: pre-line;
-//}
-//
-//.right-panel details summary {
-//  font-weight: bold;
-//  cursor: pointer;
-//}
-//
-//.right-panel ul {
-//  list-style: none;
-//  padding: 0;
-//}
-//
-//.right-panel li {
-//  padding: 5px 0;
-//}
-//
-//.right-panel span {
-//  display: inline-block;
-//  width: 20px;
-//  height: 20px;
-//  text-align: center;
-//  line-height: 20px;
-//  border-radius: 4px;
-//  margin-right: 5px;
-//}
+.left-panel li.active {
+  background-color: #e0e0e0;
+}
+.svg-icon {
+  font-size: 20px;
+  margin-right: 10px;
+}
 </style>