vava_buy_official/src/views/Layout/index.vue

<template>
  <div id="layout__container">
    <!-- 全局加载动画 -->
    <!-- <LoadingSpinner /> -->

    <!-- header -->
    <header class="layout__header">
      <Header></Header>
    </header>

    <!-- main -->
    <main class="layout__main">
      <Main></Main>
    </main>

    <!-- footer -->
    <footer class="layout__footer">
      <Footer></Footer>
    </footer>
  </div>
</template>


<script setup lang="ts">
import Header from './modules/Header/index.vue'
import Main from './modules/Main/index.vue'
import Footer from './modules/Footer/index.vue'
// import LoadingSpinner from '@/components/LoadingSpinner.vue'
</script>


<style lang="less" scoped>
#layout__container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;

  .layout__header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 50;
    width: 100%;
  }

  .layout__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .layout__footer {
    width: 100%;
    height: auto;
  }
}
</style>