<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="panel-box-title-icon"></i> <span>{{item.title}}</span> </span> <div class="panel-box-title-img"></div> </div> <div class="panel-box-content"> <div class="panel-sub-box" v-for="(subItem,subIndex) in item.menu" :key="subIndex"> <div class="panel-box-sub-title"> <span class="line"></span> <span class="panel-box-sub-title_name">{{subItem.subtitle}}</span> </div> <ul > <li v-for="(menu,mIndex) in subItem.subMenu" :key="mIndex" @click="goPage(menu.url)"> <i class="icon-memu"></i> <span class="menu-label">{{menu.label}}</span> </li> </ul> </div> </div> </div> </div> </template> <script> import { menuList } from '@/config/menu' export default{ data() { return{ menuList:menuList } }, mounted(){ }, methods:{ goPage(path){ if(path){ this.$router.push(path) } } } } </script> <style lang="less" scoped> @media screen and (max-width: 1440px) { .index-container{ width: 100%; } .panel-sub-box ul li{ padding:1.25vw 10px; .menu-label{ font-size: 14px; } } } @media (min-width:1441px) and (max-width:1680px) { .index-container{ width: 96%; } .panel-sub-box ul li{ padding:1.25vw 20px; .menu-label{ font-size: 14px; } } } @media (min-width:1681px){ .index-container{ width: 92%; } .panel-sub-box ul li{ padding:1.25vw; .menu-label{ font-size: 16px; } } } .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.10); 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; border-radius: 50%; background-color: @party-pink; 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; background-color:@party-pink ; margin-top: 20px; } .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; li{ width: 6.67vw; height:8.33vw ; max-width: 128px; max-height: 160px; text-align: center; background: @party-bg-gray; border-radius: 8px; color: @font-color; &:not(:first-child){ margin-left: 20px; } &.active,&:hover{ background: @party-red; box-shadow: 0 8px 4px -4px rgba(155,30,35,0.40); border-radius: 8px; border-radius: 8px; color: @party-white; cursor: pointer; color:@party-white; } .icon-memu{ display: block; width: 2.08vw; height: 2.08vw; border-radius:50%; margin: 0 auto 0.83vw; background-image: linear-gradient(180deg, #FFF7E8 0%, #FFEDCC 100%); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20); } .menu-label{ line-height: 24px; text-shadow: 0 2px 4px rgba(0,0,0,0.20); } } } } } } </style>