<template>
  <view class="customs-express-page" :style="backgroundStyle">
    <!-- 顶部渐变背景 -->
    <view :style="topGradientStyle"></view>

    <!-- 状态栏占位 -->
    <view class="status-bar"></view>

    <!-- 服务网格 -->
    <customs-service-grid />
  </view>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useCustomsExpress } from '@/composables/useCustomsExpress'
import CustomsServiceGrid from './components/customs-service-grid.vue'

// 使用首页逻辑
const { backgroundStyle, topGradientStyle } = useCustomsExpress()

// 页面生命周期
onMounted(() => {
  // 设置页面标题
  uni.setNavigationBarTitle({
    title: '海关服务',
  })
})

onUnmounted(() => {})
</script>

<style lang="scss" scoped>
.customs-express-page {
  position: relative;
  min-height: 100vh;
  padding: 0;
  padding-bottom: 60rpx;
}

.status-bar {
  height: 88rpx;
  background: transparent;
  position: relative;
  z-index: 2;
}

.page-header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40rpx 32rpx 60rpx;

  .page-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
  }

  .page-subtitle {
    display: block;
    font-size: 28rpx;
    color: #666;
  }
}
</style>
