diff --git a/src/components/PackageModal/PackageModal.tsx b/src/components/PackageModal/PackageModal.tsx
new file mode 100644
index 0000000..782a919
--- /dev/null
+++ b/src/components/PackageModal/PackageModal.tsx
@@ -0,0 +1,293 @@
+import { useState, useEffect, useContext } from 'react'
+import { Table, Spin, message, Modal } from 'antd';
+import {
+    get,
+} from "../../util/AjaxUtils.ts";
+import { getPackageDetail } from '../../request/api.ts'
+import { GlobalContext } from "../../context/GlobalContext.ts";
+import type {
+    TableColumnsType,
+} from 'antd';
+export default function PackageModal() {
+    interface DataType {
+        usericId: string;
+        icPriceMaterial: number;
+        icPriceAll: number;
+        createTime: string;
+        packageOrderId: string;
+
+    }
+
+    interface DetailType {
+        orderTitle: string; //项目名称
+        description: string; //描述
+        gmtCreate: string; //创建时间
+        mode: number;//类型 1退回 2使用
+
+    }
+    const [messageApi, contextHolder] = message.useMessage();
+    const [packList, setPackList] = useState<any[]>([]) //服务包列表
+    const [packPage, setPackPage] = useState(1) //服务包分页
+    const [packTotal, setPackTotal] = useState(0) //服务包总数
+    const [packDetailModal, setPackDetailModal] = useState(false) //服务包详情
+
+    const [detailPage, setDetailPage] = useState(1) //服务包详情分页
+    const [detailTotal, setDetailTotal] = useState(0) //服务包详情总数
+    const [detailList, setDetailList] = useState<any[]>([]) //服务包详情列表
+    // const [packageOrderId, setPackageOrderId] = useState('') //服务包id
+    const [packloading, setPackloading] = useState(false)
+    // 获取我得服务包信息
+    const getPickList = (page: number, packageType: string) => {
+
+        get<any>({
+            messageApi,
+            url: `/api/proj/servicepkg/packageorder/listpage/self`,
+            config: {
+                params: {
+                    page: page,
+                    rows: 10,
+                    packageType: packageType
+                }
+            },
+            onBefore() {
+                setPackloading(true)
+            },
+            onSuccess({ data }) {
+
+                setPackList(data.rows)
+                setPackTotal(data.total)
+
+            },
+            onFinally() {
+                setPackloading(false)
+            }
+        })
+    }
+    const globalContext = useContext(GlobalContext);
+    const [packageOrderId, setPackageOrderId] = useState('') //服务包id
+    // 获取服务包详情
+    const packageDetail = async (packageOrderId: string, page: number) => {
+        const res: any = await getPackageDetail(globalContext.user.userId, packageOrderId, { page: page, rows: 10 })
+        console.log(res);
+        setDetailList(res.rows)
+        setDetailTotal(res.total)
+
+    }
+
+    useEffect(() => {
+        getPickList(packPage, '')
+    }, [packPage])
+    useEffect(() => {
+        packageDetail(packageOrderId, detailPage)
+    }, [detailPage])
+    const packColumns: TableColumnsType<DataType> = [
+        {
+            title: '序号',
+            dataIndex: 'index',
+            key: 'packageOrderId',
+            align: 'center',
+            render: (_text, _record, index) => (packPage - 1) * 10 + index + 1, // 显示序号，从1开始
+
+        },
+        {
+            title: '套餐名称',
+            dataIndex: 'packageName',
+            key: 'packageOrderId',
+            // 居中显示
+            align: 'center',
+        },
+        // packageType
+        {
+            title: '套餐类型',
+            dataIndex: 'packageInfoAppDTO',
+            key: 'packageOrderId',
+            // 居中显示
+            align: 'center',
+            render: (text) => {
+                return <div>{text.packageType == "ALL" ? '全托管' : '写材料'} </div>
+            }
+        },
+        // {
+        //     title: '套餐类型',
+        //     dataIndex: 'packageInfoAppDTO',
+        //     key: 'packageOrderId',
+        //     // 居中显示
+        //     align: 'center',
+        //     render: (text) => {
+        //         return <div>{text} </div>
+        //     }
+        // },
+        {
+            title: '价格',
+            dataIndex: 'packageTotalMoney',
+            key: 'packageOrderId',
+            // 居中显示
+            align: 'center',
+            render: (text) => {
+                return <div>{text / 100}元</div>
+            }
+        },
+        {
+            title: '剩余次数',
+            dataIndex: 'packageTotalSurplusCount',
+            align: 'center',
+            key: 'packageOrderId',
+            render: (text: number) => {
+                return <div>{text} </div>
+            }
+        },
+        {
+            title: '总次数',
+            dataIndex: 'packageTotalCount',
+            align: 'center',
+            key: 'packageOrderId',
+            render: (text: any) => {
+                return <div>{text} </div>
+            }
+        },
+        {
+            title: '下单时间',
+            align: 'center',
+            dataIndex: 'gmtCreate',
+            key: 'packageOrderId',
+            // render: (text: string) => {
+            //     return <div title={text} style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{text}</div>
+            // }
+        },
+        {
+            title: '操作',
+            align: 'center',
+            dataIndex: 'operate',
+            key: 'packageOrderId',
+            render: (_value, record) => {
+                return <a onClick={() => {
+                    // console.log(record);
+                    setPackDetailModal(true)
+                    packageDetail(record.packageOrderId, 1)
+                    setPackageOrderId(record.packageOrderId)
+                    setDetailPage(1)
+                }}>查看详情</a>
+            }
+        },
+    ];
+
+    const detailColums: TableColumnsType<DetailType> = [
+        {
+            title: '序号',
+            dataIndex: 'index',
+            key: 'packageOrderItemId',
+            align: 'center',
+            width: 100,
+            render: (_text, _record, index) => (detailPage - 1) * 10 + index + 1, // 显示序号，从1开始
+
+        },
+        {
+            title: '项目名称',
+            dataIndex: 'orderTitle',
+            key: 'packageOrderItemId',
+            align: 'center',
+            width: 150,
+            ellipsis: {
+                showTitle: true,
+            },
+
+
+        },
+        {
+            title: '类型',
+            dataIndex: 'mode',
+            key: 'packageOrderItemId',
+            align: 'center',
+            width: 120,
+            render: (text) => {
+                return <span>
+                    {text == 1 ? '退回' : '使用'}
+                </span>
+            }
+
+
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'gmtCreate',
+            key: 'packageOrderItemId',
+            align: 'center',
+            width: 200,
+        },
+         {
+            title: '使用数量',
+            dataIndex: 'itemUseCount',
+            key: 'packageOrderItemId',
+            align: 'center',
+            width: 100,
+        },
+           {
+            title: '剩余数量',
+            dataIndex: 'itemCount',
+            key: 'packageOrderItemId',
+            align: 'center',
+            width: 100,
+        },
+        {
+            title: '描述',
+            dataIndex: 'description',
+            key: 'packageOrderItemId',
+            align: 'center',
+            width: 400,
+            ellipsis: {
+                showTitle: true,
+            },
+
+
+        },
+
+    ]
+    return (
+        <Spin tip="加载中..." spinning={packloading} >
+            {contextHolder}
+            <Table
+                columns={packColumns}
+                dataSource={packList}
+                pagination={{
+                    defaultPageSize: 10, // 设置默认一页显示 5 条数据,
+                    current: packPage,
+                    total: packTotal,
+                    onChange: (page: number) => {
+                        setPackPage(page);
+                        getPickList(page, '')
+                        // console.log(page);
+                    }
+                }}
+                rowKey="packageOrderId"
+            />
+            <Modal title="套餐包使用详情"
+                centered
+                footer={null}
+                destroyOnClose
+                open={packDetailModal}
+                width={1200}
+                onCancel={() => {
+                    setPackDetailModal(false)
+
+                }}>
+
+                <Table
+                    columns={detailColums}
+                    dataSource={detailList}
+                    pagination={{
+                        defaultPageSize: 10, // 设置默认一页显示 5 条数据,
+                        current: detailPage,
+                        total: detailTotal,
+                        onChange: (page: number) => {
+                            setDetailPage(page);
+                            packageDetail(packageOrderId, page)
+                            // console.log(page);
+                        }
+                    }}
+                    rowKey="packageOrderItemId"
+                />
+
+            </Modal>
+        </Spin>
+    )
+}
diff --git a/src/components/balance/BalanceHead.tsx b/src/components/balance/BalanceHead.tsx
index 2d0dd7e..535c2e8 100644
--- a/src/components/balance/BalanceHead.tsx
+++ b/src/components/balance/BalanceHead.tsx
@@ -5,8 +5,11 @@ import { Modal } from 'antd';
 import moneyImg from '@theme/img/head/money.png'
 import CapitalModal from '../CapitalModal/CapitalModal.tsx';
 import RecordModal from '../RecordModal/RecordModal.tsx'
+import PackageModal from '../PackageModal/PackageModal.tsx'
 import capitalImg from '../../static/capita.png'
 import recordImg from '../../static/record.png'
+import packImg from '../../static/packimg.png'
+
 export default function BalanceHead() {
     const globalContext = useContext(GlobalContext);
     // const [isLoading, setIsLoading] = useState(false)
@@ -16,6 +19,8 @@ export default function BalanceHead() {
     // 分账记录弹窗
     const [recordModal, setRecordModal] = useState(false)
 
+    // 套餐包使用详情弹窗
+    const [packageModal, setPackageModal] = useState(false)
     return (
         <div className="head-item balance-head">
             <div className="label">
@@ -50,7 +55,7 @@ export default function BalanceHead() {
                             width: 68,
                             height: 1,
                             background: '#EAEAEA',
-                            marginLeft: 18
+                            // marginLeft: 0
                         }}></div>
                         <div className='moneyModal-title' onClick={() => {
                             setRecordModal(true)
@@ -62,6 +67,22 @@ export default function BalanceHead() {
                                 分账记录
                             </div>
                         </div>
+                        <div style={{
+                            width: 68,
+                            height: 1,
+                            background: '#EAEAEA',
+                            // marginLeft: 18
+                        }}></div>
+                        <div className='moneyModal-title' onClick={() => {
+                            setPackageModal(true)
+                        }}>
+                            <img src={packImg} style={{ marginTop: 1 }} width={20} height={20} alt="" />
+                            <div style={{
+                                marginLeft: 5,
+                            }}>
+                                套餐包使用
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -82,6 +103,7 @@ export default function BalanceHead() {
                 }}>分账记录</div>
             </Modal> */}
             <Modal title="资金流水"
+                centered
                 footer={null}
                 destroyOnClose
                 open={capitalModal}
@@ -95,6 +117,7 @@ export default function BalanceHead() {
 
             </Modal>
             <Modal title="分账记录"
+                centered
                 footer={null}
                 destroyOnClose
                 open={recordModal}
@@ -107,6 +130,20 @@ export default function BalanceHead() {
                 <RecordModal></RecordModal>
 
             </Modal>
+            <Modal title="套餐包使用明细"
+                centered
+                footer={null}
+                destroyOnClose
+                open={packageModal}
+                width={1200}
+                onCancel={() => {
+                    setPackageModal(false)
+
+                }}>
+
+                <PackageModal></PackageModal>
+
+            </Modal>
         </div >
     )
 }
\ No newline at end of file
diff --git a/src/components/balance/balance-head.css b/src/components/balance/balance-head.css
index b80a420..20eba10 100644
--- a/src/components/balance/balance-head.css
+++ b/src/components/balance/balance-head.css
@@ -28,8 +28,8 @@
     display: none;
     background-color: #ffffff;
     position: absolute;
-    width: 120px;
-    height: 100px;
+    /* width: 120px; */
+    /* height: 100px; */
     left: -50px;
     top: 40px;
     /* border: 1px solid red; */
@@ -40,8 +40,8 @@
 }
 
 .moneyModal-box {
-    width: 120px;
-    height: 100px;
+    /* width: 120px; */
+    /* height: 100px; */
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
@@ -70,6 +70,9 @@
     font-size: 16px;
     color: #333333;
     font-weight: 400;
+    padding:15px 20px ;
+    /* background-color: pink; */
+    width: 120px;
 }
 .transparentBox{
     background-color: transparent;
diff --git a/src/layout/head/Head.tsx b/src/layout/head/Head.tsx
index 3143bf2..0c2a6ef 100644
--- a/src/layout/head/Head.tsx
+++ b/src/layout/head/Head.tsx
@@ -19,7 +19,9 @@ import BalanceHead from '../../components/balance/BalanceHead.tsx';
 import RechargeHead from '../../components/recharge/RechargeHead.tsx';
 import {
     //  Empty, 
-    Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table, Form, Button
+    Dropdown, MenuProps, message, Modal, Space, Spin, Input,
+    //  Table,
+      Form, Button
     //   Form, Button, InputNumber
 } from "antd";
 // import {
@@ -30,16 +32,16 @@ import titleB from '../../static/Phone/titleB.png'
 import line from '../../static/Phone/line.png'
 
 import pack from '@theme/img/pack.png'
-
+import PackAgeModal from '../../components/PackageModal/PackageModal.tsx'
 // import pack from '@theme/pack.png'
 // import type { TableProps, FormProps } from 'antd';
-interface DataType {
-    usericId: string;
-    icPriceMaterial: number;
-    icPriceAll: number;
-    createTime: string;
+// interface DataType {
+//     usericId: string;
+//     icPriceMaterial: number;
+//     icPriceAll: number;
+//     createTime: string;
 
-}
+// }
 // interface icDataType {
 //     contactName: string;//联系人姓名
 //     contactPhone: string;//联系人电话
@@ -150,9 +152,9 @@ import ContactPeople from '../../components/ContactPeople/ContactPeople.tsx'
 import inv from '../../static/inv.png'
 import MyOrder from '../../components/myOrder/MyOrder.tsx'
 import NoticeModal from '../../components/NoticeModal/NoticeModal.tsx';
-import type {
-    TableColumnsType,
-} from 'antd';
+// import type {
+//     TableColumnsType,
+// } from 'antd';
 // import { log } from 'console';
 // import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx'
 export default function Head() {
@@ -328,38 +330,38 @@ export default function Head() {
 
 
 
-    const [packloading, setPackloading] = useState(false)
-    const [packList, setPackList] = useState<any[]>([]) //服务包列表
-    const [packPage, setPackPage] = useState(1) //服务包分页
-    const [packTotal, setPackTotal] = useState(0) //服务包总数
+    // const [packloading, setPackloading] = useState(false)
+    // const [packList, setPackList] = useState<any[]>([]) //服务包列表
+    // const [packPage, setPackPage] = useState(1) //服务包分页
+    // const [packTotal, setPackTotal] = useState(0) //服务包总数
     // const [packageType, setPackageType] = useState('')
     // 获取我得服务包信息
-    const getPickList = (page: number, packageType: string) => {
+    // const getPickList = (page: number, packageType: string) => {
 
-        get<any>({
-            messageApi,
-            url: `/api/proj/servicepkg/packageorder/listpage/self`,
-            config: {
-                params: {
-                    page: page,
-                    rows: 10,
-                    packageType: packageType
-                }
-            },
-            onBefore() {
-                setPackloading(true)
-            },
-            onSuccess({ data }) {
+    //     get<any>({
+    //         messageApi,
+    //         url: `/api/proj/servicepkg/packageorder/listpage/self`,
+    //         config: {
+    //             params: {
+    //                 page: page,
+    //                 rows: 10,
+    //                 packageType: packageType
+    //             }
+    //         },
+    //         onBefore() {
+    //             setPackloading(true)
+    //         },
+    //         onSuccess({ data }) {
 
-                setPackList(data.rows)
-                setPackTotal(data.total)
+    //             setPackList(data.rows)
+    //             setPackTotal(data.total)
 
-            },
-            onFinally() {
-                setPackloading(false)
-            }
-        })
-    }
+    //         },
+    //         onFinally() {
+    //             setPackloading(false)
+    //         }
+    //     })
+    // }
     // useEffect(() => {
     //     console.log('路径',currentUrl);
 
@@ -888,81 +890,81 @@ export default function Head() {
         applyContactPhone: '',
         applyContactCompany: ''
     })
-    const packColumns: TableColumnsType<DataType> = [
-        {
-            title: '序号',
-            dataIndex: 'index',
-            key: 'packageOrderId',
-            align: 'center',
-            render: (_text, _record, index) => (packPage - 1) * 10 + index + 1, // 显示序号，从1开始
+    // const packColumns: TableColumnsType<DataType> = [
+    //     {
+    //         title: '序号',
+    //         dataIndex: 'index',
+    //         key: 'packageOrderId',
+    //         align: 'center',
+    //         render: (_text, _record, index) => (packPage - 1) * 10 + index + 1, // 显示序号，从1开始
 
-        },
-        {
-            title: '套餐名称',
-            dataIndex: 'packageName',
-            key: 'packageOrderId',
-            // 居中显示
-            align: 'center',
-        },
-        // packageType
-        {
-            title: '套餐类型',
-            dataIndex: 'packageInfoAppDTO',
-            key: 'packageOrderId',
-            // 居中显示
-            align: 'center',
-            render: (text) => {
-                return <div>{text.packageType == "ALL" ? '全托管' : '写材料'} </div>
-            }
-        },
-        // {
-        //     title: '套餐类型',
-        //     dataIndex: 'packageInfoAppDTO',
-        //     key: 'packageOrderId',
-        //     // 居中显示
-        //     align: 'center',
-        //     render: (text) => {
-        //         return <div>{text} </div>
-        //     }
-        // },
-        {
-            title: '价格',
-            dataIndex: 'packageTotalMoney',
-            key: 'packageOrderId',
-            // 居中显示
-            align: 'center',
-            render: (text) => {
-                return <div>{text / 100}元</div>
-            }
-        },
-        {
-            title: '剩余次数',
-            dataIndex: 'packageTotalSurplusCount',
-            align: 'center',
-            key: 'packageOrderId',
-            render: (text: number) => {
-                return <div>{text} </div>
-            }
-        },
-        {
-            title: '总次数',
-            dataIndex: 'packageTotalCount',
-            align: 'center',
-            key: 'packageOrderId',
-            render: (text: any) => {
-                return <div>{text} </div>
-            }
-        },
-        {
-            title: '下单时间',
-            align: 'center',
-            dataIndex: 'gmtCreate',
-            key: 'packageOrderId',
-            // render: (text: string) => {
-            //     return <div title={text} style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{text}</div>
-            // }
-        },
-    ];
+    //     },
+    //     {
+    //         title: '套餐名称',
+    //         dataIndex: 'packageName',
+    //         key: 'packageOrderId',
+    //         // 居中显示
+    //         align: 'center',
+    //     },
+    //     // packageType
+    //     {
+    //         title: '套餐类型',
+    //         dataIndex: 'packageInfoAppDTO',
+    //         key: 'packageOrderId',
+    //         // 居中显示
+    //         align: 'center',
+    //         render: (text) => {
+    //             return <div>{text.packageType == "ALL" ? '全托管' : '写材料'} </div>
+    //         }
+    //     },
+    //     // {
+    //     //     title: '套餐类型',
+    //     //     dataIndex: 'packageInfoAppDTO',
+    //     //     key: 'packageOrderId',
+    //     //     // 居中显示
+    //     //     align: 'center',
+    //     //     render: (text) => {
+    //     //         return <div>{text} </div>
+    //     //     }
+    //     // },
+    //     {
+    //         title: '价格',
+    //         dataIndex: 'packageTotalMoney',
+    //         key: 'packageOrderId',
+    //         // 居中显示
+    //         align: 'center',
+    //         render: (text) => {
+    //             return <div>{text / 100}元</div>
+    //         }
+    //     },
+    //     {
+    //         title: '剩余次数',
+    //         dataIndex: 'packageTotalSurplusCount',
+    //         align: 'center',
+    //         key: 'packageOrderId',
+    //         render: (text: number) => {
+    //             return <div>{text} </div>
+    //         }
+    //     },
+    //     {
+    //         title: '总次数',
+    //         dataIndex: 'packageTotalCount',
+    //         align: 'center',
+    //         key: 'packageOrderId',
+    //         render: (text: any) => {
+    //             return <div>{text} </div>
+    //         }
+    //     },
+    //     {
+    //         title: '下单时间',
+    //         align: 'center',
+    //         dataIndex: 'gmtCreate',
+    //         key: 'packageOrderId',
+    //         // render: (text: string) => {
+    //         //     return <div title={text} style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{text}</div>
+    //         // }
+    //     },
+    // ];
     // 优惠券弹窗
     // const [couponModal, setCouponModal] = useState(false)
     // const [belongArray,setBelongArray] = useState([])
@@ -1237,8 +1239,8 @@ export default function Head() {
             onClick: () => {
                 // setCouponModal(true)
                 setPackageModal(true)
-                setPackPage(1);
-                getPickList(1, '')
+                // setPackPage(1);
+                // getPickList(1, '')
                 // setPackageType('')
             }
         },
@@ -1363,8 +1365,8 @@ export default function Head() {
                             }}
                                 onClick={() => {
                                     setPackageModal(true)
-                                    setPackPage(1);
-                                    getPickList(1, '')
+                                    // setPackPage(1);
+                                    // getPickList(1, '')
                                 }}
                             >
                                 <img src={pack} width={19} height={19} alt="" />
@@ -1642,13 +1644,14 @@ export default function Head() {
                 destroyOnClose
                 centered
                 open={packageModal}
-                width={1000}
+                width={1200}
                 footer={null}
                 onCancel={() => {
                     setPackageModal(false)
-                    setPackPage(1);
+                    // setPackPage(1);
                 }}>
-                <Spin tip="加载中..." spinning={packloading} >
+                <PackAgeModal></PackAgeModal>
+                {/* <Spin tip="加载中..." spinning={packloading} >
                     <Table
                         columns={packColumns}
                         dataSource={packList}
@@ -1664,7 +1667,7 @@ export default function Head() {
                         }}
                         rowKey="packageOrderId"
                     />
-                </Spin>
+                </Spin> */}
             </Modal>
             <Modal title="邀请码"
                 destroyOnClose
diff --git a/src/request/api.ts b/src/request/api.ts
index 15fe264..8f6d57a 100644
--- a/src/request/api.ts
+++ b/src/request/api.ts
@@ -31,6 +31,10 @@ export const getInvoiceInfoByinvoiceRechargeId = (invoiceRechargeId: string) =>
 // 修改开票信息
 export const updateInvoiceInfoByinvoiceRechargeId = (invoiceRechargeId: string, params: any) => request.put(`/operator-plugin/api/invoicerecharge/update/${invoiceRechargeId}`, params)
 
+// 获取套餐包使用详情
+export const getPackageDetail = (userId:string,packageOrderId:string,params:any) => request.get(`/operator-plugin/app/packageorderitem/listpagerelease/${userId}?packageOrderId=${packageOrderId}`, { params })
+
+
 //---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 
diff --git a/src/static/packimg.png b/src/static/packimg.png
new file mode 100644
index 0000000..50f8699
Binary files /dev/null and b/src/static/packimg.png differ