132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
<template>
|
|
<section class="feedback-section">
|
|
<UiHeading tag="h2" size="300" class="text-three mb-4 pl-16 pr-24">
|
|
Что говорят читатели
|
|
</UiHeading>
|
|
|
|
<!-- Slider main container -->
|
|
|
|
<div class="swiper feedback-swiper relative">
|
|
<!-- If we need pagination -->
|
|
|
|
<!-- Additional required wrapper -->
|
|
<div class="swiper-wrapper">
|
|
<!-- Slides -->
|
|
<div
|
|
v-for="(feedback, index) in feedbackData"
|
|
:key="index"
|
|
class="swiper-slide feedback-slide !w-[356px] !h-[325px]"
|
|
>
|
|
<div class="feedback-card !w-full !h-full">
|
|
<UiParagraph size="250" class="card-text">{{
|
|
feedback.text
|
|
}}</UiParagraph>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center flex-col">
|
|
<UiParagraph size="250" class="text-center mt-20">
|
|
Твое мнение важно!<br />
|
|
Если книга была полезной или вызвала эмоции, оставь отзыв.<br />
|
|
Это поможет другим и вдохновит на новые главы. <br />
|
|
Спасибо!
|
|
</UiParagraph>
|
|
<UiButton class="mt-10" variants="secondary">Написать отзыв</UiButton>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted } from "vue";
|
|
import Swiper from "swiper";
|
|
import { Pagination, Autoplay } from "swiper/modules";
|
|
import UiHeading from "@/components/Typography/UiHeading.vue";
|
|
import UiParagraph from "@/components/Typography/UiParagraph.vue";
|
|
import feedbackData from "./_data/feedback.data";
|
|
|
|
import "swiper/css";
|
|
import "swiper/css/pagination";
|
|
import UiButton from "@/components/UiButton/UiButton.vue";
|
|
|
|
onMounted(() => {
|
|
new Swiper(".feedback-swiper", {
|
|
modules: [Pagination, Autoplay],
|
|
direction: "horizontal",
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 3000,
|
|
disableOnInteraction: false,
|
|
},
|
|
slidesPerView: "auto",
|
|
spaceBetween: 72,
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: false,
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.feedback-section {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feedback-swiper {
|
|
width: 100%;
|
|
height: auto;
|
|
padding-bottom: 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.feedback-slide {
|
|
width: 300px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.feedback-card {
|
|
background-color: #1a1a1a;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
color: #fff;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card-title {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.card-text {
|
|
white-space: pre-line;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.swiper-pagination {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.swiper-pagination-bullet {
|
|
background-color: #fff;
|
|
opacity: 0.4;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
background-color: #fff;
|
|
opacity: 1;
|
|
}
|
|
</style>
|