v6ole/qiji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 客户详情顶部信息区用卡片样式区分Tab区域

Browse Source 
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
v6ole
2026-07-12 21:09:58 +08:00
parent 05d33d518f
commit 98a0d4f7c8
1 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/desktop/CustomerManage.vue
+22 -17
View File
@@ -433,21 +433,24 @@ async function handleImport() {
<!-- Detail Dialog --> <!-- Detail Dialog -->
<el-dialog v-model="detailVisible" :title="detailCustomer?.name || '客户详情'" width="800px" v-if="detailCustomer"> <el-dialog v-model="detailVisible" :title="detailCustomer?.name || '客户详情'" width="800px" v-if="detailCustomer">
<!-- Basic Info --> <!-- Basic Info Card -->
<div class="cust-info-bar"> <div class="cust-info-card">
<span class="cust-info-item">行业：{{ detailCustomer.industry || '-' }}</span> <div class="cust-info-name">{{ detailCustomer.name }}</div>
<span class="cust-info-sep">|</span> <div class="cust-info-bar">
<span class="cust-info-item">地址：{{ detailCustomer.address || '-' }}</span> <span class="cust-info-item">行业：{{ detailCustomer.industry || '-' }}</span>
<span class="cust-info-sep">|</span> <span class="cust-info-sep">|</span>
<span class="cust-info-item">费用：{{ detailCustomer.monthly_fee || '-' }}</span> <span class="cust-info-item">地址：{{ detailCustomer.address || '-' }}</span>
<span class="cust-info-sep">|</span> <span class="cust-info-sep">|</span>
<span class="cust-info-item">客户经理：{{ detailCustomer.primary_manager_name || '-' }}</span> <span class="cust-info-item">费用：{{ detailCustomer.monthly_fee || '-' }}</span>
</div> <span class="cust-info-sep">|</span>
<div v-if="detailCustomer.in_use_services" class="cust-info-bar" style="margin-top:4px"> <span class="cust-info-item">客户经理：{{ detailCustomer.primary_manager_name || '-' }}</span>
<span class="cust-info-item">在用业务：{{ detailCustomer.in_use_services }}</span> </div>
</div> <div v-if="detailCustomer.in_use_services" class="cust-info-bar">
<div v-if="detailCustomer.contacts?.length" class="cust-info-bar" style="margin-top:4px"> <span class="cust-info-item">在用业务：{{ detailCustomer.in_use_services }}</span>
<span class="cust-info-item">联系人：{{ detailCustomer.contacts.map((c:any) => c.name + (c.phone ? ' '+c.phone : '')).join('、') }}</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> </div>
<!-- Tabs --> <!-- Tabs -->
@@ -576,8 +579,10 @@ async function handleImport() {
} }
.page-rule { width: 32px; height: 3px; background: var(--gold); margin-top: 8px; } .page-rule { width: 32px; height: 3px; background: var(--gold); margin-top: 8px; }
.header-btns { display: flex; gap: 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-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; } .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> </style>