合同管理表格样式修改

src/views/contract-manage/index.vue

@@ -8,8 +8,9 @@
       label-width="auto" size="small"
     >
       <!-- 表单搜索 -->
+      <el-card class="search-box">
       <el-row>
-        <el-col :span="6">
+        <el-col :span="20">
           <el-form-item prop="contractName">
             <el-input
               v-model.trim="queryParams.contractName"
@@ -18,8 +19,6 @@
               placeholder="请输入合同名称"
             />
           </el-form-item>
-        </el-col>
-        <el-col :span="6">
           <el-form-item prop="contractCode">
             <el-input
               v-model.trim="queryParams.contractCode"
@@ -28,8 +27,6 @@
               placeholder="请输入合同编号"
             />
           </el-form-item>
-        </el-col>
-        <el-col :span="6">
           <el-form-item prop="createTime">
             <el-date-picker
               v-model="createTime"
@@ -42,16 +39,18 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item>
-            <el-button class="primary-lease" type="primary" @click="getContractListData">查询</el-button>
-            <el-button class="primary-lease" type="primary" @click="onReset">重置</el-button>
-          </el-form-item>
+        <el-col :span="4" style="text-align: right;">
+          <el-button class="primary-lease" size="mini" icon="el-icon-search" type="primary" @click="getContractListData">查询</el-button>
+          <el-button class="primary-lease" size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
         </el-col>
+        
       </el-row>
+      
+      </el-card>
+    </el-form>
+    <el-card class="content-box">
       <el-row>
-        <el-col :span="18">
-          <el-form-item>
+        <el-col :span="24" style="text-align: right;">
           <el-button class="primary-lease" type="primary" @click="addContract">合同新建</el-button>
             <a :href="uploadUrlTemp" download="安徽省机械化装备共享平台-协议模板">
               <el-button
@@ -60,19 +59,14 @@
                 style="margin-left: 20px"
               >模板下载</el-button>
             </a>
-          </el-form-item>
         </el-col>
       </el-row>
-    </el-form>
-
+      <div class="table-container">
     <!-- 表格 -->
     <el-table
       :data="qualityLis"
+      border stripe height="100%"
       show-overflow-tooltip
-      :header-cell-style="{
-        background: '#00a288',
-        color: '#fff',
-      }"
     >
       <el-table-column align="center" label="合同编码">
         <template scope="scope">
@@ -115,13 +109,16 @@
         </template>
       </el-table-column>
     </el-table>
+    </div>
+    <div class="pagination-wrapper">
     <pagination
       :total="total"
       @pagination="getContractListData"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
     />
-
+    </div>
+    </el-card>
     <!-- 新增和修改弹框 -->
     <el-dialog
       :visible.sync="dialogVisibleSettlein"
@@ -445,5 +442,82 @@ export default {
 :deep(.el-overlay) {
   z-index: 99 !important;
 }
+
+.search-box {
+  margin-bottom: 20px;
+  border-radius: 8px;
+  padding: 0;
+}
+
+.content-box {
+  border-radius: 8px;
+  height: calc(100vh - 230px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  ::v-deep .el-card__body {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    padding: 20px;
+  }
+
+  .el-row:first-child {
+    margin-bottom: 16px;
+    flex-shrink: 0;
+
+    .el-col {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+
+  .table-container {
+    flex: 1;
+    overflow: hidden;
+    margin-bottom: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pagination-wrapper {
+    flex-shrink: 0;
+    padding-top: 6px;
+    margin-top: auto;
+
+    ::v-deep  .pagination-container {
+      padding: 0px 20px !important;
+      margin-bottom: 30px;
+    }
+  }
+
+  ::v-deep .el-table {
+    // 启用斑马纹
+    &.el-table--striped .el-table__body {
+      tr.el-table__row--striped td {
+        background-color: #F6FBFA !important; // 浅紫色
+      }
+    }
+
+    .el-table__header {
+      background: #E9F0EE;
+
+      th {
+        background: #E9F0EE !important;
+        color: #606266;
+        font-weight: 600;
+        height: 50px;
+      }
+    }
+
+    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
+      background-color: #CCF1E9 !important;
+    }
+  }
+}
 </style>