XingQue/a_long_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

操作日志页改为深色表格与下拉，避免白底看不清。

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
XingQue
2026-07-17 03:21:20 +08:00
parent b9d5ee1180
commit 30a9e748fe
2 changed files with 154 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/admin/AdminUser.vue
View File

@@ -271,7 +271,7 @@
destroy-on-close
>
<div class="log-filters">
<el-select v-model="logFilters.leixing" placeholder="用户类型" clearable style="width: 140px" @change="fetchLogList(1)">
<el-select v-model="logFilters.leixing" placeholder="用户类型" clearable style="width: 140px" popper-class="op-log-dark-popper" @change="fetchLogList(1)">
<el-option label="全部类型" value="" />
<el-option label="打手" :value="2" />
<el-option label="管事" :value="3" />
@@ -289,7 +289,16 @@
/>
<el-button type="primary" @click="fetchLogList(1)">搜索</el-button>
</div>
<el-table :data="logList" v-loading="logLoading" border class="user-table" max-height="480">
<el-table
:data="logList"
v-loading="logLoading"
border
class="user-table log-table"
max-height="480"
:header-cell-style="{ background: '#0b1a2a', color: '#5ee7ff', borderColor: 'rgba(0,180,200,0.35)' }"
:cell-style="{ background: '#0a1420', color: '#e8f4ff', borderColor: 'rgba(255,255,255,0.08)' }"
:row-style="{ background: '#0a1420' }"
>
<el-table-column prop="create_time" label="时间" width="170" />
<el-table-column prop="leixing_name" label="类型" width="90" />
<el-table-column prop="beixiugai_yonghuid" label="被操作用户" width="110" />

174
src/views/admin/OpLog.vue
View File

@@ -65,6 +65,7 @@
placeholder="类型"
clearable
style="width: 130px"
popper-class="op-log-dark-popper"
@change="fetchLogs(1)"
>
<el-option label="全部类型" value="" />
@@ -86,7 +87,16 @@
</div>
</div>
<el-table :data="logList" v-loading="logLoading" border class="log-table" max-height="620">
<el-table
:data="logList"
v-loading="logLoading"
border
class="log-table"
max-height="620"
:header-cell-style="headerCellStyle"
:cell-style="bodyCellStyle"
:row-style="rowStyle"
>
<el-table-column prop="create_time" label="时间" width="170" />
<el-table-column prop="leixing_name" label="类型" width="90" />
<el-table-column prop="beixiugai_yonghuid" label="被操作用户" width="110" />
@@ -124,6 +134,19 @@ import request from '@/utils/request'
const username = localStorage.getItem('username') || ''
const hasPermission = ref(true)
const headerCellStyle = {
background: '#0b1a2a',
color: '#5ee7ff',
borderColor: 'rgba(0, 180, 200, 0.35)',
fontWeight: '600'
}
const bodyCellStyle = {
background: '#0a1420',
color: '#e8f4ff',
borderColor: 'rgba(255,255,255,0.08)'
}
const rowStyle = { background: '#0a1420' }
const userKeyword = ref('')
const userList = ref([])
const userLoading = ref(false)
@@ -258,7 +281,7 @@ onMounted(async () => {
background: radial-gradient(circle at 20% 30%, #0a0f1a, #03060c);
min-height: 100vh;
padding: 24px;
color: #eef2ff;
color: #e8f4ff;
}
.no-permission {
display: flex;
@@ -268,18 +291,18 @@ onMounted(async () => {
height: 60vh;
}
.no-permission-icon { font-size: 80px; margin-bottom: 20px; opacity: 0.6; }
.no-permission-text { font-size: 24px; font-weight: bold; margin-bottom: 8px; }
.no-permission-desc { font-size: 14px; color: rgba(255,255,255,0.5); }
.no-permission-text { font-size: 24px; font-weight: bold; margin-bottom: 8px; color: #e8f4ff; }
.no-permission-desc { font-size: 14px; color: rgba(232,244,255,0.55); }
.page-title {
font-size: 22px;
font-weight: 700;
color: #00f2ff;
color: #5ee7ff;
margin-bottom: 6px;
}
.page-desc {
font-size: 13px;
color: rgba(255,255,255,0.55);
color: rgba(232,244,255,0.6);
margin-bottom: 18px;
}
.layout {
@@ -289,8 +312,8 @@ onMounted(async () => {
min-height: 70vh;
}
.left-panel, .right-panel {
background: rgba(6,12,20,0.65);
border: 1px solid rgba(0,242,255,0.2);
background: #071018;
border: 1px solid rgba(0,200,220,0.28);
border-radius: 14px;
padding: 14px;
}
@@ -310,19 +333,21 @@ onMounted(async () => {
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
border: 1px solid transparent;
border: 1px solid rgba(255,255,255,0.06);
margin-bottom: 6px;
background: #0a1420;
color: #e8f4ff;
}
.user-item:hover { background: rgba(0,242,255,0.08); }
.user-item:hover { background: #102033; border-color: rgba(0,200,220,0.35); }
.user-item.active {
background: rgba(0,242,255,0.15);
border-color: rgba(0,242,255,0.45);
background: #123047;
border-color: rgba(94,231,255,0.55);
}
.user-name { font-weight: 600; }
.user-phone { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.user-name { font-weight: 600; color: #f2f8ff; }
.user-phone { font-size: 12px; color: #8fb3c9; margin-top: 2px; }
.left-pager { margin-top: 10px; display: flex; justify-content: center; }
.empty, .empty-right {
color: rgba(255,255,255,0.45);
color: #8fb3c9;
text-align: center;
padding: 40px 0;
}
@@ -334,13 +359,13 @@ onMounted(async () => {
flex-wrap: wrap;
margin-bottom: 12px;
}
.sel-name { color: #00f2ff; font-weight: 700; font-size: 16px; }
.sel-phone { color: rgba(255,255,255,0.6); margin-left: 4px; }
.sel-name { color: #5ee7ff; font-weight: 700; font-size: 16px; }
.sel-phone { color: #8fb3c9; margin-left: 4px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.log-change {
white-space: pre-line;
font-size: 13px;
color: #a8e6ff;
color: #9adfff;
line-height: 1.5;
}
.pager {
@@ -349,25 +374,112 @@ onMounted(async () => {
justify-content: flex-end;
}
:deep(.el-table) { background: transparent; color: #fff; }
:deep(.el-table th) {
background: rgba(0,242,255,0.15);
color: #00f2ff;
border-bottom: 1px solid rgba(0,242,255,0.3);
/* 表格强制深色，避免白底看不清 */
:deep(.log-table) {
--el-table-bg-color: #0a1420;
--el-table-tr-bg-color: #0a1420;
--el-table-header-bg-color: #0b1a2a;
--el-table-row-hover-bg-color: #123047;
--el-table-border-color: rgba(255,255,255,0.1);
--el-table-text-color: #e8f4ff;
--el-table-header-text-color: #5ee7ff;
background: #0a1420 !important;
color: #e8f4ff !important;
}
:deep(.el-table td) {
background: transparent;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.08);
:deep(.log-table .el-table__inner-wrapper::before),
:deep(.log-table .el-table__border-left-patch),
:deep(.log-table .el-table__border-bottom-patch) {
background-color: #0a1420 !important;
}
:deep(.el-table__row:hover td) { background: rgba(0,242,255,0.1) !important; }
:deep(.log-table th.el-table__cell),
:deep(.log-table td.el-table__cell) {
background-color: inherit !important;
}
:deep(.log-table .el-table__empty-text) {
color: #8fb3c9;
}
:deep(.log-table .el-loading-mask) {
background-color: rgba(7, 16, 24, 0.75);
}
/* 输入框 / 选择器 */
:deep(.el-input__wrapper) {
background: rgba(0,0,0,0.5);
box-shadow: 0 0 0 1px rgba(0,242,255,0.25) inset;
background: #0a1420 !important;
box-shadow: 0 0 0 1px rgba(0,200,220,0.35) inset !important;
}
:deep(.el-input__inner) {
color: #e8f4ff !important;
}
:deep(.el-input__inner::placeholder) {
color: #6f8fa3 !important;
}
:deep(.el-select__wrapper) {
background: #0a1420 !important;
box-shadow: 0 0 0 1px rgba(0,200,220,0.35) inset !important;
color: #e8f4ff !important;
}
:deep(.el-select__placeholder) {
color: #6f8fa3 !important;
}
:deep(.el-select__selected-item) {
color: #e8f4ff !important;
}
/* 分页 */
:deep(.el-pagination) {
--el-pagination-bg-color: transparent;
--el-pagination-text-color: #cfe6f5;
--el-pagination-button-color: #cfe6f5;
--el-pagination-button-bg-color: #0a1420;
--el-pagination-hover-color: #5ee7ff;
--el-pagination-button-disabled-bg-color: #0a1420;
}
:deep(.el-pagination .el-pager li) {
background: #0a1420 !important;
color: #cfe6f5 !important;
}
:deep(.el-pagination .el-pager li.is-active) {
color: #5ee7ff !important;
background: #123047 !important;
}
:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
background: #0a1420 !important;
color: #cfe6f5 !important;
}
:deep(.el-tag) {
--el-tag-bg-color: #123047;
--el-tag-border-color: rgba(94,231,255,0.35);
--el-tag-text-color: #9adfff;
}
:deep(.el-input__inner) { color: #fff; }
@media (max-width: 960px) {
.layout { grid-template-columns: 1fr; }
}
</style>
<!-- 下拉菜单挂到 body，需非 scoped -->
<style>
.op-log-dark-popper.el-select__popper,
.op-log-dark-popper {
background: #0a1420 !important;
border: 1px solid rgba(0,200,220,0.4) !important;
}
.op-log-dark-popper .el-select-dropdown__item {
color: #e8f4ff !important;
background: #0a1420 !important;
}
.op-log-dark-popper .el-select-dropdown__item.is-hovering,
.op-log-dark-popper .el-select-dropdown__item:hover {
background: #123047 !important;
color: #5ee7ff !important;
}
.op-log-dark-popper .el-select-dropdown__item.is-selected {
color: #5ee7ff !important;
font-weight: 600;
}
.op-log-dark-popper .el-popper__arrow::before {
background: #0a1420 !important;
border-color: rgba(0,200,220,0.4) !important;
}
</style>