148 lines
3.2 KiB
Vue
148 lines
3.2 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
list: {
|
|
default() {
|
|
return [];
|
|
},
|
|
},
|
|
noDataText: {
|
|
default: "نتیجهای یافت نشد!",
|
|
},
|
|
noDataIcon: {
|
|
default: "/img/haditha/no-data.png",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="library-list-contianer">
|
|
<div class="page-header flex items-center">
|
|
<span class="title">کتابخانه</span>
|
|
<NuxtImg
|
|
fit="auto"
|
|
quality="80"
|
|
placeholder
|
|
src="/img/haditha/haditha-title.svg"
|
|
/>
|
|
</div>
|
|
|
|
<div class="library-list grid grid-cols-5 gap-x-28 gap-y-12">
|
|
<UCard
|
|
v-if="props.list.length"
|
|
v-for="(item, index) in props.list"
|
|
:key="index"
|
|
variant="solid"
|
|
:ui="{
|
|
root: 'ring ring-[white] divide-y divide-[var(--ui-border)] rounded-0 shadow-none bg-transparent library-list-item',
|
|
header: 'header',
|
|
body: 'sm:p-0 p-0 bg-transparent',
|
|
footer: 'footer',
|
|
}"
|
|
>
|
|
<!-- <template #header></template> -->
|
|
|
|
<ULink
|
|
:to="{
|
|
name:'hadithaLibraryShow',
|
|
params:{
|
|
id:1,
|
|
slug:'اصول کافی-جلد 1'
|
|
}
|
|
}"
|
|
color="neutral"
|
|
variant="outline"
|
|
:ui="{
|
|
leadingIcon: 'text-(--ui-primary)',
|
|
}"
|
|
@click=""
|
|
>
|
|
<NuxtImg
|
|
fit="auto"
|
|
quality="80"
|
|
placeholder
|
|
src="/img/haditha/sample-bgi.svg"
|
|
/>
|
|
<p class="title">اصول کافی</p>
|
|
<p class="version">جلد 1</p>
|
|
</ULink>
|
|
<!-- <template #footer> </template> -->
|
|
</UCard>
|
|
|
|
<no-data
|
|
class="h-full w-full flex flex-col justify-center items-center"
|
|
v-else
|
|
>
|
|
<NuxtImg fit="auto" quality="80" placeholder :src="props.noDataIcon" />
|
|
<p class="no-data-text">{{ props.noDataText }}</p>
|
|
</no-data>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.library-list-contianer {
|
|
margin-top: 10em;
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin: 0 1em;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
|
|
.page-header {
|
|
margin-bottom: 2em;
|
|
.title {
|
|
margin-left: 0.4em;
|
|
font-family: IRANSansX;
|
|
font-weight: 300;
|
|
font-size: 24px;
|
|
line-height: 36px;
|
|
letter-spacing: 0%;
|
|
text-align: center;
|
|
|
|
color: var(--ui-color-two);
|
|
}
|
|
}
|
|
|
|
.library-list {
|
|
/* padding: 1em 1.3em; */
|
|
height: calc(100dvh - 13.5em);
|
|
overflow-y: auto;
|
|
|
|
.library-list-item {
|
|
width: 140;
|
|
height: 200;
|
|
border-radius: 8px;
|
|
|
|
.title {
|
|
margin-top: 0.7em;
|
|
font-family: IRANSansX;
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
line-height: 19.5px;
|
|
letter-spacing: 0%;
|
|
text-align: right;
|
|
color: #444444;
|
|
}
|
|
|
|
.version {
|
|
font-family: IRANSansX;
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
line-height: 15px;
|
|
letter-spacing: 0%;
|
|
text-align: right;
|
|
color: #444444;
|
|
}
|
|
}
|
|
}
|
|
.no-data-text {
|
|
font-family: IRANSansX;
|
|
font-weight: 300;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
letter-spacing: 0%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|