feat: added new products_carousel bock type
This commit is contained in:
@@ -1,70 +1,65 @@
|
||||
<template>
|
||||
<div class="telecart-dock fixed bottom-0 w-full z-50 px-10">
|
||||
<div
|
||||
class="telecart-dock-inner flex justify-around items-center bg-base-300/10 h-full backdrop-blur-md border-base-300/90 border">
|
||||
<RouterLink
|
||||
:to="{name: 'home'}"
|
||||
:class="{'active': route.name === 'home'}"
|
||||
class="telecart-dock-item"
|
||||
@click="onDockItemClick"
|
||||
>
|
||||
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt">
|
||||
<polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10"
|
||||
stroke-width="2"></polyline>
|
||||
<path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor"
|
||||
stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
|
||||
<line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square"
|
||||
stroke-miterlimit="10" stroke-width="2"></line>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="dock-label">Главная</span>
|
||||
</RouterLink>
|
||||
<div class="dock dock-lg select-none">
|
||||
<RouterLink
|
||||
:to="{name: 'home'}"
|
||||
:class="{'dock-active': route.name === 'home'}"
|
||||
@click="onDockItemClick"
|
||||
>
|
||||
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt">
|
||||
<polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10"
|
||||
stroke-width="2"></polyline>
|
||||
<path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor"
|
||||
stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
|
||||
<line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square"
|
||||
stroke-miterlimit="10" stroke-width="2"></line>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="dock-label">Главная</span>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
:to="{name: 'categories'}"
|
||||
:class="{'active': route.name === 'categories'}"
|
||||
class="telecart-dock-item"
|
||||
@click="onDockItemClick"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
|
||||
</svg>
|
||||
<span class="dock-label">Каталог</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="{name: 'categories'}"
|
||||
:class="{'dock-active': route.name === 'categories'}"
|
||||
@click="onDockItemClick"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/>
|
||||
</svg>
|
||||
<span class="dock-label">Каталог</span>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
:to="{name: 'search'}"
|
||||
:class="{'active': route.name === 'search'}"
|
||||
class="telecart-dock-item"
|
||||
@click="onDockItemClick"
|
||||
>
|
||||
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<RouterLink
|
||||
:to="{name: 'search'}"
|
||||
:class="{'dock-active': route.name === 'search'}"
|
||||
@click="onDockItemClick"
|
||||
>
|
||||
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
|
||||
</svg>
|
||||
<span class="dock-label">Поиск</span>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
v-if="settings.store_enabled"
|
||||
:to="{name: 'cart'}"
|
||||
:class="{'dock-active': route.name === 'cart'}"
|
||||
@click="onDockItemClick"
|
||||
>
|
||||
<div class="indicator">
|
||||
<span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
|
||||
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
|
||||
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
|
||||
</svg>
|
||||
<span class="dock-label">Поиск</span>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
v-if="settings.store_enabled"
|
||||
:to="{name: 'cart'}"
|
||||
:class="{'active': route.name === 'cart'}"
|
||||
class="telecart-dock-item"
|
||||
@click="onDockItemClick"
|
||||
>
|
||||
<div class="indicator">
|
||||
<span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
|
||||
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="dock-label">Корзина</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<span class="dock-label">Корзина</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -82,31 +77,3 @@ function onDockItemClick() {
|
||||
haptic.selectionChanged();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.telecart-dock {
|
||||
padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 5px);
|
||||
height: calc(70px + var(--tg-safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.telecart-dock-inner {
|
||||
border-radius: var(--radius-field);
|
||||
border-width: var(--border);
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.telecart-dock-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-field);
|
||||
padding: 5px;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.telecart-dock-item.active {
|
||||
background-color: var(--color-primary);
|
||||
backdrop-filter: blur(var(--blur-sm));
|
||||
color: var(--color-primary-content);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user