118 lines
2.8 KiB
Vue
118 lines
2.8 KiB
Vue
<template>
|
|
<div class="bottom-appbar w-auto mx-auto bg-white">
|
|
<div class="tabs bottom-0">
|
|
<div
|
|
:class="navItemClass('buyProduct')"
|
|
class="tab"
|
|
@click="$emit('navigate', 'buyProduct')"
|
|
>
|
|
<div class="tab__icon">
|
|
<img
|
|
:src="boursecuBuySellIcon"
|
|
alt=""
|
|
class="tab__icon-image"
|
|
/>
|
|
</div>
|
|
<div class="text-xs mt-1 font-bold">خرید و فروش</div>
|
|
</div>
|
|
|
|
<div
|
|
:class="navItemClass('transactions')"
|
|
class="tab"
|
|
@click="$emit('navigate', 'transactions')"
|
|
>
|
|
<div class="tab__icon">
|
|
<img
|
|
:src="boursecuTransactionsIcon"
|
|
alt=""
|
|
class="tab__icon-image"
|
|
/>
|
|
</div>
|
|
<div class="text-xs mt-1 font-bold">تراکنش ها</div>
|
|
</div>
|
|
|
|
<div
|
|
:class="navItemClass('home')"
|
|
class="tab"
|
|
@click="$emit('navigate', 'home')"
|
|
>
|
|
<div class="tab__icon">
|
|
<img
|
|
:src="boursecuHomeIcon"
|
|
alt=""
|
|
class="tab__icon-image"
|
|
/>
|
|
</div>
|
|
<div class="text-xs mt-1 font-bold">صفحه اصلی</div>
|
|
</div>
|
|
|
|
<div
|
|
:class="navItemClass('wallet')"
|
|
class="tab"
|
|
@click="$emit('navigate', 'wallet')"
|
|
>
|
|
<div class="tab__icon">
|
|
<img
|
|
:src="boursecuWalletIcon"
|
|
alt=""
|
|
class="tab__icon-image"
|
|
/>
|
|
</div>
|
|
<div class="text-xs mt-1 font-bold">کیف پول</div>
|
|
</div>
|
|
|
|
<div
|
|
:class="navItemClass('user')"
|
|
class="tab"
|
|
@click="$emit('navigate', 'user')"
|
|
>
|
|
<div class="tab__icon">
|
|
<img
|
|
:src="boursecuSettingsIcon"
|
|
alt=""
|
|
class="tab__icon-image"
|
|
/>
|
|
</div>
|
|
<div class="text-xs mt-1 font-bold">امکانات بیشتر</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { getBoursecuActionIconSrc } from '@/utils/config'
|
|
|
|
defineProps<{
|
|
navItemClass: (routeName: string) => string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
navigate: [routeName: string]
|
|
}>()
|
|
|
|
const boursecuBuySellIcon = getBoursecuActionIconSrc('buySell') ?? ''
|
|
const boursecuTransactionsIcon = getBoursecuActionIconSrc('transactions') ?? ''
|
|
const boursecuWalletIcon = getBoursecuActionIconSrc('wallet') ?? ''
|
|
const boursecuHomeIcon = getBoursecuActionIconSrc('home') ?? ''
|
|
const boursecuSettingsIcon = getBoursecuActionIconSrc('settings') ?? ''
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tab__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.tab__icon-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
transform: scale(2.25);
|
|
}
|
|
</style>
|