124 lines
3.7 KiB
Vue
124 lines
3.7 KiB
Vue
<template>
|
|
<div class="nav-bar">
|
|
<div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
|
|
<Icon
|
|
@click="onMenuCollapse"
|
|
name="fa fa-indent"
|
|
:color="config.getColorVal('menuActiveColor')"
|
|
size="18"
|
|
/>
|
|
</div>
|
|
<span class="nav-bar-title">
|
|
{{ getTheme?.name || '' }}
|
|
<span style="font-size: 14px">({{ Version || 'v1.0.0' }})</span>
|
|
<!-- <span style="font-size: 14px;" v-if="Version?.versionName">
|
|
({{ Version?.versionName }})
|
|
</span> -->
|
|
</span>
|
|
<NavMenus />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useConfig } from '@/stores/config'
|
|
import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
|
|
import NavMenus from '../navMenus.vue'
|
|
import { showShade } from '@/utils/pageShade'
|
|
import { getLastData } from '@/api/systerm'
|
|
|
|
const Version: any = ref(null)
|
|
const config = useConfig()
|
|
const getTheme = window.localStorage.getItem('getTheme')
|
|
? JSON.parse(window.localStorage.getItem('getTheme') as string)
|
|
: { name: '' }
|
|
const VITE_FLAG = import.meta.env.VITE_NAME == 'hainan'
|
|
const onMenuCollapse = () => {
|
|
showShade('ba-aside-menu-shade', () => {
|
|
config.setLayout('menuCollapse', true)
|
|
})
|
|
config.setLayout('menuCollapse', false)
|
|
}
|
|
onMounted(() => {
|
|
if(!VITE_FLAG){
|
|
getLastData({ versionType: 'WEB' }).then(res => {
|
|
Version.value = res.data.versionName
|
|
})
|
|
}
|
|
|
|
document.title = getTheme?.name || ''
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 60px;
|
|
width: 100%;
|
|
background-color: v-bind('config.getColorVal("headerBarBackground")');
|
|
|
|
.nav-bar-title {
|
|
color: v-bind('config.getColorVal("headerBarTabColor")');
|
|
font-size: 24px;
|
|
margin-left: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
:deep(.nav-tabs) {
|
|
display: flex;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.ba-nav-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 20px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
height: 100%;
|
|
user-select: none;
|
|
color: v-bind('config.getColorVal("headerBarTabColor")');
|
|
transition: all 0.2s;
|
|
-webkit-transition: all 0.2s;
|
|
|
|
.close-icon {
|
|
padding: 2px;
|
|
margin: 2px 0 0 4px;
|
|
color: v-bind('config.getColorVal("headerBarTabColor")') !important;
|
|
}
|
|
|
|
&.active {
|
|
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
|
|
|
|
.close-icon {
|
|
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
|
|
background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
|
|
|
|
.close-icon {
|
|
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-tabs-active-box {
|
|
position: absolute;
|
|
height: 50px;
|
|
background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
|
|
transition: all 0.2s;
|
|
-webkit-transition: all 0.2s;
|
|
}
|
|
}
|
|
}
|
|
|
|
.unfold {
|
|
align-self: center;
|
|
padding-left: var(--ba-main-space);
|
|
}
|
|
</style>
|