fix: add page Product list and fix page Cart

This commit is contained in:
2026-03-19 15:46:18 +01:00
parent 1ea50af96a
commit 99fe11fbeb
17 changed files with 168 additions and 97 deletions

View File

@@ -1,6 +1,6 @@
<template>
<div class="container mt-14 mx-auto">
<div class="flex justify-between gap-8 mb-6">
<div class="flex md:flex-row flex-col justify-between gap-8 mb-6">
<div class="flex-1">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-8 flex items-center justify-center min-h-[300px]">
<img :src="selectedColor?.image || productData.image" :alt="productData.name"
@@ -29,7 +29,7 @@
</div>
</div>
</div>
<div class="flex justify-between items-end mb-8">
<div class="flex md:flex-row flex-col justify-between md:items-end items-start gap-5 md:gap-0 md:mb-8 mb-4">
<div class="flex flex-col gap-3">
<span class="text-sm text-(--accent-blue-light) dark:text-(--accent-blue-dark) ">Colors:</span>
<div class="flex gap-2">
@@ -49,10 +49,10 @@
</div>
<ProductCustomization />
<hr class="border-t border-(--border-light) dark:border-(--border-dark) mb-8" />
<div class="mb-6 w-[55%]">
<div class="flex justify-between items-center gap-10 mb-8">
<div class="mb-6 w-[100%] xl:w-[60%]">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-10 mb-8">
<UButton v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="[
'px-15 py-2 cursor-pointer',
'px-15 py-2 cursor-pointer sm:text-nowrap flex items-center! justify-center!',
activeTab === tab.id
? 'bg-blue-600 hover:text-black hover:dark:text-white text-white'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'