yos_web/src/views/homePage/index.vue

<template>
  <div class="container">
    <el-row :gutter="20" class="normal-margin">
      <el-col :span="6" v-for="o in 4" :key="o">
        <div class="normal-card"></div>
      </el-col>
    </el-row>
    <div class="normal-card normal-margin " shadow="none" v-for="item in modulesList" :key="item.systemid">
      <p class="title">{{item.systemname}}</p>
      <el-row :gutter="20">
        <el-col style="margin-top:16px" :span="4" v-for="modules in item.modules" :key="modules.systemmoduleid" @click.native="redictToModules(modules)">
          <div class="modules-item flex-align-center">
            <img width="50" height="50" src="../../assets/modules_icon.png" alt="">
            <p>{{modules.systemmodulename}}<br><small class="info">{{(modules.systemmodule).toUpperCase()}}</small></p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      modulesList:[]
    }
  },
  methods:{
    redictToModules (item) {
      this.$router.push({path:item.apps[0].path})
      sessionStorage.setItem('active_modules',JSON.stringify(item))
    }
  },
  mounted () {
    this.modulesList = JSON.parse(sessionStorage.getItem('module_info'))
  }
}

</script>
<style>
</style>
<style scoped>
.title{
  font-size: 16px;
  font-weight: bold;
}
.modules-item{
  padding: 20px;
  border-radius: 8px;
  cursor: pointer;
}
.modules-item > p{
  margin-left: 15px;
}
.modules-item:hover{
  background: #EAF1FE;
}
</style>