yoe-shop-web/src/layout/index.vue

<template>
  <div class="app-wrapper">
    <Header v-if="meta.header != 'hide'" />
    <Search v-if="meta.header != 'hide'" />
    <Nav v-if="meta.nav" />
    <Breadcrumb v-if="meta.breadcrumb" />
    <div class="pages-bos" :class="meta.workbench ? 'pages-bos1' : 'pages-bos2'">
      <Workbench v-if="meta.workbench" />
      <router-view> </router-view>
    </div>
    <Foot />
  </div>
</template>

<script setup lang="ts">
import { Header, Search, Nav, Breadcrumb, Foot, Workbench } from './components';

const route = useRoute();
const meta = ref<any>({});
meta.value = route.meta;

watch(route, () => {
  meta.value = route.meta;
});
</script>

<style lang="scss" scoped>
@use '@/assets/styles/mixin.scss';
@use '@/assets/styles/variables.module.scss' as *;

.app-wrapper {
  min-height: 100%;
  width: 100%;
  background: #f4f4f4;

  .pages-bos {
    display: flex;

    &.pages-bos1 {
      width: 1200px;
      margin: 0 auto;
    }

    &.pages-bos2 {
      width: 100%;
    }

    .page-container{
      flex: 1;
      background-color: #ffffff;
      padding: 15px;
      margin-bottom: 20px;
    }
  }
}
</style>