<template>
|
<div
|
:class="[
|
'navigation-bar-wrapper',
|
{ active: props.mode === 'dark', plain: props.plain, hasBorder: props.hasBorder },
|
]"
|
:style="barStyle"
|
>
|
<slot></slot>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { CSSProperties } from 'vue';
|
import { useSystemStore } from '@/stores/modules/system';
|
import { navigationBarProps } from './navBar';
|
|
defineOptions({
|
name: 'NavBar',
|
});
|
|
const props = defineProps(navigationBarProps);
|
|
const systemStore = useSystemStore();
|
|
const barStyle = computed(
|
() =>
|
({
|
paddingTop: systemStore.info.statusBarHeight + 'px',
|
// height: systemStore.navigationBarHeight + 'px',
|
} as CSSProperties)
|
);
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.navigation-bar-wrapper {
|
background-color: #fff;
|
display: flex;
|
position: relative;
|
// box-shadow: 0px 1px 7px 0px rgb(237, 238, 241);
|
z-index: 10;
|
|
&.plain {
|
border-bottom-left-radius: 20px;
|
border-bottom-right-radius: 20px;
|
}
|
|
&.active {
|
background-color: boleGetCssVar('color', 'primary');
|
}
|
|
&.hasBorder {
|
border-bottom: 1px solid #f6f6f6;
|
}
|
}
|
</style>
|
