refactor: taro

zhengyiming

2025-02-20 703c46d17731d1b437509f326c050d1d36838f74

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

New file
@@ -0,0 +1,57 @@
<template>
  <div
    :class="[
      'navigation-bar-wrapper',
      { active: props.mode === 'dark', plain: props.plain, hasBorder: props.hasBorder },
    ]"
  >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { navigationBarProps } from './navBar';
import { CSSProperties } from 'vue';
import { useAppStore } from '@/store/modules/app';

defineOptions({
  name: 'NavBar',
});

const props = defineProps(navigationBarProps);

const appStore = useAppStore();

// const barStyle = computed(
//   () =>
//     ({
//       paddingTop: appStore.statusBarHeight / 2 + 'px',
//     } as CSSProperties)
// );
</script>

<style lang="scss" scoped>
@use '@/style/common.scss' as *;

.navigation-bar-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  background-color: #ffffff;

  &.plain {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  &.active {
    background-color: getCssVar('color', 'primary');
  }

  &.hasBorder {
    border-bottom: 1px solid #f6f6f6;
  }
}
</style>