初始化系统管理4个页面

src/components/tabLeft4.vue

@@ -0,0 +1,66 @@
+
+<template>
+    <div class="left">
+      <ul>
+        <li :class="{active:ind===index}" v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    ind: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      tabList: [
+        '库房设置',
+        '数据字典',
+        '用户管理',
+        '系统日志'
+      ]
+    }
+  },
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/system${index}`).catch(() => {})
+    }
+  }
+}
+</script>
+<style lang='less' scoped>
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 868px;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+      li:hover{
+        background:#e6f7ff ;
+      }
+      .active {
+        background:#e6f7ff ;
+      }
+    }
+  }</style>

src/router/index.js

@@ -157,6 +157,24 @@ const router = new VueRouter({
           path: 'system0',
           meta: { myInd: 4 },
           component: () => import('@/views/system/system0.vue')
+        },
+        {
+          name: 'system1',
+          path: 'system1',
+          meta: { myInd: 4 },
+          component: () => import('@/views/system/system1.vue')
+        },
+        {
+          name: 'system2',
+          path: 'system2',
+          meta: { myInd: 4 },
+          component: () => import('@/views/system/system2.vue')
+        },
+        {
+          name: 'system3',
+          path: 'system3',
+          meta: { myInd: 4 },
+          component: () => import('@/views/system/system3.vue')
         }
       ]
     }

src/views/layout/index.vue

@@ -86,7 +86,7 @@ export default {
         {
           name: '系统管理',
           push: '/layout/system',
-          son: ['system1', 'system2', 'system3']
+          son: ['库房设置', '数据字典', '用户管理', '系统日志']
         }
       ]
     }

src/views/system/system0.vue

@@ -1,31 +1,51 @@
 <template>
-<div class='system'>
-  系统管理
-</div>
+  <div class="system0">
+    <TabList />
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">系统管理</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">库房设置</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+        <div class="conten_left">
+          <div class="btn">
+            <el-button type="primary">新建库区</el-button>
+            <el-button type="danger">删除</el-button>
+          </div>
+          <div class="title">
+            <i class="el-icon-arrow-down" v-if="0"></i>
+            <i class="el-icon-arrow-up" v-else></i>
+          </div>
+        </div>
+        <div class="conten_right"></div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import TabList from '@/components/tabLeft4.vue'
 export default {
-  name: 'system',
-  components: {},
+  name: 'system0',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
   data () {
-    return {
-
-    }
+    // 这里存放数据
+    return {}
   },
+  // 监听属性 类似于data概念
   computed: {},
+  // 监控data中的数据变化
   watch: {},
-  methods: {
-
-  },
+  // 方法集合
+  methods: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
+  mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -37,5 +57,52 @@ export default {
 </script>
 <style lang='less' scoped>
 //@import url(); 引入公共css类
-
+.system0 {
+  /deep/#mytitle > span {
+    font-weight: 800;
+  }
+  display: flex;
+  .right {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .top {
+      padding-left: 35px;
+      display: flex;
+      align-items: center;
+      box-shadow: 1px 1px 10px 1px;
+      margin-left: 2px;
+      height: 40px;
+      background-color: #fff;
+    }
+  }
+  .conten {
+    flex: 1;
+    display: flex;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+    padding: 30px 60px 0;
+    .conten_left {
+      width: 380px;
+      height: 650px;
+      border: 1px solid #ccc;
+      margin-right: 30px;
+      .btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80px;
+      }
+      .title {
+        height: 55px;
+        background-color: #f2f2f2;
+      }
+    }
+    .conten_right {
+      flex: 1;
+      height: 650px;
+      border: 1px solid #ccc;
+    }
+  }
+}
 </style>

src/views/system/system1.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="system1">
+    <TabList :ind='1'/>
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">系统管理</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">数据字典</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft4.vue'
+export default {
+  name: 'system1',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.system1 {
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+  display: flex;
+  .right {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .top {
+      padding-left: 35px;
+      display: flex;
+      align-items: center;
+      box-shadow: 1px 1px 10px 1px;
+      margin-left: 2px;
+      height: 40px;
+      background-color: #fff;
+    }
+  }
+  .conten {
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+    padding: 30px 60px 0;
+  }
+}
+</style>

src/views/system/system2.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="system2">
+    <TabList :ind='2'/>
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">系统管理</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">用户管理</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft4.vue'
+export default {
+  name: 'system2',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.system2 {
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+  display: flex;
+  .right {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .top {
+      padding-left: 35px;
+      display: flex;
+      align-items: center;
+      box-shadow: 1px 1px 10px 1px;
+      margin-left: 2px;
+      height: 40px;
+      background-color: #fff;
+    }
+  }
+  .conten {
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+    padding: 30px 60px 0;
+  }
+}
+</style>

src/views/system/system3.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="system3">
+    <TabList :ind='3'/>
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">系统管理</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">系统日志</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft4.vue'
+export default {
+  name: 'system3',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.system3 {
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+  display: flex;
+  .right {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .top {
+      padding-left: 35px;
+      display: flex;
+      align-items: center;
+      box-shadow: 1px 1px 10px 1px;
+      margin-left: 2px;
+      height: 40px;
+      background-color: #fff;
+    }
+  }
+  .conten {
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+    padding: 30px 60px 0;
+  }
+}
+</style>