zizhujianzhan_web/components/template/component/menu/1200x187/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.slice(0, 7)" :key="index">
                    <NuxtLink 
                        :href="getLinkPath(item)" 
                        :title="item.alias"
                        :target="item.is_url == 1 ? '_blank' : '_self'"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuBoxBg1">
            <div class="menuBox" ref="menuBox">
                <div v-for="(item, index) in navigation.slice(7, 23)" :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');
// 皮肤5菜单
.menuStyle5 {
    width: 100%;
    height: 187px;
    margin-bottom: 30px;
    .componentBorder {
        border-left: 2px dashed #999;
        border-right: 2px dashed #999;
    }
    .menuBoxBg {
        width: 100%;
        height: 64px;
        line-height: 64px;
        background: #3848a0;
        .menuBox {
            width: 1200px;
            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            div {
                a{
                    color: #fff;
                }
                width: 12.5%;
                cursor: pointer;
                box-sizing: border-box;
                font-size: 16px;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
            }
        }
    }
    .menuBoxBg1{
        margin-top: 20px;
        width: 100%;
        height: 103px;
        background-color: #fafafa;
        .menuBox{
            width: 1200px;
            margin: 0 auto;
            padding-top: 13px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            div {
                a{
                    color: #333;
                }
                width: 12.5%;
                cursor: pointer;
                box-sizing: border-box;
                font-size: 16px;
                height: 38px;
                line-height: 38px;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
            }
        }
    }
    .menuSectorInputBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        width: 80%;
        margin: 0 auto;
        border-top: none;
        height: 50px;
        .menuSectorInputBoxItem {
            padding: 0 10px;
            input {
                margin-right: 10px;
            }
            .el-select {
                margin-right: 10px;
            }
        }
    }
    .componentMenuBorder {
        border: 2px dashed #999;
    }
}
//皮肤6菜单
.menuStyle6{
    width: 100%;
    height: 187px;
    margin-bottom: 30px;
    .menuBoxBg {
        width: 100%;
        height: 64px;
        line-height: 64px;
        background: #065395;
        .menuBox {
            width: 1200px;
            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            div {
                a{
                    color: #fff;
                }
                width: 12.5%;
                cursor: pointer;
                box-sizing: border-box;
                font-size: 16px;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
            }
        }
    }
    .menuBoxBg1{
        width: 100%;
        height: 103px;
        background-color: #fff;
        .menuBox{
            width: 1200px;
            margin: 0 auto;
            padding-top: 13px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            div {
                a{
                    color: #333;
                }
                width: 12.5%;
                cursor: pointer;
                box-sizing: border-box;
                font-size: 16px;
                height: 38px;
                line-height: 38px;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
            }
        }
    }

}
//皮肤7菜单
.menuStyle7{
    width: 100%;
    height: 187px;
    margin-bottom: 30px;
    .menuBoxBg {
        width: 100%;
        height: 64px;
        line-height: 64px;
        background: #9C130A;
        .menuBox {
            width: 1200px;
            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            div {
                a{
                    color: #fff;
                }
                width: 12.5%;
                cursor: pointer;
                box-sizing: border-box;
                font-size: 16px;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
            }
        }
    }
    .menuBoxBg1{
        width: 100%;
        height: 103px;
        background-color: #FAFAFA;
        .menuBox{
            width: 1200px;
            margin: 0 auto;
            padding-top: 13px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            div {
                a{
                    color: #333;
                }
                width: 12.5%;
                cursor: pointer;
                box-sizing: border-box;
                font-size: 16px;
                height: 38px;
                line-height: 38px;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
            }
        }
    }

}
</style>