zjugis_OA/client/src/views/OaSystem/oaLayout/index.vue

<template>
  <div class="_layout">
    <!-- <Header />
    <div class="tagBoss">
      <TagList />
    </div>
    <div class="_content">
      <router-view />
    </div> -->

    <div class="layout-left">
      <Menus />
    </div>
    <div class="layout-right">
      <div class="layout-header">
        <Header />
        <TagList />
      </div>
      <div class="layout-content">
        <router-view>
          <template #default="{ Component, route }">
            <keep-alive>
              <component :is="Component" :key="route.fullPath" />
            </keep-alive>
          </template>
        </router-view>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useTagsViewStore } from '@/store/modules/tagsView'
import Header from './header.vue'
import TagList from './tagList.vue'
import Menus from './menus.vue'

const tagsViewStore = useTagsViewStore()

const getCaches = computed((): string[] => {
  return tagsViewStore.getCachedViews
})

defineOptions({ name: 'Layout' })

/** 初始化 **/
onMounted(() => {})
</script>
<style lang="scss" scoped>
._layout {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .layout-left {
    width: 184px;
    height: 100%;
    background: linear-gradient(180deg, #336fb6 0%, #0c4689 100%);
  }
  .layout-right {
    width: calc(100% - 184px);
    height: 100%;
    background: #eaf1f9;
    padding: 15px 15px;
    .layout-header {
      width: 100%;
      height: 100px;
    }
    .layout-content {
      width: 100%;
      height: calc(100% - 100px);
    }
  }
}

div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
  box-sizing: border-box;
}
</style>