marzban-dev
121 lines
5.1 KiB
Vue
121 lines
5.1 KiB
Vue
<script setup lang="ts">
|
|
|
|
// import
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
import type { SwiperClass } from "swiper/react";
|
|
import useHomeData from "~/composables/api/home/useHomeData";
|
|
|
|
// state
|
|
|
|
const { data: homeData } = useHomeData();
|
|
const swiper_instance = ref<SwiperClass | null>(null);
|
|
const isMuted = ref(true);
|
|
|
|
// methods
|
|
|
|
const onSwiper = (swiper: SwiperClass) => {
|
|
swiper_instance.value = swiper;
|
|
};
|
|
|
|
const onChange = (swiper: SwiperClass) => {
|
|
console.log(swiper.activeIndex, swiper.realIndex, swiper.snapIndex);
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full mb-20">
|
|
<div
|
|
class="relative"
|
|
>
|
|
<Swiper
|
|
:slides-per-view="1.2"
|
|
:loop="true"
|
|
:space-between="40"
|
|
:centered-slides="true"
|
|
@swiper="onSwiper"
|
|
@slide-change="onChange"
|
|
>
|
|
<SwiperSlide
|
|
v-for="(slide, index) in homeData!.sliders"
|
|
:key="slide.id"
|
|
>
|
|
<div class="relative w-full rounded-200 h-[80svh] overflow-hidden">
|
|
<template v-if="!!slide.video">
|
|
<button
|
|
@click="isMuted = !isMuted"
|
|
class="transition-all hover:invert cursor-pointer flex-center hover:scale-110 size-[50px] border border-white hover:border-transparent rounded-full absolute z-20 top-10 right-20 bg-black"
|
|
>
|
|
<Icon
|
|
:name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
|
|
class="text-white"
|
|
size="24px"
|
|
/>
|
|
</button>
|
|
<video
|
|
:muted="swiper_instance?.realIndex !== index ? true : isMuted"
|
|
autoplay
|
|
loop
|
|
class="absolute inset-0 size-full object-cover"
|
|
:src="slide.video"
|
|
/>
|
|
</template>
|
|
<img
|
|
v-else
|
|
class="absolute inset-0 size-full object-cover"
|
|
:src="slide.image!"
|
|
:alt="slide.title"
|
|
/>
|
|
<div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
|
|
<div class="px-20 absolute z-10 w-full bottom-36">
|
|
<div class="border-b border-white/10 pb-6 flex flex-col gap-4">
|
|
<h3 class="typo-h-1 tracking-[-2px] text-white">
|
|
{{ slide.title }}
|
|
</h3>
|
|
<div class="flex justify-between items-end">
|
|
<span class="typo-p-lg text-white">
|
|
{{ slide.description }}
|
|
</span>
|
|
<Button class="invert rounded-full hover:bg-transparent">
|
|
مشاهده
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
<div class="absolute w-full bottom-20 left-[50%] translate-x-[-50%] z-100">
|
|
<div class="container h-full">
|
|
<div class="h-full flex items-center justify-between px-20">
|
|
<button @click="swiper_instance?.slidePrev()">
|
|
<Icon
|
|
class="**:stroke-white cursor-pointer"
|
|
name="ci:arrow-right"
|
|
size="24"
|
|
/>
|
|
</button>
|
|
<div class="flex items-center justify-center gap-3 text-white">
|
|
<div
|
|
v-for="(_slide, index) in homeData!.sliders"
|
|
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
|
|
class="border border-white size-3 rounded-full transition-all duration-200"
|
|
@click="swiper_instance?.slideTo(index)"
|
|
>
|
|
</div>
|
|
</div>
|
|
<button>
|
|
<Icon
|
|
@click="swiper_instance?.slideNext()"
|
|
class="**:stroke-white cursor-pointer"
|
|
name="ci:arrow-left"
|
|
size="24"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |