第一次提交

src/components/layout/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-container>
+    <el-aside :width="leftMenuWidth">
+      <layout-aside />
+    </el-aside>
+    <el-container>
+      <!-- 头部 -->
+      <el-header>
+        <layout-header />
+      </el-header>
+      <!-- 主体 -->
+      <div class="app-main">
+        <router-view v-slot="{ Component }">
+          <transition name="router-fade" mode="out-in">
+            <keep-alive v-if="!$route.fullPath.includes('lcProject')">
+              <component :is="Component" />
+            </keep-alive>
+            <component :is="Component" v-else />
+          </transition>
+        </router-view>
+      </div>
+    </el-container>
+  </el-container>
+</template>
+<style lang="scss" scoped>
+.el-aside {
+  background-color: #304156;
+  z-index: 2000;
+}
+
+.el-header {
+  background-color: rgba(0, 0, 0, 0.025);
+  padding: 0;
+  height: 80px;
+}
+
+.app-main {
+  height: -moz-calc(100vh - 50px);
+  height: -webkit-calc(100vh - 50px);
+  height: calc(100vh - 50px);
+  background-color: #eff2f9;
+  overflow: auto;
+}
+</style>
+<script>
+import {
+  LayoutAside,
+  LayoutHeader
+} from '@/components/layout/libs/index'
+import {
+  mapState
+} from 'vuex'
+export default {
+  name: 'Layout',
+  components: {
+    'layout-aside': LayoutAside,
+    'layout-header': LayoutHeader
+  },
+  computed: {
+    ...mapState('leftAside', {
+      leftMenuWidth: (state) => state.leftMenuWidth
+    }),
+    keyfull () {
+      return this.$route.fullPath
+    }
+  },
+  data () {
+    return {
+      key: this.$route.path,
+      keepAlivedComponents: {},
+
+    }
+  }
+}
+
+</script>