80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import k_logo from '@/assets/LOGO.svg'
|
|
const { fetchData } = useApiFetch()
|
|
|
|
import tg from '@/assets/icons/telegram.svg'
|
|
import vk from '@/assets/icons/vk.svg'
|
|
import yt from '@/assets/icons/youtube.svg'
|
|
const icons = {
|
|
'simple-icons:vk': vk,
|
|
'simple-icons:telegram': tg,
|
|
'simple-icons:youtube': yt
|
|
}
|
|
|
|
const { data: footerData } = await fetchData<Footer[]>(
|
|
`footer`,
|
|
{ ordering: 'small_text' },
|
|
true
|
|
)
|
|
const { data: socialNetworkData } = await fetchData<SocialNetwork[]>(
|
|
`social_network`,
|
|
{},
|
|
true
|
|
)
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="footer" id="contacts">
|
|
<div class="container">
|
|
<div class="col-span-12 lg:col-span-6 xl:col-span-3 mb-12 lg:mb-0">
|
|
<div class="k-logo">
|
|
<k_logo />
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 lg:col-span-6 xl:col-span-6 mb-12 lg:mb-0">
|
|
<template v-for="item in footerData">
|
|
<div class="footer-text" v-if="!item.small_text">
|
|
<template
|
|
v-for="p in item.text.replace(/\r\n/g, '\n').split('\n')"
|
|
>
|
|
<p v-if="p.trim().length">{{ p }}</p>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="col-span-12 xl:col-span-3">
|
|
<div class="footer-text footer-text-social" v-if="socialNetworkData">
|
|
<template v-for="item in socialNetworkData">
|
|
<a
|
|
:class="['footer-icon', { 'footer-icon-big': !item.icon }]"
|
|
:href="item.link"
|
|
target="_blank"
|
|
>
|
|
<template v-if="item.icon">
|
|
<component
|
|
:is="icons[(item.icon.trim() as keyof typeof icons)]"
|
|
v-if="icons.hasOwnProperty(item.icon.trim())"
|
|
/>
|
|
<Icon :name="item.icon" v-else />
|
|
</template>
|
|
<span class="footer-icon-text">{{ item.name }}</span>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer_two">
|
|
<div class="container">
|
|
<div class="col-span-10 col-start-2">
|
|
<template v-for="item in footerData">
|
|
<div class="footer-text" v-if="item.small_text">
|
|
{{ item.text }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|