Skip to content

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

chore: 应用广场添加滚动条

parent 7bebc816
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 111 deletions
src/views/applications-square/applications-square.vue
View file @ 44ca18b9
......@@ -8,7 +8,7 @@ import {
fetchGetMallCategoryList,
} from '@/apis/application-square'
import type { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
import { PersonalAppConfigState } from '@/store/types/personal-app-config'
import type { PersonalAppConfigState } from '@/store/types/personal-app-config'
import { useScroll } from '@vueuse/core'
import { router } from '@/router'
import searchEmptyImage from '@/assets/images/search-empty.png'
......@@ -105,7 +105,7 @@ function handleGetAgentApplicationList(update = false, search = false) {
})
}
function handleCollectOrCancelAgentApplication(id: number | undefined) {
function handleCollectOrCancelAgentApplication(id: number) {
fetchCollectOrCancelAgentApplication(id).then(() => {
handleGetAgentApplicationList(true)
})
......@@ -129,7 +129,11 @@ function handleAddAgentApplications() {
</script>
<template>
<div ref="cardContentWrapRef" class="flex h-full flex-col overflow-y-auto py-6" style="scrollbar-width: none">
<div
ref="cardContentWrapRef"
class="applications-square-content flex h-full flex-col overflow-y-auto py-6"
style="scrollbar-width: none"
>
<div class="mb-[19px] flex items-center justify-between">
<div class="flex flex-col">
<div class="flex items-center">
......@@ -169,135 +173,143 @@ function handleAddAgentApplications() {
<n-collapse-transition :show="isShowCarousel">
<div>
<n-carousel autoplay class="h-[280px] w-full rounded-[10px] object-cover 2xl:object-fill">
<img class="h-[280px] w-full cursor-pointer" src="@/assets/images/application-square-carousel.png" />
<img class="h-[280px] w-full cursor-pointer" src="@/assets/images/application-square-carousel.png" />
<img
class="h-[280px] w-full cursor-pointer object-cover"
src="@/assets/images/application-square-carousel.png"
/>
<img
class="h-[280px] w-full cursor-pointer object-cover"
src="@/assets/images/application-square-carousel.png"
/>
</n-carousel>
</div>
<div class="h-[20px] bg-[#f3f6f9]"></div>
</n-collapse-transition>
<div>
<div class="sticky top-[-30px] z-10">
<div class="flex items-center rounded-[5px] bg-white py-[9px] pl-[9px]">
<button
v-for="classify in mallCategoryList"
:key="classify"
:focusable="false"
:class="['classify-radio-button', { active: checkedClassifyValue === classify }]"
class="mr-[4px] w-[86px] cursor-pointer rounded-[5px] border-[1px] border-[#fff] bg-transparent py-[5px] transition-colors duration-300 hover:bg-[#eeefff]"
@click="checkedClassifyValue = classify"
>
{{ classify }}
</button>
</div>
</div>
<div class="mt-[14px] min-h-[800px]">
<div class="flex justify-center">
<n-spin v-show="agentApplicationClassifyIsLoading" size="large" />
</div>
<n-grid
v-show="!agentApplicationClassifyIsLoading && agentApplicationList.length !== 0"
cols="l:3 xl:4"
responsive="screen"
<div class="sticky top-[-30px] z-10">
<div class="flex items-center rounded-[5px] bg-white py-[9px] pl-[9px]">
<button
v-for="classify in mallCategoryList"
:key="classify"
:focusable="false"
:class="['classify-radio-button', { active: checkedClassifyValue === classify }]"
class="mr-[4px] w-[86px] cursor-pointer rounded-[5px] border-[1px] border-[#fff] bg-transparent py-[5px] transition-colors duration-300 hover:bg-[#eeefff]"
@click="checkedClassifyValue = classify"
>
<n-grid-item
v-for="agentApplicationItem in agentApplicationList"
:key="agentApplicationItem.id"
class="mb-[20px] mr-[15px]"
{{ classify }}
</button>
</div>
</div>
<n-scrollbar style="max-height: 920px">
<div>
<div class="mt-[14px] min-h-[800px]">
<div class="flex justify-center">
<n-spin v-show="agentApplicationClassifyIsLoading" size="large" />
</div>
<n-grid
v-show="!agentApplicationClassifyIsLoading && agentApplicationList.length !== 0"
cols="l:3 xl:4"
responsive="screen"
>
<div
class="rounded-[10px]! bg-[#fff] px-[24px] pb-[20px] pt-[20px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]"
<n-grid-item
v-for="agentApplicationItem in agentApplicationList"
:key="agentApplicationItem.id"
class="mb-[20px] mr-[15px]"
>
<div class="flex cursor-pointer justify-between">
<div class="popover-trigger mr-[22px] text-[14px]">
<div class="agent-desc h-[23px] w-full max-w-[160px] font-semibold">
<n-ellipsis style="max-width: 180px" :line-clamp="1">
{{ agentApplicationItem.baseInfo.agentTitle }}
<div
class="rounded-[10px]! max-w-[392px] bg-[#fff] px-[24px] pb-[20px] pt-[20px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]"
>
<div class="flex cursor-pointer justify-between">
<div class="popover-trigger mr-[22px] text-[14px]">
<div class="agent-desc h-[23px] w-full max-w-[160px] font-semibold">
<n-ellipsis style="max-width: 180px" :line-clamp="1">
{{ agentApplicationItem.baseInfo.agentTitle }}
<template #tooltip>
<div style="max-width: 230px">
{{ agentApplicationItem.baseInfo.agentTitle }}
</div>
</template>
</n-ellipsis>
</div>
<template #tooltip>
<div style="max-width: 230px">
{{ agentApplicationItem.baseInfo.agentTitle }}
</div>
</template>
</n-ellipsis>
</div>
<div class="agent-desc mb-[15px] mt-[18px] h-[44px] w-full max-w-[228px] text-[#999999]">
<n-ellipsis style="max-width: 180px" :line-clamp="2">
{{ agentApplicationItem.baseInfo.agentDesc }}
<template #tooltip>
<div style="max-width: 230px">
{{ agentApplicationItem.baseInfo.agentDesc }}
</div>
</template>
</n-ellipsis>
<div class="agent-desc mb-[15px] mt-[18px] h-[44px] w-full max-w-[228px] text-[#999999]">
<n-ellipsis style="max-width: 180px" :line-clamp="2">
{{ agentApplicationItem.baseInfo.agentDesc }}
<template #tooltip>
<div style="max-width: 230px">
{{ agentApplicationItem.baseInfo.agentDesc }}
</div>
</template>
</n-ellipsis>
</div>
</div>
<div class="h-[84px] w-[84px]">
<img :src="agentApplicationItem.baseInfo.agentAvatar" class="h-[84px] w-[84px] rounded-[10px]" />
</div>
</div>
<div class="h-[84px] w-[84px]">
<img :src="agentApplicationItem.baseInfo.agentAvatar" class="h-[84px] w-[84px] rounded-[10px]" />
</div>
</div>
<n-divider class="mt-0! mb-[14px]!" dashed />
<div>
<div class="flex justify-between">
<div class="flex">
<div class="flex">
<Star
theme="two-tone"
size="18"
:fill="agentApplicationItem.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']"
:stroke-width="2"
class="cursor-pointer transition-all delay-150 duration-300 ease-in-out"
@click="handleCollectOrCancelAgentApplication(agentApplicationItem.id)"
/>
<span class="ml-[6px] text-[12px] text-[#333]">{{ agentApplicationItem.collectNumber }}</span>
</div>
<n-divider class="mt-0! mb-[14px]!" dashed />
<div>
<div class="flex justify-between">
<div class="flex">
<PreviewOpen
theme="outline"
size="18"
fill="#333"
:stroke-width="2"
class="ml-[12px] cursor-pointer"
/>
<span class="ml-[6px] text-[12px] text-[#333]">{{ agentApplicationItem.clickNumber }}</span>
<div class="flex">
<Star
theme="two-tone"
size="18"
:fill="agentApplicationItem.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']"
:stroke-width="3"
class="cursor-pointer transition-all delay-150 duration-300 ease-in-out"
@click="handleCollectOrCancelAgentApplication(agentApplicationItem.id!)"
/>
<span class="ml-[6px] text-[12px] text-[#333]">{{ agentApplicationItem.collectNumber }}</span>
</div>
<div class="flex">
<PreviewOpen
theme="outline"
size="18"
fill="#333"
:stroke-width="3"
class="ml-[12px] cursor-pointer"
/>
<span class="ml-[6px] text-[12px] text-[#333]">{{ agentApplicationItem.clickNumber }}</span>
</div>
</div>
<button
class="hover:bg-theme-color text-theme-color border-[#eeefff]! rounded-[5px] border-[1px] bg-[#eeefff] bg-transparent px-[16px] py-[5px] text-[14px] transition-colors duration-300 hover:text-[#fff]"
@click="handleToUseAgentApplication(agentApplicationItem.baseInfo.agentId)"
>
{{ t('applications_square_module.immediate_use_btn_text') }}
</button>
</div>
<button
class="hover:bg-theme-color text-theme-color border-[#eeefff]! rounded-[5px] border-[1px] bg-[#eeefff] bg-transparent px-[16px] py-[5px] text-[14px] transition-colors duration-300 hover:text-[#fff]"
@click="handleToUseAgentApplication(agentApplicationItem.baseInfo.agentId)"
>
{{ t('applications_square_module.immediate_use_btn_text') }}
</button>
</div>
</div>
</div>
</n-grid-item>
<n-grid-item v-for="item in 4" :key="item" class="mr-[15px]">
<div v-show="agentApplicationBottomIsLoading && pagingInfo.pageNo !== pagingInfo.totalPages">
<n-skeleton text :repeat="6" /> <n-skeleton text style="width: 60%" />
</div>
</n-grid-item>
</n-grid>
<div v-show="agentApplicationList.length === 0">
<div class="flex h-[500px] w-full items-center justify-center">
<div class="flex flex-col items-center justify-center">
<img :src="emptyTableImage" class="mb-[20px] h-[68px] w-[68px]" />
<p class="mb-[14px] text-[14px] text-[#999999]">{{ emptyTableText }}</p>
</n-grid-item>
<n-grid-item v-for="item in 4" :key="item" class="mr-[15px]">
<div v-show="agentApplicationBottomIsLoading && pagingInfo.pageNo !== pagingInfo.totalPages">
<n-skeleton text :repeat="6" /> <n-skeleton text style="width: 60%" />
</div>
</n-grid-item>
</n-grid>
<div v-show="agentApplicationList.length === 0">
<div class="flex h-[500px] w-full items-center justify-center">
<div class="flex flex-col items-center justify-center">
<img :src="emptyTableImage" class="mb-[20px] h-[68px] w-[68px]" />
<p class="mb-[14px] text-[14px] text-[#999999]">{{ emptyTableText }}</p>
</div>
</div>
</div>
</div>
<div
v-show="agentApplicationList.length > 9 && pagingInfo.pageNo === pagingInfo.totalPages"
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="agentApplicationList.length > 9 && pagingInfo.pageNo === pagingInfo.totalPages"
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>
</div>
</n-scrollbar>
</div>
</div>
</template>
......@@ -309,6 +321,11 @@ function handleAddAgentApplications() {
border: 1px #000dff solid;
}
.cardContentWrap {
scrollbar-width: none;
-ms-overflow-style: none;
}
@media (width >= 1536px) and (width <= 1670px) {
.popover-trigger,
.agent-desc {
......
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