babyhealth/pages/components/subHeader.vue

<template>
  <view>
    <!-- 移动设备顶部状态栏 -->
    <view class="top_bar flex w-full" v-if="isMobile">
      <view class="sub-header">
        <view class="header-left" @click="goBack">
          <i class="fas fa-arrow-left"></i>
        </view>
        <view class="header-title">{{ title }}</view>
        <view class="header-right" @click="showMoreOptions">
          <i class="fas fa-ellipsis-v"></i>
        </view>
      </view>
    </view>

    <!-- 浏览器环境下的导航栏 -->
    <view class="sub-header" v-else>
      <view class="header-left" @click="goBack">
        <i class="fas fa-arrow-left"></i>
      </view>
      <view class="header-title">{{ title }}</view>
      <view class="header-right" @click="showMoreOptions">
        <i class="fas fa-ellipsis-v"></i>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SubHeader',
  props: {
    title: {
      type: String,
      default: '页面标题'
    },
    showBack: {
      type: Boolean,
      default: true
    },
    showMore: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    // 从全局数据获取设备信息
    isMobile() {
      return getApp().globalData.isMobile;
    }
  },
  methods: {
    /**
     * 返回
     */
    goBack() {
      this.$emit('goBack');
    },
    /**
     * 显示更多选项
     */
    showMoreOptions() {
      this.$emit('showMoreOptions');
    }
  }
};
</script>

<style lang="scss" scoped>
/* 移动设备顶部状态栏 */
.top_bar {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--status-bar-height) + 88rpx);
  display: flex;
  align-items: flex-end;
  padding-top: var(--status-bar-height);
  box-sizing: border-box;
}

/* 支持安全区域的设备 */
@supports (padding: max(0px)) {
  .top_bar {
    height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
    padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
  }

  .top_bar + .header {
    margin-top: calc(
      var(--status-bar-height) + 88rpx + env(safe-area-inset-top)
    );
  }
}

/* 顶部导航栏 */
.sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  background-color: var(--surface);
  border-bottom: 1rpx solid var(--border);
  padding: 0 20rpx;
  box-sizing: border-box;
  box-shadow: var(--shadow);
}

/* 浏览器环境下的固定定位 */
.sub-header:not(.top_bar .sub-header) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: calc(var(--status-bar-height) + 88rpx);
  padding-top: var(--status-bar-height);
}

/* 移动设备下的导航栏样式 */
.top_bar .sub-header {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  width: 100%;
  height: 88rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.top_bar .header-title {
  color: var(--white);
  font-weight: 600;
  font-size: 36rpx;
}

.top_bar .header-left i,
.top_bar .header-right i {
  color: var(--white);
  font-size: 40rpx;
}

.header-left,
.header-right {
  width: 80rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.header-right:active {
  background-color: var(--surface-hover);
  border-radius: 8rpx;
}

/* 移动设备下的按钮悬停效果 */
.top_bar .header-left:active,
.top_bar .header-right:active {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8rpx;
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--title-color);
}

/* 浏览器环境下为内容添加顶部间距 */
.sub-header:not(.top_bar .sub-header) + .header {
  margin-top: calc(var(--status-bar-height) + 88rpx);
}

@supports (padding: max(0px)) {
  .sub-header:not(.top_bar .sub-header) {
    height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
    padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
  }

  .sub-header:not(.top_bar .sub-header) + .header {
    margin-top: calc(
      var(--status-bar-height) + 88rpx + env(safe-area-inset-top)
    );
  }
}
</style>