From 14368e8a09c4b5793d0975f85e36a4c1d410ca36 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期五, 16 五月 2025 17:27:24 +0800
Subject: [PATCH] feat: UI
---
apps/h5/src/components/NavigationBar/CommonNavigationBar.vue | 93 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 93 insertions(+), 0 deletions(-)
diff --git a/apps/h5/src/components/NavigationBar/CommonNavigationBar.vue b/apps/h5/src/components/NavigationBar/CommonNavigationBar.vue
new file mode 100644
index 0000000..07c508b
--- /dev/null
+++ b/apps/h5/src/components/NavigationBar/CommonNavigationBar.vue
@@ -0,0 +1,93 @@
+<template>
+ <NavBar v-bind="props">
+ <div
+ :class="['common-navigation-bar-wrapper', { dark: props.mode == 'dark' }]"
+ :style="barStyle"
+ >
+ <div class="menu-btn-wrapper" v-if="!isLastPage && showLeftArrow" @click="goBack()">
+ <img class="menu-btn" :src="props.mode == 'dark' ? IconArrowWhite : IconArrow" />
+ </div>
+ <div class="common-navigation-bar-title">{{ title }}</div>
+ </div>
+ </NavBar>
+</template>
+
+<script setup lang="ts">
+import NavBar from './NavBar.vue';
+import { commonNavigationBarProps } from './commonNavigationBar';
+import { CSSProperties } from 'vue';
+import IconArrow from '@/assets/common/icon-navi-arrow.png';
+import IconArrowWhite from '@/assets/common/icon-navi-arrow-white.png';
+import { useCanGoBack } from '@/hooks';
+
+defineOptions({
+ name: 'CommonNavigationBar',
+});
+
+const props = defineProps(commonNavigationBarProps);
+
+const router = useRouter();
+
+const { isCanGoBack } = useCanGoBack();
+
+const isLastPage = computed(() => {
+ return !isCanGoBack.value;
+});
+// const isTabbarPage = computed(() =>
+// Object.values(TabBarPageRouterForCheck).some((x) => x.toLowerCase() === router.path.toLowerCase())
+// );
+
+function goBack() {
+ router.back();
+}
+
+const barStyle = computed(() => {
+ const distance = 24;
+ return {
+ paddingLeft: `${distance}px`,
+ paddingRight: `${distance}px`,
+
+ height: 44 + 'px',
+ } as CSSProperties;
+});
+</script>
+
+<style lang="scss">
+@use '@/style/common.scss' as *;
+
+.common-navigation-bar-wrapper {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ min-width: 0;
+ font-size: 16px;
+ color: boleGetCssVar('color', 'title-color');
+ line-height: 1;
+
+ .common-navigation-bar-title {
+ @include utils-ellipsis;
+ font-weight: 600;
+ color: getCssVar('text-color', 'primary');
+ line-height: 1.5;
+ }
+
+ &.dark {
+ color: #ffffff;
+ }
+
+ .menu-btn-wrapper {
+ position: absolute;
+ left: boleGetCssVar('size', 'body-padding-h');
+ padding: 10px;
+ padding-left: 0;
+ // top: -20px;
+ }
+
+ .menu-btn {
+ width: 10px;
+ height: 15px;
+ }
+}
+</style>
--
Gitblit v1.9.1