diff --git a/main/manager-web/src/apis/module/admin.js b/main/manager-web/src/apis/module/admin.js
index 52468d6b..977437ab 100644
--- a/main/manager-web/src/apis/module/admin.js
+++ b/main/manager-web/src/apis/module/admin.js
@@ -5,16 +5,19 @@ import {getServiceUrl} from '../api'
 export default {
     // 用户列表
     getUserList(callback) {
-        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/admin/users`)
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/admin/users`)
             .method('GET')
             .success((res) => {
                 RequestService.clearRequestTime()
                 callback(res)
             })
-            .fail(() => {
+            .fail((err) => {
+                console.error('请求失败:', err)
                 RequestService.reAjaxFun(() => {
-                    this.getList()
+                    this.getUserList(callback)
                 })
-            }).send()
-    },
+            })
+            .send()
+    }
 }
diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
index cee70991..53697b8e 100644
--- a/main/manager-web/src/views/UserManagement.vue
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -5,35 +5,27 @@
       <div class="top-area">
         <div class="page-title">用户管理</div>
         <div class="page-search">
-          <el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" />
+          <el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" @keyup.enter.native="handleSearch"/>
           <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="用户Id" prop="user_id"></el-table-column>
-          <el-table-column label="手机号码" prop="mobile"></el-table-column>
-          <el-table-column label="设备数量" prop="device_count"></el-table-column>
-          <el-table-column label="状态" prop="status"></el-table-column>
-          <el-table-column label="操作">
+          <el-table-column label="选择" type="selection" align="center" width="120"></el-table-column>
+          <el-table-column label="用户Id" prop="user_id" align="center"></el-table-column>
+          <el-table-column label="手机号码" prop="mobile" align="center"></el-table-column>
+          <el-table-column label="设备数量" prop="device_count" align="center"></el-table-column>
+          <el-table-column label="状态" prop="status" align="center"></el-table-column>
+          <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"
               v-if="scope.row.status === '正常'"
-              @click="disableUser(scope.row)">禁用</el-button>
+              @click="disableUser(scope.row)">禁用账户</el-button>
             <el-button size="mini" type="text"
               v-if="scope.row.status === '禁用'"
-              @click="restoreUser(scope.row)">恢复</el-button>
+              @click="restoreUser(scope.row)">恢复账号</el-button>
             <el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #989fdd">删除用户</el-button>
             </template>
           </el-table-column>
@@ -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">
-            <el-pagination
-              background
-              @current-change="handleCurrentChange"
-              :current-page="currentPage"
-              :page-sizes="[5, 10, 15]"
-              :page-size="pageSize"
-              layout="prev, pager, next"
-              :total="total"
-            />
+          <div class="custom-pagination">
+            <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
+            <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
+
+            <button
+              v-for="page in visiblePages"
+              :key="page"
+              class="pagination-btn"
+              :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>
@@ -69,7 +67,6 @@
 
 <script>
 import HeaderBar from "@/components/HeaderBar.vue";
-import Api from '@/apis/api';
 import adminApi from '@/apis/module/admin';
 
 
@@ -78,29 +75,67 @@ export default {
   data() {
     return {
       searchPhone: '',
-      userList: [
-        { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 10 },
-        { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 9 },
-        { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 7 },
-        { userId: '123456', phone: '13800138000', status: '禁用', deviceCount: 7 }
-      ],
+      userList: [],
+      originalUserList: [], // 原始数据
       currentPage: 1,
-      pageSize: 4,
+      pageSize: 5,
       total: 20
     };
   },
   created() {
-    adminApi.getUserList(({data}) => {
-      //mock偶尔会返回-1导致出错，又会返回两个list，所以这里只取第一个
-      this.userList = data.data[0].list;
-      console.log('用户列表：', this.userList);
-    })
+    this.fetchUsers();
+  },
+  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() {
-      // 模拟搜索逻辑
-      console.log('执行查询，搜索号码：', this.searchPhone);
+    // 获取用户列表
+    fetchUsers() {
+      adminApi.getUserList(({data}) => {
+        if (data.code === 0) {
+          const responseData = data.data[0] || data.data;
+          this.originalUserList = responseData.list.map(user => ({
+            ...user,
+            status: user.status === '1' ? '正常' : '禁用'
+          }));
+          this.userList = [...this.originalUserList];
+          this.total = responseData.totalCount || 0;
+        }
+      });
     },
+
+    // 分页变化
+    handleCurrentChange(page) {
+      this.currentPage = page;
+      this.fetchUsers();
+    },
+
+    // 搜索
+    handleSearch() {
+      if (!this.searchPhone) {
+        this.userList = [...this.originalUserList];
+        return;
+      }
+      this.userList = this.originalUserList.filter(user =>
+        user.mobile.includes(this.searchPhone)
+      )},
     batchDelete() {
       console.log('执行批量删除操作');
     },
@@ -121,15 +156,35 @@ export default {
     deleteUser(row) {
       console.log('删除用户：', row);
     },
-    handleCurrentChange(page) {
-      this.currentPage = page;
-      console.log('当前页码：', page);
+    handleSizeChange(val) {
+      this.pageSize = val;
+      console.log('每页条数：', val);
     },
-    headerCellClassName({ column, columnIndex }) {
-    if (columnIndex === 0) {
-      return 'custom-selection-header'
-    }
-    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 +195,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 +226,7 @@ $table-bg-color: #ecf1fd;
     }
   }
 }
+
 .welcome {
   min-width: 900px;
   min-height: 506px;
@@ -196,7 +259,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 +267,14 @@ $table-bg-color: #ecf1fd;
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
+
   .ctrl_btn {
     display: flex;
     align-items: center;
+    margin-left: 25px;
   }
 }
 
-.pagination-container {
-  display: flex;
-  justify-content: flex-end;
-}
-
-
 .rotated-icon {
   display: inline-block;
   transform: rotate(45deg);
@@ -232,8 +291,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 +314,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 +344,86 @@ $table-bg-color: #ecf1fd;
   }
 }
 
-</style>
\ No newline at end of file
+.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>