diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
index cee70991..da8012be 100644
--- a/main/manager-web/src/views/UserManagement.vue
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -7,25 +7,17 @@
搜索
-
-
-
-
-
-
-
-
+
+
+
+
+
+
重置密码
禁用
删除
-
@@ -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 }) {
- if (columnIndex === 0) {
- return 'custom-selection-header'
- }
- return ''
+ handleSizeChange(val) {
+ this.pageSize = val;
+ console.log('每页条数：', val);
+ },
+ 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;
}
}
-
\ 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;
+}
+
+
+