|
@@ -1,81 +0,0 @@
|
|
|
-<template>
|
|
|
- <view
|
|
|
- class="navbar-box"
|
|
|
- :class="{'gradientBgc': !noBgColor}"
|
|
|
- :style="{
|
|
|
- 'height': (navbarHeight < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight) + 'px',
|
|
|
- 'line-height': (navbarHeight < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight) + 'px',
|
|
|
- 'paddingTop': statusBarHeight + 'px'
|
|
|
- }"
|
|
|
- >
|
|
|
- <image
|
|
|
- v-if="showLogo"
|
|
|
- src="https://minio.menduner.com/dev/fe9890be9b1176f84f2aa282b0f6adce300b133f65eb3d7b45ae057aa5698324.png"
|
|
|
- class="navbar-box-logo"
|
|
|
- :style="{'height': defaultLogoHeight + 'px'}"
|
|
|
- ></image>
|
|
|
- <view v-else class="navbar-box-title MiSans-Semibold">{{ title }}</view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { ref } from 'vue'
|
|
|
-import { onLoad } from '@dcloudio/uni-app'
|
|
|
-
|
|
|
-defineProps({
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- default: '门墩儿'
|
|
|
- },
|
|
|
- showLogo: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- // 是否需要渐变背景
|
|
|
- noBgColor: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-const defaultLogoHeight = 40
|
|
|
-const navbarHeight = ref(0)
|
|
|
-const statusBarHeight = ref(0)
|
|
|
-onLoad(() => {
|
|
|
- const systemInfo = uni.getSystemInfoSync()
|
|
|
- statusBarHeight.value = systemInfo.statusBarHeight
|
|
|
- const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
|
- navbarHeight.value = menuButtonInfo.height + ((menuButtonInfo.top - statusBarHeight.value) * 2) + 15
|
|
|
-})
|
|
|
-
|
|
|
-defineExpose({
|
|
|
- height: navbarHeight.value < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight.value
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.gradientBgc {
|
|
|
- background: linear-gradient(180deg, #9bfece, #BCFEDE);
|
|
|
-}
|
|
|
-.navbar-box {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- &-logo {
|
|
|
- position: absolute;
|
|
|
- left: 10px;
|
|
|
- width: 95px;
|
|
|
- }
|
|
|
- &-title {
|
|
|
- position: absolute;
|
|
|
- left: 10px;
|
|
|
- width: 158px;
|
|
|
- height: 51px;
|
|
|
- font-family: MiSans, MiSans;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 38rpx;
|
|
|
- color: #0E100F;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|