Skip to content

P
poc-fe
Commit 287eb221 authored by shirlyn.guo's avatar shirlyn.guo 🤡
Browse files
Options

chore: 卡片样式优化

parent 4304ccaf
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 68 deletions
src/app.vue
View file @ 287eb221
......@@ -48,20 +48,18 @@ useResizeObserver(rootContainer, (entries) => {
</script>
<template>
<n-dialog-provider>
<div ref="rootContainer" class="h-full w-full">
<MessageTipModal />
<div ref="rootContainer" class="h-full w-full">
<MessageTipModal />
<NConfigProvider
class="h-full w-full"
:locale="currentLocale"
:date-locale="currentDateLocale"
:theme-overrides="themeOverrides"
>
<RouterView v-slot="{ Component }">
<Component :is="Component" />
</RouterView>
</NConfigProvider>
</div>
</n-dialog-provider>
<NConfigProvider
class="h-full w-full"
:locale="currentLocale"
:date-locale="currentDateLocale"
:theme-overrides="themeOverrides"
>
<RouterView v-slot="{ Component }">
<Component :is="Component" />
</RouterView>
</NConfigProvider>
</div>
</template>
src/views/personal-space/personal-app/personal-app.vue
View file @ 287eb221
......@@ -196,7 +196,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
</script>
<template>
<div class="h-full min-w-[900px]">
<div class="h-full">
<div class="mb-[13px] flex justify-between">
<n-space vertical class="w-[118px]">
<n-select
......@@ -223,65 +223,72 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
</template>
</NInput>
</div>
<div ref="cardContentWrapRef" class="h-full w-full overflow-y-auto pb-[16px]" style="scrollbar-width: none">
<div ref="cardContentWrapRef" class="mb-[50px] h-full overflow-y-auto pb-[16px]" style="scrollbar-width: none">
<div class="flex justify-center">
<n-spin v-show="agentAppListLoading" size="large" />
</div>
<div v-show="!agentAppListLoading">
<div v-show="!agentAppListLoading" class="mt-[5px]">
<n-grid v-if="agentAppList.length" cols="l:3 xl:4" responsive="screen">
<n-grid-item v-for="item in agentAppList" :key="item.baseInfo.agentId" class="mb-[20px] mr-[15px]">
<n-card class="rounded-[10px]! max-w-[380px] shadow-[0_4px_10px_0px_rgba(103,103,103,.3)]">
<n-grid-item
v-for="agentAppItem in agentAppList"
:key="agentAppItem.baseInfo.agentId"
class="mb-[20px] mr-[15px]"
>
<div
class="rounded-[10px]! ml-[5px] max-w-[380px] px-[24px] pb-[19px] pt-[13px] shadow-[0_4px_10px_0px_rgba(103,103,103,.3)]"
>
<div
class="mt-[6px] flex cursor-pointer justify-between"
@click="handleEditPersonalApp(item.baseInfo.agentId)"
@click="handleEditPersonalApp(agentAppItem.baseInfo.agentId)"
>
<div class="mr-[20px] text-[14px]">
<div class="mb-[19px] mr-[15px] text-[14px]">
<n-popover trigger="hover">
<template #trigger>
<div class="h-[23px] max-w-[140px] cursor-pointer truncate font-medium text-[#333333]">
{{ item.baseInfo.agentTitle || '--' }}
<div
class="popover-trigger h-[23px] w-full max-w-[160px] cursor-pointer truncate font-medium text-[#333333]"
>
{{ agentAppItem.baseInfo.agentTitle || '--' }}
</div>
</template>
<span>{{ item.baseInfo.agentTitle || '--' }}</span>
<span>{{ agentAppItem.baseInfo.agentTitle || '--' }}</span>
</n-popover>
<div class="my-[18px] h-[44px] max-w-[180px] text-[#999999]">
<div class="agent-desc my-[18px] h-[44px] w-full max-w-[160px] text-[#999999]">
<n-ellipsis :line-clamp="2">
{{ item.baseInfo.agentDesc }}
{{ agentAppItem.baseInfo.agentDesc }}
</n-ellipsis>
</div>
<n-button
:color="item.baseInfo.agentPublishStatus === 'draft' ? '#CCCCCC' : '#000DFF'"
:color="agentAppItem.baseInfo.agentPublishStatus === 'draft' ? '#CCCCCC' : '#000DFF'"
class="h-[27px] w-[71px] rounded-[13px] border-[1px] text-[13px]"
ghost
round
>
{{
item.baseInfo.agentPublishStatus === 'draft'
agentAppItem.baseInfo.agentPublishStatus === 'draft'
? t('common_module.unpublished')
: t('common_module.published')
}}</n-button
>
</div>
<div class="h-[99px] w-[101px]">
<img :src="item.baseInfo.agentAvatar" class="h-[99px] min-w-[101px]" />
<img :src="agentAppItem.baseInfo.agentAvatar" class="h-[99px] min-w-[101px] rounded-[10px]" />
</div>
</div>
<template #footer>
<div>
<div class="flex justify-between">
<div class="text-[12px] text-[#999999]">
{{ t('personal_space_module.agent_module.agent_list_module.modified_time') }}
{{ formatDateTime(item.modifiedTime) }}
{{ formatDateTime(agentAppItem.modifiedTime) }}
</div>
<div class="flex">
<Star
v-show="item.baseInfo.agentPublishStatus !== 'draft'"
v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'"
theme="two-tone"
size="18"
:fill="item.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']"
:fill="agentAppItem.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']"
:stroke-width="2"
class="cursor-pointer transition-all delay-150 duration-300 ease-in-out"
@click="handleApplicationsCollect(item)"
@click="handleApplicationsCollect(agentAppItem)"
/>
<n-popover
placement="bottom-end"
......@@ -299,20 +306,20 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
/>
</template>
<div
v-show="item.baseInfo.agentPublishStatus !== 'draft'"
v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'"
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]"
@click="handleAnalysisPersonalApp(item)"
@click="handleAnalysisPersonalApp(agentAppItem)"
>
{{ t('common_module.data_table_module.analysis') }}
</div>
<div v-show="item.baseInfo.agentPublishStatus !== 'draft'">
<div v-show="item.isSale === 'Y'">
<div v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'">
<div v-show="agentAppItem.isSale === 'Y'">
<n-popconfirm
:show-icon="false"
class="w-[170px]"
:positive-text="t('common_module.confirm_btn_text')"
:negative-text="t('common_module.cancel_btn_text')"
@positive-click="handleChangeApplicationsSaleStatus(item)"
@positive-click="handleChangeApplicationsSaleStatus(agentAppItem)"
>
<template #trigger>
<div
......@@ -326,10 +333,10 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
}}
</n-popconfirm>
</div>
<div v-show="item.isSale === 'N'">
<div v-show="agentAppItem.isSale === 'N'">
<div
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]"
@click="handleChangeApplicationsSaleStatus(item)"
@click="handleChangeApplicationsSaleStatus(agentAppItem)"
>
{{ t('common_module.data_table_module.listing_applications') }}
</div>
......@@ -338,22 +345,22 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
<div
class="w-[96px] rounded-[5px] py-[4px] pl-[8px] text-[14px] text-[#F25744] hover:bg-[#f1f1f1]"
@click="handleDeletePersonalApp(item.baseInfo.agentId)"
@click="handleDeletePersonalApp(agentAppItem.baseInfo.agentId)"
>
{{ t('common_module.delete') }}
</div>
</n-popover>
</div>
</div>
</template>
</n-card>
</div>
</div>
</n-grid-item>
<div v-for="item in 4" v-show="agentAppListBottomLoadingMore" :key="item" class="w-[380px]">
<div v-for="number in 4" v-show="agentAppListBottomLoadingMore" :key="number" class="w-[380px]">
<n-skeleton text :repeat="12" />
</div>
</n-grid>
<div v-else>
<div class="flex h-[650px] w-[full] items-center justify-center">
<div class="flex h-[650px] w-full items-center justify-center">
<div class="flex flex-col items-center justify-center">
<img :src="emptyTableImage" alt="empty" class="mb-[20px] h-[68px] w-[68px]" />
<p class="mb-[14px] text-[14px] text-[#999999]">
......@@ -371,16 +378,16 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
</div>
</div>
</div>
</div>
<div
v-show="pagingInfo.pageNo === pagingInfo.totalPages && agentAppList.length !== 0"
class="mb-[50px] mt-[30px] flex justify-center text-center text-[14px] text-[#a9b4cc]"
>
<div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
<div class="mb-[8px] w-[80px]">
{{ t('personal_space_module.agent_module.agent_list_module.already_bottom') }}
<div
v-show="pagingInfo.pageNo === pagingInfo.totalPages && agentAppList.length !== 0"
class="mb-[50px] mt-[30px] flex justify-center text-center text-[14px] text-[#a9b4cc]"
>
<div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
<div class="mb-[8px] w-[80px]">
{{ t('personal_space_module.agent_module.agent_list_module.already_bottom') }}
</div>
<div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
</div>
<div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
</div>
</div>
<SaleApplicationsConfigurationModal
......@@ -392,19 +399,19 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
</template>
<style lang="scss" scoped>
:deep(.n-card) {
> .n-card__content {
&:first-child {
padding-top: 13px !important;
padding-bottom: 19px !important;
}
@media (width >= 1536px) and (width <= 1670px) {
.popover-trigger,
.agent-desc {
width: 100%;
max-width: 110px;
}
}
> .n-card__footer {
&:first-child {
padding-top: 13px !important;
padding-bottom: 19px !important;
}
@media (width <= 1370px) {
.popover-trigger,
.agent-desc {
width: 100%;
max-width: 120px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment