dev

src/components/charge/CheckoutDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <Mask :height="650" :width="900" :is-show="show" title="追溯码采集" @close="show = false" :show-footer="true">
+  <Mask :height="560" :width="1056" :is-show="show" title="追溯码采集" @close="show = false" :show-footer="true">
     <template #default>
       <div class="detail">
         <el-input
@@ -16,9 +16,9 @@
           </template>
         </el-input>
         <div class="list">
-          <table class="simple-table">
-            <thead>
-            <tr>
+          <table class="table">
+            <thead style="background:#F1F5FB">
+            <tr class="table-title" style="background: #f1f5fb">
               <th>发药项目</th>
               <th>产品标识码</th>
               <th>发药数量</th>
@@ -59,14 +59,12 @@
 </template>
 <script setup lang="ts">
 import Mask from "@/components/common/Mask.vue";
-import CloseBtn from "@/components/CloseBtn.vue";
 import {nextTick, ref} from "vue";
 import IdCodeListShow from "@/components/charge/IdCodeListShow.vue";
 import AssociationIdCode from "@/components/charge/AssociationIdCode.vue";
 import TraceabilityCodeAdd from "@/components/charge/TraceabilityCodeAdd.vue";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {Monitor} from '@element-plus/icons-vue'
-import {post} from "@/utils/request.ts";
 
 
 const show = ref(false)
@@ -188,10 +186,57 @@ const addTraceAbilityCodeHandler = (item: any, code: any) => {
 }
 
 .detail {
+  height: 100%;
   padding: 24px 24px 0;
+  display: flex;
+  flex-direction: column;
 
   .list {
-    height: 400px;
+    margin-top: 24px;
+    flex: 1;
+    min-height: 0;
+    border-radius: 8px 8px 0 0;
+    border: 1px solid #EAEAEC;
+    border-bottom: none;
+
+    .table {
+      width: 100%;
+
+      th {
+        background: none !important;
+      }
+
+      .table-title {
+        width: 100%;
+        height: 52px;
+        font-weight: 500;
+        font-size: 14px;
+        color: #333333;
+        font-style: normal;
+
+        th {
+          text-align: left;
+        }
+      }
+
+      .table-body {
+        height: 52px;
+        font-weight: 500;
+        font-size: 14px;
+        color: #666666;
+        font-style: normal;
+
+
+        &:last-child {
+          border-radius: 0 0 8px 8px;
+        }
+
+        &:hover {
+          background-color: #4D6DE4;
+          color: #fff;
+        }
+      }
+    }
   }
 }