menduner/src/layout/index.vue

<template>
  <div class="parent" @click="layoutClick">
    <Headers class="headers"></Headers>
    <div class="content">
      <router-view></router-view>
    </div>
    <Footers v-if="footerWhiteList.indexOf(router.currentRoute.value.path) === -1" class="mt-10"></Footers>
    <Slider v-if="whiteList.indexOf(router.currentRoute.value.path) === -1" class="slider"></Slider>
  </div>
</template>

<script setup>
import Headers from './personal/navBar.vue'
import Footers from './personal/footer.vue'
import Slider from './personal/slider.vue'
import { useSharedState } from '@/store/sharedState'
import { useRouter } from 'vue-router'
defineOptions({ name: 'personal-layout-index' })

// 不展示侧边栏名单
const whiteList = ['/login', '/privacyPolicy', '/userAgreement', '/register', '/recruit/personal/advertisement/introduce']
const footerWhiteList = ['/recruit/personal/message', '/recruit/personal/advertisement/introduce', '/about']
const router = useRouter()

const sharedState = useSharedState()

const layoutClick = () => {
  sharedState.increment()
}
</script>

<style lang="scss" scoped>
.parent {
  background-color: var(--default-bgc);
  position: relative;
}
.headers {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 999;
}
.slider {
  position: fixed;
  bottom: 50%;
  right: 24px;
  translate: 0 50%;
  z-index: 999;
}
.content {
  min-height: calc(100vh - (48px + 225px));
  margin-top: 50px;
}
</style>