diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index f12c92e..dd9b46c 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -109,9 +109,30 @@ body {
   margin: 0;
 }
 .el-popper.is-light.type-popper, .el-popper.is-light>.el-popper__arrow:before{
-  background:#F5FAFF !important;
-  padding: 0 !important;
-  //border: 1px solid #4D6DE4 !important;
+  background:#F5FAFF;
+}
+.el-popper.is-light.type-popper{
+  background:#F5FAFF;
+  padding: 0;
+}
+.el-popper.is-light.id-code-popper{
+  width: 218px;
+  border-radius: 8px;
+  padding:0;
+  border: 1px solid #EAEAEC;
+}
+.el-popper.is-light.traceability{
+  padding:0;
+  border: 1px solid #EAEAEC;
+}
+.el-popper.is-light.id-code-popper .el-popover__title{
+  height: 35px;
+  line-height: 35px;
+  margin-bottom: 0;
+  font-size: 14px;
+  padding-left:24px;
+  background:#F5FAFF;
+  border-radius: 8px 8px 0 0;
 }
 $btn-color: #4D6DE4;
 $lighter-color: #7c91e3;
diff --git a/src/components/charge/AssociationIdCode.vue b/src/components/charge/AssociationIdCode.vue
index 9433f3e..6acb32f 100644
--- a/src/components/charge/AssociationIdCode.vue
+++ b/src/components/charge/AssociationIdCode.vue
@@ -1,9 +1,8 @@
 <template>
-  <Mask  :height="600" :width="700" :is-show="show">
-    <CloseBtn @click="show = false"></CloseBtn>
-    <el-card>
-      <div class="panel">
-        <div class="header">
+  <Mask :height="560" :width="818" :is-show="show" @close="close" :show-footer="true" title="关联追溯码">
+    <div class="panel">
+      <div class="title">
+        <div class="title-content">
           请勾选该追溯码关联的发药项目商品
         </div>
         <div class="code">
@@ -14,48 +13,50 @@
             {{ traceabilityCode.slice(7, traceabilityCode.length) }}
           </div>
         </div>
-
-
-        <div class="table">
-          <table class="simple-table">
-            <thead>
-            <tr>
-              <th>选择</th>
-              <th>发药项目</th>
-              <th>产品标识码</th>
-              <th>系统处理</th>
-            </tr>
-            </thead>
-
-            <tbody>
-            <tr v-for="(item,index) in tableData">
-              <td><input class="blue-radio" type="radio" :value="item.id" v-model="selected"/></td>
-              <td>{{ item.name }}</td>
-              <td>
-                <IdCodeListShow :idCodeList="item.idCode" v-if="item.idCode && item.idCode.length > 0"/>
-                <div v-else>未关联</div>
-              </td>
-              <td style="width: 300px;">
-                <template v-if="selected === item.id">
-                  关联产品标识码，采集追溯码自动识别商品
-                </template>
-              </td>
-            </tr>
-            </tbody>
-
-          </table>
-        </div>
       </div>
-      <template #footer>
-        <el-button @click="addIdCode" type="primary">确定</el-button>
-        <el-button @click="show = false" type="primary">关闭</el-button>
-      </template>
-    </el-card>
+     <div style="padding: 0 24px;flex: 1; min-height: 0;">
+       <div class="list">
+         <table class="table" style="border-spacing: 0">
+           <thead style="background:#F1F5FB">
+           <tr class="table-title" style="background: #f1f5fb">
+             <th>选择</th>
+             <th>发药项目</th>
+             <th>产品标识码</th>
+             <th>系统处理</th>
+           </tr>
+           </thead>
+           <tbody class="table-body" style="height: 52px">
+           <tr v-for="(item,index) in tableData">
+             <td>
+               <input class="blue-radio" type="radio" :value="item.id" v-model="selected"  @click="closeModal"/>
+             </td>
+             <td>{{ item.name }}</td>
+             <td>
+               <IdCodeListShow :idCodeList="item.idCode" v-if="item.idCode && item.idCode.length > 0"/>
+               <div v-else>未关联</div>
+             </td>
+             <td style="width: 300px;">
+               <template v-if="selected === item.id">
+                 关联产品标识码，采集追溯码自动识别商品
+               </template>
+             </td>
+           </tr>
+           </tbody>
+         </table>
+       </div>
+     </div>
+    </div>
+    <template #footer>
+      <div class="bottom">
+        <div class="default-btn" @click="close" type="primary">关闭</div>
+        <div class="default-btn" @click="addIdCode" type="primary" style="margin-left: 24px">确定</div>
+      </div>
+    </template>
   </Mask>
 </template>
 <script setup lang="ts">
 
-import Mask from "@/components/Mask.vue";
+import Mask from "@/components/common/Mask.vue";
 import {ref} from "vue"
 import IdCodeListShow from "@/components/retail/IdCodeListShow.vue";
 import CloseBtn from "@/components/CloseBtn.vue";
@@ -86,70 +87,167 @@ const init = (newIdCode: any, newTableDate: any) => {
 }
 const selected = ref()
 defineExpose({init})
-const addIdCode = ()=>{
-  if (traceabilityCode.value ==""){
+const addIdCode = () => {
+  if (traceabilityCode.value == "") {
     return;
   }
   let idCode = traceabilityCode.value.slice(0, 7);
-  post("goods/goods/addIdCode",{goodsId:selected.value,idCode:idCode}).then((res:any)=>{
-      show.value = false;
-      for (let subItem of tableData.value){
-        if (subItem.id === selected.value){
-          if (subItem.idCode == null){
-            subItem.idCode = [];
-          }
-          subItem.idCode?.push(idCode);
-          break
+  post("goods/goods/addIdCode", {goodsId: selected.value, idCode: idCode}).then((res: any) => {
+    show.value = false;
+    for (let subItem of tableData.value) {
+      if (subItem.id === selected.value) {
+        if (subItem.idCode == null) {
+          subItem.idCode = [];
         }
+        subItem.idCode?.push(idCode);
+        break
       }
+    }
   })
   const selectedItem = tableData.value.find((item: any) => item.id === selected.value);
-  if(!selectedItem){
+  if (!selectedItem) {
     return
   }
   addTraceabilityCodeDo(selectedItem)
 
 }
 
-const emit = defineEmits(["addIdCode","addTraceabilityCode"])
+const emit = defineEmits(["addIdCode", "addTraceabilityCode"])
 const addTraceabilityCodeDo = (item: any) => {
-  emit("addTraceabilityCode",item,traceabilityCode.value)
+  emit("addTraceabilityCode", item, traceabilityCode.value)
+}
+const showRadio=ref<any>(false)
+const closeModal = () => {
+  showRadio.value = false
+  selected.value=null
+
+}
+const close = () => {
+  show.value= false
+  closeModal()
 }
 </script>
 <style scoped lang="scss">
 .panel {
-  height: 400px;
-  .header {
-    margin-top: 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .title {
+    height: 126px;
     font-size: 24px;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
-  }
-
-  .code {
-    height: 50px;
-    display: flex;
-    font-size: 24px;
-    justify-content: center;
-    align-items: center;
-
-    .before-code {
-      color: #7a8794;
+    background: #F9FAFC;
+    margin-bottom: 24px;
 
+    .title-content {
+      font-weight: 500;
+      font-size: 20px;
+      color: #666666;
+      font-style: normal;
     }
 
-    .after-code {
-      margin-left: 10px;
-    }
-  }
-  .table {
-    .simple-table {
-      .blue-radio {
-        accent-color: #28addd;
+    .code {
+      font-weight: 800;
+      font-size: 30px;
+      color: #333333;
+      font-style: normal;
+      display: flex;
+
+      .before-code {
+        color: #999999;
+      }
+
+      .after-code {
+        margin-left: 10px;
       }
     }
   }
+
+}
+.list {
+  height: 100%;
+  border-radius: 8px 8px 0 0;
+  width: 100%;
+  border: 1px solid #EAEAEC;
+  border-bottom: none;
+  .table {
+
+    th {
+      background: none !important;
+    }
+    .table-title {
+      width: 100%;
+      height: 52px;
+      font-weight: 500;
+      font-size: 16px;
+      color: #333333;
+      line-height: 22px;
+      text-align: left;
+      font-style: normal;
+      padding: 0 25px;
+
+      th {
+        text-align: left;
+
+        &:first-child {
+          padding-left: 25px;
+          width: 122px;
+        }
+
+        &:nth-child(2) {
+          width: 215px;
+        }
+
+        &:nth-child(3) {
+          width: 140px;
+        }
+
+        &:last-child {
+          padding-right: 25px;
+        }
+      }
+    }
+    .table-body {
+      height: 52px;
+      font-weight: 500;
+      font-size: 14px;
+      color: #666666;
+      font-style: normal;
+      tr{
+        height: 52px;
+        font-size: 14px;
+        color: #333333;
+        td {
+          height: 52px;
+          &:first-child {
+            width: 132px;
+            padding-left: 35px;
+          }
+
+          &:last-child {
+            padding-right: 25px;
+          }
+        }
+      }
+
+    }
+  }
+}
+table, tbody, td {
+  border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
 }
 
+table {
+  border: none;
+}
+.bottom {
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 24px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/charge/CheckoutDetail.vue b/src/components/charge/CheckoutDetail.vue
index 22f7894..1890c23 100644
--- a/src/components/charge/CheckoutDetail.vue
+++ b/src/components/charge/CheckoutDetail.vue
@@ -16,7 +16,7 @@
           </template>
         </el-input>
         <div class="list">
-          <table class="table">
+          <table class="table" style="border-spacing: 0">
             <thead style="background:#F1F5FB">
             <tr class="table-title" style="background: #f1f5fb">
               <th>发药项目</th>
@@ -26,7 +26,7 @@
               <th>追溯码</th>
             </tr>
             </thead>
-            <tbody>
+            <tbody class="table-body">
             <tr v-for="(item,index) in list" :key="index">
               <td>{{ item.name }}</td>
               <td>
@@ -210,12 +210,36 @@ const addTraceAbilityCodeHandler = (item: any, code: any) => {
         width: 100%;
         height: 52px;
         font-weight: 500;
-        font-size: 14px;
+        font-size: 16px;
         color: #333333;
+        line-height: 22px;
+        text-align: left;
         font-style: normal;
+        padding: 0 25px;
 
         th {
           text-align: left;
+
+          &:first-child {
+            padding-left: 25px;
+            width: 240px;
+          }
+
+          &:nth-child(2) {
+            width: 146px;
+          }
+
+          &:nth-child(3) {
+            width: 124px;
+          }
+
+          &:nth-child(4) {
+            width: 132px;
+          }
+
+          &:last-child {
+            padding-right: 25px;
+          }
         }
       }
 
@@ -225,16 +249,25 @@ const addTraceAbilityCodeHandler = (item: any, code: any) => {
         font-size: 14px;
         color: #666666;
         font-style: normal;
+        padding: 0 25px;
 
+        tr {
+          height: 52px;
+          font-size: 14px;
+          color: #333333;
 
-        &:last-child {
-          border-radius: 0 0 8px 8px;
+          td {
+            &:first-child {
+              width: 132px;
+              padding-left: 25px;
+            }
+
+            &:last-child {
+              padding-right: 25px;
+            }
+          }
         }
 
-        &:hover {
-          background-color: #4D6DE4;
-          color: #fff;
-        }
       }
     }
   }
@@ -247,4 +280,10 @@ const addTraceAbilityCodeHandler = (item: any, code: any) => {
   align-items: center;
   padding: 24px;
 }
+table, tbody, td {
+  border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
+}
+table{
+  border: none;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/charge/IdCodeListShow.vue b/src/components/charge/IdCodeListShow.vue
index 051d33a..40f592a 100644
--- a/src/components/charge/IdCodeListShow.vue
+++ b/src/components/charge/IdCodeListShow.vue
@@ -12,7 +12,9 @@ const props = defineProps({
       title="已关联的追溯码产品标识码："
       placement="bottom-start"
       trigger="hover"
-      width="250px"
+      width="218px"
+      popper-class="id-code-popper"
+      style="max-height: 221px"
   >
     <template #reference>
       <div class="id-code-panel">
@@ -20,14 +22,12 @@ const props = defineProps({
         <div class="number" v-if="props.idCodeList.length >1">
           +{{props.idCodeList.length-1}}
         </div>
-
       </div>
     </template>
     <template #default>
       <div class="id-code-detail">
         <div class="item" v-for="(item,index) in props.idCodeList" :key="index">
           {{index+1}}.{{item}}
-
         </div>
       </div>
     </template>
@@ -40,8 +40,18 @@ const props = defineProps({
   display: flex;
   .number{
     margin-left: 10px;
-    color: green;
+    color: #4D6DE4;
+  }
+}
+.id-code-detail{
+  .item{
+    height: 35px;
+    line-height: 35px;
+    border-bottom: 1px  solid #DCDFE6;
+    padding-left: 24px;
+    &:last-child{
+      border-bottom: none;
+    }
   }
-
 }
 </style>
\ No newline at end of file
diff --git a/src/components/charge/TraceabilityCodeAdd.vue b/src/components/charge/TraceabilityCodeAdd.vue
index 178edc6..1a4d097 100644
--- a/src/components/charge/TraceabilityCodeAdd.vue
+++ b/src/components/charge/TraceabilityCodeAdd.vue
@@ -1,45 +1,59 @@
 <template>
   <el-popover
-      title="追溯码："
+      title=""
       placement="bottom-start"
       trigger="click"
-      width="300px"
+      width="340px"
+      popper-class="traceability"
   >
     <template #reference>
       <el-input
           placeholder="追溯码"
           clearable
           v-model="inputTraceabilityCode"
-          style="width: 300px;"
+          style="width: 100%;"
           @keydown.enter="addTraceabilityCodeDo(props.item)"
       ></el-input>
     </template>
     <template #default>
-      <div v-for="(subItem,index) in item.traceAbilityCodeList" class="list">
-        <div class="code"> {{ subItem }}</div>
-        <div class="remove" @click="removeTraceAbility(subItem)">
-          <el-icon>
-            <CloseBold/>
-          </el-icon>
-        </div>
-      </div>
+      <table class="table" style="border-spacing: 0">
+        <thead>
+        <tr class="table-title">
+          <th>追溯码</th>
+          <th>操作</th>
+        </tr>
+        </thead>
+        <tbody class="table-body">
+        <tr v-for="(item,index) in item.traceAbilityCodeList" :key="index">
+          <td>{{ item }}</td>
+          <td>
+            <div @click="removeTraceAbility(item)">
+              <el-icon>
+                <Delete/>
+              </el-icon>
+              删除
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
     </template>
   </el-popover>
 </template>
 <script setup lang="ts">
-import {ref,watch} from "vue";
-import {ElMessage, ElMessageBox} from "element-plus";
-import {CloseBold} from "@element-plus/icons-vue";
-import {post} from "@/utils/request.ts";
+import {ref} from "vue";
+import {Delete} from "@element-plus/icons-vue"
+
 interface TraceAbilityCode {
   code: string;
   number: number;
   showNumberInput?: boolean;
 }
+
 const props = defineProps({
   item: {
     type: Object as () => {
-      id?: number|undefined;
+      id?: number | undefined;
       traceAbilityCodeList: TraceAbilityCode[];
       retailNumber: number;
       gatherNumber: number;
@@ -54,7 +68,7 @@ const props = defineProps({
       retailNumber: 0,
       gatherNumber: 0,
       selectedUnit: "",
-      idCode:[],
+      idCode: [],
       packagingUnit: "",
       minPackagingUnit: "",
       minPackagingNumber: 0,
@@ -62,9 +76,9 @@ const props = defineProps({
   },
 })
 const inputTraceabilityCode = ref("");
-const emit =  defineEmits(["addTraceabilityCode"]);
+const emit = defineEmits(["addTraceabilityCode"]);
 const addTraceabilityCodeDo = (item: any) => {
-  emit("addTraceabilityCode",item,inputTraceabilityCode.value)
+  emit("addTraceabilityCode", item, inputTraceabilityCode.value)
   inputTraceabilityCode.value = ""
 }
 
@@ -80,25 +94,76 @@ const removeTraceAbility = (code: any) => {
 
 </script>
 <style scoped lang="scss">
-.list {
-  display: flex;
-
-  .code {
-    width: 100px;
+.table {
+  width: 100%;
+  th {
+    background: none !important;
   }
-
-  .number {
-    width: 100px;
-  }
-
-  .remove {
-    font-size: 16px;
-    width: 50px;
-
-    &:hover {
-      color: #409eff;
+  .table-title {
+    width: 100%;
+    height: 36px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #333333;
+    font-style: normal;
+    padding: 0 25px;
+    background: #F5FAFF;
+    th {
+      text-align: left;
+      &:first-child {
+        width: 270px;
+        padding-left: 24px;
+        overflow: hidden;
+      }
+      &:last-child {
+        text-align: center;
+        line-height: 36px;
+      }
     }
   }
+  .table-body {
+    height: 52px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #666666;
+    font-style: normal;
+    padding: 0 25px;
+    tr {
+      height: 36px;
+      font-size: 14px;
+      color: #333333;
+      font-weight: 500;
+      font-style: normal;
+      td {
+        height: 36px;
+
+        &:first-child {
+          height: 100%;
+          width: 132px;
+          padding-left: 25px;
+          white-space: nowrap; /* 防止文本换行 */
+          overflow: hidden; /* 隐藏溢出的文本 */
+          text-overflow: ellipsis; /* 显示省略号 */
+        }
+
+        &:last-child {
+          height: 100%;
+          text-align: center;
+          color: #FF0000;
+          line-height: 36px;
+        }
+      }
+    }
+
+  }
 }
 
+table, tbody, td {
+  border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
+}
+
+table {
+  width: 100%;
+  border: none;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/retail/IdCodeListShow.vue b/src/components/retail/IdCodeListShow.vue
index 051d33a..95610e1 100644
--- a/src/components/retail/IdCodeListShow.vue
+++ b/src/components/retail/IdCodeListShow.vue
@@ -13,6 +13,7 @@ const props = defineProps({
       placement="bottom-start"
       trigger="hover"
       width="250px"
+      popper-class="id-code-popper"
   >
     <template #reference>
       <div class="id-code-panel">
@@ -20,14 +21,12 @@ const props = defineProps({
         <div class="number" v-if="props.idCodeList.length >1">
           +{{props.idCodeList.length-1}}
         </div>
-
       </div>
     </template>
     <template #default>
       <div class="id-code-detail">
         <div class="item" v-for="(item,index) in props.idCodeList" :key="index">
           {{index+1}}.{{item}}
-
         </div>
       </div>
     </template>
@@ -40,8 +39,19 @@ const props = defineProps({
   display: flex;
   .number{
     margin-left: 10px;
-    color: green;
+    color: #4D6DE4;
   }
 
 }
+.id-code-detail{
+  .item{
+    height: 35px;
+    line-height: 35px;
+    border-bottom: 1px  solid #DCDFE6;
+    padding-left: 24px;
+    &:last-child{
+      border-bottom: none;
+    }
+  }
+}
 </style>
\ No newline at end of file