Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-22 15:13:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化了用户管理的样式

Browse Source
This commit is contained in:
CGD
2025-03-31 10:24:37 +08:00
parent 98fa95190c
commit 261ecfea4d
1 changed files with 185 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/views/UserManagement.vue
+185 -41
View File
@@ -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="用户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="100"></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"
@@ -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>
@@ -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;
}
}
</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>