mohadese namavar
94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
<template>
|
|
<NuxtLayout :name="device" :config="config">
|
|
<main class="panel-comments">
|
|
<ul>
|
|
<li v-for="(comment, i) in comments" :key="i">
|
|
<PanelCommentItem :data="comment" />
|
|
</li>
|
|
</ul>
|
|
<AppPagination :pages="pages" />
|
|
</main>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from '../../initialize/panel'
|
|
provide('init', init())
|
|
const { device, t } = inject('service')
|
|
|
|
const config = reactive({
|
|
desktop: { toolbar: true },
|
|
mobile: { header: { back: true, title: t('myComments') } },
|
|
})
|
|
|
|
const comments = ref([])
|
|
const pages = ref(1)
|
|
|
|
const { meta, query } = useRoute()
|
|
const { page = 1 } = query
|
|
|
|
const { status, data, error } = await useFetch(`/api/comments/${page}`, {
|
|
headers: {
|
|
Authorization: useCookie('token')
|
|
}
|
|
})
|
|
|
|
if (status.value == 'success') {
|
|
comments.value = data.value
|
|
pages.value = data.value.pages
|
|
|
|
} else throw createError(error.value)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.panel-comments {
|
|
@apply w-full container max-lg:px-6 pb-20 pt-[1.9rem] lg:py-[6.3rem];
|
|
|
|
ul {
|
|
@apply flex flex-col justify-center mx-auto gap-6 lg:gap-[2.6rem];
|
|
|
|
li {
|
|
@apply border-b pb-6 lg:pb-10 border-[#B9B9B9] last:border-none;
|
|
}
|
|
}
|
|
}
|
|
|
|
body:has(.panel-comments) {
|
|
.p-dialog-mask {
|
|
@apply z-10 #{!important};
|
|
|
|
.p-dialog {
|
|
@apply m-0 max-lg:w-full #{!important};
|
|
}
|
|
|
|
.p-dialog-content {
|
|
@apply lg:container w-screen lg:w-max flex lg:px-4 #{!important};
|
|
}
|
|
}
|
|
|
|
.p-menu {
|
|
@apply w-[10.8rem];
|
|
}
|
|
|
|
.p-menuitem {
|
|
@apply text-base;
|
|
|
|
&:first-child span {
|
|
@apply text-[#4C4C4C] #{!important};
|
|
}
|
|
|
|
&:last-child span {
|
|
@apply text-[#AD3434] #{!important};
|
|
}
|
|
}
|
|
|
|
.p-menuitem-content a {
|
|
@apply rtl px-5 #{!important};
|
|
|
|
.p-menuitem-icon {
|
|
@apply mr-0 ml-3 #{!important};
|
|
}
|
|
}
|
|
}
|
|
</style>
|