From e662aa7d894a0b259dc1816e79514c1f0d38da9f Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期三, 21 五月 2025 16:14:05 +0800
Subject: [PATCH] Merge branch 'dev-ui' of http://120.26.58.240:8888/r/LifePaymentFront into dev-ui
---
apps/taro/src/components/NavigationBar/TranslateNavigationBar.vue | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 60 insertions(+), 0 deletions(-)
diff --git a/apps/taro/src/components/NavigationBar/TranslateNavigationBar.vue b/apps/taro/src/components/NavigationBar/TranslateNavigationBar.vue
new file mode 100644
index 0000000..f385484
--- /dev/null
+++ b/apps/taro/src/components/NavigationBar/TranslateNavigationBar.vue
@@ -0,0 +1,60 @@
+<template>
+ <div class="translate-navigation-bar" :style="barStyle">
+ <TransparentNavigationBar
+ v-bind="_commonNavigationBarProps"
+ :is-absolute="false"
+ mode="dark"
+ navigationArrowWhite
+ :style="{ opacity: 1 - rangeValue }"
+ >
+ </TransparentNavigationBar>
+ <CommonNavigationBar v-bind="_commonNavigationBarProps" :style="{ opacity: rangeValue }" />
+ </div>
+</template>
+
+<script setup lang="ts">
+import { commonNavigationBarProps } from './commonNavigationBar';
+import { useSystemStore } from '@/stores/modules/system';
+import { CSSProperties } from 'vue';
+import TransparentNavigationBar from './TransparentNavigationBar.vue';
+import CommonNavigationBar from './CommonNavigationBar.vue';
+import { usePickProps } from 'senin-mini/hooks';
+
+defineOptions({
+ name: 'TranslateNavigationBar',
+});
+
+const systemStore = useSystemStore();
+
+const props = defineProps({
+ ...commonNavigationBarProps,
+ rangeValue: {
+ type: Number,
+ default: 0,
+ },
+});
+
+const _commonNavigationBarProps = usePickProps(props, commonNavigationBarProps);
+
+const barStyle = computed(() => {
+ return {
+ height: systemStore.navigationBarHeight + 'px',
+ } as CSSProperties;
+});
+</script>
+
+<style lang="scss">
+@import '@/styles/common.scss';
+
+.translate-navigation-bar {
+ position: relative;
+
+ .navigation-bar-wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+}
+</style>
--
Gitblit v1.9.1