<template>
  <view class="header-section">
    <view class="header-content">
      <text class="header-title">{{ title }}</text>
      <text v-if="subTitle" class="header-desc">{{ subTitle }}</text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  subTitle: {
    type: String,
    default: ''
  }
})
</script>

<style lang="scss" scoped>
.header-section {
  --status-top: var(--status-bar-height, 0px);
  background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
  padding: calc(40rpx + var(--status-top)) 30rpx 80rpx;
  position: relative;
}

.header-content {
  .header-title {
    display: block;
    font-size: 44rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 16rpx;
  }

  .header-desc {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.7);
  }
}
</style>
