头部样式修改、适配不同机型

gaoluyang

3 天以前 77861fcc5ee1c4f8e7c6412b373cb438c7313930

 src/components/PageHeader.vue

@@ -1,20 +1,17 @@
<template>
   <view class="page-header">
      <view class="header-left">
         <up-icon 
            name="arrow-left" 
            size="20" 
            color="#333" 
            @click="handleBack"
         ></up-icon>
      </view>
      <view class="header-center">
         <text class="page-title">{{ title }}</text>
      </view>
      <view class="header-right" v-if="$slots.right">
         <slot name="right"></slot>
      </view>
   </view>
  <up-navbar
    :title="title"
    :show-back="showBack"
    @leftClick="handleBack"
    :color="color"
    :border="true"
    :fixed="true"
    :placeholder="true"
  >
    <template v-if="$slots.right" #right>
      <slot name="right"></slot>
    </template>
  </up-navbar>
</template>

<script setup>
@@ -22,21 +19,41 @@

// 定义组件属性
const props = defineProps({
   // 页面标题
   title: {
      type: String,
      default: ''
   },
   // 是否显示返回按钮
   showBack: {
      type: Boolean,
      default: true
   },
   // 自定义返回事件
   customBack: {
      type: Function,
      default: null
   }
  // 页面标题
  title: {
    type: String,
    default: ''
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true
  },
  // 自定义返回事件
  customBack: {
    type: Function,
    default: null
  },
  // 背景色
  background: {
    type: String,
    default: '#ffffff'
  },
  // 文字颜色
  color: {
    type: String,
    default: '#333333'
  },
  // 是否显示底部分割线
  borderBottom: {
    type: Boolean,
    default: true
  },
  // 是否固定在顶部
  isFixed: {
    type: Boolean,
    default: true
  }
});

// 定义事件
@@ -44,60 +61,28 @@

// 处理返回事件
const handleBack = () => {
   if (props.customBack) {
      props.customBack();
   } else {
      emit('back');
      // uni.navigateBack();
   }
  if (props.customBack) {
    props.customBack();
  } else {
    emit('back');
    // uni.navigateBack();
  }
};
</script>

<style scoped lang="scss">
.page-header {
   background: #ffffff;
   padding: 16px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid #f0f0f0;
   position: sticky;
   /* 兼容 iOS 刘海/灵动岛安全区 */
   padding-top: calc(env(safe-area-inset-top));
   top: 0;
   z-index: 100;
   position: relative;
}
/* up-navbar 组件已经内置了安全区域适配，不需要额外的样式调整 */

.header-left {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 30px; /* 确保点击区域足够大 */
}

.header-center {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   left: 0;
   right: 0;
   pointer-events: none;
}

.page-title {
   font-size: 18px;
   font-weight: 600;
   color: #333;
   pointer-events: auto;
}

.header-right {
   display: flex;
   align-items: center;
   min-width: 44px; /* 确保右侧区域有足够空间 */
   justify-content: flex-end;
/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  :deep(.up-navbar) {
    background: #1e1f24 !important;
    .up-navbar__title {
      color: #e9edf3 !important;
    }
    .up-navbar__back {
      color: #e9edf3 !important;
    }
  }
}
</style>