126 lines
4.7 KiB
Vue
126 lines
4.7 KiB
Vue
<template>
|
|
<div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
|
|
<div
|
|
v-if="isLoading"
|
|
class="flex flex-1 flex-col justify-between bg-white p-6"
|
|
>
|
|
<div class="flex-1 relative">
|
|
<div class="flex border-b-2 border-indigo-500 pb-2">
|
|
<p class="text-sm font-medium text-indigo-600">
|
|
<a
|
|
href="javascript:void(0)"
|
|
@click="pageMove(pageTitle[0].id, '')"
|
|
>{{
|
|
pageTitle[0]?.title ?? pageTitle[0]?.title
|
|
}} </a
|
|
>
|
|
</p>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-6 h-6 text-indigo-500 absolute right-0 cursor-pointer"
|
|
@click="pageMove(pageTitle[0].id, '')"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 6v12m6-6H6"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<a
|
|
v-for="list in dataList"
|
|
:key="list.serial"
|
|
class="mt-2 block"
|
|
>
|
|
<p
|
|
class="mt-3 text-base text-gray-500 cursor-pointer"
|
|
@click="pageMove(pageTitle[0].id, list)"
|
|
>
|
|
{{
|
|
list.title.length >= 20
|
|
? list.title.substr(0, 20) + '...'
|
|
: list.title.substr(0, 20)
|
|
}}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex flex-1 flex-col justify-between bg-white p-6">
|
|
<div class="flex-1 relative">
|
|
<div class="flex pb-2 bg-sky-100 animate-pulse rounded-lg">
|
|
<p class="text-sm font-medium text-gray-600">
|
|
<a href="javascript:void(0)"> </a>
|
|
</p>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="hidden w-6 h-6 text-indigo-500 absolute right-0 cursor-pointer"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 6v12m6-6H6"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<a class="mt-2 block">
|
|
<p
|
|
class="mt-3 bg-slate-100 animate-pulse rounded-lg cursor-pointer w-3/4"
|
|
>
|
|
|
|
</p>
|
|
<p
|
|
class="mt-3 bg-slate-100 animate-pulse rounded-lg cursor-pointer w-full"
|
|
>
|
|
|
|
</p>
|
|
<p
|
|
class="mt-3 bg-slate-100 animate-pulse rounded-lg cursor-pointer w-2/3"
|
|
>
|
|
|
|
</p>
|
|
<p
|
|
class="mt-3 bg-slate-100 animate-pulse rounded-lg cursor-pointer w-3/4"
|
|
>
|
|
|
|
</p>
|
|
<p
|
|
class="mt-3 bg-slate-100 animate-pulse rounded-lg cursor-pointer w-3/4"
|
|
>
|
|
|
|
</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
dataList: { type: Object, required: true },
|
|
pageTitle: { type: Object, required: true },
|
|
isLoading: { type: Boolean, default: false },
|
|
});
|
|
|
|
const bordPage = ['preach', 'programme', 'youtube'];
|
|
|
|
function pageMove(pageName, detail) {
|
|
if (pageName === 'notice') {
|
|
navigateTo('/support/' + pageName);
|
|
} else if (bordPage.includes(pageName) == true) {
|
|
if (detail == '') {
|
|
navigateTo('/board/' + pageName + '/list');
|
|
} else {
|
|
navigateTo('/board/' + pageName + '/view/' + detail.cid);
|
|
}
|
|
}
|
|
}
|
|
</script>
|