menduner/src/layout/index.vue

<template>
  <div class="parent" @click="layoutClick">
    <Headers class="headers"></Headers>
    <div style="margin-top: 50px;">
      <router-view></router-view>
    </div>
    <Footers class="mt-10"></Footers>
    <Slider 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'
defineOptions({ name: 'layout-index' })

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;
}
</style>