Commit 53b2f90a authored by shirlyn.guo's avatar shirlyn.guo 🤡

chore: 模板tag修改

parent f8a8900e
......@@ -47,7 +47,7 @@ const templateClassify = [
{ value: TemplateType.FESTIVAL_HOTS_SPOTS, label: '節日熱點' },
]
watch(checkedClassifyValue, async () => {
watch(checkedClassifyValue, () => {
templateClassifyIsLoading.value = true
templateList.value = []
newTemplateList.value = []
......@@ -58,11 +58,12 @@ watch(checkedClassifyValue, async () => {
totalRows: 0,
}
columnHeights.value = Array(6).fill(0)
await getTemplateList(true)
getTemplateList(true)
})
watchEffect(() => {
if (arrivedState.bottom) {
if (arrivedState.bottom && !templateBottomIsLoading.value) {
if (pagingInfo.value.pageNo < pagingInfo.value.totalPages) {
templateBottomIsLoading.value = true
pagingInfo.value.pageNo += 1
......@@ -99,6 +100,7 @@ async function getTemplateList(refresh = false) {
.finally(() => {
templateClassifyIsLoading.value = false
templateBottomIsLoading.value = false
arrivedState.bottom = false
})
}
async function calculatePositions(templates: any[]) {
......@@ -159,19 +161,19 @@ function handleToCreation(template: DigitalTemplate) {
}
</script>
<template>
<div class="mx-auto mt-[16px] overscroll-contain rounded-t-[16px] bg-white">
<div class="sticky top-0 z-10 rounded-t-[16px] bg-white px-[24px] pb-[16px] pt-[24px]">
<div class="mx-auto mt-[16px] min-h-[900px] overscroll-contain rounded-t-[16px] bg-white">
<div class="sticky top-[-1px] z-10 rounded-t-[16px] bg-white px-[24px] pb-[16px] pt-[24px]">
<div class="mb-[24px] cursor-default text-[18px] text-[#000]">推薦模闆</div>
<div class="pb-[16px]">
<n-radio-group v-model:value="checkedClassifyValue">
<n-radio-button
v-for="classify in templateClassify"
:key="classify.value"
class="!h-[28px] !px-[12px] !leading-[28px] hover:text-[#5b647a]"
:value="classify.value"
:label="classify.label"
/>
</n-radio-group>
<button
v-for="classify in templateClassify"
:key="classify.value"
:class="['classify-radio-button', { active: checkedClassifyValue === classify.value }]"
class="mr-[4px] h-[28px] cursor-pointer rounded-full bg-transparent px-[12px] transition-colors duration-300 hover:text-[#5b647a]"
@click="checkedClassifyValue = classify.value"
>
{{ classify.label }}
</button>
</div>
</div>
<div
......@@ -223,7 +225,7 @@ function handleToCreation(template: DigitalTemplate) {
</div>
<div
v-show="pagingInfo.pageNo === pagingInfo.totalPages || pagingInfo.totalPages === 0"
class="mt-[20px] flex justify-center text-center text-[14px] text-[#a9b4cc]"
class="mb-[50px] mt-[20px] 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]">已經到底啦</div>
......@@ -257,35 +259,8 @@ function handleToCreation(template: DigitalTemplate) {
}
}
.n-radio-group {
--n-button-box-shadow-focus: none !important;
.n-radio-button {
border: none;
border-radius: 15px !important;
&:first-child {
border-left: none !important;
}
&:last-child {
border-right: none !important;
}
&.n-radio-button--checked {
color: #091221 !important;
background-color: #edeef7 !important;
border: none !important;
}
&:not(.n-radio-button--disabled):hover:not(.n-radio-button--checked) {
color: #5b647a !important;
}
}
:deep(.n-radio-group__splitor) {
width: 0 !important;
background-color: #fff !important;
}
.classify-radio-button.active {
color: #091221;
background-color: #edeef7;
}
</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