From fa5d4bbca40f93bac208e698de11cef7c3a89e2d Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期五, 21 三月 2025 17:20:02 +0800
Subject: [PATCH] fix: 三期需求
---
apps/h5/src/components/NavigationBar/NavBar.vue | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 57 insertions(+), 0 deletions(-)
diff --git a/apps/h5/src/components/NavigationBar/NavBar.vue b/apps/h5/src/components/NavigationBar/NavBar.vue
new file mode 100644
index 0000000..31a4670
--- /dev/null
+++ b/apps/h5/src/components/NavigationBar/NavBar.vue
@@ -0,0 +1,57 @@
+<template>
+ <div
+ :class="[
+ 'navigation-bar-wrapper',
+ { active: props.mode === 'dark', plain: props.plain, hasBorder: props.hasBorder },
+ ]"
+ >
+ <slot></slot>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { navigationBarProps } from './navBar';
+import { CSSProperties } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+
+defineOptions({
+ name: 'NavBar',
+});
+
+const props = defineProps(navigationBarProps);
+
+const appStore = useAppStore();
+
+// const barStyle = computed(
+// () =>
+// ({
+// paddingTop: appStore.statusBarHeight / 2 + 'px',
+// } as CSSProperties)
+// );
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.navigation-bar-wrapper {
+ position: relative;
+ 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: 10px;
+ border-bottom-right-radius: 10px;
+ }
+
+ &.active {
+ background-color: getCssVar('color', 'primary');
+ }
+
+ &.hasBorder {
+ border-bottom: 1px solid #f6f6f6;
+ }
+}
+</style>
--
Gitblit v1.9.1