From 98a0d4f7c8a128e2256dd03daea925d95d6e3c79 Mon Sep 17 00:00:00 2001
From: v6ole <voole@vip.qq.com>
Date: Sun, 12 Jul 2026 21:09:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=A2=E6=88=B7=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=E4=BF=A1=E6=81=AF=E5=8C=BA=E7=94=A8=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F=E5=8C=BA=E5=88=86Tab=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/views/desktop/CustomerManage.vue | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/desktop/CustomerManage.vue b/frontend/src/views/desktop/CustomerManage.vue
index f5569d8..3b4cfd0 100644
--- a/frontend/src/views/desktop/CustomerManage.vue
+++ b/frontend/src/views/desktop/CustomerManage.vue
@@ -433,21 +433,24 @@ async function handleImport() {
 
     <!-- Detail Dialog -->
     <el-dialog v-model="detailVisible" :title="detailCustomer?.name || '客户详情'" width="800px" v-if="detailCustomer">
-      <!-- Basic Info -->
-      <div class="cust-info-bar">
-        <span class="cust-info-item">行业：{{ detailCustomer.industry || '-' }}</span>
-        <span class="cust-info-sep">|</span>
-        <span class="cust-info-item">地址：{{ detailCustomer.address || '-' }}</span>
-        <span class="cust-info-sep">|</span>
-        <span class="cust-info-item">费用：{{ detailCustomer.monthly_fee || '-' }}</span>
-        <span class="cust-info-sep">|</span>
-        <span class="cust-info-item">客户经理：{{ detailCustomer.primary_manager_name || '-' }}</span>
-      </div>
-      <div v-if="detailCustomer.in_use_services" class="cust-info-bar" style="margin-top:4px">
-        <span class="cust-info-item">在用业务：{{ detailCustomer.in_use_services }}</span>
-      </div>
-      <div v-if="detailCustomer.contacts?.length" class="cust-info-bar" style="margin-top:4px">
-        <span class="cust-info-item">联系人：{{ detailCustomer.contacts.map((c:any) => c.name + (c.phone ? ' '+c.phone : '')).join('、') }}</span>
+      <!-- Basic Info Card -->
+      <div class="cust-info-card">
+        <div class="cust-info-name">{{ detailCustomer.name }}</div>
+        <div class="cust-info-bar">
+          <span class="cust-info-item">行业：{{ detailCustomer.industry || '-' }}</span>
+          <span class="cust-info-sep">|</span>
+          <span class="cust-info-item">地址：{{ detailCustomer.address || '-' }}</span>
+          <span class="cust-info-sep">|</span>
+          <span class="cust-info-item">费用：{{ detailCustomer.monthly_fee || '-' }}</span>
+          <span class="cust-info-sep">|</span>
+          <span class="cust-info-item">客户经理：{{ detailCustomer.primary_manager_name || '-' }}</span>
+        </div>
+        <div v-if="detailCustomer.in_use_services" class="cust-info-bar">
+          <span class="cust-info-item">在用业务：{{ detailCustomer.in_use_services }}</span>
+        </div>
+        <div v-if="detailCustomer.contacts?.length" class="cust-info-bar">
+          <span class="cust-info-item">联系人：{{ detailCustomer.contacts.map((c:any) => c.name + (c.phone ? ' '+c.phone : '')).join('、') }}</span>
+        </div>
       </div>
 
       <!-- Tabs -->
@@ -576,8 +579,10 @@ async function handleImport() {
 }
 .page-rule { width: 32px; height: 3px; background: var(--gold); margin-top: 8px; }
 .header-btns { display: flex; gap: 8px; }
-.cust-info-bar { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--warm-gray); }
+.cust-info-bar { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink); padding: 2px 0; }
 .cust-info-item { white-space: nowrap; }
-.cust-info-sep { color: var(--gold); margin: 0 4px; }
+.cust-info-sep { color: var(--warm-border); margin: 0 6px; }
 .empty-tab { text-align: center; color: var(--c-text-muted); padding: 24px 0 12px; font-size: 13px; }
+.cust-info-card { background: var(--c-bg-light, #faf9f6); border: 1px solid var(--warm-border); border-radius: 6px; padding: 14px 18px; margin-bottom: 4px; }
+.cust-info-name { font-family: var(--font-heading); font-size: 16px; color: var(--ink); letter-spacing: 0.04em; margin-bottom: 6px; }
 </style>