51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<!-- #ifdef MP-WEIXIN || MP-XHS -->
|
|
<view class="wxNavbar" :style="{ height: `${state.navHeight}px` }">
|
|
<view v-if="state.navHeight" class="title" :style="{ 'margin-top': `${state.statusBarHeight}px` }">{{ props.title }}</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script setup>
|
|
// #ifdef MP-WEIXIN || MP-XHS
|
|
import { reactive, onMounted } from "vue";
|
|
import { navbarHeightAndStatusBarHeight } from "@/utils/common.js";
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: "EliteSys"
|
|
}
|
|
});
|
|
|
|
let state = reactive({
|
|
navHeight: 0,
|
|
statusBarHeight: 0,
|
|
});
|
|
onMounted(() => {
|
|
const heightData = navbarHeightAndStatusBarHeight();
|
|
state.navHeight = heightData.navbarHeight;
|
|
state.statusBarHeight = heightData.statusBarHeight;
|
|
});
|
|
// #endif
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wxNavbar {
|
|
z-index: 999999;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-color);
|
|
background: linear-gradient(to left, var(--left-linear), var(--right-linear));
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2px;
|
|
bottom: -2px;
|
|
background: linear-gradient(to left, var(--left-linear), var(--right-linear));
|
|
}
|
|
}
|
|
</style> |