<!-- 页面组件 -->

<script setup lang="ts">
    // 组件
    import Legend from './components/Legend.vue'

    import { defaultLegendConfig } from './config'
    import { useShare } from '@/hooks/page/useShare'

    useShare()

    const { expand, title, option } = defaultLegendConfig
</script>

<template>
    <view class="bg-white h-100vh">
        <!-- 地图组件 -->
        <Mapbox style="height: 100%" />

        <!-- 交互组件集 -->
        <view class="interaction">
            <!--  -->

            <!-- Legend 组件 -->
            <Legend :expand="expand" :title="title" :option="option" />
        </view>
    </view>
</template>

<style lang="scss" scoped>
    //

    .interaction {
        :deep(.legend) {
            position: absolute;
            left: 30rpx;
            bottom: 30rpx;
            z-index: 99;
        }
    }
</style>
