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

<template>
  <div class="fx-row fx-bet-cen bg-white pl60 pr60" style="height:102px;">
    <el-image :src="require('@/assets/images/index/login/icon_logo_medium@2x.png')" fit="contain"
              style="width: 152px;"></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/components/blocks/index-login-interceptor-mixin'

export default {
  mixins: [loginCheckMixin],
  name: 'login-top-menus',
  props: {
    routers: {
      type: Array,
      default: () => []
    }
  },
  inject: {
    to: {
      default: function() {

      }
    }
  },
  methods: {
    async handleMenuClick(item) {
      if (this.loginCheck) await this.loginCheck()
      this.to(item)
    }
  }
}
</script>

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