55 lines
2.0 KiB
Vue
55 lines
2.0 KiB
Vue
<template>
|
||
<section>
|
||
<UiHeading tag="H2" 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>
|