重启

src/pages/modules/home.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-row type="flex" class="navs_wraper" justify="space-between" align="middle">
-    <el-col :span="7" class="nav_item" v-for="(e, i) in nav" :key="i" :class="'nav_item_' + (i + 1)">
+  <el-row type="flex" class="navs_wraper" justify="center" align="middle">
+    <el-col :span="7" class="nav_item" v-for="(e, i) in visibleNav" :key="i" :class="'nav_item_' + (i + 1)">
       <div class="nav_item_i" @click="toPage(e)">
         <div class="nav_icon"></div>
         <p>{{ e[$langPre.computedProp('title')] }}</p>
@@ -10,19 +10,27 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 export default {
   name: 'MinniHome',
   data () {
     return {
-      nav: [
-        {title: '操作', zh_title: '操作', en_title: 'Operation', router: '/index/device'},
-        {title: '建图', zh_title: '建图', en_title: 'Map building', router: '/index/building'},
-        // {title: '取消任务', zh_title: '取消任务', en_title: 'Cancel task', router: ''},
-        {title: '地图', zh_title: '地图', en_title: 'Map', router: '/index/map'}
-      ],
       disabled: false
     }
   },
+  computed: {
+    ...mapGetters(['userRole']),
+    nav () {
+      return [
+        { title: '操作', zh_title: '操作', en_title: 'Operation', router: '/index/device', isVisible: true },
+        { title: '建图', zh_title: '建图', en_title: 'Map building', router: '/index/building', isVisible: this.userRole === 1 },
+        { title: '地图', zh_title: '地图', en_title: 'Map', router: '/index/map', isVisible: true }
+      ]
+    },
+    visibleNav () {
+      return this.nav.filter(item => item.isVisible)
+    }
+  },
   methods: {
     toPage (e) {
       if (e.router === '/index/building') {
@@ -58,7 +66,7 @@ export default {
   padding 1.5%
   color #fff
   font-size .2rem
-  margin .1rem 0
+  margin .1rem 1%
   border 1px solid #2f9ae3
   background-image: linear-gradient(to bottom,transparent 11px,rgba(32, 74, 128, 90%) 1px),
                     linear-gradient(to right,transparent 11px,rgba(32, 74, 128, 90%) 1px);