first commit

src/components/Index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="body">
+    <el-container>
+      <el-header class="index-header">
+        <TopBar></TopBar>
+      </el-header>
+
+      <el-container>
+
+        <el-aside :class="{'index-aside': true, 'index-aside-fold': fold}">
+          <el-button size="mini" class="fold" @click="handleFold">{{fold ? '▷' : '◁'}}</el-button>
+          <LeftBar v-if="userInfo"></LeftBar>
+        </el-aside>
+
+        <el-main class="index-main">
+          <el-scrollbar
+          wrap-class="content-scroll-area"
+          :native="false"
+          >
+            <transition name="fade">
+              <router-view v-if="$store.state.isRouterAlive"></router-view>
+            </transition>
+         </el-scrollbar>
+        </el-main>
+
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import LeftBar from './menu/leftbarnew.vue'
+import TopBar from './menu/topbar.vue'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'Index',
+  components: {
+    LeftBar,
+    TopBar
+  },
+  data() {
+    return {
+      // isRouterAlive: true
+      fold: false
+    }
+  },
+  computed: {
+    ...mapGetters({
+      userInfo: 'userInfo'
+    })
+  },
+  methods: {
+    // reload () {
+    //   this.isRouterAlive = false
+    //   this.$nextTick(() => (this.isRouterAlive = true))
+    // }
+    handleFold() {
+      this.fold = !this.fold
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.body {
+  background: #f5f5f5;
+  .el-header,
+  .el-main,
+  .el-aside {
+    padding: 0;
+  }
+  .el-header {
+    box-shadow: 0 1px 3px rgba(#ccc, 0.5);
+  }
+  .el-container {
+    // height: calc(100vh - 61px);
+    padding: 0;
+    margin: 0;
+  }
+  .index-header {
+    margin-bottom: 2px;
+  }
+  .index-aside {
+    width: 231px !important; // 50
+    height: calc(100vh - 63px);
+    position: relative;
+    transition: all 0.3s;
+    overflow: hidden;
+  }
+  .index-aside-fold {
+    width: 42px !important;
+  }
+  .index-main {
+    height: calc(100vh - 63px);
+    overflow: hidden;
+  }
+  .content-scroll-area {
+    max-height: calc(100vh - 63px);
+  }
+  .fold {
+    position: absolute;
+    right: 0;
+    top: 14px;
+    z-index: 1;
+    border-radius: 0;
+    border: 1px solid #e6e6e6;
+    border-right: none;
+    border-top-left-radius: 100px;
+    border-bottom-left-radius: 100px;
+    color: #ccc;
+  }
+}
+</style>