youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航ico优化

Browse Source
This commit is contained in:
heixinyouzi 2024-06-06 16:00:45 +08:00
parent 1a27de3882
commit c1b0754e42
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/home/navMenu.vue
View File

@ -6,7 +6,10 @@
<div class="card hover:shadow-[0px_0px_5px_1px_#8A2BE2] 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-[white]" :src="it.menuIcon" alt="">
<img v-if="it.isHaveIco" width="40" height="40" class="rounded-full bg-[white]" :src="it.menuIcon" alt="" @error="it.isHaveIco=false">
<div v-else class="w-[40px] h-[40px] flex justify-center items-center rounded-full bg-[white] font-bold text-2xl text-orange-500">
{{ it.menuName.slice(0,1) }}
</div>
</div>
<div class="right w-[224px]">
<div class="text-[20px] text-pp-700 font-bold">{{ it.menuName }}</div>
@ -33,11 +36,14 @@ import { onMounted } from 'vue';
//mark data
const navList = ref([])
const isHaveIco = ref(true)
//mark method
function formatNav(list) {
let menu = []
let result = []
list.forEach(i => {
i.isHaveIco = true
if (!menu.includes(i.menuClass)) {
menu.push(i.menuClass)
}