75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<template>
|
|
<div class="box flex flex-wrap pl-[2%] mt-8">
|
|
<n-card title="" style="margin-bottom: 16px" v-for="(ii,iii) in navList">
|
|
<n-tabs default-value="0" justify-content="space-evenly" type="line">
|
|
<n-tab-pane class="flex flex-wrap" :name="index+''" :tab="item.menuClass" v-for="(item, index) in ii">
|
|
<div class="card mr-4 mb-4 rounded-md py-4 flex justify-center items-center w-[320px] bg-[#f2e8fc]" @click="link(it.menuLink)" v-for="(it, idx) in item.children" :key="index">
|
|
<div class="left mr-3">
|
|
<img width="40" height="40" class="rounded-full bg-pp-400" :src="it.menuIcon" alt="">
|
|
</div>
|
|
<div class="right w-[224px]">
|
|
<div class="text-[20px] text-pp-700 font-bold">{{ it.menuName }}</div>
|
|
<div class="truncate">{{ it.menuDesc }}</div>
|
|
</div>
|
|
</div>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</n-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { chunkArrayInGroups } from '@/util/index.js';
|
|
import { onMounted } from 'vue';
|
|
|
|
|
|
//mark import
|
|
|
|
//mark data
|
|
const navList = ref([])
|
|
const active = ref(-1)
|
|
//mark method
|
|
function formatNav(list) {
|
|
let menu = []
|
|
let result = []
|
|
list.forEach(i => {
|
|
if (!menu.includes(i.menuClass)) {
|
|
menu.push(i.menuClass)
|
|
}
|
|
});
|
|
menu.forEach(i => {
|
|
result.push({
|
|
menuClass: i,
|
|
children: list.filter(it => it.menuClass == i),
|
|
exp: false
|
|
})
|
|
})
|
|
console.log(result);
|
|
|
|
|
|
return chunkArrayInGroups(result, 4)
|
|
|
|
}
|
|
|
|
|
|
function link(url) {
|
|
window.open(url, "_blank")
|
|
}
|
|
//mark 周期、内置函数等
|
|
onMounted(async () => {
|
|
const res = await $http.nav.listNav()
|
|
navList.value = formatNav(res.data)
|
|
console.log(navList.value);
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.box {
|
|
align-items: start;
|
|
}
|
|
|
|
:deep(.n-collapse-item__header) {
|
|
background-color: red;
|
|
}
|
|
</style> |