From c8c2f28f9008989f8035da5e78c262b326707065 Mon Sep 17 00:00:00 2001 From: wupengfei <834520024@qq.com> Date: 星期四, 22 五月 2025 17:04:39 +0800 Subject: [PATCH] Merge branch 'dev-ui' of http://120.26.58.240:8888/r/LifePaymentFront into dev-ui --- apps/h5/src/components/NavigationBar/NavBar.vue | 37 ++++++++++++++++++------------------- 1 files changed, 18 insertions(+), 19 deletions(-) diff --git a/apps/h5/src/components/NavigationBar/NavBar.vue b/apps/h5/src/components/NavigationBar/NavBar.vue index 23138fb..31a4670 100644 --- a/apps/h5/src/components/NavigationBar/NavBar.vue +++ b/apps/h5/src/components/NavigationBar/NavBar.vue @@ -4,16 +4,15 @@ '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'; +import { CSSProperties } from 'vue'; +import { useAppStore } from '@/store/modules/app'; defineOptions({ name: 'NavBar', @@ -21,34 +20,34 @@ const props = defineProps(navigationBarProps); -const systemStore = useSystemStore(); +const appStore = useAppStore(); -const barStyle = computed( - () => - ({ - paddingTop: systemStore.info.statusBarHeight + 'px', - // height: systemStore.navigationBarHeight + 'px', - } as CSSProperties) -); +// const barStyle = computed( +// () => +// ({ +// paddingTop: appStore.statusBarHeight / 2 + 'px', +// } as CSSProperties) +// ); </script> -<style lang="scss"> -@import '@/styles/common.scss'; +<style lang="scss" scoped> +@use '@/style/common.scss' as *; .navigation-bar-wrapper { - background-color: #fff; - display: flex; position: relative; - // box-shadow: 0px 1px 7px 0px rgb(237, 238, 241); z-index: 10; + display: flex; + padding-top: constant(safe-area-inset-top); + padding-top: env(safe-area-inset-top); + background-color: #ffffff; &.plain { - border-bottom-left-radius: 20px; - border-bottom-right-radius: 20px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; } &.active { - background-color: boleGetCssVar('color', 'primary'); + background-color: getCssVar('color', 'primary'); } &.hasBorder { -- Gitblit v1.9.1