diff --git a/src/pages/business_basic/components/CustomerInfoManagementDetail.js b/src/pages/business_basic/components/CustomerInfoManagementDetail.js
new file mode 100644
index 0000000..015364c
--- /dev/null
+++ b/src/pages/business_basic/components/CustomerInfoManagementDetail.js
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { Select } from 'antd';
+import styles from './CustomerInfoManagementDetail.less';
+import BasicInfo from './second_customer_components/BasicInfo';
+import BusinessInfo from './second_customer_components/BusinessInfo';
+import LogisticsInfo from './second_customer_components/LogisticsInfo';
+import CooperateRecord from './second_customer_components/CooperateRecord';
+
+const CustomerInfoManagementDetail = ({ data }) => {
+    // 顶部一行选择：第一个为“基本信息/理化性质”，其余占位
+    const [firstMenu, setFirstMenu] = useState('basic');
+    const [secondMenu, setSecondMenu] = useState(undefined);
+    const [thirdMenu, setThirdMenu] = useState(undefined);
+    const [fourthMenu, setFourthMenu] = useState(undefined);
+    const [fifthMenu, setFifthMenu] = useState(undefined);
+
+    const firstMenuLabelMap = {
+        basic: '基础信息',
+        business: '业务信息',
+        logistics: '物流信息',
+        cooperate: '合作记录',
+    };
+
+    const renderFirstMenuContent = () => {
+        switch (firstMenu) {
+            case 'basic':
+                return <BasicInfo data={data} />;
+            case 'business':
+                return <BusinessInfo data={data} />;
+            case 'logistics':
+                return <LogisticsInfo data={data} />;
+            case 'cooperate':
+                return <CooperateRecord data={data} />;
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <div className={styles.container}>
+            {/* 客户基本信息展示 */}
+            {!data ? (
+                <div className={styles.emptyInfo}>
+                    暂无客户数据，请从列表页选择一个客户查看详情。
+                </div>
+            ) : (
+                <div className={styles.detailHeader}>
+                    <div className={styles.detailTitle}>{data?.customerName ?? '-'}</div>
+                    <div className={styles.detailSubTitle}>客户ID：{data?.customerId ?? data?.id ?? '-'}</div>
+                </div>
+            )}
+            <div className={styles.topBar}>
+                <div className={styles.currentLabel}>
+                    当前：{firstMenuLabelMap[firstMenu] || '未选择'}
+                </div>
+                <div className={styles.selectsWrapper}>
+                    <Select
+                        className={styles.topSelect}
+                        value={firstMenu}
+                        onChange={setFirstMenu}
+                        options={[
+                            { label: '基础信息', value: 'basic' },
+                            { label: '业务信息', value: 'business' },
+                            { label: '物流信息', value: 'logistics' },
+                            { label: '合作记录', value: 'cooperate' },
+                        ]}
+                    />
+                    <Select
+                        className={styles.topSelect}
+                        value={secondMenu}
+                        onChange={setSecondMenu}
+                        placeholder="业务信息"
+                        options={[]}
+                        disabled
+                    />
+                    <Select
+                        className={styles.topSelect}
+                        value={thirdMenu}
+                        onChange={setThirdMenu}
+                        placeholder="物流信息"
+                        options={[]}
+                        disabled
+                    />
+                    <Select
+                        className={styles.topSelect}
+                        value={fourthMenu}
+                        onChange={setFourthMenu}
+                        placeholder="合作记录"
+                        options={[]}
+                        disabled
+                    />
+                </div>
+            </div>
+
+            {renderFirstMenuContent()}
+        </div>
+    );
+};
+
+export default CustomerInfoManagementDetail;
+
diff --git a/src/pages/business_basic/components/CustomerInfoManagementDetail.less b/src/pages/business_basic/components/CustomerInfoManagementDetail.less
new file mode 100644
index 0000000..00a03db
--- /dev/null
+++ b/src/pages/business_basic/components/CustomerInfoManagementDetail.less
@@ -0,0 +1,169 @@
+.container {
+    min-height: 100%;
+
+    .topBar {
+        display: flex;
+
+        height: 46px;
+        margin-bottom: 16px;
+
+        .currentLabel {
+            border-top-left-radius: 20px;
+            height: 100%;
+            width: 230px;
+            display: flex;
+            align-items: center;
+            padding-left: 22px;
+            color: #fff;
+            font-size: 17px;
+            font-weight: 450;
+            background: pink;
+            background-image: url('@/assets/business_basic/bgOil.png');
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            background-position: center center;
+        }
+
+        .selectsWrapper {
+            height: 100%;
+            // width: 230px;
+            background-color: #fff;
+            border: 1px solid transparent;
+            border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%);
+            border-image-slice: 1;
+
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            flex: 1;
+        }
+
+        .topSelect {
+            width: 130px;
+            display: flex;
+            align-items: center;
+            text-align: center;
+            box-shadow: none;
+
+            :global(.ant-select-selector) {
+                border: transparent !important;
+                background-image: url('@/assets/business_basic/Union.svg');
+                background-repeat: no-repeat;
+                background-position: center center;
+                font-size: 12px;
+                color: rgba(0, 102, 101, 1);
+                background-size: 100% 100%;
+                box-shadow: none !important;
+            }
+
+            :global(.ant-select-focused .ant-select-selector),
+            :global(.ant-select-selector:hover) {
+                border: transparent !important;
+                box-shadow: none !important;
+
+            }
+
+            :global(.ant-select-arrow) {
+                right: 25px;
+                color: rgba(0, 102, 101, 1);
+            }
+        }
+    }
+
+    .section {
+        margin-bottom: 16px;
+
+        .blockTitle {
+            font-size: 16px;
+            font-weight: 600;
+            color: #2f4f4f;
+            margin-bottom: 12px;
+        }
+
+        .formGrid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-column-gap: 16px;
+            grid-row-gap: 12px;
+
+            .formItem {
+                display: flex;
+                flex-direction: column;
+
+                .label {
+                    color: #666;
+                    font-size: 12px;
+                    margin-bottom: 6px;
+                }
+            }
+
+            .span2 {
+                grid-column: 1 / span 2;
+            }
+        }
+
+        .actionsRight {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 12px;
+        }
+
+        .listHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .filterRow {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-bottom: 12px;
+
+            .filterItem {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+
+                .filterLabel {
+                    color: #666;
+                    font-size: 12px;
+                    white-space: nowrap;
+                }
+            }
+        }
+    }
+
+    .detailHeader {
+        margin: 0 0 16px 0;
+        padding: 12px 20px;
+        background: #fff;
+        border: 1px solid #eaeef2;
+        border-radius: 8px;
+        box-shadow: 0 0 0 1px rgba(240, 240, 240, 0.6) inset;
+
+        .detailTitle {
+            font-size: 16px;
+            line-height: 28px;
+            color: #333333;
+            font-weight: 600;
+            margin-bottom: 6px;
+        }
+
+        .detailSubTitle {
+            font-size: 12px;
+            line-height: 20px;
+            color: #666666;
+        }
+    }
+
+    .emptyInfo {
+        margin-bottom: 16px;
+        padding: 12px 20px;
+        background: #fffbe6;
+        border: 1px solid #ffe58f;
+        border-radius: 8px;
+        color: #614700;
+    }
+}
\ No newline at end of file