menduner/src/views/Home/personal/index.vue

<template>
  <div>
    <headCarousel></headCarousel>
    <div class="stickyBox py-5">
      <headSearch v-if="industryTreeData"></headSearch>
    </div>
    <hotJobs></hotJobs>
    <div class="default-width">
      <jobTypeCard class="mb-5" v-if="industryTreeData"></jobTypeCard>
      <hotPromotedPositions></hotPromotedPositions>
      <PopularEnterprises class="mt-10"></PopularEnterprises>
    </div>
  </div>
</template>

<script setup>
import headCarousel from './components/headCarousel.vue'
import headSearch from './components/search.vue'
import hotJobs from './components/hotJobs.vue'
import jobTypeCard from './components/jobTypeCard.vue'
import hotPromotedPositions from './components/hotPromotedPositions.vue'
import PopularEnterprises from './components/popularEnterprises.vue'
import { getPositionTreeData } from '@/api/common/index'
import { provide, ref } from 'vue';

defineOptions({ name:'personal-index'})

// 获取行业树形
let industryTreeData = ref(null)
const getTreeData = async () => {
  const res = await getPositionTreeData()
  if (res?.length) industryTreeData.value = JSON.stringify(res)
  else industryTreeData.value = "[]"
}
provide('industryTreeData', industryTreeData)
getTreeData()
</script>

<style lang="scss" scoped>
.stickyBox {
  position: sticky;
  top: 48px;
  z-index: 999;
  background-color: var(--default-bgc);
}
</style>