55 lines
2.0 KiB
Vue
55 lines
2.0 KiB
Vue
<template>
|
||
<section>
|
||
<UiHeading tag="h1" size="300" class="text-three">
|
||
Книги для тебя, если ты не знаешь...
|
||
</UiHeading>
|
||
<ul class="flex mt-20 flex-row items-center justify-between">
|
||
<li
|
||
class="flex flex-col-reverse justify-end w-38 gap-4 h-64 items-center transition-transform transform hover:scale-110"
|
||
v-for="({ img, text }, index) in questions.data"
|
||
:key="index"
|
||
>
|
||
<UiParagraph class="text-center" size="250">
|
||
{{ text }}
|
||
</UiParagraph>
|
||
<img :src="`${img}`" alt="Вопрос" width="101" height="101" />
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import UiHeading from "@/components/Typography/UiHeading.vue";
|
||
import UiParagraph from "@/components/Typography/UiParagraph.vue";
|
||
import { reactive } from "vue";
|
||
|
||
const questions = reactive({
|
||
data: [
|
||
{
|
||
img: "/img/svg/ellipse1.svg",
|
||
text: 'Что делать, если у тебя ноги не "от ушей" и ты далеко не Мисс Мира?',
|
||
},
|
||
{
|
||
img: "/img/svg/ellipse2.svg",
|
||
text: "Как начать легко общаться с противоположным полом и о чем надо помолчать?",
|
||
},
|
||
{
|
||
img: "/img/svg/ellipse3.svg",
|
||
text: "Как относиться к сексу и на сколько важна девичья невинность?",
|
||
},
|
||
{
|
||
img: "/img/svg/ellipse4.svg",
|
||
text: "Сколько нужно заниматься, чтобы обрести НОВУЮ себя?",
|
||
},
|
||
{
|
||
img: "/img/svg/ellipse5.svg",
|
||
text: "Как выработать стратегию долгосрочных отношений?",
|
||
},
|
||
{
|
||
img: "/img/svg/ellipse6.svg",
|
||
text: "Как добиться того, чтоб парень делал так, как ты хочешь, но думал, что он сам так решил?",
|
||
},
|
||
],
|
||
});
|
||
</script>
|