优化 TorrentRowListView 组件的样式,调整过滤项显示和内边距

This commit is contained in:
jxxghp
2025-03-31 16:04:13 +08:00
parent 6b4b44aec6
commit 3e36cb6e31
+20 -23
View File
@@ -345,7 +345,7 @@ function toggleFilterMenu(key: string) {
<div class="search-header d-none d-sm-block"> <div class="search-header d-none d-sm-block">
<!-- PC端页面头部和筛选栏 --> <!-- PC端页面头部和筛选栏 -->
<div class="view-header mb-3"> <div class="view-header mb-3">
<div class="d-flex align-center flex-wrap"> <div class="d-flex align-center flex-wrap pa-3">
<VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify"> <VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
{{ dataList.length }} 个资源 {{ dataList.length }} 个资源
</VChip> </VChip>
@@ -430,26 +430,25 @@ function toggleFilterMenu(key: string) {
</VBtn> </VBtn>
</div> </div>
</div> </div>
</div> <!-- 已选择的过滤项显示 -->
<div v-if="getFilterCount > 0" class="selected-filters">
<!-- 已选择的过滤项显示 --> <div class="d-flex flex-wrap align-center">
<div v-if="getFilterCount > 0" class="selected-filters mb-3"> <template v-for="(values, key) in getSelectedFilters" :key="key">
<div class="d-flex flex-wrap align-center"> <VChip
<template v-for="(values, key) in getSelectedFilters" :key="key"> v-for="(value, index) in values"
<VChip :key="`${key}-${index}`"
v-for="(value, index) in values" color="primary"
:key="`${key}-${index}`" size="small"
color="primary" closable
size="small" variant="elevated"
closable class="me-1 mb-1 mt-1 filter-tag"
variant="elevated" @click:close="removeFilter(key, value)"
class="me-1 mb-1 mt-1 filter-tag" >
@click:close="removeFilter(key, value)" <VIcon size="small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
> <strong>{{ filterTitles[key] }}:</strong> {{ value }}
<VIcon size="small" :icon="getFilterIcon(key)" class="me-1"></VIcon> </VChip>
<strong>{{ filterTitles[key] }}:</strong> {{ value }} </template>
</VChip> </div>
</template>
</div> </div>
</div> </div>
</div> </div>
@@ -677,9 +676,7 @@ function toggleFilterMenu(key: string) {
.selected-filters { .selected-filters {
background-color: rgba(var(--v-theme-surface-variant), 0.08); background-color: rgba(var(--v-theme-surface-variant), 0.08);
border-radius: 8px;
padding: 8px 12px; padding: 8px 12px;
margin-bottom: 16px;
overflow: hidden; overflow: hidden;
} }