fix: style

This commit is contained in:
2026-03-23 11:04:41 +01:00
parent 0853424c4e
commit 508418523f
4 changed files with 15 additions and 21 deletions

View File

@@ -9,21 +9,22 @@
<div v-if="cartStore.items.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)"> <div v-if="cartStore.items.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
<div v-for="item in cartStore.items" :key="item.id" class="flex items-center justify-between p-4 gap-4"> <div v-for="item in cartStore.items" :key="item.id" class="flex items-center justify-between p-4 gap-4">
<div class="flex items-center gap-10 flex-1"> <div class="grid grid-cols-5 w-[100%]">
<div <div
class="w-20 bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden"> class="w-20 bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
<img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full object-cover" /> <img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
<UIcon v-else name="mdi:package-variant" class="text-xl text-gray-400" /> <UIcon v-else name="mdi:package-variant" class="text-xl text-gray-400" />
</div> </div>
<div class="flex-1 min-w-0">
<p class="text-black dark:text-white text-sm font-medium truncate">{{ item.name }}</p> <p class="text-black dark:text-white text-sm font-medium truncate">{{ item.name }}</p>
<p class="text-gray-500 dark:text-gray-400 text-sm"> <p class="text-black dark:text-white text-sm font-medium truncate">{{ item.product_number }}</p>
{{ t('Qty') }}: {{ item.quantity }} × ${{ item.price.toFixed(2) }}
</p>
</div>
</div>
<div class="text-right flex-shrink-0">
<p class="text-black dark:text-white font-medium">${{ (item.price * item.quantity).toFixed(2) }}</p> <p class="text-black dark:text-white font-medium">${{ (item.price * item.quantity).toFixed(2) }}</p>
<div class="flex items-center justify-end gap-10">
<UInputNumber v-model="item.quantity" class="text-gray-500 dark:text-gray-400 text-sm" />
<button size="sm" color="destructive" variant="outline" @click="confirmDelete(address.id)"
class="text-red-500 bg-red-100 dark:bg-red-900 dark:text-red-100 rounded transition-colors p-2">
<UIcon name="material-symbols:delete" class="text-[16px]" />
</button>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -161,14 +161,6 @@ function saveAddress() {
} }
closeModal() closeModal()
} }
// const Lera = ref('')
// function run (){
// if(Lera.value==='lera'){
// console.log('Leraa okokok')
// }else{
// console.log('LEra nonono')
// }
// }
function confirmDelete(id: number) { function confirmDelete(id: number) {
addressToDelete.value = id addressToDelete.value = id
showDeleteConfirm.value = true showDeleteConfirm.value = true

View File

@@ -8,6 +8,7 @@ export interface CartItem {
image: string image: string
price: number price: number
quantity: number quantity: number
product_number:string
} }
export interface DeliveryMethod { export interface DeliveryMethod {
@@ -32,9 +33,9 @@ export const useCartStore = defineStore('cart', () => {
function initMockData() { function initMockData() {
items.value = [ items.value = [
{ id: 1, productId: 101, name: 'Premium Widget Pro', image: '/img/product-1.jpg', price: 129.99, quantity: 2 }, { id: 1, productId: 101, name: 'Premium Widget Pro', product_number: 'NC209/7000', image: '/img/product-1.jpg', price: 129.99, quantity: 2 },
{ id: 2, productId: 102, name: 'Ultra Gadget X', image: '/img/product-2.jpg', price: 89.50, quantity: 1 }, { id: 2, productId: 102, name: 'Ultra Gadget X', product_number: 'NC234/6453', image: '/img/product-2.jpg', price: 89.50, quantity: 1 },
{ id: 3, productId: 103, name: 'Mega Tool Set', image: '/img/product-3.jpg', price: 249.00, quantity: 3 } { id: 3, productId: 103, name: 'Mega Tool Set', product_number: 'NC324/9030', image: '/img/product-3.jpg', price: 249.00, quantity: 3 }
] ]
} }