优化了用户管理的样式

main/manager-web/src/views/UserManagement.vue

@@ -7,25 +7,17 @@
         <div class="page-search">
           <el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" />
           <el-button class="btn-search" @click="handleSearch">搜索</el-button>
-          <!-- <el-button type="danger" @click="batchDelete">批量删除</el-button>
-          <el-button type="danger" @click="batchDisable">批量禁用</el-button> -->
         </div>
       </div>
 
       <el-card class="user-card" shadow="never">
-        <!-- <div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
-          <el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
-          <el-button @click="handleSearch">查询</el-button>
-          <el-button type="danger" @click="batchDelete">批量删除</el-button>
-          <el-button type="danger" @click="batchDisable">批量禁用</el-button>
-        </div> -->
         <el-table :data="userList" class="transparent-table" :header-cell-class-name="headerCellClassName">
-          <el-table-column label="选择" type="selection" width="55"></el-table-column>
+          <el-table-column label="选择" type="selection" align="center" width="100"></el-table-column>
-          <el-table-column label="用户Id" prop="user_id"></el-table-column>
+          <el-table-column label="用户Id" prop="user_id" align="center"></el-table-column>
-          <el-table-column label="手机号码" prop="mobile"></el-table-column>
+          <el-table-column label="手机号码" prop="mobile" align="center"></el-table-column>
-          <el-table-column label="设备数量" prop="device_count"></el-table-column>
+          <el-table-column label="设备数量" prop="device_count" align="center"></el-table-column>
-          <el-table-column label="状态" prop="status"></el-table-column>
+          <el-table-column label="状态" prop="status" align="center"></el-table-column>
-          <el-table-column label="操作">
+          <el-table-column label="操作" align="center">
             <template slot-scope="scope">
             <el-button size="mini" type="text" @click="resetPassword(scope.row)" style="color: #989fdd">重置密码</el-button>
             <el-button size="mini" type="text"
@@ -46,16 +38,22 @@
             <el-button size="mini" type="warning" style="color: black; background: #f6d075"><i class="el-icon-remove-outline rotated-icon"></i>禁用</el-button>
             <el-button size="mini" type="danger" icon="el-icon-delete" style="background: #fd5b63">删除</el-button>
           </div>
-          <div class="pagination-container">
+          <div class="custom-pagination">
-            <el-pagination
+            <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
-              background
+            <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
-              @current-change="handleCurrentChange"
+
-              :current-page="currentPage"
+            <button
-              :page-sizes="[5, 10, 15]"
+              v-for="page in visiblePages"
-              :page-size="pageSize"
+              :key="page"
-              layout="prev, pager, next"
+              class="pagination-btn"
-              :total="total"
+              :class="{ active: page === currentPage }"
-            />
+              @click="goToPage(page)"
+            >
+              {{ page }}
+            </button>
+
+            <button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
+            <span class="total-text">共{{ total }}条记录</span>
           </div>
         </div>
       </el-card>
@@ -85,7 +83,7 @@ export default {
         { userId: '123456', phone: '13800138000', status: '禁用', deviceCount: 7 }
       ],
       currentPage: 1,
-      pageSize: 4,
+      pageSize: 5,
       total: 20
     };
   },
@@ -95,6 +93,26 @@ export default {
       this.userList = data.data[0].list;
       console.log('用户列表：', this.userList);
     })
+  },
+    computed: {
+    pageCount() {
+      return Math.ceil(this.total / this.pageSize);
+    },
+    visiblePages() {
+      const pages = [];
+      const maxVisible = 3;
+      let start = Math.max(1, this.currentPage - 1);
+      let end = Math.min(this.pageCount, start + maxVisible - 1);
+
+      if (end - start + 1 < maxVisible) {
+        start = Math.max(1, end - maxVisible + 1);
+      }
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+      return pages;
+    }
   },
   methods: {
     handleSearch() {
@@ -125,11 +143,35 @@ export default {
       this.currentPage = page;
       console.log('当前页码：', page);
     },
-    headerCellClassName({ column, columnIndex }) {
+    handleSizeChange(val) {
-    if (columnIndex === 0) {
+      this.pageSize = val;
-      return 'custom-selection-header'
+      console.log('每页条数：', val);
-    }
+    },
-    return ''
+    headerCellClassName({column, columnIndex}) {
+      if (columnIndex === 0) {
+        return 'custom-selection-header'
+      }
+      return ''
+    },
+    goFirst() {
+      this.currentPage = 1;
+      this.handleCurrentChange(1);
+    },
+    goPrev() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+        this.handleCurrentChange(this.currentPage);
+      }
+    },
+    goNext() {
+      if (this.currentPage < this.pageCount) {
+        this.currentPage++;
+        this.handleCurrentChange(this.currentPage);
+      }
+    },
+    goToPage(page) {
+      this.currentPage = page;
+      this.handleCurrentChange(page);
     },
   }
 };
@@ -140,22 +182,29 @@ export default {
 $table-bg-color: #ecf1fd;
 
 .main {
-  padding: 20px; display: flex; flex-direction: column;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
   background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
 }
+
 .top-area {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
+
   .page-title {
     font-size: 20px;
     font-weight: 600;
     color: #303133;
+    margin-left: 20px;
   }
+
   .page-search {
     display: flex;
     align-items: center;
+
     .btn-search {
       margin-left: 10px;
       background: linear-gradient(to right, #5778ff, #c793f3);
@@ -164,6 +213,7 @@ $table-bg-color: #ecf1fd;
     }
   }
 }
+
 .welcome {
   min-width: 900px;
   min-height: 506px;
@@ -196,7 +246,7 @@ $table-bg-color: #ecf1fd;
   background: $table-bg-color;
   border-radius: 12px;
   padding: 20px;
-  //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin: 15px;
 }
 
 .table_bottom {
@@ -204,18 +254,13 @@ $table-bg-color: #ecf1fd;
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
+
   .ctrl_btn {
     display: flex;
     align-items: center;
   }
 }
 
-.pagination-container {
-  display: flex;
-  justify-content: flex-end;
-}
-
-
 .rotated-icon {
   display: inline-block;
   transform: rotate(45deg);
@@ -232,8 +277,22 @@ $table-bg-color: #ecf1fd;
       color: black;
     }
 
+    &::before {
+      display: none;
+    }
+
+    &:last-child td {
+        border-bottom: none !important;
+    }
+
     .el-table__body tr {
       background-color: $table-bg-color;
+      td {
+        border: {
+          top: 1px solid rgba(0, 0, 0, 0.04);
+          bottom: 1px solid rgba(0, 0, 0, 0.04);
+        }
+      }
     }
   }
 }
@@ -241,12 +300,15 @@ $table-bg-color: #ecf1fd;
 .search-input {
   width: 300px;
   margin-right: 10px;
+
   :deep(.el-input__inner) {
     background-color: transparent;
+    border-color: #d3d6dc;
+
     &:focus {
-      border-color: #409eff; // 保持聚焦状态下的边框颜色
+      border-color: #409eff;
     }
-    //文字颜色
+
     &::placeholder {
       color: #606266;
       opacity: 0.7;
@@ -268,4 +330,86 @@ $table-bg-color: #ecf1fd;
   }
 }
 
-</style>
+.custom-pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 15px;
+
+  /* 导航按钮样式 (首页、上一页、下一页) */
+  .pagination-btn:first-child,
+  .pagination-btn:nth-child(2),
+  .pagination-btn:nth-last-child(2) {
+    min-width: 60px;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: 4px;
+    border: 1px solid #e4e7ed;
+    background: #DEE7FF;
+    color: #606266;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: #d7dce6;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+    /* 数字按钮样式 */
+  .pagination-btn:not(:first-child):not(:nth-child(2)):not(:nth-last-child(2)) {
+    min-width: 28px;
+    height: 32px;
+    padding: 0;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    background: transparent;
+    color: #606266;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(245, 247, 250, 0.3);
+    }
+  }
+
+
+  .pagination-btn.active {
+    background: #5f70f3 !important;
+    color: #ffffff !important;
+    border-color: #5f70f3 !important;
+
+    &:hover {
+      background: #6d7cf5 !important;
+    }
+  }
+
+  .total-text {
+    color: #909399;
+    font-size: 14px;
+    margin-left: 10px;
+  }
+}
+
+:deep(.el-checkbox__inner) {
+  background-color: #eeeeee !important;
+  border-color: #cccccc !important;
+}
+
+:deep(.el-checkbox__inner:hover) {
+  border-color: #cccccc !important;
+}
+
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background-color: #5f70f3 !important;
+  border-color: #5f70f3 !important;
+}
+
+
+</style>