46 lines
1.7 KiB
Vue
46 lines
1.7 KiB
Vue
<template>
|
|
<section id="services" class="px-6 py-28 md:px-10 md:py-40">
|
|
<div class="mx-auto max-w-[1500px]">
|
|
<SectionTag index="۰۲" :title="data.tag" :right="`${String(data.items.length).padStart(2, '0')} قابلیت`" />
|
|
<ul class="mt-16 divide-y divide-white/[0.07] border-y border-white/[0.07]">
|
|
<li
|
|
v-for="(s, i) in data.items"
|
|
:key="s.n"
|
|
class="group cursor-pointer py-8 md:py-10"
|
|
@click="open = open === i ? -1 : i"
|
|
>
|
|
<div class="flex items-start justify-between gap-6">
|
|
<div class="flex flex-1 flex-col gap-3 md:flex-row md:items-baseline md:gap-10">
|
|
<span class="font-mono text-[11px] tracking-[0.2em] text-ash">{{ s.n }}</span>
|
|
<h3 class="font-display text-2xl font-bold tracking-[-0.02em] transition-colors md:text-4xl group-hover:text-volt">
|
|
{{ s.title }}
|
|
</h3>
|
|
</div>
|
|
<span class="font-mono text-volt">{{ open === i ? "—" : "+" }}</span>
|
|
</div>
|
|
<div v-if="open === i" class="mt-6 max-w-3xl pe-0 md:pe-16 animate-fade-up">
|
|
<p class="text-sm leading-relaxed text-ash md:text-base">{{ s.desc }}</p>
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
<span
|
|
v-for="t in s.tags"
|
|
:key="t"
|
|
class="border border-white/10 px-3 py-1 font-mono text-[10px] tracking-[0.12em] text-ash"
|
|
>{{ t }}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
data: {
|
|
tag: string;
|
|
items: Array<{ n: string; title: string; desc: string; tags: string[] }>;
|
|
};
|
|
}>();
|
|
const open = ref(0);
|
|
</script>
|