diff --git a/src/components/charge/PersonalPayment.vue b/src/components/charge/PersonalPayment.vue
index 0fe220c..f769bfa 100644
--- a/src/components/charge/PersonalPayment.vue
+++ b/src/components/charge/PersonalPayment.vue
@@ -193,7 +193,7 @@ const btnsList = [
 const detailRef = ref()
 const openDetail = () => {
   nextTick(() => {
-    detailRef.value?.init()
+    detailRef.value?.init(socialPayInfo.value.setlinfo)
   })
 }
 </script>
diff --git a/src/components/charge/RecordsLog/PaymentDetail.vue b/src/components/charge/RecordsLog/PaymentDetail.vue
index 6c37312..049226f 100644
--- a/src/components/charge/RecordsLog/PaymentDetail.vue
+++ b/src/components/charge/RecordsLog/PaymentDetail.vue
@@ -1,57 +1,296 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import {reactive, ref} from "vue";
 import Mask from "@/components/common/Mask.vue";
 
-const show  = ref(false);
-const init = () => {
+const show = ref(false);
+const init = (orderInfo: any) => {
   show.value = true;
+  leftList.value = [
+    {
+      name: '起付线',
+      value: orderInfo.act_pay_dedc
+    },
+    {
+      name: '统筹基金支付比例',
+      value: orderInfo.pool_prop_selfpay
+    },
+    {
+      name: '符合政策范围金额',
+      value: orderInfo.inscp_scp_amt
+    },
+    {
+      name: '超限价自费费用',
+      value: orderInfo.overlmt_selfpay
+    },
+    {
+      name: '全自费金额',
+      value: orderInfo.fulamt_ownpay_amt
+    }
+    ,
+    {
+      name: '先行自付金额',
+      value: orderInfo.preselfpay_amt
+    }
+  ]
+  centerList.value = [
+    {
+      name: '统筹基金支出',
+      value: orderInfo.hifp_pay
+    },
+    {
+      name: '公务员医疗补助支出',
+      value: orderInfo.cvlserv_pay
+    },
+    {
+      name: '企业补充医保支出',
+      value: orderInfo.hifes_pay
+    },
+    {
+      name: '居民大病保险支出',
+      value: orderInfo.hifmi_pay
+    },
+    {
+      name: '职工大额补助支出',
+      value: orderInfo.hifob_pay
+    },
+    {
+      name: '医疗救助金支出',
+      value: orderInfo.maf_pay
+    },
+    {
+      name: '补充医疗保险支出',
+      value: orderInfo.oth_pay
+    },
+  ]
+  rightTopList.value = [
+    {
+      name: '个人账户支出',
+      value: orderInfo.acct_pay
+    },
+    {
+      name: '个人账户共济支出',
+      value: orderInfo.acct_mulaid_pay
+    },
+  ]
+  rightBottomList.value = [
+    {
+      name: '医院负担金额',
+      value: orderInfo.hosp_part_amt
+    },
+    {
+      name: '个人现金支出',
+      value: orderInfo.psn_cash_pay
+    },
+  ]
 }
+const leftList = ref<any>([
+  {
+    name: '起付线',
+    value:'￥0.00'
+  },
+  {
+    name: '统筹基金支付比例',
+    value: '￥0.00'
+  },
+  {
+    name: '符合政策范围金额',
+    value: '￥0.00'
+  },
+  {
+    name: '超限价自费费用',
+    value: '￥0.00'
+  },
+  {
+    name: '全自费金额',
+    value: '￥0.00'
+  },
+  {
+    name: '先行自付金额',
+    value: '￥0.00'
+  }
+])
+const centerList = ref<any>([
+  {
+    name: '统筹基金支出',
+    value: '￥0.00'
+  },
+  {
+    name: '公务员医疗补助支出',
+    value: '￥0.00'
+  },
+  {
+    name: '企业补充医保支出',
+    value: '￥0.00'
+  },
+  {
+    name: '居民大病保险支出',
+    value: '￥0.00'
+  },
+  {
+    name: '职工大额补助支出',
+    value: '￥0.00'
+  },
+  {
+    name: '医疗救助金支出',
+    value: '￥0.00'
+  },
+  {
+    name: '补充医疗保险支出',
+    value: '￥0.00'
+  },
+])
+const rightTopList = ref<any>([
+  {
+    name: '个人账户支出',
+    value: '￥0.00'
+  },
+  {
+    name: '个人账户共济支出',
+    value: '￥0.00'
+  },
+])
+const rightBottomList = ref<any>([
+  {
+    name: '医院负担金额',
+    value: '￥0.00'
+  },
+  {
+    name: '个人现金支出',
+    value: '￥0.00'
+  },
+])
+const formatValue = (value: number | string): string => {
+  const num = parseFloat(value as string);
+  return isNaN(num) ? '0.00' : num.toFixed(2);
+};
 defineExpose({init})
 </script>
 
 <template>
-  <Mask  :is-show="show" :width=918 :height="413" @close="show=false" title="支付详情">
+  <Mask :is-show="show" :width=918 :height="364" @close="show=false" title="支付详情">
     <div class="detail-content">
-      <div class="left">1</div>
-      <div class="center">2</div>
+      <div class="left">
+        <span class="item" v-for="item in leftList" :key="item.name">
+          <span>{{ item.name }}</span>
+          <span>{{ item.name != '统筹基金支付比例' ? '￥' : ''}}{{formatValue(item.value) }}{{ item.name == '统筹基金支付比例' ? '%' : ''}}</span>
+        </span>
+      </div>
+      <div class="center">
+        <span class="item" v-for="item in centerList" :key="item.name">
+          <span>{{ item.name }}</span>
+          <span>{{ item.name != '公务员医疗补助支出' ? '￥' : ''}}{{formatValue(item.value) }}{{ item.name == '公务员医疗补助支出' ? '%' : ''}}</span>
+        </span>
+      </div>
       <div class="right">
-        <div class="top">3</div>
-        <div class="bottom">4</div>
+        <div class="top">
+          <span class="item" v-for="item in rightTopList" :key="item.name">
+            <span>{{ item.name }}</span>
+            <span>￥{{ formatValue(item.value) }}</span>
+          </span>
+        </div>
+        <div class="bottom">
+            <span class="item" v-for="item in rightBottomList" :key="item.name">
+            <span>{{ item.name }}</span>
+            <span>￥{{ formatValue(item.value) }}</span>
+          </span>
+        </div>
       </div>
     </div>
   </Mask>
 </template>
-
 <style scoped lang="scss">
-.detail-content{
+.detail-content {
   height: 100%;
   padding: 24px;
   display: flex;
-  div{
+
+  div {
     flex: 1;
     min-width: 0;
     border-radius: 8px;
   }
-  .left{
+
+  .left {
+    padding: 24px;
     background: #F9FAFC;
-  }
-  .center{
-    margin: 0 24px;
-    background: #FEFCF8;
-  }
-  .right{
     display: flex;
     flex-direction: column;
-    dev{
+    justify-content: space-between;
+
+    .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 500;
+      font-size: 16px;
+      color: #333333;
+      font-style: normal;
+    }
+  }
+
+  .center {
+    margin: 0 24px;
+    padding: 24px;
+    background: #FEFCF8;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 500;
+      font-size: 16px;
+      color: #333333;
+      font-style: normal;
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+
+    dev {
       flex: 1;
       min-height: 0;
     }
-    .top{
+
+    .top {
       background: #F7FEFA;
       margin-bottom: 24px;
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+        font-style: normal;
+      }
     }
-    .bottom{
+
+    .bottom {
       background: #FFEEEF;
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+        font-style: normal;
+      }
     }
   }
 }