dev

src/views/LayoutInventory.vue

@@ -72,6 +72,7 @@
     bottom: 0; // 调整下划线与文字的距离
     left: 50%;
     transform: translateX(-50%);
+    border-radius: 2px;
   }
 }
 a.router-link-active.router-link-exact-active.child-item{

src/views/LayoutSetting.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="layout-container">
     <Header class="header"/>
-    <header>
+    <div class="body">
+      <header style="height: 50px">
         <div class="center-wrapper">
           <div class="childMenu">
             <router-link :to="item.path" class="child-item" v-for="(item,index) in childMenuList" :key="index">
@@ -10,47 +11,74 @@
           </div>
         </div>
       </header>
-    <div class="space"></div>
+      <main class="layout-main" style="margin-top: 24px">
-    <main class="layout-main">
         <router-view/>
       </main>
-    <div class="space"></div>
+    </div>
     <Footer class="footer"/>
   </div>
 
 </template>
 
 <style scoped lang="scss">
-
+.body{
+  height: 100%;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+}
 .childMenu {
-  height: 60px;
+  width: 100%;
+  height: 50px;
   background: #fff;
   display: flex;
   align-items: center;
+  border-radius: 8px;
 
   .child-item {
+    width: 136px;
     display: inline-block;
     color: #151515;
     outline: none;
     text-decoration: none;
     font-size: 18px;
-    margin-left: 10px;
+    height: 50px;
-    margin-right: 10px;
-    height: 35px;
     position: relative;
+    line-height: 50px;
+    text-align: center;
+    &::before{
+      content: '';
+      position: absolute;
+      right: 0;
+      top:50%;
+      display: block;
+      width: 2px;
+      height: 16px;
+      background: #D8D8D8;
+      border-radius: 1px;
+      transform: translate(0 ,-50%);
+    }
+    &:last-child::before{
+      display: none;
+    }
   }
 
   .router-link-active:after {
     content: '';
     display: block;
-    width: 100%;
+    width: 80px;
-    height: 2px;
+    height: 4px;
-    background-color: #151515; // 下划线颜色
+    background-color: #4D6DE4; // 下划线颜色
     position: absolute;
-    bottom: -5px; // 调整下划线与文字的距离
+    bottom: 0; // 调整下划线与文字的距离
-    left: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 2px;
   }
 }
+a.router-link-active.router-link-exact-active.child-item{
+  color: #4D6DE4;
+}
 </style>
 
 

src/views/member/index.vue

@@ -73,11 +73,16 @@
                   formatListTime(listItem.lastVisitTime) || "-"
                 }}
               </el-descriptions-item>
-              <el-descriptions-item label="证件类型">{{certTypeList.find((item:any)=>item.id==listItem.certType)?.name}}</el-descriptions-item>>
+              <el-descriptions-item label="证件类型">
+                {{ certTypeList.find((item: any) => item.id == listItem.certType)?.name }}
+              </el-descriptions-item>
+              >
               <el-descriptions-item label="证件号码">{{ listItem.certNo || "-" }}</el-descriptions-item>
               <el-descriptions-item label="积分"><span>{{ listItem.integralBalance }}</span>
               </el-descriptions-item>
-              <el-descriptions-item label="地址">{{ areaName}}{{areaName?'/'+listItem.address : listItem.address || "-" }}</el-descriptions-item>
+              <el-descriptions-item label="地址">
+                {{ areaName }}{{ areaName ? '/' + listItem.address : listItem.address || "-" }}
+              </el-descriptions-item>
               <el-descriptions-item label="既往史">{{ listItem.beforeMedicalHistory || "-" }}</el-descriptions-item>
               <el-descriptions-item label="过敏史">{{ listItem.allergyHistory || "-" }}</el-descriptions-item>
               <el-descriptions-item label="备注">{{ listItem.remark || "-" }}</el-descriptions-item>
@@ -86,10 +91,12 @@
           </div>
         </div>
       </Panel>
-      <Panel title="消费记录" class="right-list">
+      <div class="right-list">
-        <div class="list-content">
+        <Panel title="消费记录">
+          <div class="panel-content" style="display: flex;flex-direction: column;height: 100%;padding: 0 24px;">
             <div class="list">
-            <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#F1F5FB' }" style="width: 100%"
+              <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#F1F5FB' }"
+                        style="width: 100%;height: 100%"
                         @cell-click="openDetail">
                 <el-table-column label="单号" prop="code" show-overflow-tooltip>
                 </el-table-column>
@@ -142,6 +149,7 @@
         </Panel>
       </div>
     </div>
+  </div>
   <VipEdit ref="refEdit" @close="init"></VipEdit>
   <VipLevelEdit ref="levelEditRef" @close="init"></VipLevelEdit>
   <Mask :width="600" :height="400" :is-show="isGrant" @close="isGrant=false" :title="'发放积分'">
@@ -596,34 +604,19 @@ const certTypeList=ref<any>(Object.entries(psnCertTypes).map(([id,name])=>({id,n
       display: flex;
       flex-direction: column;
       min-height: 0;
-
-      .list-content {
-        display: flex;
-        flex-direction: column;
-        padding: 0 24px;
-        height: 100%;
-
       .list {
         flex: 1;
-          display: flex;
+        min-height: 0;
-          flex-direction: column;
       }
-
       .bottom {
         width: 100%;
         height: 60px;
         background-color: #FFF;
         box-sizing: border-box;
         padding: 10px;
-          position: relative;
         border-top: 1px solid #EEE;
-
+        display: flex;
-          .page_btn_list {
+        justify-content: flex-end;
-            position: absolute;
-            left: 0;
-            top: 10px;
-          }
-        }
       }
     }
   }