69 lines
1.7 KiB
Vue
69 lines
1.7 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">
|
|
<span>{{ tabBar.text }}</span>
|
|
<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 {ref} from "vue";
|
|
import JGap from "@/components/JGap/JGap.vue";
|
|
import {getAssetsImages} from "@/utils";
|
|
import {useBackgroundHook} from "@/hooks/useBackgroundHook";
|
|
|
|
const tabBarList = [
|
|
{
|
|
to: '/home',
|
|
name: 'home',
|
|
text: '首页',
|
|
replace: true,
|
|
active: getAssetsImages('tabBar/home-active.png'),
|
|
inactive: getAssetsImages('tabBar/home-inactive.png')
|
|
},
|
|
{
|
|
to: '/serveList',
|
|
name: 'serveList',
|
|
text: '钱包',
|
|
replace: true,
|
|
active: getAssetsImages('tabBar/artificer-active.png'),
|
|
inactive: getAssetsImages('tabBar/artificer-inactive.png')
|
|
},
|
|
{
|
|
to: '/message',
|
|
name: 'message',
|
|
text: '客服',
|
|
replace: true,
|
|
active: 'chat',
|
|
inactive: 'chat'
|
|
},
|
|
{
|
|
to: '/my',
|
|
name: 'my',
|
|
text: '我的',
|
|
replace: true,
|
|
active: getAssetsImages('tabBar/my-active.png'),
|
|
inactive: getAssetsImages('tabBar/my-inactive.png')
|
|
}
|
|
]
|
|
|
|
const active = ref(0)
|
|
|
|
// const {setBodyBackground} = useBackgroundHook()
|
|
// setBodyBackground()
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
</style>
|