data-dashboard/src/pages/index.vue

<template>
  <div class="container">
    <h3 style="text-align: center;color:#ffffff;margin-bottom: 5px;margin-top:35px">数据导航</h3>

    <div class="wrapper" v-for="route in routes" :key="route.label">
      <el-button type="info" plain @click="goRouter($event,route.link)">{{route.label}}
        <i class="el-icon-right"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      routes:[
        {label:'业绩报表', link:'/?path=results'},
        {label:'利润看板', link:'/?path=report'},
        {label:'应收账款', link:'/?path=accountsReceivable'},
        {label:'订单情况', link:'/?path=newReport'},
        {label:'库存情况', link:'/?path=stock'}
      ]
    }
  },
  mounted(){
    document.title = "数据导航"
  },
  methods:{
    goRouter(e,link){
      e.stopPropagation()
      window.location.hash = link
    }
  }
}
</script>

<style lang="scss">
.container {
  width:100%;
  height: 100vh;
  position: fixed;
  background-image: url(/wel.jpg);
  background-size: cover;
  background-position: 35%;
}

.wrapper{
  display: flex;
  padding: 10px;
  flex-direction: column;
  margin-bottom: 5px;

  button{
    margin: 0px !important;
  }
}
</style>