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.meta.title}}</p>
        <van-grid border :column-num="3">
          <van-grid-item v-for="(item,index) in v.children" :key="index" :icon="imgUrl(item.meta.icon)" :text="item.meta.title" :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'
import {getMenu} from "@/api/public";
export default {
  components:{TopBar},
  data() {
    return {
      menuList:[],
    }
  },
  computed: {
    ...mapGetters(['userName'])
  },
  mounted() {
    this.getMenuList()
  },
  methods: {
    getMenuList(){
      getMenu().then(res=>{
        console.log(res,'res')
        this.menuList = res.data
      })
    },
    onclick(){
      this.$router.push('/workTime')
    },
  }
}
</script>

<style lang="scss" scoped >
  .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>