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