feat(claim): 优化理赔详情弹窗的布局和样式

src/views/claim/index.vue

@@ -50,34 +50,141 @@
     <!-- 理赔详情对话框 -->
     <el-dialog title="理赔详情"
                :visible.sync="detailVisible"
-               width="800px"
-               append-to-body>
-      <div v-if="claimDetail">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="理赔编号">{{ claimDetail.claimNo }}</el-descriptions-item>
-          <el-descriptions-item label="来源类型">
-            <el-tag :type="getClaimSourceTypeType(claimDetail.claimSourceType)">
-              {{ getClaimSourceTypeLabel(claimDetail.claimSourceType) }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="来源名称">{{ claimDetail.sourceName }}</el-descriptions-item>
-          <el-descriptions-item label="来源编码">{{ claimDetail.sourceCode }}</el-descriptions-item>
-          <el-descriptions-item label="消费者姓名">{{ claimDetail.consumerName }}</el-descriptions-item>
-          <el-descriptions-item label="消费者电话">{{ claimDetail.consumerPhone }}</el-descriptions-item>
-          <el-descriptions-item label="轮胎编号">{{ claimDetail.tyreNo }}</el-descriptions-item>
-          <el-descriptions-item label="轮胎规格">{{ claimDetail.tyreSpecs }}</el-descriptions-item>
-          <el-descriptions-item label="购买日期">{{ claimDetail.purchaseDate }}</el-descriptions-item>
-          <el-descriptions-item label="安装日期">{{ claimDetail.mountDate }}</el-descriptions-item>
-          <el-descriptions-item label="行驶里程">{{ claimDetail.runMileage }} 公里</el-descriptions-item>
-          <el-descriptions-item label="理赔金额">¥{{ claimDetail.claimAmount }}</el-descriptions-item>
-          <el-descriptions-item label="理赔原因" :span="2">{{ claimDetail.claimReason }}</el-descriptions-item>
-          <el-descriptions-item label="审核状态">
-            <el-tag :type="getAuditStatusType(claimDetail.auditStatus)">
-              {{ getAuditStatusLabel(claimDetail.auditStatus) }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="提交时间">{{ claimDetail.submitTime }}</el-descriptions-item>
-        </el-descriptions>
+               width="80%"
+               :close-on-click-modal="false"
+               :modal="true"
+               :append-to-body="true"
+               :lock-scroll="false">
+      <div v-if="claimDetail" class="claim-detail-container">
+        <!-- 基本信息 -->
+        <el-card class="detail-card" shadow="never">
+          <div slot="header" class="card-header">
+            <span>基本信息</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>理赔编号：</label>
+                <span>{{ claimDetail.claimNo }}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>来源类型：</label>
+                <el-tag :type="getClaimSourceTypeType(claimDetail.claimSourceType)" size="small">
+                  {{ getClaimSourceTypeLabel(claimDetail.claimSourceType) }}
+                </el-tag>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>审核状态：</label>
+                <el-tag :type="getAuditStatusType(claimDetail.auditStatus)" size="small">
+                  {{ getAuditStatusLabel(claimDetail.auditStatus) }}
+                </el-tag>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>来源名称：</label>
+                <span>{{ claimDetail.sourceName }}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>来源编码：</label>
+                <span>{{ claimDetail.sourceCode }}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>提交时间：</label>
+                <span>{{ claimDetail.submitTime }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <!-- 消费者信息 -->
+        <el-card class="detail-card" shadow="never">
+          <div slot="header" class="card-header">
+            <span>消费者信息</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="detail-item">
+                <label>消费者姓名：</label>
+                <span>{{ claimDetail.consumerName }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item">
+                <label>消费者电话：</label>
+                <span>{{ claimDetail.consumerPhone }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <!-- 轮胎信息 -->
+        <el-card class="detail-card" shadow="never">
+          <div slot="header" class="card-header">
+            <span>轮胎信息</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>轮胎编号：</label>
+                <span>{{ claimDetail.tyreNo }}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>轮胎规格：</label>
+                <span>{{ claimDetail.tyreSpecs }}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>行驶里程：</label>
+                <span>{{ claimDetail.runMileage }} 公里</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>购买日期：</label>
+                <span>{{ claimDetail.purchaseDate }}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="detail-item">
+                <label>安装日期：</label>
+                <span>{{ claimDetail.mountDate }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <!-- 理赔信息 -->
+        <el-card class="detail-card" shadow="never">
+          <div slot="header" class="card-header">
+            <span>理赔信息</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="detail-item">
+                <label>理赔金额：</label>
+                <span class="amount">¥{{ claimDetail.claimAmount }}</span>
+              </div>
+            </el-col>
+            <el-col :span="24">
+              <div class="detail-item">
+                <label>理赔原因：</label>
+                <span>{{ claimDetail.claimReason }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="detailVisible = false">关闭</el-button>
@@ -297,6 +404,82 @@ export default {
 </script>
 
 <style lang="scss" scoped >
+/* 理赔详情弹层样式 */
+.claim-detail-container {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.detail-card {
+  margin-bottom: 20px;
+  border: 1px solid #ebeef5;
+}
+
+.detail-card:last-child {
+  margin-bottom: 0;
+}
+
+.card-header {
+  font-weight: bold;
+  color: #303133;
+  font-size: 16px;
+  border-bottom: 1px solid #ebeef5;
+  padding: 15px 20px;
+  background-color: #fafafa;
+}
+
+.detail-item {
+  margin-bottom: 15px;
+  display: flex;
+  align-items: flex-start;
+  min-height: 32px;
+}
+
+.detail-item label {
+  font-weight: 600;
+  color: #606266;
+  min-width: 100px;
+  margin-right: 10px;
+  flex-shrink: 0;
+  line-height: 32px;
+}
+
+.detail-item span {
+  color: #303133;
+  line-height: 32px;
+  word-break: break-all;
+}
+
+.amount {
+  color: #E6A23C;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.dialog-footer {
+  text-align: right;
+  padding-top: 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .claim-detail-container {
+    max-height: 60vh;
+  }
+
+  .detail-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .detail-item label {
+    min-width: auto;
+    margin-bottom: 5px;
+    margin-right: 0;
+  }
+}
+
 .thumbnail-container {
   display: flex;
   justify-content: center;