From 758d8056dc3dbc6bf92c298aa3627e66b933b5a0 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期四, 22 五月 2025 13:25:21 +0800
Subject: [PATCH] feat: UI
---
apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue | 73 ++++++++++++++++++++++++++++++++++++
1 files changed, 73 insertions(+), 0 deletions(-)
diff --git a/apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue b/apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue
new file mode 100644
index 0000000..1c88c21
--- /dev/null
+++ b/apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue
@@ -0,0 +1,73 @@
+<template>
+ <NavBar v-bind="props" dark class="transparent-navigation-bar" :style="wrapperStyle">
+ <div :class="['common-navigation-bar-wrapper', { dark: mode == 'dark' }]" :style="barStyle">
+ <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>
+
+<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: 'TransparentNavigationBar',
+});
+
+const props = defineProps(commonNavigationBarProps);
+
+const router = useRouter();
+
+const { isCanGoBack } = useCanGoBack();
+
+const isLastPage = computed(() => {
+ return !isCanGoBack.value;
+});
+
+const barStyle = computed(() => {
+ const distance = 24;
+ return {
+ paddingLeft: `${distance}px`,
+ paddingRight: `${distance}px`,
+ height: 44 + 'px',
+ } as CSSProperties;
+});
+
+const wrapperStyle = computed(() => {
+ return props.isAbsolute
+ ? ({
+ position: 'absolute',
+ } as CSSProperties)
+ : {};
+});
+
+function goBack() {
+ router.back();
+}
+</script>
+
+<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 {
+ color: getCssVar('text-color', 'primary');
+ }
+}
+</style>
--
Gitblit v1.9.1