From 9edaa26f6330646020bb3aface0074231e17af6f Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Wed, 29 Oct 2025 16:50:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A3=85=E5=A4=87=E7=A7=9F=E8=B5=81=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/search/lease/index.vue | 207 ++++++++++++++++++++++++++++---
 1 file changed, 192 insertions(+), 15 deletions(-)

diff --git a/src/views/search/lease/index.vue b/src/views/search/lease/index.vue
index 23934237..1790e843 100644
--- a/src/views/search/lease/index.vue
+++ b/src/views/search/lease/index.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item  prop="deviceName">
+      <el-card class="search-box">
+        <el-row>
+          <el-col :span="20">
+            <el-form-item  prop="deviceName">
       <el-input
           v-model="queryParams.deviceName"
           placeholder="装备名称"
@@ -58,18 +61,24 @@
           >
           </el-date-picker>
       </el-form-item>
-
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          </el-col>
+          <el-col :span="4" style="text-align: right;">
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+          </el-col>
+        </el-row>
+      
+
+      
+      </el-card>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <!-- <el-row :gutter="10" class="mb8">
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="tableData" >
+    </el-row> -->
+    <el-card class="content-box">
+      <div class="table-container">
+    <el-table v-loading="loading" :data="tableData" border stripe height="100%">
       <el-table-column label="序号" align="center" width="80" type="index">
         <template slot-scope="scope">
           <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
@@ -113,7 +122,8 @@
         </template>
       </el-table-column>
     </el-table>
-
+    </div>
+    <div class="pagination-wrapper">
     <pagination
       v-show="total>0"
       :total="total"
@@ -121,6 +131,8 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+    </div>
+    </el-card>
 
     <!-- 查看共享详情弹窗 -->
       <el-dialog :title="title" :visible.sync="showDevice" width="1300px" height="1000px" append-to-body>
@@ -136,7 +148,9 @@
           </div>
         </div>
           <el-form :model="queryDevice" ref="queryFormDevice" size="small" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="订单编号" prop="orderCode">
+        <el-row>
+          <el-col :span="20">
+            <el-form-item label="订单编号" prop="orderCode">
           <el-input
             v-model="queryDevice.orderCode"
             placeholder="请输入订单编号"
@@ -157,13 +171,16 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryRent">查询</el-button>
+          </el-col>
+          <el-col :span="4" style="text-align: right;">
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryRent">查询</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQueryRent">重置</el-button>
-        </el-form-item>
+          </el-col>
+        </el-row>
+        
         </el-form>
 
-      <el-table v-loading="loadingTwo" :data="deviceList" width="800px" height = "600px" >
+      <el-table v-loading="loadingTwo" :data="deviceList" width="800px" height = "600px" border stripe>
         <el-table-column label="序号" align="center" width="80" type="index">
         <!-- <template slot-scope="scope">
           <span>{{ (queryDevice.pageNum - 1) * queryDevice.pageSize + scope.$index + 1 }}</span>
@@ -442,4 +459,164 @@ export default {
         display: none;
     }
 }
+
+.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;
+    }
+  }
+}
+.dialog-table {
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  
+  ::v-deep .el-table {
+    border-radius: 6px;
+    overflow: hidden;
+    
+    // 启用斑马纹
+    &.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: 45px;
+        font-size: 14px;
+        border-bottom: 2px solid #e4e7ed;
+      }
+    }
+
+    .el-table__body {
+      tr {
+        transition: all 0.2s ease;
+        
+        &:hover {
+          background-color: #f8f9fa;
+        }
+        
+        td {
+          padding: 12px 8px;
+          font-size: 13px;
+          border-bottom: 1px solid #f0f2f5;
+        }
+      }
+    }
+
+    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
+      background-color: #CCF1E9 !important;
+    }
+    
+    // 表格边框优化
+    &::before {
+      display: none;
+    }
+    
+    &::after {
+      display: none;
+    }
+  }
+}
+
+::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>