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