48 lines
No EOL
949 B
Vue
48 lines
No EOL
949 B
Vue
<template>
|
|
<div class="brands">
|
|
<nuxt-marquee
|
|
class="brands__marquee"
|
|
id="marquee-slider"
|
|
:speed="50"
|
|
:pauseOnHover="true"
|
|
>
|
|
<nuxt-link-locale
|
|
class="brands__item"
|
|
v-for="brand in brands"
|
|
:key="brand.node.uuid"
|
|
:to="`/brand/${brand.node.slug}`"
|
|
>
|
|
<p>{{ brand.node.name }}</p>
|
|
</nuxt-link-locale>
|
|
</nuxt-marquee>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type {IBrand} from '@types';
|
|
|
|
const props = defineProps<{
|
|
brands: { node: IBrand }[];
|
|
}>();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.brands {
|
|
background-color: #e5e7eb;
|
|
padding-block: 65px;
|
|
|
|
&__item {
|
|
transition: 0.2s;
|
|
margin-right: 65px;
|
|
color: #4b5563;
|
|
font-family: "Playfair Display", sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
letter-spacing: 1.9px;
|
|
|
|
@include hover {
|
|
text-shadow: 0 0 10px #1a1a1a;
|
|
}
|
|
}
|
|
}
|
|
</style> |