release: @life-payment/core v0.0.3

zhengyiming

2025-03-13 07d73df3d817d01ce47f6c7b7a8d8514cd389295

 apps/h5/src/components/NavigationBar/TransparentNavigationBar.vue

New file
@@ -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>