# ZeenCardProductList
компонент для показа карточек товаров
# Примеры:
- 50Товар 1 (категория)Товар 1Описание товара50коинов
- 30Товар 2 (категория)Товар 2Описание товара20коинов
- 60Товар 3 (категория)Товар 3Описание товара40коинов
- 10Товар 4 (категория)Товар 4Описание товара30коинов
- 0Товар 5 (категория)Товар 5Описание товара30коиновРаспродано
# Source Code
<template lang="pug">
.zeen-card-list
ul.zeen-card-list__items
li.zeen-card-list__item(v-for='(item, index) in list' :key='`${item.title}-${index}`' )
ZeenCardProduct(:item='item')
template(#stock)
slot(name='cards-quantity')
template(#footer)
slot(name='cards-footer')
</template>
<script>
import ZeenCardProduct from '../../components/ZeenCardProduct'
export default {
name: 'ZeenCardProductList',
components: {
ZeenCardProduct,
},
props: {
list: {
type: Array,
default: () => [],
},
currency: String,
},
}
</script>
<style lang="scss">
@import '../../styles/mixins.scss';
:root {
--card-list-per-view: 4;
--card-list-item-width: 100%;
--card-list-items-gap: 20px;
--card-list-padding-vertical: 100px;
@include desktop() {
--card-list-per-view: 3;
}
@include tablets() {
--card-list-per-view: 2;
--card-list-padding-vertical: 80px;
}
@include phones() {
--card-list-padding-vertical: 60px;
}
@include phones-small() {
--card-list-per-view: 1;
--card-list-item-width: 90%;
}
--list-items-padding: 0;
}
</style>
<style lang="scss" scoped>
.zeen-card-list {
padding: var(--card-list-padding-vertical) 0;
&__items {
display: grid;
grid-template-columns: repeat(var(--card-list-per-view), 1fr);
grid-column-gap: var(--card-list-items-gap);
grid-row-gap: var(--card-list-items-gap);
padding: var(--list-items-padding);
}
&__item {
width: var(--card-list-item-width);
list-style-type: none;
margin: 0 auto;
}
}
</style>