修改后台页面

src/master/views/vip/vip-table.vue

@@ -1,12 +1,6 @@
 <template>
-  <div class="vip-page">
-    <div class="page-inner">
-      <div class="page-title">患者身份等级管理</div>
-
-      <!-- 搜索模块 -->
-      <div class="card search-card">
-        <div class="search-fields">
-          <zy-form inline class="fw search-form">
+  <div class="p_pannel fw fh p_flexCol">
+    <zy-form inline class="fw">
             <zy-form-item label="权益名称：">
               <zy-input
                 v-model="queryData.benefitName"
@@ -29,29 +23,15 @@
                 />
         </zy-select>
       </zy-form-item>
-    </zy-form>
 
-          <div class="search-actions">
-            <zy-button class="btn-search" type="primary" @click="getTableData()">
-              查询
-            </zy-button>
-            <zy-button class="btn-create" @click="handleCreate">
-              + 新建服务权益包
-            </zy-button>
-          </div>
-        </div>
-      </div>
+      <zy-form-item>
+        <zy-button type="primary" @click="getTableData()">查询</zy-button>
+        <zy-button @click="handleCreate">+ 新建服务权益包</zy-button>
+      </zy-form-item>
+    </zy-form>
 
-      <!-- 表格模块 -->
-      <div class="card table-card" v-loading="table.loading">
-        <zy-table
-          height="100%"
-          :data="table.data"
-          header-align="center"
-          align="center"
-          :border="true"
-          :fit="true"
-        >
+    <div class="fw fh p_scroll" v-loading="table.loading">
+      <zy-table :data="table.data" header-align="center" align="center" :border="true" :fit="true">
           <zy-table-column
             prop="levelCode"
             label="身份等级编号"
@@ -92,17 +72,18 @@
       </zy-table>
     </div>
 
-      <!-- 分页 -->
-      <div class="card pagination-card">
+    <div class="fw mt-12 p_flexEnd">
       <zy-pagination
-        :page-size="table.page.PSize"
+        :page-sizes="[10, 20, 30, 50, 100]"
+        :pager-count="5"
         :total="table.page.PCount"
-          :pager-count="7"
-          layout="pager"
-          v-model:currentPage="table.page.PIndex"
         @current-change="getTableData"
+        @size-change="getTableData"
+        background
+        layout="total, sizes, prev, pager, next"
+        v-model:currentPage="table.page.PIndex"
+        v-model:page-size="table.page.PSize"
       ></zy-pagination>
-      </div>
     </div>
   </div>
 </template>
@@ -139,6 +120,9 @@ const table = reactive({
   },
 });
 
+
+ 
+
 const defaultThemeOptions = [
   { label: "金色", value: "gold" },
   { label: "银色", value: "silver" },
@@ -294,138 +278,6 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.vip-page {
-  min-height: 100%;
-  background: #f5f7fb;
-  padding: 24px 0 32px;
-  box-sizing: border-box;
-}
-
-.page-inner {
-  width: 1560px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.page-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.card {
-  background: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 6px 24px rgba(44, 69, 105, 0.08);
-  padding: 18px 24px;
-  box-sizing: border-box;
-}
-
-.search-card {
-  display: flex;
-  flex-direction: column;
-}
-
-.search-fields {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-wrap: nowrap;
-  gap: 16px;
-}
-
-.search-form {
-  display: flex;
-  align-items: center;
-}
-
-.search-form :deep(.el-form-item) {
-  margin: 0 16px 0 0;
-}
-
-.search-form :deep(.el-form-item__label) {
-  color: #555;
-}
-
-.search-form :deep(.el-input__inner) {
-  width: 220px;
-}
-
-.search-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-left: auto;
-  white-space: nowrap;
-}
-
-.btn-search {
-  background: var(--el-color-primary);
-  border-color: var(--el-color-primary);
-  color: #fff;
-  padding: 10px 32px;
-}
-
-.btn-create {
-  background: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary-light-7);
-  color: var(--el-color-primary);
-  padding: 10px 24px;
-}
-
-.table-card {
-  padding: 0;
-  overflow: hidden;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.table-card :deep(.el-table) {
-  width: 100%;
-  border: none;
-  flex: 1;
-}
-
-.table-card :deep(.el-table__header th),
-.table-card :deep(.el-table__body td) {
-  text-align: center;
-  font-size: 14px;
-}
-
-.table-card :deep(.el-table__body-wrapper),
-.table-card :deep(.el-table__header-wrapper) {
-  padding: 0;
-}
-
-/* 按 3:3:8:2:2:2 比例填满整行（共 20 份） */
-.table-card :deep(.el-table__header colgroup col:nth-child(1)),
-.table-card :deep(.el-table__body colgroup col:nth-child(1)) {
-  width: 15% !important; /* 3/20 */
-}
-.table-card :deep(.el-table__header colgroup col:nth-child(2)),
-.table-card :deep(.el-table__body colgroup col:nth-child(2)) {
-  width: 15% !important; /* 3/20 */
-}
-.table-card :deep(.el-table__header colgroup col:nth-child(3)),
-.table-card :deep(.el-table__body colgroup col:nth-child(3)) {
-  width: 40% !important; /* 8/20 */
-}
-.table-card :deep(.el-table__header colgroup col:nth-child(4)),
-.table-card :deep(.el-table__body colgroup col:nth-child(4)) {
-  width: 10% !important; /* 2/20 */
-}
-.table-card :deep(.el-table__header colgroup col:nth-child(5)),
-.table-card :deep(.el-table__body colgroup col:nth-child(5)) {
-  width: 10% !important; /* 2/20 */
-}
-.table-card :deep(.el-table__header colgroup col:nth-child(6)),
-.table-card :deep(.el-table__body colgroup col:nth-child(6)) {
-  width: 10% !important; /* 2/20 */
-}
-
 .level-icon-img {
   width: 60px;
   height: 60px;
@@ -455,29 +307,4 @@ onMounted(async () => {
 .link-btn {
   color: #2e74c6;
 }
-
-.pagination-card {
-  display: flex;
-  justify-content: center;
-  padding: 16px;
-  margin-top: auto;
-  margin-bottom: 0;
-}
-
-.pagination-card :deep(.el-pagination.is-background .el-pager li) {
-  background-color: #fff;
-  border: 1px solid #dcdfe6;
-  color: var(--el-text-color-regular);
-  margin: 0 6px;
-  border-radius: 6px;
-  min-width: 42px;
-  height: 34px;
-  line-height: 34px;
-}
-
-.pagination-card :deep(.el-pagination.is-background .el-pager li.is-active) {
-  background-color: var(--el-color-primary);
-  border-color: var(--el-color-primary);
-  color: #fff;
-}
 </style>

src/master/views/vip/vip_crm.vue

@@ -1,12 +1,11 @@
 <template>
-  <div class="vip-page">
-    <div class="page-inner">
-      <div class="page-title">CRM身份绑定</div>
+  <div class="p_pannel fw fh p_flexCol">
+    <div class="fw">
+      <!--  <div class="page-title">CRM身份绑定</div>  -->
 
       <!-- 表格模块 -->
-      <div class="card table-card" v-loading="loading">
+      <div class="fw fh p_scroll" v-loading="loading">
         <zy-table
-          height="100%"
           :data="tableData"
           header-align="center"
           align="center"
@@ -25,14 +24,17 @@
       </div>
 
       <!-- 分页 -->
-      <div class="card pagination-card">
+      <div class="fw mt-12 p_flexEnd">
         <zy-pagination
-          :page-size="page.PSize"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :pager-count="5"
           :total="page.PCount"
-          :pager-count="7"
-          layout="pager"
-          v-model:currentPage="page.PIndex"
           @current-change="handlePageChange"
+          @size-change="getTableData"
+          background
+          layout="total, sizes, prev, pager, next"
+          v-model:currentPage="page.PIndex"
+          v-model:page-size="page.PSize"
         ></zy-pagination>
       </div>
     </div>