From b858224eb6e45b32e8cdc01feda2cd7a8164f1b8 Mon Sep 17 00:00:00 2001
From: BigBoss <2280520255@qq.com>
Date: Mon, 29 Jun 2020 23:40:57 +0800
Subject: [PATCH] =?UTF-8?q?layout=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/index.vue |  37 +-
 src/layout/index.vue                    |   7 +-
 src/router/index.js                     |  28 +-
 src/router/modules/user.js              |  51 +--
 src/styles/sidebar.scss                 |   9 +-
 src/views/operations/operations.vue     | 574 +-------------------------------
 6 files changed, 61 insertions(+), 645 deletions(-)

diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index fb014a2..e8f7252 100755
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,20 +1,22 @@
 <template>
   <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="variables.menuBg"
-        :text-color="variables.menuText"
-        :unique-opened="false"
-        :active-text-color="variables.menuActiveText"
-        :collapse-transition="false"
-        mode="vertical"
-      >
-        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
-      </el-menu>
-    </el-scrollbar>
+    <logo v-if="showLogo" class="logo" :collapse="isCollapse" />
+    <!-- <el-scrollbar wrap-class="scrollbar-wrapper"> -->
+    <el-menu
+      :default-active="activeMenu"
+      :background-color="variables.menuBg"
+      :text-color="variables.menuText"
+      :unique-opened="false"
+      :active-text-color="variables.menuActiveText"
+      :collapse-transition="false"
+      mode="horizontal"
+    >
+      <el-menu-item v-for="route in permission_routes" :key="route.path">
+        <sidebar-item :key="route.path" :item="route" :base-path="route.path" />
+      </el-menu-item>
+
+    </el-menu>
+    <!-- </el-scrollbar> -->
   </div>
 </template>
 
@@ -52,3 +54,8 @@ export default {
   }
 }
 </script>
+<style>
+.logo{
+  width:115px;
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 965bcd1..40a1e2d 100755
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -88,12 +88,15 @@ export default {
     top: 0;
     right: 0;
     z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
+    // width: calc(100% - #{$sideBarWidth});
+    width: 100%;
+    margin-top: 54px;
     transition: width 0.28s;
   }
 
   .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
+    // width: calc(100% - 54px)
+    width:100%;
   }
 
   .mobile .fixed-header {
diff --git a/src/router/index.js b/src/router/index.js
index 3c19154..9cf0642 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -206,20 +206,20 @@ export const asyncRoutes = [
   // chartsRouter,
   // nestedRouter,
   // tableRouter,
-  {
-    path: '/icon',
-    component: Layout,
-    children: [{
-      path: 'index',
-      component: () => import('@/views/icons/index'),
-      name: 'Icons',
-      meta: {
-        title: 'icons',
-        icon: 'icon',
-        noCache: true
-      }
-    }]
-  },
+  // {
+  //   path: '/icon',
+  //   component: Layout,
+  //   children: [{
+  //     path: 'index',
+  //     component: () => import('@/views/icons/index'),
+  //     name: 'Icons',
+  //     meta: {
+  //       title: 'icons',
+  //       icon: 'icon',
+  //       noCache: true
+  //     }
+  //   }]
+  // },
   /** when your routing map is too long, you can split it into small modules **/
 
   // {
diff --git a/src/router/modules/user.js b/src/router/modules/user.js
index e5fcedd..2554925 100644
--- a/src/router/modules/user.js
+++ b/src/router/modules/user.js
@@ -14,62 +14,17 @@ const chartsRouter = {
     roles: ['admin', 'assistant'] // you can set roles in root nav
   },
   children: [{
-    path: 'assistant',
+    path: '用户管理',
     component: () => import('@/views/users/list'),
-    name: 'assistant',
+    name: '用户管理',
     query: {
       test: 'ssssss'
     },
     meta: {
-      title: 'users.assistant',
+      title: '用户管理',
       roles: ['admin'] // or you can only set roles in sub nav
     }
-  },
-  {
-    path: 'runner',
-    component: () => import('@/views/users/list'),
-    name: 'runner',
-    query: {
-      test: 'ssssss'
-    },
-    meta: {
-      title: 'users.runner',
-      roles: ['admin', 'assistant'] // or you can only set roles in sub nav
-    }
-  },
-  {
-    path: 'shoper',
-    component: () => import('@/views/users/list'),
-    name: 'shoper',
-    query: {
-      test: 'ssssss'
-    },
-    meta: {
-      title: 'users.shoper',
-      roles: ['admin', 'assistant'] // or you can only set roles in sub nav
-    }
-  },
-  {
-    path: 'users',
-    component: () => import('@/views/users/list'),
-    name: 'users',
-    query: {
-      test: 'ssssss'
-    },
-    meta: {
-      title: 'users.user',
-      roles: ['admin', 'assistant'] // or you can only set roles in sub nav
-    }
   }
-    // ,{
-    //   path: '/icons',
-    //   component: () => import('@/views/icons/index'),
-    //   name: 'icons',
-    //   meta: {
-    //     title: 'icons',
-    //     roles: ['admin', 'assistant', 'shoper', 'runner'] // or you can only set roles in sub nav
-    //   }
-    // }
   ]
 }
 
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 3dad4c3..c2cf1f9 100755
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -3,15 +3,18 @@
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
-    margin-left: $sideBarWidth;
+    // margin-left: $sideBarWidth;
+    margin-top: 54px;
     position: relative;
   }
 
   .sidebar-container {
     transition: width 0.28s;
-    width: $sideBarWidth !important;
+    // width: $sideBarWidth !important;
+    width: 100% !important;
     background-color: $menuBg;
-    height: 100%;
+    // height: 100%;
+    height: 54px;
     position: fixed;
     font-size: 0px;
     top: 0;
diff --git a/src/views/operations/operations.vue b/src/views/operations/operations.vue
index 10bde58..b7b9190 100644
--- a/src/views/operations/operations.vue
+++ b/src/views/operations/operations.vue
@@ -1,577 +1,25 @@
 <template>
-  <div class="login-container">
-    <el-button
-      type="primary"
-      @click="() => addNode()"
-    >{{ $t('users.add') }}</el-button>
-    <el-tree
-      ref="tree"
-      :data="data"
-      show-checkbox
-      node-key="id"
-      highlight-current
-      check-strictly
-      indent="40"
-      icon-class="el-icon-pc"
-      :props="defaultProps"
-    >
-      <!-- <el-tree
-      :data="data"
-      show-checkbox
-      node-key="id"
-      default-expand-all
-      highlight-current
-      isLeaf
-      @node-contextmenu="()=>rightKey(node, data)"
-      check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
-      :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
-      :props="defaultProps"
-    > -->
-      <span
-        slot-scope="{ node, data }"
-        class="custom-tree-node"
-      >
-        <span>{{ node.label }}</span>
-        <span>
-          <el-button
-            type="primary"
-            icon="el-icon-upload"
-            size="mini"
-            @click="() => append(data)"
-          >
-            {{ $t('users.add') }}
-          </el-button>
-          <el-button
-            type="primary"
-            icon="el-icon-edit"
-            size="mini"
-            @click="() => update(node, data)"
-          >
-            {{ $t('users.update') }}
-          </el-button>
-          <el-button
-            type="primary"
-            icon="el-icon-delete"
-            size="mini"
-            class="danger"
-            @click="() => remove(node, data)"
-          >
-            {{ $t('users.del') }}
-          </el-button>
-        </span>
-      </span>
-    </el-tree>
-
-    <!-- <div class="buttons">
-      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
-      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
-      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
-      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
-      <el-button @click="resetChecked">清空</el-button>
-    </div> -->
-  </div>
+  <el-container style=" border: 1px solid #eee">
+    <el-main>
+      <el-tabs v-model="activeName" tab-position="top" @tab-click="handleClick">
+        <el-tab-pane label="秀野堂主" name="first">
+          <span />
+        </el-tab-pane>
+        <el-tab-pane label="Richa" name="second" />
+      </el-tabs>
+    </el-main>
+  </el-container>
 </template>
 <script>
-let id = 1000
 export default {
   data() {
     return {
-      data: [
-        {
-          label: '成镜',
-          id: '1',
-          children: [
-            {
-              label: '款式',
-              id: '11',
-              children: [
-                { label: '青春学子风' },
-                { label: '休闲' },
-                { label: '商务' },
-                { label: '复古' },
-                { label: '时尚' },
-                { label: '质感哥特潮' },
-                { label: '轻简北欧风' },
-                { label: '理性几何派' },
-                { label: '多元新风尚' },
-                { label: '立体巴洛克' },
-                { label: '有机未来时' },
-                { label: '无界人文系' },
-                { label: '自然舒视角' },
-                { label: '流线洛可可' },
-                { label: '奶奶风' },
-                { label: '简约-极简文艺范' },
-                { label: '运动风' },
-                { label: '行政风' },
-                { label: '折射率' }
-              ]
-            },
-            { label: '个性化服务', id: '267', children: [] },
-            {
-              label: '赠品',
-              id: '259',
-              children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
-            },
-            {
-              label: '场景',
-              id: '258',
-              children: [
-                { label: '学校场景' },
-                { label: '出行交际' },
-                { label: '夜店迷人' },
-                { label: '明星同款' }
-              ]
-            },
-            {
-              label: '销售保障',
-              id: '245',
-              children: [
-                { label: '可退' },
-                { label: '可换' },
-                { label: '可修' }
-              ]
-            },
-            {
-              label: '功能',
-              id: '140',
-              children: [
-                { label: '防踩压' },
-                { label: '防扭曲' },
-                { label: '抗过敏' },
-                { label: '防腐蚀' },
-                { label: '耐磨损' },
-                { label: '抗蓝光' }
-              ]
-            },
-            {
-              label: '品牌',
-              id: '71',
-              children: [
-                { label: '购易' },
-                { label: '海俪恩' },
-                { label: '沙漠风暴' },
-                { label: '古诗' },
-                { label: '暴龙' },
-                { label: '犀牛' },
-                { label: 'Ray-Ban雷朋' },
-                { label: 'PARIM派丽蒙' },
-                { label: '石狼' },
-                { label: '木九十' }
-              ]
-            },
-            {
-              label: '边形',
-              id: '49',
-              children: [
-                { label: '半框' },
-                { label: '全框' },
-                { label: '无框' }
-              ]
-            },
-            {
-              label: '性别',
-              id: '23',
-              children: [{ label: '男性' }, { label: '女性' }]
-            },
-            {
-              label: '梁型',
-              id: '20',
-              children: [{ label: '双梁' }, { label: '单梁' }]
-            },
-            {
-              label: '重量',
-              id: '19',
-              children: [{ label: '30克以下' }, { label: '80克以上' }]
-            },
-            {
-              label: '适用脸型',
-              id: '15',
-              children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
-            },
-            {
-              label: '形状',
-              id: '14',
-              children: [
-                { label: '正圆形' },
-                { label: '椭圆形' },
-                { label: '方圆' },
-                { label: '方形' },
-                { label: '多边形' },
-                { label: '内三角(蛤蟆)' },
-                { label: '外三角(蝶形)' }
-              ]
-            },
-            { label: '年龄', id: '12', children: [{ label: '通用' }] },
-            {
-              label: '材质',
-              id: '10',
-              children: [
-                { label: '板材' },
-                { label: '纯钛' },
-                { label: 'TR90' },
-                { label: '木质' },
-                { label: '竹质' },
-                { label: 'β钛' },
-                { label: 'PC' },
-                { label: 'ULTEM塑钢' },
-                { label: '钨钛塑钢' },
-                { label: '镁铝合金' },
-                { label: '碳纤维' }
-              ]
-            },
-            { label: '折射率', id: '286', children: [] },
-            {
-              label: '颜色',
-              id: '13',
-              children: [
-                { label: '金色' },
-                { label: '银色' },
-                { label: '黑色' },
-                { label: '彩色' },
-                { label: '枪色' }
-              ]
-            }
-          ]
-        },
-        {
-          label: '镜片',
-          id: '2',
-          children: [
-            {
-              label: '面型',
-              id: '85',
-              children: [{ label: '球面单光' }, { label: '非球面单光' }]
-            },
-            { label: '近视度数', id: '92', children: [] },
-            { label: '散光', id: '93', children: [] },
-            {
-              label: '功能',
-              id: '95',
-              children: [
-                { label: '防起雾' },
-                { label: '防蓝光' },
-                { label: '防紫外线' },
-                { label: '偏光' },
-                { label: '染色' },
-                { label: '抗疲劳' },
-                { label: '青少年渐进' },
-                { label: '内渐进' },
-                { label: '变色' },
-                { label: '双光' },
-                { label: '耐磨损' },
-                { label: '防尘' },
-                { label: '防水' },
-                { label: '防摔' },
-                { label: '防指纹' },
-                { label: '防反光' }
-              ]
-            },
-            {
-              label: '颜色',
-              id: '100',
-              children: [
-                { label: '透明' },
-                { label: '染色' },
-                { label: '变色' },
-                { label: '单色' }
-              ]
-            },
-            {
-              label: '折射率',
-              id: '101',
-              children: [
-                { label: '1.56' },
-                { label: '1.60' },
-                { label: '1.65' },
-                { label: '1.67' },
-                { label: '1.71' },
-                { label: '1.74' }
-              ]
-            },
-            { label: '阿贝数（色散）', id: '102', children: [] },
-            { label: '重量', id: '103', children: [] },
-            {
-              label: '材质',
-              id: '104',
-              children: [
-                { label: '树脂' },
-                { label: '玻璃' },
-                { label: '宇宙PC' },
-                { label: 'PC' }
-              ]
-            },
-            {
-              label: '品牌',
-              id: '118',
-              children: [
-                { label: '好视力' },
-                { label: 'RAISE锐视' },
-                { label: '依视路' },
-                { label: '凯米' },
-                { label: '蔡司' },
-                { label: '舒曼' }
-              ]
-            },
-            {
-              label: '销售保障',
-              id: '249',
-              children: [
-                { label: '可退' },
-                { label: '可换' },
-                { label: '可修' }
-              ]
-            }
-          ]
-        },
-        {
-          label: '隐形眼镜',
-          id: '88',
-          children: [
-            {
-              label: '颜色',
-              id: '105',
-              children: [
-                { label: '绿' },
-                { label: '灰' },
-                { label: '黑' },
-                { label: '紫' },
-                { label: '蓝' },
-                { label: '棕色' },
-                { label: '紫色' }
-              ]
-            },
-            {
-              label: '颜料',
-              id: '106',
-              children: [{ label: '水性' }, { label: '油性' }]
-            },
-            { label: '度数', id: '107', children: [] },
-            {
-              label: '周期',
-              id: '108',
-              children: [
-                { label: '日抛' },
-                { label: '周抛' },
-                { label: '双周抛' },
-                { label: '月抛' },
-                { label: '季抛' },
-                { label: '半年抛' },
-                { label: '年抛' }
-              ]
-            },
-            {
-              label: '品牌',
-              id: '133',
-              children: [
-                { label: 'HolyNara' },
-                { label: '爱尔康' },
-                { label: 'MaxLook' },
-                { label: 'NEO' },
-                { label: 'GEO' },
-                { label: '实瞳' },
-                { label: '茵洛' },
-                { label: 'DAZZSHOP' },
-                { label: 'O-LENS' },
-                { label: 'envie' },
-                { label: '曼秀雷敦' },
-                { label: '妃蜜莉' },
-                { label: '海俪恩' },
-                { label: '凯达' },
-                { label: '蔡司' },
-                { label: '酷视' },
-                { label: 'LILMOON' },
-                { label: 'RICHBABY' },
-                { label: 'T-Garden' },
-                { label: 'lenstown' },
-                { label: '新加坡P2' },
-                { label: '星欧' },
-                { label: '美尼康' },
-                { label: '美汐' },
-                { label: '欧舒天' },
-                { label: '海昌' },
-                { label: '菲士康' },
-                { label: '卫康' },
-                { label: '库博' },
-                { label: '安视优' },
-                { label: '美若康' },
-                { label: '视康' },
-                { label: '澜柏' },
-                { label: '3N' },
-                { label: 'BIJOU' },
-                { label: '依视明' },
-                { label: '博士伦' },
-                { label: '瞳昕' },
-                { label: '科莱博' },
-                { label: '绮芙莉' },
-                { label: '雅培' },
-                { label: '爱能视' },
-                { label: '女神秘语' },
-                { label: '博视顿' },
-                { label: '妆美堂' },
-                { label: '人鱼姬' },
-                { label: 'EverColor' },
-                { label: 'Sincere' }
-              ]
-            },
-            {
-              label: '工艺',
-              id: '159',
-              children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
-            },
-            {
-              label: '材质',
-              id: '164',
-              children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
-            },
-            {
-              label: '含水量',
-              id: '174',
-              children: [
-                { label: '0-40%' },
-                { label: '40-44%' },
-                { label: '45%以上' }
-              ]
-            },
-            {
-              label: '基弧',
-              id: '178',
-              children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
-            },
-            {
-              label: '直径',
-              id: '181',
-              children: [{ label: '13.4-14' }, { label: '14以上' }]
-            },
-            {
-              label: '中心厚度',
-              id: '184',
-              children: [
-                { label: '0.0 - 0.03' },
-                { label: '0.04 - 0.09' },
-                { label: '0.1以上' }
-              ]
-            },
-            { label: '销售保障', id: '253', children: [] },
-            { label: '赠品', id: '260', children: [] }
-          ]
-        },
-        {
-          label: '特种镜',
-          id: '146',
-          children: [
-            {
-              label: '镜面颜色',
-              id: '237',
-              children: [{ label: '透明' }, { label: '亮金色' }]
-            },
-            {
-              label: '品牌',
-              id: '238',
-              children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
-            },
-            {
-              label: '销售保障',
-              id: '254',
-              children: [{ label: '包退' }, { label: '包换' }]
-            },
-            {
-              label: '功能',
-              id: '268',
-              children: [
-                { label: '防风镜' },
-                { label: '防爆溅工作镜' },
-                { label: '泳镜' },
-                { label: '智能镜' }
-              ]
-            }
-          ]
-        }
-      ],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      }
+
     }
   },
   methods: {
-    getCheckedNodes() {
-      console.log(this.$refs.tree.getCheckedNodes())
-    },
-    getCheckedKeys() {
-      console.log(this.$refs.tree.getCheckedKeys())
-    },
-    addNode() {
-      let h
-      this.$message({
-        message: h('p', null, [
-          h('span', null, '添加一个新节点 ')
-          // h("i", { style: "color: teal" }, "VNode")
-        ])
-      })
-    },
-    append(data) {
-      const newChild = { id: id++, label: 'testtest', children: [] }
-      if (!data.children) {
-        this.$set(data, 'children', [])
-      }
-      data.children.push(newChild)
-    },
-    remove(node, data) {
-      // 删除
-      const parent = node.parent
-      const children = parent.data.children || parent.data
-      const index = children.findIndex(d => d.id === data.id)
-      children.splice(index, 1)
-    },
-    rightKey(node, data) {
-      // 右键
-      const h = this.$createElement
-      // console.log(data, this.$refs.tree);
-      this.$message({
-        message: h('p', null, [
-          h('span', null, '右键了啊！ ' + node + data),
-          h('i', { style: 'color: teal' }, 'VNode')
-        ])
-      })
-    },
-    update(node, data) {
-      // 更新
-      const h = this.$createElement
-      this.$message({
-        message: h('p', null, [
-          h('span', null, '内容可以是 '),
-          h('i', { style: 'color: teal' }, 'VNode')
-        ])
-      })
-    },
-    setCheckedNodes() {
-      this.$refs.tree.setCheckedNodes([
-        {
-          id: 5,
-          label: '二级 2-1'
-        },
-        {
-          id: 9,
-          label: '三级 1-1-1'
-        }
-      ])
-    },
-    setCheckedKeys() {
-      this.$refs.tree.setCheckedKeys([3])
-    },
-    resetChecked() {
-      this.$refs.tree.setCheckedKeys([])
-    }
   }
 }
 </script>
 <style>
-.custom-tree-node {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  padding-right: 8px;
-}
 </style>
-- 
2.0.0