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

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

<script setup>
import headCarousel from './components/headCarousel.vue'
import headSearch from '@/components/headSearch'
import hotJobs from './components/hotJobs.vue'
import jobTypeCard from '@/components/jobTypeCard'
import hotPromotedPositions from './components/hotPromotedPositions.vue'
import PopularEnterprises from './components/popularEnterprises.vue'
defineOptions({ name:'personal-index'})
</script>

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