126 lines
3.6 KiB
Vue
126 lines
3.6 KiB
Vue
<script setup>
|
|
const state = reactive({
|
|
cards: [
|
|
{
|
|
img: "/img/section-four_card-one.png",
|
|
title: "تشخیص موجودیت",
|
|
description:
|
|
"استخراج و شناسایی موجودیت‌های مرتبط از متن حدیثی (مانند افراد، مکان‌ها، مفاهیم کلیدی یا موضوعات)",
|
|
},
|
|
{
|
|
img: "/img/section-four_card-two.png",
|
|
title: "تشخیص موجودیت",
|
|
description: "تجمیع نکات کلیدی از احادیث و شروح مختلف",
|
|
},
|
|
{
|
|
img: "/img/section-four_card-three.png",
|
|
title: "تشخیص موجودیت",
|
|
description:
|
|
"امکان تعامل مستقیم با سامانه برای پاسخ به سوالات یا دریافت توضیحات از مفاهیم حدیثی",
|
|
},
|
|
{
|
|
img: "/img/section-four_card-four.png",
|
|
title: "تشخیص کلمات کلیدی",
|
|
description:
|
|
"با تحلیل دقیق متن، کلمات و عبارات کلیدی هر حدیث را شناسایی و ارائه می‌کند",
|
|
},
|
|
{
|
|
img: "/img/section-four_card-five.png",
|
|
title: "دسته‌بندی هوشمند",
|
|
description:
|
|
"احادیث را بر اساس موضوعات، مفاهیم یا کلیدواژه‌های اصلی به‌صورت خودکار دسته‌بندی می‌کند",
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
<template>
|
|
<section class="section-four flex">
|
|
<UContainer
|
|
class="section-container mx-auto max-w-[var(--ui-container-two)] sm:px-6 lg:px-4"
|
|
>
|
|
<div class="header flex items-center justify-center mb-8 ">
|
|
<span class="title me-1">امکانات </span>
|
|
|
|
<NuxtImg
|
|
width="49"
|
|
height="18"
|
|
fit="auto"
|
|
quality="80"
|
|
placeholder
|
|
src="/img/haditha-title.svg"
|
|
class="me-2"
|
|
/>
|
|
</div>
|
|
|
|
<!-- grid-cols-1 md:grid-cols-2 lg:grid-cols-3 -->
|
|
<div class="content flex justify-center flex-wrap items-start p-4 space-y-3">
|
|
<UCard
|
|
:ui="{
|
|
root: 'ring ring-[white] shadow-none bg-transparent card-item flex flex-col items-center basis-[360px] p-4',
|
|
header: 'header border-0 px-0 pb-2 pt-0',
|
|
body: 'sm:p-0 p-0 border-0 bg-transparent body',
|
|
footer: 'footer',
|
|
}"
|
|
v-for="(item, index) in state.cards"
|
|
:key="index"
|
|
>
|
|
<template #header>
|
|
<NuxtImg
|
|
fit="auto"
|
|
quality="100"
|
|
:src="item.img"
|
|
class="me-2"
|
|
/>
|
|
</template>
|
|
|
|
<p class="mb-2 title">{{ item.title }}</p>
|
|
<p class="description">
|
|
{{ item.description }}
|
|
</p>
|
|
<!-- <template #footer> </template> -->
|
|
</UCard>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
</template>
|
|
<style scoped>
|
|
.section-four {
|
|
padding: 7.5em 0; /* 120px */
|
|
|
|
.header {
|
|
.title {
|
|
font-family: IRANSansX;
|
|
font-weight: 300;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
letter-spacing: 0%;
|
|
text-align: center;
|
|
|
|
color: #626b84;
|
|
}
|
|
}
|
|
.card-item {
|
|
.body {
|
|
border: none;
|
|
|
|
.title {
|
|
font-family: IRANSansX;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
letter-spacing: 0%;
|
|
text-align: center;
|
|
}
|
|
.description {
|
|
font-family: IRANSansX;
|
|
font-weight: 300;
|
|
font-size: 14px;
|
|
line-height: 21px;
|
|
letter-spacing: 0%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|