alsaze/paxton-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Wiki Activity

product-card

Browse Source
This commit is contained in:
Veselov 2025-09-06 22:32:13 +03:00
parent 02abf2781e
commit 2226fb2abe
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
composables/useProductsList.ts
View File

@ -8,7 +8,7 @@ export const useProductsList = () => {
name: product?.name, name: product?.name,
price: product?.price, price: product?.price,
variations: product?.variations, variations: product?.variations,
images: product?.images?.splice(0, 5), images: product?.images?.slice(0, 5),
})) ?? []) })) ?? [])
return { return {

16
pages/index.vue
View File

@ -3,17 +3,13 @@
<div <div
class="cards-list" class="cards-list"
> >
<pre>
{{ productCardData }}
</pre>
<div <div
v-for="product in productCardData" v-for="product in productCardData"
:key="product.id" :key="product.id"
class="card" class="card"
@click="router.push(`/product/${product.id}`)" @click="router.push(`/product/${product.id}`)"
> >
<img :src="product?.images[0]?.src" alt="product?.image"> <img class="card__image" :src="product?.images[0]?.src" alt="card?.image">
<div class="card__description"> <div class="card__description">
<div>{{ product?.name }}</div> <div>{{ product?.name }}</div>
@ -41,19 +37,23 @@ const router = useRouter()
<style lang="scss"> <style lang="scss">
.cards-list { .cards-list {
padding: 40px; padding: 15px;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 4px; gap: 4px;
} }
.card { .card {
width: 400px; min-width: 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
&__image {
width: 100%;
}
&__description { &__description {
padding-inline: 10px; padding-inline: 10px;
} }