first commit

src/views/layout/components/Sidebar/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <div v-show="isShow" class="img-wrapper">
+        <img :src="require('@/assets/img/MES.png')">
+        <span style="font-size: 18px; font-weight: bold; color: white;margin-top: 7px">迈思信息<br>
+          <span style="font-size: 13px; color: white;margin-top: 0px!important;">MESWORK</span>
+        </span>
+      </div>
+      <el-menu
+        :show-timeout="200"
+        :default-active="$route.path"
+        :collapse="isCollapse"
+        mode="vertical"
+        background-color="white"
+        text-color="black"
+        active-text-color="#1576e8"
+        style="height:calc(100% - 124px)"
+      >
+        <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+      </el-menu>
+    </el-scrollbar>
+  </div>
+
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  data() {
+    return {
+      isShow: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'permission_routers'
+    ]),
+    routes() {
+      return this.$router.options.routes
+    },
+    isCollapse() {
+      this.showLogo()
+      return !this.sidebar.opened
+    }
+  },
+  methods: {
+    showLogo() {
+      if (this.sidebar.opened === true) {
+        this.isShow = true
+      } else {
+        this.isShow = false
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .img-wrapper{
+    display: flex;
+    background-color: #1576e8 !important;
+    img{
+      width: 37px;
+      height: 38px;
+      margin: 6px 10px 5px 45px;
+    }
+  }
+</style>