zizhujianzhan_web/components/template/component/menu/1200x130/1.vue

<template>
    <div :class="'menuStyle' + skinId">
        <div class="menuBoxBg">
            <div class="menuBox" ref="menuBox">
                <div>
                    <NuxtLink 
                        href="/" 
                        title="首页"
                        target="_self"
                    >
                        首页
                    </NuxtLink>
                </div>
                <div v-for="(item, index) in navigation" :key="index">
                    <NuxtLink 
                        :href="getLinkPath(item)" 
                        :title="item.alias"
                        :target="item.is_url == 1 ? '_blank' : '_self'"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

//1.1 pinia
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore = useTemplateBaseStore()
//获得皮肤id
const skinId = ref("")
skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;

//1.获取导航菜单 start ---------------------------------------->
//第一行导航菜单 10个
const navigation = ref([]);
//获取导航菜单1 
async function getNavigation() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 23,
            'placeid': 1
        },
    });
    navigation.value = mkdata.data;
}
getNavigation();
//1.获取导航菜单 end ---------------------------------------->
</script>

<style lang="less" scoped>
@import url('@/assets/css/public/template/nav.less');
</style>