115 lines
No EOL
2.3 KiB
Vue
115 lines
No EOL
2.3 KiB
Vue
<template>
|
|
<div class="tag" v-if="tag.productSet.edges.length">
|
|
<h2 class="tag__title">{{ tag.name }}</h2>
|
|
<div class="tag__block">
|
|
<div class="tag__block-inner">
|
|
<swiper
|
|
class="swiper"
|
|
v-if="tag.productSet.edges.length > 1"
|
|
:effect="'cards'"
|
|
:grabCursor="true"
|
|
:modules="[EffectCards, Mousewheel]"
|
|
:cardsEffect="{
|
|
slideShadows: false
|
|
}"
|
|
:mousewheel="true"
|
|
>
|
|
<swiper-slide
|
|
class="swiper__slide"
|
|
v-for="product in tag.productSet.edges"
|
|
:key="product.node.uuid"
|
|
>
|
|
<cards-product
|
|
class="swiper__slide-card"
|
|
:product="product.node"
|
|
/>
|
|
</swiper-slide>
|
|
</swiper>
|
|
<div class="tag__inner" v-else>
|
|
<cards-product
|
|
v-for="product in tag.productSet.edges"
|
|
:key="product.node.uuid"
|
|
:product="product.node"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
import { EffectCards, Mousewheel } from 'swiper/modules';
|
|
import 'swiper/css';
|
|
import 'swiper/css/scrollbar';
|
|
import type {IProductTag} from "~/types";
|
|
|
|
const props = defineProps<{
|
|
tag: IProductTag;
|
|
}>();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tag {
|
|
width: 500px;
|
|
|
|
&__title {
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
color: $accent;
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
&__block {
|
|
border-radius: $default_border_radius;
|
|
background-color: $accentLight;
|
|
padding: 10px;
|
|
|
|
&-inner {
|
|
border-radius: $default_border_radius;
|
|
border: 5px solid $white;
|
|
padding-inline:20px;
|
|
}
|
|
}
|
|
|
|
&__inner {
|
|
width: 100%;
|
|
padding-block: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
padding-block: 30px;
|
|
|
|
&__slide {
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
& .card {
|
|
width: 300px;
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 2;
|
|
inset: 0;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: 0.2s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.swiper-slide-active) {
|
|
& .card:after {
|
|
background-color: transparent;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
</style> |