feat: 调整站点资源对话框布局,优化输入框和选择框的列宽

This commit is contained in:
jxxghp
2026-08-09 13:01:39 +08:00
parent f21274ebca
commit e23d9a6f41
+15 -22
View File
@@ -251,7 +251,7 @@ onMounted(() => {
<VSheet class="site-resource-filter-panel"> <VSheet class="site-resource-filter-panel">
<div class="site-resource-filter-panel__inner"> <div class="site-resource-filter-panel__inner">
<VRow class="site-resource-filter-row"> <VRow class="site-resource-filter-row">
<VCol cols="12" md="3"> <VCol cols="12" md="5">
<VTextField <VTextField
v-model="keyword" v-model="keyword"
class="site-resource-filter-input" class="site-resource-filter-input"
@@ -266,7 +266,7 @@ onMounted(() => {
@keyup.enter="getResourceList" @keyup.enter="getResourceList"
/> />
</VCol> </VCol>
<VCol cols="12" md="4"> <VCol cols="12" md="5">
<VSelect <VSelect
v-model="selectCategory" v-model="selectCategory"
:items="categoryOptions" :items="categoryOptions"
@@ -286,7 +286,7 @@ onMounted(() => {
persistent-hint persistent-hint
/> />
</VCol> </VCol>
<VCol cols="12" md="3" class="d-flex align-center"> <VCol cols="12" md="2" class="d-flex align-center">
<VBtn <VBtn
color="primary" color="primary"
variant="flat" variant="flat"
@@ -301,15 +301,6 @@ onMounted(() => {
</VBtn> </VBtn>
</VCol> </VCol>
</VRow> </VRow>
<div v-if="resourceTotalItems > 0" class="d-flex justify-space-between align-center flex-wrap gap-2 mt-3">
<div class="text-body-2 text-medium-emphasis">
{{ resultSummaryText }}
</div>
<VChip size="small" color="primary" variant="tonal" class="site-resource-result-chip">
{{ resourceTotalItems }}
</VChip>
</div>
</div> </div>
</VSheet> </VSheet>
</template> </template>
@@ -693,8 +684,8 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.site-resource-dialog { .site-resource-dialog {
display: flex; display: flex;
flex-direction: column;
overflow: hidden; overflow: hidden;
flex-direction: column;
} }
.site-resource-filter-row { .site-resource-filter-row {
@@ -708,7 +699,8 @@ onMounted(() => {
} }
.site-resource-filter-panel__inner { .site-resource-filter-panel__inner {
padding: 0.75rem 0.85rem; padding-block: 0.75rem;
padding-inline: 0.85rem;
} }
.site-resource-filter-input :deep(.v-field) { .site-resource-filter-input :deep(.v-field) {
@@ -751,9 +743,9 @@ onMounted(() => {
} }
.site-resource-content { .site-resource-content {
overflow: hidden;
flex: 1 1 auto; flex: 1 1 auto;
min-block-size: 0; min-block-size: 0;
overflow: hidden;
} }
.site-resource-table { .site-resource-table {
@@ -781,8 +773,8 @@ onMounted(() => {
} }
.site-resource-mobile { .site-resource-mobile {
overflow-y: auto;
block-size: 100%; block-size: 100%;
overflow-y: auto;
} }
.site-resource-mobile__list { .site-resource-mobile__list {
@@ -810,9 +802,9 @@ onMounted(() => {
.site-resource-card__summary { .site-resource-card__summary {
display: grid; display: grid;
align-items: center;
gap: 0.35rem; gap: 0.35rem;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(2.5rem, 0.62fr) minmax(2.5rem, 0.62fr); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(2.5rem, 0.62fr) minmax(2.5rem, 0.62fr);
align-items: center;
} }
.site-resource-card__stat { .site-resource-card__stat {
@@ -820,12 +812,12 @@ onMounted(() => {
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.22rem;
border-radius: 6px; border-radius: 6px;
background: rgba(var(--v-theme-on-surface), 0.05); background: rgba(var(--v-theme-on-surface), 0.05);
color: rgba(var(--v-theme-on-surface), 0.72); color: rgba(var(--v-theme-on-surface), 0.72);
font-size: 0.74rem; font-size: 0.74rem;
font-weight: 600; font-weight: 600;
gap: 0.22rem;
line-height: 1; line-height: 1;
min-block-size: 1.65rem; min-block-size: 1.65rem;
min-inline-size: 0; min-inline-size: 0;
@@ -863,21 +855,21 @@ onMounted(() => {
} }
.site-resource-card__chips { .site-resource-card__chips {
max-block-size: 4.75rem;
overflow: hidden; overflow: hidden;
max-block-size: 4.75rem;
} }
.site-resource-card__actions { .site-resource-card__actions {
display: grid; display: grid;
align-items: center;
gap: 0.45rem; gap: 0.45rem;
grid-template-columns: minmax(0, 1fr) 2.5rem 2.5rem; grid-template-columns: minmax(0, 1fr) 2.5rem 2.5rem;
align-items: center;
} }
.site-resource-card__download-btn { .site-resource-card__download-btn {
box-shadow: 0 6px 16px rgba(var(--v-theme-primary), 0.17);
min-block-size: 2.5rem; min-block-size: 2.5rem;
min-inline-size: 0; min-inline-size: 0;
box-shadow: 0 6px 16px rgba(var(--v-theme-primary), 0.17);
} }
.site-resource-card__download-btn :deep(.v-btn__content) { .site-resource-card__download-btn :deep(.v-btn__content) {
@@ -908,7 +900,8 @@ onMounted(() => {
} }
.site-resource-filter-panel__inner { .site-resource-filter-panel__inner {
padding: 0.7rem 0.75rem; padding-block: 0.7rem;
padding-inline: 0.75rem;
} }
.site-resource-mobile-search { .site-resource-mobile-search {