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="item.meta.icon"
            :text="item.meta.title"
            :to="item.path"
          />
        </van-grid>
      </div>
    </div>
    <van-dialog v-model="show" title="标题" confirmButtonText="关闭">

      <p class="text">
        {{ info }}
      </p>
    </van-dialog>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar'
import { mapGetters } from 'vuex'
import { getMenu, getTheAreaWeather } from '@/api/public'
export default {
  name: 'menus',
  components: { TopBar },
  data() {
    return {
      menuList: [],
      list: [],
      show: false,
      info: ''
    }
  },
  computed: {
    ...mapGetters(['userName', 'orgId'])
  },
  mounted() {
    this.getMenuList()
    
  },
  methods: {
    getMenuList() {
      getMenu().then(res => {
        this.menuList = res.data
      })
    },
    clickHandler(item) {
      this.info = item.alarmContent
      this.show = true
    },

    //获取天气数据
    getTheWeather() {
      getTheAreaWeather(this.orgId).then(res => {
        
        this.list = res.data||[]
        this.list.forEach(item => {
          if (item.alarmLevel == '橙色') {
            item.bgc = '#fa8e00'
          } else if (item.alarmLevel == '红色') {
            item.bgc = '#fa0008'
          } else if (item.alarmLevel == '蓝色') {
            item.bgc = '#3788fa'
          } else if (item.alarmLevel == '黄色') {
            item.bgc = '#e9fa00'
          }
        })
      })
    },
    onclick() {
      this.$router.push('/workTime')
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
  padding: 20px;
}
.color {
  width: 100%;
  height: 100%;
  line-height: 120px;
  // background-color: red;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.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>