Gugongyu/vue-tickets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
GiveMePast
2026-08-05 13:46:42 +08:00
parent f081928187
commit 94e0c718e2
1 changed files with 84 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/ticket/TicketFilter.vue
View File

@@ -138,27 +138,82 @@ const setSort = (order) => {
<style scoped> <style scoped>
.filter-card { .filter-card {
border: none !important; border: none !important;
background: transparent; background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
--el-card-border-color: transparent;
--el-card-bg-color: transparent;
user-select: none; user-select: none;
} }
:deep(.el-input__inner) { user-select: text !important; }
.search-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; } :deep(.el-input__inner) {
.filter-main { flex: 1; display: flex; flex-direction: column; } user-select: text !important;
.input-group-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } }
.divider-wrapper { color: var(--text-muted); font-size: 16px; font-weight: 300; height: 32px; display: flex; align-items: center; margin-bottom: 18px; } .search-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
}
:deep(.el-form-item) { margin-bottom: 18px; } .filter-main {
:deep(.el-form-item__label) { color: var(--text-secondary); font-weight: 500; } flex: 1;
display: flex;
flex-direction: column;
}
.input-group-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.divider-wrapper {
color: var(--text-muted);
font-size: 16px;
font-weight: 300;
height: 32px;
display: flex;
align-items: center;
margin-bottom: 18px;
}
:deep(.el-form-item) {
margin-bottom: 18px;
}
:deep(.el-form-item__label) {
color: var(--text-secondary);
font-weight: 500;
}
.wide-select {
width: 180px;
}
.wide-select { width: 180px; }
.filter-main :deep(.el-input__wrapper), .filter-main :deep(.el-input__wrapper),
.filter-main :deep(.el-button) { border-radius: 20px !important; } .filter-main :deep(.el-button) {
:deep(.el-select-dropdown) { border-radius: 12px !important; overflow: hidden; } border-radius: 20px !important;
.filter-actions :deep(.el-button) { border-radius: 20px !important; } }
.filter-actions { display: flex; gap: 10px; margin-top: 4px; flex-shrink: 0; } :deep(.el-select-dropdown) {
border-radius: 12px !important;
overflow: hidden;
}
.filter-actions :deep(.el-button) {
border-radius: 20px !important;
}
.filter-actions {
display: flex;
gap: 10px;
margin-top: 4px;
flex-shrink: 0;
}
:deep(.el-select-group__title) { :deep(.el-select-group__title) {
background: var(--color-bg); background: var(--color-bg);
@@ -168,9 +223,21 @@ const setSort = (order) => {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.search-container { flex-direction: column; } .search-container {
.input-group-row { flex-direction: column; align-items: flex-start; } flex-direction: column;
.divider-wrapper { display: none; } }
.wide-select { width: 100%; }
.input-group-row {
flex-direction: column;
align-items: flex-start;
}
.divider-wrapper {
display: none;
}
.wide-select {
width: 100%;
}
} }
</style> </style>