refactor(订单线索): 重构线索信息展示布局为弹性盒子

src/views/order/lead/index.vue

@@ -58,12 +58,28 @@
             :destroy-on-close="true"
             append-to-body>
             <div v-if="currentLead">
-                <el-descriptions :column="3" border class="lead-info-desc">
-                    <el-descriptions-item label="线索编码">{{ currentLead.leadCode }}</el-descriptions-item>
-                    <el-descriptions-item label="客户名称">{{ currentLead.customerName }}</el-descriptions-item>
-                    <el-descriptions-item label="联系人">{{ currentLead.contactName }}</el-descriptions-item>
-                    <el-descriptions-item label="线索标题" :span="3">{{ currentLead.title }}</el-descriptions-item>
-                </el-descriptions>
+                <div class="lead-info-flex" style="margin-bottom: 20px;">
+                    <div class="info-row">
+                        <div class="info-item">
+                            <span class="label">线索编码：</span>
+                            <span class="value">{{ currentLead.leadCode }}</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="label">客户名称：</span>
+                            <span class="value">{{ currentLead.customerName }}</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="label">联系人：</span>
+                            <span class="value">{{ currentLead.contactName }}</span>
+                        </div>
+                    </div>
+                    <div class="info-row title-row">
+                        <div class="info-item full-width">
+                            <span class="label">线索标题：</span>
+                            <span class="value title-value">{{ currentLead.title }}</span>
+                        </div>
+                    </div>
+                </div>
             </div>
             
             <avue-crud 
@@ -1269,6 +1285,50 @@ export default {
     margin-bottom: 20px;
 }
 
+.lead-info-flex {
+    border: 1px solid #EBEEF5;
+    border-radius: 4px;
+    padding: 15px;
+    background-color: #fff;
+    
+    .info-row {
+        display: flex;
+        margin-bottom: 10px;
+        
+        &:last-child {
+            margin-bottom: 0;
+        }
+        
+        &.title-row {
+            margin-top: 5px;
+        }
+    }
+    
+    .info-item {
+        flex: 1;
+        padding: 0 10px;
+        
+        &.full-width {
+            flex: 3;
+            width: 100%;
+        }
+        
+        .label {
+            font-weight: bold;
+            color: #606266;
+            margin-right: 5px;
+        }
+        
+        .value {
+            color: #303133;
+            
+            &.title-value {
+                font-size: 16px;
+            }
+        }
+    }
+}
+
 // 表格中的优先级和状态样式
 ::v-deep .el-table {
     .el-tag {