bigdata_WX/components/customCard/customCard.vue

<template>
  <view class="custom-card">
    <!-- 固定头部：滚动时内容不再钻到系统状态栏下面 -->
    <nav-top-bar :background="background">
      <view class="custom-card-header">
        <view class="custom-card-action">
          <u-icon name="arrow-left" color="#333333" size="32rpx" @tap="BackPage"/>
          <view class="custom-card-action-text">
            <slot name="backText"></slot>
          </view>
        </view>
        <view class="cu-bar-right">
          <slot name="right"></slot>
        </view>
      </view>
    </nav-top-bar>
  </view>
</template>
<script>
import NavTopBar from '@/components/nav-top-bar/nav-top-bar.vue';

export default {
  name: 'custom-card',
  components: {
    NavTopBar,
  },
  props: {
    // 固定栏背景，不传时使用业务页通用渐变，特殊背景页可覆盖
    background: {
      type: String,
      default: 'linear-gradient(102deg, #bfeadd 6.77%, #b8f1e7 40.15%, #b9eef5 84.02%)',
    },
  },
  data() {
    return {};
  },
  methods: {
    BackPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.custom-card {
  border-radius: 16upx;
  opacity: 1;
  // 状态栏高度由 nav-top-bar 的占位撑起
}

.custom-card-header {
  padding: 0 20rpx;
  height: 90rpx;
  color: #333333;
  font-size: 28rpx;
  font-weight: 600;
  font-family: 'PingFang SC';
  line-height: 44rpx;
  position: relative;
  .custom-card-action {
    display: flex;
    align-items: center;
    height: 90rpx;
    line-height: 90rpx;
    .custom-card-action-text {
      width: 90%;
      text-align: center;
      color: #042118;
      font-size: 34rpx;
    }
  }
  .cu-bar-right {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
  }
}
</style>