bigDataApp/components/customCard/customCard.vue

<template>
  <view class="custom-card">
    <view class="custom-card-header">
      <view class="custom-card-action" @tap="BackPage">
        <u-icon name="arrow-left" color="#333333" size="32rpx" />
        <view class="custom-card-action-text">
          <slot name="backText"></slot>
        </view>
      </view>
      <view class="cu-bar-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'custom-card',
  props: {},
  data() {
    return {};
  },
  methods: {
    BackPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.custom-card {
  border-radius: 16upx;
  opacity: 1;
  padding-top: 80rpx;
}

.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>