<template> <div class="index-container"> <div class="panel-box" v-for="(item, index) in menuList" :key="index"> <div class="panel-box-title"> <span class="panel-box-title-wrapper"> <i :class="item.icon" class="panel-box-title-icon"></i> <span>{{ item.name }}</span> </span> <div class="panel-box-title-img"> <img :src="requireImg(item.avatar)" alt="" /> </div> </div> <div class="panel-box-content"> <div class="panel-sub-box" v-for="(subItem, subIndex) in item.children" :key="subIndex" > <div class="panel-box-sub-title"> <span class="line"></span> <span class="panel-box-sub-title_name">{{ subItem.name }}</span> </div> <ul> <li v-for="(menu, mIndex) in subItem.children" :key="mIndex" @click="goPage(menu.url)" > <div :class="menu.color" class="icon-div"> <i :class="menu.icon" class="icon-memu"></i> </div> <span class="menu-label">{{ menu.name }}</span> </li> </ul> </div> </div> </div> </div> </template> <script> // import { menuList } from '@/config/menu' export default { data() { return { menuList: [], }; }, mounted() { let menuList = localStorage.getItem("menuList"); if (menuList) { this.menuList = JSON.parse(menuList); } else { this.menuList = []; } }, methods: { goPage(path) { if (path) { this.$router.push(path); } }, requireImg(imgSrc) { return require(`@/assets/menu/${imgSrc}`); }, }, }; </script> <style lang="less" scoped> @import "~@/style/menu.less"; @media screen and (max-width: 1440px) { .index-container { width: 100%; } } @media (min-width: 1441px) and (max-width: 1680px) { .index-container { width: 96%; } } @media (min-width: 1681px) { .index-container { width: 92%; } } .index-container { margin: 0 auto; height: 100%; overflow-y: auto; .panel-box { background: @party-white; border: 1px solid @party-white; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1); border-radius: 8px; border-radius: 8px; margin-bottom: 24px; display: flex; padding: 40px 20px 20px 20px; .panel-box-title { padding-right: 3.125vw; } .panel-box-title-wrapper { .panel-box-title-icon { display: inline-block; width: 28px; height: 28px; vertical-align: middle; margin-right: 18px; } span { font-size: 20px; line-height: 20px; font-weight: bold; color: @font-color; vertical-align: middle; } } .panel-box-title-img { width: 10.4vw; height: 10.4vw; max-width: 200px; max-height: 200px; margin-top: 20px; img { width: 100%; height: 100%; object-fit: cover; } } .panel-box-content { padding-left: 20px; display: flex; } .panel-box-sub-title { border-bottom: 1px solid @party-border-color; line-height: 24px; padding-bottom: 20px; box-sizing: content-box; .line { display: inline-block; width: 4px; height: 18px; background-color: @party-black; vertical-align: middle; } .panel-box-sub-title_name { font-size: 18px; line-height: 18px; font-weight: bold; color: @font-color; vertical-align: middle; margin-left: 12px; } } .panel-sub-box { &:not(:first-child) { margin-left: 3.125vw; } ul { display: flex; padding-top: 20px; margin-left: -20px; li { width: 6.67vw; height: 8.33vw; max-width: 128px; max-height: 160px; text-align: center; border-radius: 8px; color: @font-color; cursor: pointer; &:not(:first-child) { margin-left: 20px; } .icon-div { padding-top: 0.94vw; height: 4.79vw; width: 4.79vw; border-radius: 16px; margin: 0 auto 0.8vw; } .icon-memu { display: block; margin: 0 auto; width: 2.91vw; height: 2.91vw; } .menu-label { line-height: 24px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } } } } } } </style>