From ddddcf83e7deb9d0a674d2bbead300089530d87e Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 21 五月 2025 13:24:07 +0800
Subject: [PATCH] feat: UI
---
apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue | 56 ++++++++++++++++++++++++++------------------------------
1 files changed, 26 insertions(+), 30 deletions(-)
diff --git a/apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue b/apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue
index 5ffc2e8..1c88c21 100644
--- a/apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue
+++ b/apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue
@@ -1,17 +1,11 @@
<template>
<NavBar v-bind="props" dark class="transparent-navigation-bar" :style="wrapperStyle">
<div :class="['common-navigation-bar-wrapper', { dark: mode == 'dark' }]" :style="barStyle">
- <slot name="left">
- <div
- class="menu-btn-wrapper"
- v-if="(!isLastPage || !isTabbarPage) && showLeftArrow"
- @click="goBack()"
- >
- <img v-if="props.navigationArrowWhite" class="menu-btn" :src="IconArrowWhite" />
- <img v-else class="menu-btn" :src="IconArrow" />
- </div>
- </slot>
- <span class="common-navigation-bar-title">{{ title }}</span>
+ <div class="menu-btn-wrapper" v-if="!isLastPage && showLeftArrow" @click="goBack()">
+ <img v-if="props.navigationArrowWhite" class="menu-btn" :src="IconArrowWhite" />
+ <img v-else class="menu-btn" :src="IconArrow" />
+ </div>
+ <div class="common-navigation-bar-title">{{ title }}</div>
</div>
</NavBar>
</template>
@@ -19,39 +13,31 @@
<script setup lang="ts">
import NavBar from './NavBar.vue';
import { commonNavigationBarProps } from './commonNavigationBar';
-import { useSystemStore } from '@/stores/modules/system';
import { CSSProperties } from 'vue';
import IconArrow from '@/assets/common/icon-navi-arrow.png';
import IconArrowWhite from '@/assets/common/icon-navi-arrow-white.png';
-import Taro from '@tarojs/taro';
-import { goBack } from '@/utils';
-import { TabBarPageRouter } from '@/constants';
+import { useCanGoBack } from '@/hooks';
defineOptions({
name: 'TransparentNavigationBar',
});
-const systemStore = useSystemStore();
-
const props = defineProps(commonNavigationBarProps);
-const router = Taro.useRouter();
+const router = useRouter();
+
+const { isCanGoBack } = useCanGoBack();
const isLastPage = computed(() => {
- const pages = Taro.getCurrentPages();
- return pages.length <= 1;
+ return !isCanGoBack.value;
});
-const isTabbarPage = computed(() =>
- Object.values(TabBarPageRouter).some((x) => x.toLowerCase() === router.path.toLowerCase())
-);
-
const barStyle = computed(() => {
- const distance = systemStore.menuButtonWidth + systemStore.menuButtonRightDistance + 4;
+ const distance = 24;
return {
paddingLeft: `${distance}px`,
paddingRight: `${distance}px`,
- height: systemStore.navigationBarHeight + 'px',
+ height: 44 + 'px',
} as CSSProperties;
});
@@ -62,16 +48,26 @@
} as CSSProperties)
: {};
});
+
+function goBack() {
+ router.back();
+}
</script>
-<style lang="scss">
-.transparent-navigation-bar.navigation-bar-wrapper {
- background-color: transparent;
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.transparent-navigation-bar {
/* position: absolute; */
width: 100%;
+ background-color: transparent;
+
+ .common-navigation-bar-wrapper {
+ width: 100%;
+ }
.common-navigation-bar-title {
- height: 36px;
+ color: getCssVar('text-color', 'primary');
}
}
</style>
--
Gitblit v1.9.1