From 314dcacdeecec4dff192b78bad5124b1b29a453d Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期四, 20 二月 2025 15:07:36 +0800
Subject: [PATCH] fix: 页面
---
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