VAVABUY/pages/index/components/SectionTitle.vue

<template>
  <view class="section-title" :class="[`align-${align}`]" :style="{ gap: gap }">
    <text
      class="line"
      :style="{
        backgroundColor: lineColor,
        width: lineWidth,
        height: lineHeight,
      }"
    ></text>
    <view
      class="title-text"
      :style="{
        fontSize: fontSize,
        color: color,
        fontWeight: bold ? '700' : '500',
      }"
    >
      <slot>
        <trans :_t="title" v-if="title" />
      </slot>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  align: {
    type: String,
    default: "left",
  },
  color: {
    type: String,
    default: "var(--text)",
  },
  fontSize: {
    type: String,
    default: "28rpx",
  },
  bold: {
    type: Boolean,
    default: true,
  },
  gap: {
    type: String,
    default: "12rpx",
  },
  lineColor: {
    type: String,
    default: "var(--black)",
  },
  lineWidth: {
    type: String,
    default: "6rpx",
  },
  lineHeight: {
    type: String,
    default: "28rpx",
  },
});
</script>

<style lang="less" scoped>
.section-title {
  display: flex;
  align-items: center;
  margin: 40rpx 0 32rpx;

  &.align-left {
    justify-content: flex-start;
  }
  &.align-center {
    justify-content: center;
  }

  .line {
    display: inline-block;
    border-radius: 999rpx;
  }

  .title-text {
    display: inline-flex;
    align-items: center;
  }
}
</style>