x

src/components/menu.vue

@@ -28,20 +28,23 @@
         </div>
       </div>
     </div>
-    <div class="nav-left">
+    <div class="nav-left" v-show="!collapse">
 
 
       <div class="meau-con">
         <div class="zankai">
-          <span class="icon iconfont fr"></span>
+          <span class="icon iconfont fr" @click="zk"></span>
         </div>
 
-        <el-menu default-active="2" class="el-menu-vertical-demo" active-text-color="#1969F9">
-          <el-menu-item index="1">
+        <el-menu class="el-menu-vertical-demo" @open="handleOpen" active-text-color="#1969F9" router
+          :default-active="$route.path" :router="true" :unique-opened="true" @close="handleClose"
+          @select="handleSelect">
+          <el-menu-item :index="'/'" :class="{'indextab':isIndexTab}">
             <template slot="title">
               <span class="icon iconfont"></span>
               <span>概况</span>
             </template>
+
           </el-menu-item>
           <el-submenu index="2">
             <template slot="title">
@@ -49,8 +52,8 @@
               <span slot="title">报价管理</span>
             </template>
             <el-menu-item-group>
-              <el-menu-item index="2-1">询价管理</el-menu-item>
-              <el-menu-item index="2-2">报价管理</el-menu-item>
+              <el-menu-item :index="'/inquire'">询价管理</el-menu-item>
+              <el-menu-item :index="'/quote'">报价管理</el-menu-item>
             </el-menu-item-group>
           </el-submenu>
           <el-submenu index="3">
@@ -59,8 +62,8 @@
               <span slot="title">库存管理</span>
             </template>
             <el-menu-item-group>
-              <el-menu-item index="3-1">库存列表</el-menu-item>
-              <el-menu-item index="3-2">库存导入</el-menu-item>
+              <el-menu-item :index="'/list'">库存列表</el-menu-item>
+              <el-menu-item :index="'/enter'">库存导入</el-menu-item>
             </el-menu-item-group>
           </el-submenu>
           <el-submenu index="4">
@@ -69,8 +72,8 @@
               <span slot="title">商品管理</span>
             </template>
             <el-menu-item-group>
-              <el-menu-item index="4-1">商品列表</el-menu-item>
-              <el-menu-item index="4-2">品牌列表</el-menu-item>
+              <el-menu-item :index="'/goods'">商品列表</el-menu-item>
+              <el-menu-item :index="'/brand'">品牌列表</el-menu-item>
             </el-menu-item-group>
           </el-submenu>
           <el-submenu index="5">
@@ -79,11 +82,35 @@
               <span slot="title">用户中心</span>
             </template>
             <el-menu-item-group>
-              <el-menu-item index="5-1">基本信息</el-menu-item>
+              <el-menu-item :index="'/message'">基本信息</el-menu-item>
             </el-menu-item-group>
           </el-submenu>
 
         </el-menu>
+
+
+
+      </div>
+
+    </div>
+    <div class="nav-left2" v-show="collapse">
+      <div class="zankai">
+        <span class="icon iconfont fr" @click="zk"></span>
+      </div>
+      <div class="item " :class="{'act':tabSure==1}">
+        <span class="icon iconfont"></span>
+      </div>
+      <div class="item" :class="{'act':tabSure==2}">
+        <span class="icon iconfont"></span>
+      </div>
+      <div class="item" :class="{'act':tabSure==3}">
+        <span class="icon iconfont"></span>
+      </div>
+      <div class="item" :class="{'act':tabSure==4}">
+        <span class="icon iconfont"></span>
+      </div>
+      <div class="item" :class="{'act':tabSure==5}">
+        <span class="icon iconfont"></span>
       </div>
     </div>
   </div>
@@ -106,12 +133,61 @@
     props: {
 
     },
+    created() {
+
+    },
     data() {
       return {
+        collapse: false,
+        isIndexTab: true,
+        tabSure: ""
 
       }
     },
+    mounted() {
+        this.tabss(this.$route.path)
+    },
     methods: {
+      tabss(lk) {
+        if (lk == "/") {
+          this.tabSure = 1
+        }
+        if (lk == "/inquire" || lk == "/quote") {
+          this.tabSure = 2
+        }
+        if (lk == "/list" || lk == "/enter") {
+          this.tabSure = 3
+        }
+        if (lk == "/goods" || lk == "/brand") {
+          this.tabSure = 4
+        }
+        if (lk == "/message") {
+          this.tabSure = 5
+        }
+      },
+      zk() {
+        this.collapse = !this.collapse;
+        let app_ = document.getElementById('app');
+        if (this.collapse) {
+          app_.setAttribute('style', 'padding-left:62px');
+        } else {
+          app_.setAttribute('style', 'padding-left:226px');
+        }
+      },
+      handleOpen(key, keyPath) {
+        if (this.$route.path == "/") {
+          this.isIndexTab = false
+        }
+
+      },
+      handleClose(key, keyPath) {
+        if (this.$route.path == "/") {
+          this.isIndexTab = true
+        }
+      },
+      handleSelect(key, keyPath) {
+        this.tabss(key)
+      }
 
     }
   }
@@ -263,6 +339,63 @@
 
   }
 
+  .nav-left2 {
+    width: 62px;
+    background: #fff;
+    position: fixed;
+    left: 0px;
+    top: 56px;
+    bottom: 0px;
+
+    .zankai {
+      height: 26px;
+      font-size: 18px;
+      color: #646B78;
+      line-height: 26px;
+      padding-right: 5px;
+
+      span {
+        cursor: pointer;
+
+        &:hover {
+          color: #1969F9;
+        }
+      }
+
+    }
+
+    .item {
+      height: 46px;
+      line-height: 46px;
+      text-align: center;
+      cursor: pointer;
+      &.act{
+        background: #F1F4FA;
+        position: relative;
+         &::after {
+          content: "";
+          position: absolute;
+          left: 0px;
+          top: 7px;
+          width: 5px;
+          height: 30px;
+          background: #1969F9;
+        }
+        span{
+          color:#1969F9;
+        }
+      }
+      &:hover {
+        background: #F1F4FA;
+      }
+
+      .icon {
+        font-size: 20px;
+        color: #646B78;
+      }
+    }
+  }
+
   .nav-left {
     width: 226px;
     background: #fff;
@@ -277,6 +410,7 @@
       width: 100%;
       overflow: auto;
       height: 100%;
+      background: #fff;
 
       .zankai {
         height: 26px;
@@ -287,33 +421,101 @@
 
         span {
           cursor: pointer;
+          transition: all 0.5s;
+
+          &:hover {
+            color: #1969F9;
+          }
+        }
       }
+
+      .el-menu-item:focus,
+      .el-menu-item:hover,
+      .el-submenu__title:hover {
+        background: #F1F4FA;
       }
 
+      .el-submenu.is-opened,
+      .indextab.is-active {
+        position: relative;
+        background: #F1F4FA;
+
+        span,
+        .iconfont {
+          color: #1969F9;
+        }
+
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0px;
+          top: 7px;
+          width: 5px;
+          height: 30px;
+          background: #1969F9;
+        }
+      }
+
+      .el-menu-item {
+        padding-left: 37px !important;
+        height: 46px;
+        line-height: 42px;
+
+        .iconfont {
+          font-size: 20px;
+          color: #646B78;
+          margin-right: 14px;
+        }
+
+        a {
+          color: #646B78;
+        }
+
+      }
 
-      .el-menu-item,
       .el-submenu__title {
         height: 46px;
         line-height: 42px;
-        padding-left:37px!important;
-        .iconfont{
+        padding-left: 37px !important;
+
+        .iconfont {
           font-size: 20px;
-          color:#646B78;
+          color: #646B78;
           margin-right: 14px;
         }
+
+        a {
+          color: #646B78;
+        }
+      }
+
+      .el-menu-item-group {
+        .el-menu-item-group__title {
+          display: none;
+        }
+
+        .el-menu-item {
+          font-size: 14px !important;
+          padding-left: 80px !important;
+          line-height: 46px !important;
+          height: 46px !important;
+        }
       }
+
       .el-menu {
         border: 0px;
+
         .el-menu-item,
         .el-submenu__title {
           font-size: 16px;
           color: #646B78;
         }
 
+
       }
 
       &::-webkit-scrollbar {
-        width: 18px;
+        width: 10px;
       }
 
       &::-webkit-scrollbar-thumb {

src/router/index.js

@@ -9,12 +9,75 @@ const routes = [
     path: '/',
     name: 'Index',
     meta: {
-      title: '猎芯网 - 云芯系统',
-      back: true
+      title: '概况'
     },
     component: () => import('../views/Index/index.vue')
   },
   {
+    path: '/inquire',
+    name: 'Inquire',
+    meta: {
+      title: '询价管理'
+    },
+    component: () => import('../views/List/inquire.vue')
+  },
+  {
+    path: '/quote',
+    name: 'Quote',
+    meta: {
+      title: '报价管理'
+    
+    },
+    component: () => import('../views/List/quote.vue')
+  },
+  {
+    path: '/brand',
+    name: 'Brand',
+    meta: {
+      title: '品牌列表'
+    
+    },
+    component: () => import('../views/Goods/brand.vue')
+  },
+  {
+    path: '/list',
+    name: 'List',
+    meta: {
+      title: '库存列表'
+    
+    },
+    component: () => import('../views/Store/list.vue')
+  },
+  {
+    path: '/enter',
+    name: 'Enter',
+    meta: {
+      title: '库存导入'
+    
+    },
+    component: () => import('../views/Store/enter.vue')
+  },
+  {
+    path: '/goods',
+    name: 'Goods',
+    meta: {
+      title: '商品列表'
+    
+    },
+    component: () => import('../views/Goods/goods.vue')
+  },
+  {
+    path: '/message',
+    name: 'Message',
+    meta: {
+      title: '基本信息'
+    
+    },
+    component: () => import('../views/Info/message.vue')
+  },
+
+  
+  {
     path: '/login',
     name: 'Login',
     meta: {

src/views/Goods/brand.vue

+<template>
+    <div class="brand">
+        我是品牌信息
+        <Menu/>
+    </div>
+
+</template>
+<script>
+  import Vue from 'vue';
+  import Menu from "@/components/menu.vue";
+  import Tool from '../../tool'
+  import {
+    Button,
+    Message 
+  } from 'element-ui'
+  Vue.use(Button)
+  export default {
+    name: "brand",
+
+    data() {
+      return {};
+    },
+    watch: {},
+    created() {
+
+    },
+    computed: {},
+    methods: {
+      ceshi() {
+          //this.$message.error('上传头像图片只能是 JPG 格式!');
+        Message('这是一条消息提示');
+        this.$http('get', "/getJoke1", {
+          page: 1, count: 2, type: 'video'
+        })
+          .then(res => {
+            console.log(res)
+          })
+          .catch(err => {
+            console.log(err.message);
+          })
+
+      }
+    },
+    components: {
+      Menu
+    }
+  };
+</script>
+<style scoped>
+    /* @import "../../assets/css/index/index.min.css"; */
+</style>
\ No newline at end of file

src/views/Goods/goods.vue

+<template>
+    <div class="goods">
+        我是商品信息
+        <Menu/>
+    </div>
+
+</template>
+<script>
+  import Vue from 'vue';
+  import Menu from "@/components/menu.vue";
+  import Tool from '../../tool'
+  import {
+    Button,
+    Message 
+  } from 'element-ui'
+  Vue.use(Button)
+  export default {
+    name: "goods",
+
+    data() {
+      return {};
+    },
+    watch: {},
+    created() {
+
+    },
+    computed: {},
+    methods: {
+      ceshi() {
+          //this.$message.error('上传头像图片只能是 JPG 格式!');
+        Message('这是一条消息提示');
+        this.$http('get', "/getJoke1", {
+          page: 1, count: 2, type: 'video'
+        })
+          .then(res => {
+            console.log(res)
+          })
+          .catch(err => {
+            console.log(err.message);
+          })
+
+      }
+    },
+    components: {
+      Menu
+    }
+  };
+</script>
+<style scoped>
+    /* @import "../../assets/css/index/index.min.css"; */
+</style>
\ No newline at end of file

src/views/Info/message.vue

+<template>
+    <div class="message">
+        我是基本信息
+        <Menu/>
+    </div>
+
+</template>
+<script>
+  import Vue from 'vue';
+  import Menu from "@/components/menu.vue";
+  import Tool from '../../tool'
+  import {
+    Button,
+    Message 
+  } from 'element-ui'
+  Vue.use(Button)
+  export default {
+    name: "message",
+
+    data() {
+      return {};
+    },
+    watch: {},
+    created() {
+
+    },
+    computed: {},
+    methods: {
+      ceshi() {
+          //this.$message.error('上传头像图片只能是 JPG 格式!');
+        Message('这是一条消息提示');
+        this.$http('get', "/getJoke1", {
+          page: 1, count: 2, type: 'video'
+        })
+          .then(res => {
+            console.log(res)
+          })
+          .catch(err => {
+            console.log(err.message);
+          })
+
+      }
+    },
+    components: {
+      Menu
+    }
+  };
+</script>
+<style scoped>
+    /* @import "../../assets/css/index/index.min.css"; */
+</style>
\ No newline at end of file

src/views/List/inquire.vue

+<template>
+    <div class="index">
+        我是询价管理
+        <Menu/>
+    </div>
+
+</template>
+<script>
+  import Vue from 'vue';
+  import Menu from "@/components/menu.vue";
+  import Tool from '../../tool'
+  import {
+    Button,
+    Message 
+  } from 'element-ui'
+  Vue.use(Button)
+  export default {
+    name: "inquire",
+
+    data() {
+      return {};
+    },
+    watch: {},
+    created() {
+
+    },
+    computed: {},
+    methods: {
+      ceshi() {
+          //this.$message.error('上传头像图片只能是 JPG 格式!');
+        Message('这是一条消息提示');
+        this.$http('get', "/getJoke1", {
+          page: 1, count: 2, type: 'video'
+        })
+          .then(res => {
+            console.log(res)
+          })
+          .catch(err => {
+            console.log(err.message);
+          })
+
+      }
+    },
+    components: {
+      Menu
+    }
+  };
+</script>
+<style scoped>
+    /* @import "../../assets/css/index/index.min.css"; */
+</style>
\ No newline at end of file

src/views/List/quote.vue

+<template>
+    <div class="index">
+        我是报价管理
+        <Menu/>
+    </div>
+
+</template>
+<script>
+  import Vue from 'vue';
+  import Menu from "@/components/menu.vue";
+  import Tool from '../../tool'
+  import {
+    Button,
+    Message 
+  } from 'element-ui'
+  Vue.use(Button)
+  export default {
+    name: "quote",
+
+    data() {
+      return {};
+    },
+    watch: {},
+    created() {
+
+    },
+    computed: {},
+    methods: {
+      ceshi() {
+          //this.$message.error('上传头像图片只能是 JPG 格式!');
+        Message('这是一条消息提示');
+        this.$http('get', "/getJoke1", {
+          page: 1, count: 2, type: 'video'
+        })
+          .then(res => {
+            console.log(res)
+          })
+          .catch(err => {
+            console.log(err.message);
+          })
+
+      }
+    },
+    components: {
+      Menu
+    }
+  };
+</script>
+<style scoped>
+    /* @import "../../assets/css/index/index.min.css"; */
+</style>
\ No newline at end of file

src/views/Store/enter.vue

+<template>
+    <div class="enter">
+        我是库存导入
+        <Menu/>
+    </div>
+
+</template>
+<script>
+  import Vue from 'vue';
+  import Menu from "@/components/menu.vue";
+  import Tool from '../../tool'
+  import {
+    Button,
+    Message 
+  } from 'element-ui'
+  Vue.use(Button)
+  export default {
+    name: "enter",
+
+    data() {
+      return {};
+    },
+    watch: {},
+    created() {
+
+    },
+    computed: {},
+    methods: {
+      ceshi() {
+          //this.$message.error('上传头像图片只能是 JPG 格式!');
+        Message('这是一条消息提示');
+        this.$http('get', "/getJoke1", {
+          page: 1, count: 2, type: 'video'
+        })
+          .then(res => {
+            console.log(res)
+          })
+          .catch(err => {
+            console.log(err.message);
+          })
+
+      }
+    },
+    components: {
+      Menu
+    }
+  };
+</script>
+<style scoped>
+    /* @import "../../assets/css/index/index.min.css"; */
+</style>
\ No newline at end of file

src/views/Store/list.vue

+<template>
+    <div class="list">
+        我是库存列表
+        <Menu/>
+    </div>
+
+</template>
+<script>
+  import Vue from 'vue';
+  import Menu from "@/components/menu.vue";
+  import Tool from '../../tool'
+  import {
+    Button,
+    Message 
+  } from 'element-ui'
+  Vue.use(Button)
+  export default {
+    name: "list",
+
+    data() {
+      return {};
+    },
+    watch: {},
+    created() {
+
+    },
+    computed: {},
+    methods: {
+      ceshi() {
+          //this.$message.error('上传头像图片只能是 JPG 格式!');
+        Message('这是一条消息提示');
+        this.$http('get', "/getJoke1", {
+          page: 1, count: 2, type: 'video'
+        })
+          .then(res => {
+            console.log(res)
+          })
+          .catch(err => {
+            console.log(err.message);
+          })
+
+      }
+    },
+    components: {
+      Menu
+    }
+  };
+</script>
+<style scoped>
+    /* @import "../../assets/css/index/index.min.css"; */
+</style>
\ No newline at end of file