<template>
  <view class="content">
    <!-- 左侧标题区域 -->
    <view class="content-left">
      <view class="content-bar"></view>
      <text>{{ title }}</text>
    </view>

    <!-- 右侧自定义内容区域 -->
    <view class="content-right">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
  import {
    defineProps
  } from 'vue'

  // 接收父组件传递的标题
  const props = defineProps({
    title: {
      type: String,
      required: true, // 标题为必填项
      default: '' // 默认值
    }
  })
</script>

<style lang="scss" scoped>
  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
    color: #333333;
    font-size: 28rpx;
    font-weight: 600;

    &-left {
      display: flex;
      align-items: center;
    }

    &-right {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #666666;

      image {
        width: 15rpx;
        height: 13rpx;
        margin-left: 10rpx;
      }
    }

    &-bar {
      width: 8rpx;
      height: 30rpx;
      margin-right: 10rpx;
      background: linear-gradient(to bottom, #1975C3, #fff);
    }
  }
</style>
