dengshizzp/jk8_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化后台界面与报表样式

Browse Source
This commit is contained in:
wchino
2026-06-11 15:32:22 +08:00
parent 064ba727e0
commit 9b10f21663
37 changed files with 5746 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/components/table/comSearch/index.vue
View File

@@ -256,35 +256,41 @@ const getPlaceholder = (placeholder: string | string[] | undefined, key = 0, def
width: 100%;
max-width: 100%;
background-color: var(--ba-bg-color-overlay);
border: 1px solid var(--ba-border-color);
border: 1px solid var(--ba-border-color-soft);
border-bottom: none;
padding: 13px 15px;
padding: 16px;
font-size: 14px;
border-radius: var(--ba-radius-panel) var(--ba-radius-panel) 0 0;
.com-search-col {
display: flex;
align-items: center;
min-height: 40px;
padding-top: 8px;
color: var(--el-text-color-regular);
font-size: 13px;
}
.com-search-col-label {
width: 33.33%;
padding: 0 15px;
padding: 0 12px;
text-align: right;
overflow: hidden;
white-space: nowrap;
color: var(--el-text-color-secondary);
font-weight: 600;
}
.com-search-col-input {
padding: 0 15px;
padding: 0 12px;
width: 66.66%;
}
.com-search-col-input-range {
display: flex;
align-items: center;
padding: 0 15px;
padding: 0 12px;
width: 66.66%;
.range-separator {
padding: 0 5px;
padding: 0 8px;
color: var(--el-text-color-secondary);
font-size: 12px;
}
}
}
@@ -297,4 +303,28 @@ const getPlaceholder = (placeholder: string | string[] | undefined, key = 0, def
.w83 {
width: 83.5% !important;
}
@media screen and (max-width: 768px) {
.table-com-search {
padding: 12px;
.com-search-col {
display: block;
}
.com-search-col-label,
.com-search-col-input,
.com-search-col-input-range,
.w16,
.w83 {
width: 100% !important;
padding: 0;
text-align: left;
}
.com-search-col-label {
margin-bottom: 6px;
}
}
.pl-20 {
padding-left: 0;
}
}
</style>

44
web/src/components/table/header/index.vue
View File

@@ -176,42 +176,51 @@ const onChangeShowColumn = (value: string | number | boolean, field: string) =>
box-sizing: border-box;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 100%;
background-color: var(--ba-bg-color-overlay);
border: 1px solid var(--ba-border-color);
border: 1px solid var(--ba-border-color-soft);
border-bottom: none;
padding: 13px 15px;
padding: 14px 16px;
font-size: 14px;
border-radius: var(--ba-radius-panel) var(--ba-radius-panel) 0 0;
.table-header-operate-text {
margin-left: 6px;
}
:deep(.el-button) {
min-height: 32px;
}
}
.btns-ml-12 + .btns-ml-12 {
margin-left: 12px;
margin-left: 0;
}
.table-search {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
.quick-search {
width: auto;
width: 240px;
}
}
.table-search-button-group {
display: flex;
margin-left: 12px;
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
margin-left: 0;
border: 1px solid var(--ba-border-color-soft);
border-radius: var(--ba-radius-control);
overflow: hidden;
background: var(--ba-bg-color-soft);
button:focus,
button:active {
background-color: var(--ba-bg-color-overlay);
}
button:hover {
background-color: var(--el-color-info-light-7);
background-color: var(--el-color-primary-light-9);
}
.table-search-button-item {
height: 30px;
height: 32px;
width: 34px;
border: none;
border-radius: 0;
}
@@ -219,7 +228,7 @@ const onChangeShowColumn = (value: string | number | boolean, field: string) =>
margin: 0;
}
.right-border {
border-right: 1px solid var(--el-border-color);
border-right: 1px solid var(--ba-border-color-soft);
}
}
@@ -240,4 +249,19 @@ html.dark {
}
}
}
@media screen and (max-width: 768px) {
.table-header {
flex-wrap: wrap;
align-items: stretch;
padding: 12px;
}
.table-search {
width: 100%;
margin-left: 0;
.quick-search {
width: 100%;
}
}
}
</style>

27
web/src/components/table/index.vue
View File

@@ -230,17 +230,42 @@ defineExpose({
</script>
<style scoped lang="scss">
.ba-data-table {
border-radius: 0 0 var(--ba-radius-panel) var(--ba-radius-panel);
overflow: hidden;
}
.ba-data-table :deep(.table-header-cell) .cell {
color: var(--el-text-color-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
}
.ba-data-table :deep(.cell) {
line-height: 1.45;
}
.ba-data-table :deep(.el-table__empty-text) {
padding: 18px 0;
color: var(--el-text-color-secondary);
font-weight: 500;
}
.table-pagination {
box-sizing: border-box;
width: 100%;
max-width: 100%;
background-color: var(--ba-bg-color-overlay);
padding: 13px 15px;
padding: 14px 16px;
border: 1px solid var(--ba-border-color-soft);
border-top: none;
border-radius: 0 0 var(--ba-radius-panel) var(--ba-radius-panel);
display: flex;
justify-content: flex-end;
}
@media screen and (max-width: 768px) {
.table-pagination {
justify-content: center;
padding: 12px;
}
}
</style>