soc_app/src/views/home/menu.vue

<template>
  <div class="menu-container">
    <top-bar></top-bar>
    <div class="menu-list">
      <div class="menu-list-item" v-for="(v,i) in menuList" :key="i">
        <p @click="onclick">{{v.name}}</p>
        <van-grid border :column-num="3">
          <van-grid-item v-for="(item,index) in v.list" :key="index" icon="smile-o" :text="item.menu" :to="item.path" />
        </van-grid>
<!--          <li v-for="(item,index) in v.list" :key="index">-->
<!--            <div></div>-->
<!--            <p>{{item.menu}}</p>-->
<!--          </li>-->
      </div>
    </div>
  </div>
</template>

<script>
import TopBar from "@/components/TopBar";
import { mapGetters } from 'vuex'
export default {
  components:{TopBar},
  data() {
    return {
      menuList:[
        {
          name:'系统管理',
          list:[
            {
              menu:'作息管理',
              path:'/workTime',
            },
            {
              menu:'NFC管理',
              path:'/nfc',
            },
            {
              menu:'履职登记',
              path:'/lvzhi',
            },
          ]
        },
        {
          name:'履职',
          list:[
            {
              menu:'履职登记',
            },
            {
              menu:'监控调阅',
              path:'/monitoringCall'
            },
            {
              menu:'视频调阅',
            },
            {
              menu:'安全检查登记',
            },
            {
              menu:'隐患问题清单',
            },
            {
              menu:'外包评价',
            },
          ]
        },
        {
          name:'设备',
          list:[
            {
              menu:'设备管理',
            },
            {
              menu:'防区状态',
              path:'/protection'
            },
          ]
        },
        {
          name:'来访',
          list:[
            {
              menu:'介绍信管理',
            },
            {
              menu:'出入登记',
            },
            {
              menu:'培训登记',
            },
          ]
        },
        {
          name:'演练',
          list:[
            {
              menu:'演练登记',
            },
            {
              menu:'演练排名',
            },
            {
              menu:'安全检查登记',
            },
            {
              menu:'优秀案例管理',
            },
            {
              menu:'优秀案例学习',
            },
          ]
        },
        {
          name:'统计',
          list:[
            {
              menu:'驾驶舱',
            },
            {
              menu:'每日网点履职报表',
            },
            {
              menu:'每日布撤防报表',
            },
            {
              menu:'教育统计报表',
            },
          ]
        }
      ],
    }
  },
  computed: {
    ...mapGetters(['userName'])
  },
  mounted() {

  },
  methods: {
    onclick(){
      this.$router.push('/workTime')
    },
  }
}
</script>

<style lang="scss" >
  .menu-container{
    background-color: rgba(237, 252, 255, 1)
  }
  .menu-list{
    padding: 30px 0;
    height: calc(100vh - 400px);
    overflow: auto;
  }
  .menu-list-item{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px #eee;
    margin:20px;
    >p{
      font-size: 30px;
      padding: 10px 10px 10px 20px;
    }
    >ul{
      display: flex;
      flex-wrap: wrap;
      font-size: 20px;
      >li{
        padding: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        >div{
          width: 60px;
          height: 60px;
          background-color: #42b983;
          margin-bottom: 20px;
        }
      }
    }
  }
</style>