ieplus-app/src/pagesMain/pages/volunteer/volunteer.vue

<template>
    <ie-page bg-color="white">
        <ie-navbar bg-color="#FFFFFF" transparent custom-back :click-hover="false">
            <template #headerLeft>
                <view class="flex items-center gap-7 text-fore-subtitle text-sm font-medium">
                    <ie-image is-oss src="/volunteer/index/navbar_title.png" custom-class="w-146"/>
                    <text>·</text>
                    <text>{{ examTypeName }}</text>
                </view>
            </template>
            <template #headerRight>
                <view class="flex items-center gap-5 text-fore-subtitle text-base font-medium">
                    <ie-image is-oss src="/volunteer/index/navbar_location.png" custom-class="w-24"/>
                    <text>{{ userStore.getLocation }}</text>
                </view>
            </template>
        </ie-navbar>
        <volunteer-banner :style="{marginTop: (baseStickyTop + 10) + 'px'}"/>
        <volunteer-menu/>
        <ie-gap/>
        <volunteer-policy/>
        <volunteer-echelon/>
        <template #tabbar>
            <ie-tabbar :active="1"/>
        </template>
    </ie-page>
</template>

<script lang="ts" setup>
import {useUserStore} from '@/store/userStore';
import {useTransferPage} from '@/hooks/useTransferPage';
import {EnumDictName} from '@/common/enum';
import {useDictStore} from "@/store/dictStore";
import {useNavbar} from "@/hooks/useNavbar";
import VolunteerBanner from "@/pagesMain/pages/volunteer/components/volunteer-banner.vue";
import VolunteerMenu from "@/pagesMain/pages/volunteer/components/volunteer-menu.vue";
import VolunteerPolicy from "@/pagesMain/pages/volunteer/components/volunteer-policy.vue";
import VolunteerEchelon from "@/pagesMain/pages/volunteer/components/volunteer-tier.vue";

const {transferTo} = useTransferPage();
const userStore = useUserStore();
const dictStore = useDictStore()
const {baseStickyTop} = useNavbar();

const examTypeName = computed(() => {
    return dictStore.getDictLabel(EnumDictName.EXAM_TYPE, userStore.getExamType)
})

// 为了让子组件触发页面滚动
onPageScroll(() => { })
</script>

<style lang="scss" scoped></style>