<template>
  <view class="flex items-center justify-between">
    <view class="title" :style="{ fontSize: `${getPx(textSize)}px` }">{{
      title
    }}</view>
    <view>
      <slot name="right"></slot>
    </view>
  </view>
</template>
<script setup>
import { getPx } from '@climblee/uv-ui/libs/function/index.js'
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  textSize: {
    type: String,
    default: '27rpx',
  },
})
</script>
<style lang="scss">
.title {
  @apply relative pl-20rpx;
  &::after {
    content: '';
    @apply absolute left-0 bottom-4rpx top-4rpx w-3px bg-primary;
  }
}
</style>
