front/src/views/index/components/login-top-menus.vue

<template>
  <div class="fx-row fx-bet-cen bg-white pl60 pr60" style="height:80px;">
    <el-image :src="`${$imgBase}index/login/icon_logo_medium@2x.png`" fit="contain"
              style="width: 124px;"></el-image>
    <div class="fx-row fx-end-cen fx-1 menus-container">
      <el-link v-for="(item,idx) in routers" :key="idx" @click="handleMenuClick(item)" class="f16 f-fff"
               :underline="false">
        <svg-icon :icon-class="item.meta.icon" style="margin-right:5px"/>
        {{ item.meta.title }}
      </el-link>
    </div>
  </div>
</template>

<script>
import loginCheckMixin from '@/views/index/blocks/index-login-interceptor-mixin'
import { mapActions, mapGetters } from 'vuex'

export default {
  mixins: [loginCheckMixin],
  name: 'login-top-menus',
  computed: {
    ...mapGetters(['topbarRouters']),
    routers() {
      return this.topbarRouters.filter(r => !r.hidden)
    }
  },
  methods: {
    ...mapActions(['AccessDeepMenu']),
    async handleMenuClick(item) {
      await this.loginCheck()
      this.AccessDeepMenu(item)
    }
  }
}
</script>

<style scoped>
.menus-container .el-link + .el-link {
  margin-left: 30px;
}
</style>