diff --git a/public/static/images/slices/1-active.png b/public/static/images/slices/1-active.png
new file mode 100644
index 0000000..8300046
Binary files /dev/null and b/public/static/images/slices/1-active.png differ
diff --git a/public/static/images/slices/1.png b/public/static/images/slices/1.png
new file mode 100644
index 0000000..7a175f2
Binary files /dev/null and b/public/static/images/slices/1.png differ
diff --git a/public/static/images/slices/2-active.png b/public/static/images/slices/2-active.png
new file mode 100644
index 0000000..a155924
Binary files /dev/null and b/public/static/images/slices/2-active.png differ
diff --git a/public/static/images/slices/2.png b/public/static/images/slices/2.png
new file mode 100644
index 0000000..1d53b80
Binary files /dev/null and b/public/static/images/slices/2.png differ
diff --git a/public/static/images/slices/3-active.png b/public/static/images/slices/3-active.png
new file mode 100644
index 0000000..37e03e7
Binary files /dev/null and b/public/static/images/slices/3-active.png differ
diff --git a/public/static/images/slices/3.png b/public/static/images/slices/3.png
new file mode 100644
index 0000000..2437b91
Binary files /dev/null and b/public/static/images/slices/3.png differ
diff --git a/public/static/images/slices/4-active.png b/public/static/images/slices/4-active.png
new file mode 100644
index 0000000..3913808
Binary files /dev/null and b/public/static/images/slices/4-active.png differ
diff --git a/public/static/images/slices/4.png b/public/static/images/slices/4.png
new file mode 100644
index 0000000..c97b944
Binary files /dev/null and b/public/static/images/slices/4.png differ
diff --git a/public/static/images/slices/5-active.png b/public/static/images/slices/5-active.png
new file mode 100644
index 0000000..9802129
Binary files /dev/null and b/public/static/images/slices/5-active.png differ
diff --git a/public/static/images/slices/5.png b/public/static/images/slices/5.png
new file mode 100644
index 0000000..51797df
Binary files /dev/null and b/public/static/images/slices/5.png differ
diff --git a/public/static/images/slices/路径 2@2x.png b/public/static/images/slices/路径 2@2x.png
new file mode 100644
index 0000000..b0acfd7
Binary files /dev/null and b/public/static/images/slices/路径 2@2x.png differ
diff --git a/src/components/charge/CardPay.vue b/src/components/charge/CardPay.vue
index b25b090..8af771e 100644
--- a/src/components/charge/CardPay.vue
+++ b/src/components/charge/CardPay.vue
@@ -9,9 +9,9 @@ import {useWsStore} from "@/stores/wsStore.ts";
 
 const wsStore = useWsStore();
 const isReading = ref(false)
-const socialCard:any = defineModel();
+const socialCard: any = defineModel();
 const ReadSocialCard = async (readType: string) => {
-  socialCard.value.lastUse="cardPay"
+  socialCard.value.lastUse = "cardPay"
   isReading.value = true;
   let config_db: any = await post('common/config/getall');
   let config: any = {}
@@ -35,7 +35,7 @@ const ReadSocialCard = async (readType: string) => {
   wsStore.sendMessage(request);
 };
 const reciceMessage = (response: Response) => {
-  if(socialCard.value.lastUse!="cardPay"){
+  if (socialCard.value.lastUse != "cardPay") {
     return;
   }
   if (response.Code == 301) {
@@ -75,27 +75,29 @@ const getInfoFor1101 = (params: any) => {
 onMounted(async () => {
   wsStore.setMessageCallback(reciceMessage)
 });
-onUnmounted(()=>{
+onUnmounted(() => {
   wsStore.removeAllMessageCallback()
 })
 </script>
 
 <template>
   <div class="card-pay">
-    <div class="left">医保<br/>信息</div>
+    <div class="title">
+      <div class="left">医保信息</div>
+      <el-button type="primary" @click="socialCard.data=null">退出</el-button>
+    </div>
     <div class="right">
       <div class="insuinfo" v-if="socialCard.data">
         <div class="line">
-          <div class="label">姓名</div>
+          <div class="label">姓名：</div>
           <div class="info">{{ socialCard.data.baseinfo.psn_name }}</div>
-          <div class="btn" @click="socialCard.data=null">退出</div>
         </div>
         <div class="line">
-          <div class="label">险种</div>
+          <div class="label">险种：</div>
           <div class="info">
-            <el-select v-model="socialCard.payInfo.selfpay_prop_type" placeholder="请选择" style="width: 100%">
+            <el-select style="width: 340px" v-model="socialCard.payInfo.selfpay_prop_type" placeholder="请选择">
               <el-option
-                  v-for="(item,index) in socialCard.data.insuinfo"
+                  v-for="(item) in socialCard.data.insuinfo"
                   :key="item.insutype"
                   :label="'账户余额'+getKey(insutypes, item.insutype)+'('+item.balc.toFixed(2)+')'"
                   :value="item.insutype"
@@ -104,48 +106,48 @@ onUnmounted(()=>{
             </el-select>
           </div>
         </div>
-
       </div>
       <div class="card-empty" v-else>
         <div class="tip" v-loading="isReading">暂无医保信息</div>
-        <div class="btn-wrapper"> <div class="btn"  @click="ReadSocialCard('03')" tabindex="-1">医保卡</div>
-          <div class="btn"  @click="ReadSocialCard('01')" tabindex="-1">电子码</div>
-          <div class="btn"   @click="ReadSocialCard('02')" tabindex="-1">身份证</div>
-          <div class="btn"  @click="ReadSocialCard('04')" tabindex="-1">人脸识别</div></div>
+        <div class="btn-wrapper">
+          <div class="btn" @click="ReadSocialCard('03')" tabindex="-1">医保卡</div>
+          <div class="btn" @click="ReadSocialCard('01')" tabindex="-1">电子码</div>
+          <div class="btn" @click="ReadSocialCard('02')" tabindex="-1">身份证</div>
+          <div class="btn" @click="ReadSocialCard('04')" tabindex="-1">人脸识别</div>
+        </div>
       </div>
-
-
     </div>
-
   </div>
 </template>
 
 <style scoped lang="scss">
 .card-pay {
-  position: relative;
+  width: 436px;
+  background: #f9fafc;
+  border-radius: 8px;
+  padding: 24px;
   display: flex;
+  flex-direction: column;
+  .title{
+    display: flex;
+    justify-content: space-between;
+  }
 
   .left {
-    width: 100px;
-    height: 100px;
-    background: #DDD;
-    text-align: center;
-    line-height: 30px;
-    font-size: 24px;
-    color: #666;
-    padding: 20px;
-    box-sizing: border-box;
-    border-radius: 10px 0 0 10px;
+    font-weight: 800;
+    font-size: 18px;
+    color: #333333;
+    font-style: normal;
   }
 
   .right {
-    position: relative;
     flex: 1;
-    background: #EEE;
-    box-sizing: border-box;
-    padding: 10px;
-    border-radius: 0 10px 10px 0;
-    .line{
+    display: flex;
+    font-weight: 500;
+    font-size: 16px;
+    color: #999999;
+    font-style: normal;
+    .line {
       position: relative;
       display: flex;
       height: 40px;
@@ -153,37 +155,56 @@ onUnmounted(()=>{
       padding-left: 10px;
       padding-right: 10px;
       line-height: 40px;
-      .label{
+      .label {
         position: relative;
-        width: 40px;
+        width: 50px;
       }
-      .info{
+
+      .info {
         flex: 1;
       }
     }
-    .card-empty{
+
+    .card-empty {
       width: 100%;
       height: 100%;
       overflow: hidden;
-      .tip{
+
+      .tip {
         position: relative;
         width: 100%;
         height: 50px;
         text-align: center;
         line-height: 40px;
       }
-      .btn-wrapper{
-        position: relative;
-        height: 30px;
+
+      .btn-wrapper {
+        height: 38px;
         display: flex;
-        .btn{
-          flex: 1;
-          margin-left: 5px;
-          margin-right: 5px;
+        justify-content: space-between;
+
+        .btn {
+          width: 91px;
+          height: 38px;
+          background: #ffffff;
+          border-radius: 8px;
+          border: 1px solid #4d6de4;
+          font-weight: bold;
+          font-size: 16px;
+          color: #4d6de4;
+          font-style: normal;
+          text-align: center;
+          line-height: 38px;
+
+          &:hover {
+            background: #4d6de4;
+            color: #ffffff;
+          }
         }
       }
     }
-    .btn{
+
+    .btn {
       text-align: center;
       line-height: 30px;
       outline: none;
@@ -193,4 +214,56 @@ onUnmounted(()=>{
   }
 
 }
+
+.pay-right {
+  width: 436px;
+  background: #f9fafc;
+  border-radius: 8px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+
+  &-title {
+    font-weight: 800;
+    font-size: 18px;
+    color: #333333;
+    font-style: normal;
+  }
+
+  &-content {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #999999;
+    font-style: normal;
+  }
+
+  &-btns {
+    height: 38px;
+    display: flex;
+    justify-content: space-between;
+
+    &-btn {
+      width: 91px;
+      height: 38px;
+      background: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #4d6de4;
+      font-weight: bold;
+      font-size: 16px;
+      color: #4d6de4;
+      font-style: normal;
+      text-align: center;
+      line-height: 38px;
+
+      &:hover {
+        background: #4d6de4;
+        color: #ffffff;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/charge/Settlement.vue b/src/components/charge/Settlement.vue
index ea5172b..b26a183 100644
--- a/src/components/charge/Settlement.vue
+++ b/src/components/charge/Settlement.vue
@@ -1,31 +1,44 @@
 <template>
-  <Mask :width="800" :height="438" :is-show="show" @close="show = false" :show-footer="true">
-    <!--  <el-card>-->
-    <template #header>
-      <div class="header">
-        <span>收费</span>
-        <CloseBtn @click="show = false" style="margin-top: 12px"></CloseBtn>
-      </div>
-    </template>
-    <div class="panel">
-      <div class="price">￥{{ retailOrder.totalPrice }}</div>
-      <div class="social">
-        <CardPay v-model="socialCard"/>
-      </div>
-      <div class="price-type">
-        <div
-            class="price-type-item"
-            :class="['btn',payType==item.type?'active':'']"
-            v-for="(item,index) in priceBtnList"
-            @click="changePriceType(item.type)"
-        >
-          <div class="image" :style="{'background-color':item.color}">
-            <img style="width: 16px;height: 16px;" :src="item.img" alt=""/>
+  <Mask :width="696" :height="409" title="收费" :is-show="show" @close="show = false" :show-footer="true">
+    <template #default>
+      <div class="content">
+        <div class="btns">
+          <div
+              class="btn"
+              :style="{
+              backgroundColor:
+                selectedIndex == index
+                  ? item.activeBackgroundColor
+                  : hoverIndex == index
+                  ? item.activeBackgroundColor
+                  : item.backgrountColor,
+            }"
+              v-for="(item, index) in btnsList"
+              :key="index"
+              @click="changePriceType(item.type,index)"
+              @mouseover="hoverIndex = index"
+              @mouseleave="hoverIndex = null"
+          >
+            <img
+                class="img"
+                :src="selectedIndex == index || hoverIndex == index ? item.imgActive : item.img"
+                alt=""
+                srcset=""
+            />
+            <span class="pay-left-text" :style="{color: selectedIndex==index?'#fff':''}">{{ item.name }}</span>
+          </div>
+        </div>
+        <div class="pay">
+          <div class="pay-left">
+            <span class="pay-left-title">应收金额</span>
+            <span class="pay-left-money">￥{{ retailOrder.totalPrice }}</span>
+          </div>
+          <div class="social">
+            <CardPay v-model="socialCard"/>
           </div>
-          <span>{{ item.name }}</span>
         </div>
       </div>
-    </div>
+    </template>
     <template #footer>
       <div class="footer">
         <el-checkbox v-model="printReceipt">同时打印凭证</el-checkbox>
@@ -41,7 +54,7 @@
 import {nextTick, onMounted, onUnmounted, ref} from "vue";
 import CloseBtn from "@/components/CloseBtn.vue";
 import {post} from "@/utils/request.ts";
-import Mask from "@/components/Mask.vue";
+import Mask from "@/components/common/Mask.vue";
 import CardPay from "@/components/charge/CardPay.vue";
 import {medTypeJson, priceBtnList} from "@/assets/config/constants.ts"
 import {useWsStore} from "@/stores/wsStore.ts";
@@ -63,8 +76,9 @@ const init = (code: any) => {
 
 }
 defineExpose({init})
-const changePriceType = (type: any) => {
+const changePriceType = (type: any, index: any) => {
   payType.value = type;
+  selectedIndex.value = index
 }
 const emit = defineEmits(['orderComplete', 'orderCanceled'])
 const completeSettlement = () => {
@@ -76,7 +90,6 @@ const completeSettlement = () => {
   }
   if (payType.value == 1) {
     //医保结算
-    console.log('医保结算', socialCard.value)
     socialSettlement();
   } else {
     //其他结算
@@ -132,7 +145,51 @@ const openPsnPayment = (payInfo: any, orderInfo: any) => {
   })
 
 }
-
+const selectedIndex = ref<number | null>(null)
+const hoverIndex = ref<number | null>(null)
+const isShow = ref<boolean>(false)
+const btnsList = [
+  {
+    type: 1,
+    name: '医保支付',
+    backgrountColor: '#F0F4FD ',
+    activeBackgroundColor: '#4d6de4',
+    img: '/static/images/slices/1.png',
+    imgActive: '/static/images/slices/1-active.png',
+  },
+  {
+    type: 2,
+    name: '微信支付',
+    backgrountColor: '#ecf8fe',
+    activeBackgroundColor: '#80cfdb',
+    img: '/static/images/slices/2.png',
+    imgActive: '/static/images/slices/2-active.png',
+  },
+  {
+    type: 3,
+    name: '支付宝',
+    backgrountColor: '#fff5ec',
+    activeBackgroundColor: '#fdb376',
+    img: '/static/images/slices/3.png',
+    imgActive: '/static/images/slices/3-active.png',
+  },
+  {
+    type: 4,
+    name: '现金支付',
+    backgrountColor: '#ffeeee',
+    activeBackgroundColor: '#ff8686',
+    img: '/static/images/slices/4.png',
+    imgActive: '/static/images/slices/4-active.png',
+  },
+  {
+    type: 5,
+    name: '其他支付',
+    backgrountColor: '#e5f9ff',
+    activeBackgroundColor: '#30e3ca',
+    img: '/static/images/slices/5.png',
+    imgActive: '/static/images/slices/5-active.png',
+  },
+]
 </script>
 
 
@@ -185,15 +242,133 @@ const openPsnPayment = (payInfo: any, orderInfo: any) => {
     }
 
     .active {
-      color: #fff;
+      color: #fff !important;
       background-color: #409EFF;
     }
 
   }
 }
 
+.content {
+  flex: 1;
+  padding: 0 24px;
+  display: flex;
+  flex-direction: column;
+
+  .btns {
+    height: 86px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .btn {
+      width: 120px;
+      height: 46px;
+      border-radius: 8px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: 500;
+      font-size: 16px;
+      color: #333333;
+      font-style: normal;
+
+      .img {
+        width: 24px;
+        height: 24px;
+        margin-right: 4px;
+      }
+
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+
+  .pay {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+
+    .pay-left {
+      padding-top: 24px;
+
+      &-title {
+        display: block;
+        font-weight: 800;
+        font-size: 18px;
+        color: #333333;
+        font-style: normal;
+        margin-bottom: 22px;
+      }
+
+      &-money {
+        font-weight: bold;
+        font-size: 42px;
+        color: #ff0000;
+        font-style: normal;
+      }
+    }
+
+    .pay-right {
+      width: 436px;
+      background: #f9fafc;
+      border-radius: 8px;
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+
+      &-title {
+        font-weight: 800;
+        font-size: 18px;
+        color: #333333;
+        font-style: normal;
+      }
+
+      &-content {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: 500;
+        font-size: 16px;
+        color: #999999;
+        font-style: normal;
+      }
+
+      &-btns {
+        height: 38px;
+        display: flex;
+        justify-content: space-between;
+
+        &-btn {
+          width: 91px;
+          height: 38px;
+          background: #ffffff;
+          border-radius: 8px;
+          border: 1px solid #4d6de4;
+          font-weight: bold;
+          font-size: 16px;
+          color: #4d6de4;
+          font-style: normal;
+          text-align: center;
+          line-height: 38px;
+
+          &:hover {
+            background: #4d6de4;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+}
+
 .footer {
+  height: 100%;
   display: flex;
   justify-content: space-between;
+  padding: 0 24px;
+  align-items: center;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/common/goods/GoodsDetail.vue b/src/components/common/goods/GoodsDetail.vue
index b42fc40..3d786f7 100644
--- a/src/components/common/goods/GoodsDetail.vue
+++ b/src/components/common/goods/GoodsDetail.vue
@@ -79,7 +79,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="bottom">
+    <div class="bottom" v-if="!statusDisabled">
       <div class="search">
         <SearchInput
             style="height: 100%"
@@ -106,6 +106,10 @@ const props = defineProps({
   status: {
     type: Boolean,
     default: 0
+  },
+  statusDisabled: {
+    type: Boolean,
+    default: 0
   }
 })
 const goodsDetail = defineModel<any>();
@@ -213,6 +217,7 @@ const colosInfo = () => {
   display: flex;
   height: 58px;
   align-items: center;
+
   .search {
     flex: 1;
     height: 100%;
diff --git a/src/components/common/service/ServiceDetail.vue b/src/components/common/service/ServiceDetail.vue
index 634d997..fa67c8b 100644
--- a/src/components/common/service/ServiceDetail.vue
+++ b/src/components/common/service/ServiceDetail.vue
@@ -51,7 +51,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="bottom">
+    <div class="bottom" v-if="!statusDisabled">
       <div class="search">
         <SearchInput
             style="height: 100%"
@@ -77,6 +77,10 @@ const props = defineProps({
   status: {
     type: Boolean,
     default: 0
+  },
+  statusDisabled:{
+    type: Boolean,
+    default: 0
   }
 })
 const itemDetail = defineModel<any>();
diff --git a/src/views/charge/index.vue b/src/views/charge/index.vue
index 35638ec..2b27b14 100644
--- a/src/views/charge/index.vue
+++ b/src/views/charge/index.vue
@@ -18,7 +18,7 @@
                       @selectedCallBack="diagnosisSelect"
                       ref="diagnosisSearchRef"
                       :show-header="false"
-                      :disabled="statusDisabled==1"
+                      :disabled="statusDisabled==1||formData.status==1"
 
                   >
                   </DiagnosisSearchInput>
@@ -30,7 +30,7 @@
                       @change="handleChange"
                       clearable
                       style="width: 100%"
-                      :disabled="formData.status == 1"
+                      :disabled="statusDisabled==1||formData.status==1"
                   >
                     <el-option
                         v-for="item in doctorList"
@@ -47,11 +47,11 @@
         </div>
         <div style="margin-top: 24px">
           <ServiceDetail v-model="formData.itemDetail" :status="formData.status == 0"
-                         @totalPriceChange="getOrderTotalPrice"></ServiceDetail>
+                         @totalPriceChange="getOrderTotalPrice" :statusDisabled="statusDisabled==1"></ServiceDetail>
         </div>
         <div style="margin-top: 24px">
           <GoodsDetail v-model="formData.goodsDetail" :status="formData.status == 0"
-                       @totalPriceChange="getOrderTotalPrice"></GoodsDetail>
+                       @totalPriceChange="getOrderTotalPrice" :statusDisabled="statusDisabled==1"></GoodsDetail>
         </div>
         <div class="bottom">
           <TotalPrice v-model="formData.totalPrice" @edit="saveAndCharge" :status="!(statusDisabled)&&formData.status==0"></TotalPrice>
@@ -207,7 +207,7 @@ const list = () => {
   })
 }
 const getStatus=(status:any)=>{
-  console.log(111)
+  statusDisabled.value = status
   formData.value = {
     patientInfo: {},
     diagnosisMedicalRecord: {},