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

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">
  <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>
      </view>
   </view>
    </template>
  </up-navbar>
</template>

<script setup>
@@ -36,6 +33,26 @@
   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
   }
});

@@ -54,50 +71,18 @@
</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; /* 确保点击区域足够大 */
/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  :deep(.up-navbar) {
    background: #1e1f24 !important;
    .up-navbar__title {
      color: #e9edf3 !important;
}

.header-center {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   left: 0;
   right: 0;
   pointer-events: none;
    .up-navbar__back {
      color: #e9edf3 !important;
}

.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;
}
</style>