fix: 页面

zhengyiming

2025-02-20 988837b3fbffb8abea06dcb875f5746b9fce3c57

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

New file
@@ -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(TabBarPageRouter).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>