71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<template>
|
|
<!-- <div style="background: linear-gradient(167.96deg, #E6FAE1 0%, #F2E7B7 98.44%) no-repeat;min-height: 100%" >-->
|
|
<div>
|
|
|
|
<router-view />
|
|
|
|
<van-tabbar route v-model="active" active-color="#F9BF3A">
|
|
<van-tabbar-item v-for="tabBar in tabBarList" :key="tabBar.name" :replace="tabBar.replace" :to="tabBar.to">
|
|
<!-- <van-text-ellipsis :content="$t(tabBar.text)" />-->
|
|
<div style="white-space: nowrap;overflow: hidden;text-align: center">{{ $t(tabBar.text) }}</div>
|
|
<template #icon="props">
|
|
<van-icon :color="props.active ? '' : 'rgb(229, 229, 229)'" :name="props.active ? tabBar.active : tabBar.inactive" />
|
|
</template>
|
|
</van-tabbar-item>
|
|
</van-tabbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
import {getAssetsImages} from "@/utils";
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n()
|
|
const tabBarList = reactive([
|
|
{
|
|
to: '/home',
|
|
name: 'home',
|
|
text: 'app.home',
|
|
replace: true,
|
|
active: getAssetsImages('tabBar/home-active.png'),
|
|
inactive: getAssetsImages('tabBar/home-inactive.png')
|
|
},
|
|
{
|
|
to: '/serveList',
|
|
name: 'serveList',
|
|
text: 'app.serveList',
|
|
replace: true,
|
|
active: getAssetsImages('tabBar/artificer-active.png'),
|
|
inactive: getAssetsImages('tabBar/artificer-inactive.png')
|
|
},
|
|
{
|
|
to: '/message',
|
|
name: 'message',
|
|
text: 'app.message',
|
|
replace: true,
|
|
active: 'chat',
|
|
inactive: 'chat'
|
|
},
|
|
{
|
|
to: '/my',
|
|
name: 'my',
|
|
text: 'app.my',
|
|
replace: true,
|
|
active: getAssetsImages('tabBar/my-active.png'),
|
|
inactive: getAssetsImages('tabBar/my-inactive.png')
|
|
}
|
|
])
|
|
|
|
const active = ref(0)
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
:deep('.van-tabbar-item__text') {
|
|
text-align: center !important;
|
|
}
|
|
</style>
|