<script lang="ts" setup>
|
import mobileIcon_dashboard_filled from '@/assets/svg/mobile/icon_dashboard_filled.svg'
|
import mobileIcon_dashboard_outlined from '@/assets/svg/mobile/icon_dashboard_outlined.svg'
|
import mobileIcon_home_filled from '@/assets/svg/mobile/icon_home_filled.svg'
|
import mobileIcon_home_outlined from '@/assets/svg/mobile/icon_home_outlined.svg'
|
import mobileIcon_member_filled from '@/assets/svg/mobile/icon_member_filled.svg'
|
import mobileIcon_member_outlined from '@/assets/svg/mobile/icon_member_outlined.svg'
|
import { ref, onBeforeMount } from 'vue'
|
import Home from './home/index.vue'
|
import Directory from './directory/index.vue'
|
import { useCache } from '@/hooks/web/useCache'
|
import Personal from './personal/index.vue'
|
import VanTabbar from 'vant/es/tabbar'
|
import VanTabbarItem from 'vant/es/tabbar-item'
|
import VanOverlay from 'vant/es/overlay'
|
import VanLoading from 'vant/es/loading'
|
import 'vant/es/tabbar-item/style'
|
import 'vant/es/tabbar/style'
|
import 'vant/es/overlay/style'
|
import 'vant/es/loading/style'
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
const activeTabbar = ref('home')
|
const showLoading = ref(false)
|
const hiddenTabbar = ref(false)
|
const { wsCache } = useCache('sessionStorage')
|
const { t } = useI18n()
|
|
onBeforeMount(() => {
|
activeTabbar.value = wsCache.get('activeTabbar') || 'home'
|
})
|
</script>
|
|
<template>
|
<div class="mobile-index">
|
<Home v-if="activeTabbar === 'home'" @setLoading="val => (showLoading = val)"></Home>
|
<Directory
|
v-else-if="activeTabbar === 'direct'"
|
@setLoading="val => (showLoading = val)"
|
@hiddenTabbar="val => (hiddenTabbar = val)"
|
></Directory>
|
<Personal v-else-if="activeTabbar === 'user'"> </Personal>
|
<van-tabbar safe-area-inset-bottom v-if="!hiddenTabbar" v-model="activeTabbar">
|
<van-tabbar-item name="home">
|
<template #icon="{ active }">
|
<el-icon>
|
<Icon
|
><component
|
:is="active ? mobileIcon_home_filled : mobileIcon_home_outlined"
|
></component
|
></Icon>
|
</el-icon>
|
</template>
|
工作台
|
</van-tabbar-item>
|
<van-tabbar-item name="direct"
|
><template #icon="{ active }">
|
<el-icon>
|
<Icon
|
><component
|
:is="active ? mobileIcon_dashboard_filled : mobileIcon_dashboard_outlined"
|
></component
|
></Icon>
|
</el-icon>
|
</template>
|
{{ t('work_branch.dashboard') }}</van-tabbar-item
|
>
|
<van-tabbar-item name="user"
|
><template #icon="{ active }">
|
<el-icon>
|
<Icon
|
><component
|
:is="active ? mobileIcon_member_filled : mobileIcon_member_outlined"
|
></component
|
></Icon>
|
</el-icon> </template
|
>我的</van-tabbar-item
|
>
|
</van-tabbar>
|
<van-overlay v-model:show="showLoading">
|
<div style="display: flex; align-items: center; justify-content: center; height: 100%">
|
<van-loading type="spinner" />
|
</div>
|
</van-overlay>
|
</div>
|
</template>
|
|
<style lang="less">
|
.mobile-index {
|
width: 100vw;
|
height: 100vh;
|
overflow: hidden;
|
--van-nav-bar-height: 44px;
|
--van-nav-bar-arrow-size: 20px;
|
--van-nav-bar-icon-color: #1f2329;
|
--van-nav-bar-title-text-color: #1f2329;
|
--van-font-bold: 500;
|
--van-nav-bar-title-font-size: 17px;
|
--van-tabs-line-height: 40px;
|
--van-tabs-bottom-bar-width: 56px;
|
--van-tabs-bottom-bar-color: var(--ed-color-primary);
|
--van-tab-active-text-color: var(--ed-color-primary);
|
--van-border-width: 0;
|
--van-tab-text-color: #646a73;
|
--van-tabbar-item-text-color: #8f959e;
|
.van-hairline--top-bottom:after {
|
bottom: auto;
|
top: auto;
|
}
|
.van-tabbar-item--active {
|
.van-tabbar-item__icon {
|
.ed-icon {
|
color: var(--ed-color-primary, #3370ff);
|
}
|
}
|
}
|
|
.van-tabbar-item {
|
.ed-icon {
|
font-size: 22px !important;
|
}
|
.van-tabbar-item__text {
|
color: #646a73;
|
font-size: 10px;
|
font-weight: 400;
|
line-height: 10px;
|
}
|
|
&.van-tabbar-item--active {
|
.van-tabbar-item__text {
|
color: var(--ed-color-primary);
|
font-size: 10px;
|
font-weight: 400;
|
line-height: 10px;
|
}
|
}
|
}
|
}
|
</style>
|
