health-front/components/product/sectionHeader.vue

<template>
  <view class="header-box" :style="style">
    <view class="flex header">
      <view class="title">{{ title }}</view>
      <button class="flex btn" @click="$emit('showAll')">
        <text class="btn-text">查看全部</text>
        <uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
      </button>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      style: {
        type: String,
        default: '',
      }
    },
  }
</script>

<style scoped lang="scss">
.header {
  &-box {
    padding: 0 32rpx 24rpx 32rpx;
  }

  justify-content: space-between;

  .title {
    font-family: PingFang SC;
    font-size: 36rpx;
    font-weight: 600;
    line-height: 1.2;
    color: #252545;
  }

  .btn {
    font-family: PingFang SC;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 1.4;
    color: #A8A8A8;

    &-text {
      margin-right: 4rpx;
    }
  }
}
</style>