装备录入申请表格样式修改

src/views/EquipmentEntryApply/EquipmentDetailList.vue

@@ -70,6 +70,7 @@
         </el-row>
         <el-row>
           <el-col :span="24" style="text-align: right;">
+           
             <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
               <i class="el-icon-search"></i>
               查询
@@ -78,7 +79,6 @@
               <i class="el-icon-refresh"></i>
               重置
             </el-button>
-            
           </el-col>
         </el-row>
       </el-card>

src/views/EquipmentEntryApply/equipmentInput/index.vue

@@ -180,6 +180,9 @@
       style="width: auto"
       show-overflow-tooltip
       :span-method="handleSpanMethod"
+      border
+      stripe
+      height="100%"
     >
       <el-table-column label="序号" align="center" width="55" type="index" fixed/>
       <el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip
@@ -284,12 +287,14 @@
         </template>
       </el-table-column>
     </el-table>
-    <pagination
+    <div class="pagination-wrapper">
-      :total="total"
+      <pagination
-      @pagination="getList"
+        :total="total"
-      :page.sync="queryParams.pageNum"
+        @pagination="getList"
-      :limit.sync="queryParams.pageSize"
+        :page.sync="queryParams.pageNum"
-    />
+        :limit.sync="queryParams.pageSize"
+      />
+    </div>
    </el-card>
     <EquipmentEntryEditDialog
       :is-visible.sync="isEditVisible"

src/views/EquipmentEntryApproval/EquipmentDetailList.vue

@@ -8,6 +8,7 @@
       size="small"
     >
       <!-- 表单搜索 -->
+      <el-card class="search-box">
       <el-row>
         <el-form-item prop="orderCreateUser" label="申请人：">
           <el-input
@@ -108,16 +109,17 @@
                   />
                 </el-form-item>-->
 
-        <el-form-item prop="originalValue" label="资产原值：">
+        <el-col :span="6">
+          <el-form-item prop="originalValue" label="资产原值：">
           <el-input
             clearable
             style="width: 105px"
             placeholder="请输入"
             v-model.trim="queryParams.minOriginalValue"
           />
-
         </el-form-item>
-        <el-form-item prop="maxOriginalValue" label="-" style="margin-left: -5.5%;">
+        <span style="line-height: 30px;margin: 0 10px 0 0px;"> - </span>
+        <el-form-item prop="maxOriginalValue">
           <el-input
             clearable
             style="width: 105px"
@@ -125,31 +127,36 @@
             v-model.trim="queryParams.maxOriginalValue"
           />
         </el-form-item>
+        </el-col>
 
 
-        <el-form-item>
+        <el-col :span="18" style="text-align: right;">
           <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
+            <i class="el-icon-search"></i>
             查询
           </el-button>
-          <el-button class="primary-lease" type="primary" @click="resetForm">
+          <el-button class="primary-lease" @click="resetForm">
+            <i class="el-icon-refresh"></i>
             重置
           </el-button>
-
+        </el-col>
-          <el-button
+      </el-row>
+      </el-card>
+      </el-form>
+      <el-card class="content-box">
+        <el-row>
+          <el-col :span="24" style="text-align: right;">
+            <el-button
             class="primary-lease"
             type="primary"
             @click="showDetails('0')"
           >
             展开明细
           </el-button>
-
+          </el-col>
-        </el-form-item>
+        </el-row>
-
-      </el-row>
-      </el-form>
-
       <!-- 表格 -->
-      <el-table :data="tableData" :span-method="handleSpanMethod" :max-height="530">
+      <el-table :data="tableData" :span-method="handleSpanMethod" border stripe height="100%">
         <!--      <el-table :data="tableData"  >-->
         <el-table-column label="序号" align="center" width="55" type="index" fixed/>
         <el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip
@@ -256,6 +263,7 @@
         </el-table-column>
       </el-table>
 
+      <div class="pagination-wrapper">
       <!-- 分页 -->
       <pagination
         :total="total"
@@ -263,7 +271,8 @@
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
       />
-
+      </div>
+    </el-card>
     <!-- 弹框 -->
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
       <el-table :data="dialogList" fit highlight-current-row style="width: 100%" :max-height="500">
@@ -553,7 +562,7 @@ export default {
 }
 
 .app-container {
-  padding: 20px;
+  padding: 0px !important;
 }
 
 ::v-deep .el-pagination {
@@ -564,4 +573,80 @@ export default {
 ::v-deep .el-button {
   margin-right: 8px;
 }
+
+.search-box {
+  margin-bottom: 20px;
+  border-radius: 8px;
+}
+
+.content-box {
+  border-radius: 8px;
+  height: calc(100vh - 330px);
+  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>

src/views/EquipmentEntryApproval/EquipmentMainList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" style="padding: 0;">
     <el-form
       :model="queryParams"
       ref="queryFormRef"
@@ -8,6 +8,7 @@
       size="small"
     >
       <!-- 表单搜索 -->
+      <el-card class="search-box">
       <el-row>
         <el-col :span="5">
           <el-form-item label="审批状态" prop="status">
@@ -36,16 +37,23 @@
           </el-form-item>
         </el-col>
         <el-col :span="12" style="text-align:right;">
-          <el-form-item style="white-space: nowrap;">
+          <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
-            <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">查询</el-button>
+              <i class="el-icon-search"></i>
-            <el-button class="primary-lease" type="primary" @click="resetForm">重置</el-button>
+              查询</el-button>
-            <el-button class="primary-lease" type="primary" @click="showDetails('1')">展开明细</el-button>
+            <el-button class="primary-lease" @click="resetForm">
-          </el-form-item>
+              <i class="el-icon-refresh"></i>
+              重置</el-button>
         </el-col>
       </el-row>
-
+      </el-card>
       <!-- 表格 -->
-      <el-table :data="tableData">
+      <el-card class="content-box">
+        <el-row>
+          <el-col :span="24" style="text-align: right;">
+            <el-button class="primary-lease" type="primary" @click="showDetails('1')">展开明细</el-button>
+          </el-col>
+        </el-row>
+      <el-table :data="tableData" border stripe height="100%">
         <el-table-column label="序号" align="center" width="55" type="index"/>
         <el-table-column prop="orderNumber" label="录入单号" align="center"/>
         <el-table-column prop="devCount" label="申请录入数量" align="center"/>
@@ -78,6 +86,7 @@
         </el-table-column>
       </el-table>
 
+      <div class="pagination-wrapper">
       <!-- 分页 -->
       <pagination
         :total="total"
@@ -85,6 +94,9 @@
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
       />
+      </div>
+      </el-card>
+      
     </el-form>
   </div>
 </template>
@@ -190,7 +202,7 @@ export default {
 }
 
 .app-container {
-  padding: 20px;
+  padding: 10px;
 }
 
 ::v-deep .el-pagination {
@@ -201,4 +213,80 @@ export default {
 ::v-deep .el-button {
   margin-right: 8px;
 }
+
+.search-box {
+  margin-bottom: 20px;
+  border-radius: 8px;
+}
+
+.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>