fix: 修改列表页标题过长的展示问题

This commit is contained in:
奔跑的面条 2022-06-01 23:08:36 +08:00
parent fa6ef30cd8
commit fa678e1089
2 changed files with 53 additions and 45 deletions

View File

@ -26,56 +26,58 @@
</div> </div>
</div> </div>
<template #action> <template #action>
<n-space class="list-footer" justify="space-between"> <div class="go-flex-items-center list-footer" justify="space-between">
<n-text> <n-text class="go-ellipsis-1">
{{ cardData.title || '' }} {{ cardData.title || '' }}
</n-text> </n-text>
<!-- 工具 --> <!-- 工具 -->
<n-space> <div class="go-flex-items-center list-footer-ri">
<n-text> <n-space>
<n-badge <n-text>
class="animation-twinkle" <n-badge
dot class="animation-twinkle"
:color="cardData.release ? '#34c749' : '#fcbc40'" dot
></n-badge> :color="cardData.release ? '#34c749' : '#fcbc40'"
{{ ></n-badge>
cardData.release {{
? $t('project.release') cardData.release
: $t('project.unreleased') ? $t('project.release')
}} : $t('project.unreleased')
</n-text> }}
</n-text>
<template v-for="item in fnBtnList" :key="item.key"> <template v-for="item in fnBtnList" :key="item.key">
<template v-if="item.key === 'select'"> <template v-if="item.key === 'select'">
<n-dropdown <n-dropdown
trigger="hover" trigger="hover"
placement="bottom" placement="bottom"
:options="selectOptions" :options="selectOptions"
:show-arrow="true" :show-arrow="true"
@select="handleSelect" @select="handleSelect"
> >
<n-button size="small"> <n-button size="small">
<template #icon> <template #icon>
<component :is="item.icon"></component> <component :is="item.icon"></component>
</template> </template>
</n-button> </n-button>
</n-dropdown> </n-dropdown>
</template>
<n-tooltip v-else placement="bottom" trigger="hover">
<template #trigger>
<n-button size="small" @click="handleSelect(item.key)">
<template #icon>
<component :is="item.icon"></component>
</template>
</n-button>
</template> </template>
<component :is="item.label"></component>
</n-tooltip> <n-tooltip v-else placement="bottom" trigger="hover">
</template> <template #trigger>
</n-space> <n-button size="small" @click="handleSelect(item.key)">
<template #icon>
<component :is="item.icon"></component>
</template>
</n-button>
</template>
<component :is="item.label"></component>
</n-tooltip>
</template>
</n-space>
</div>
<!-- end --> <!-- end -->
</n-space> </div>
</template> </template>
</n-card> </n-card>
</div> </div>
@ -227,7 +229,13 @@ $contentHeight: 180px;
} }
} }
.list-footer { .list-footer {
flex-wrap: nowrap;
justify-content: space-between;
line-height: 30px; line-height: 30px;
&-ri {
justify-content: flex-end;
min-width: 160px;
}
} }
} }
</style> </style>

View File

@ -129,7 +129,7 @@ $contentWidth: calc(82vw);
@include go('modal-box') { @include go('modal-box') {
width: $contentWidth; width: $contentWidth;
.list-content { .list-content {
margin-top: 20px; margin-top: 28px;
border-radius: $--border-radius-base; border-radius: $--border-radius-base;
overflow: hidden; overflow: hidden;
@include background-image('background-point'); @include background-image('background-point');