zizhujianzhan_web/components/template/component/menu/1200x54/6/1.vue

<template>
    <!--样式1-->
    <div class="floatMenuBox" v-if="componentStyle == 1">
        <div v-for="(item, index) in bottomMenu" :key="index">
            <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`" :title="item.name">
                {{ item.name }}
            </NuxtLink>
            <NuxtLink v-else-if="item.type == 1" :to="`/about/${item.name_pinyin}/list-1.html`" :title="item.name">
                {{ item.name }}
            </NuxtLink>
        </div>
    </div>
    <!--样式2-->
    <div class="floatMenuStyle2" v-if="componentStyle == 2">
        <div v-for="(item, index) in bottomMenu" :key="index">
            <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`" :title="item.name">
                {{ item.name }}
            </NuxtLink>
            <NuxtLink v-else-if="item.type == 1" :to="`/about/${item.name_pinyin}/list-1.html`" :title="item.name">
                {{ item.name }}
            </NuxtLink>
        </div>
    </div>
    <!--样式3-->
    <div class="floatMenuStyle3" v-if="componentStyle == 3">
        <div v-for="(item, index) in bottomMenu" :key="index">
            <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`" :title="item.name">
                {{ item.name }}
            </NuxtLink>
            <NuxtLink v-else-if="item.type == 1" :to="`/about/${item.name_pinyin}/list-1.html`" :title="item.name">
                {{ item.name }}
            </NuxtLink>
        </div>
    </div>
    <!--样式4-->
    <div class="floatMenuStyle4" v-if="componentStyle == 4">
        <div class="title">导航列表</div>
        <div v-for="(item, index) in bottomMenu" :key="index">
            <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`" :title="item.name">
                {{ item.name }}
            </NuxtLink>
            <NuxtLink v-else-if="item.type == 1" :to="`/about/${item.name_pinyin}/list-1.html`" :title="item.name">
                {{ item.name }}
            </NuxtLink>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    componentStyle: Number,//样式编号
    bottomMenu: Array,//底部菜单
    pageId: Number,//页面id
});
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.floatMenuBox {
    height: 54px;
    line-height: 54px;
    display: flex;
    justify-content: center;
    background-color: #065395;

    div {
        width: 160px;
        height: 54px;
        line-height: 54px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        background: url(http://192.168.1.234:19000/pre/image/png/20251217/1765957741369605.png) no-repeat right center;

        &:last-child {
            background: none;
        }

        a {
            color: #fff;
        }
    }
}

//基本样式 end ---------------------------------------->
//样式2 start ---------------------------------------->
.floatMenuStyle2 {
    height: 54px;
    line-height: 54px;
    display: flex;
    justify-content: center;
    background-color: #333333;

    div {
        width: 160px;
        height: 54px;
        line-height: 54px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        background: url(http://192.168.1.234:19000/pre/image/png/20251217/176595806140757.png) no-repeat right center;

        &:last-child {
            background: none;
        }

        a {
            color: #fff;
        }
    }
}

//样式2 end ---------------------------------------->
//样式3
.floatMenuStyle3 {
    height: 54px;
    line-height: 54px;
    display: flex;
    justify-content: center;
    background-color: #fff;
    border-bottom: 2px solid #ededed;

    div {
        width: 160px;
        height: 54px;
        line-height: 54px;
        text-align: center;
        color: #333;
        font-size: 16px;
        font-weight: bold;
        background: url(http://192.168.1.234:19000/pre/image/png/20251217/1765958072692873.png) no-repeat right center;

        &:last-child {
            background: none;
        }

        a {
            color: #333;
        }
    }
}

//样式4
.floatMenuStyle4 {
    height: 54px;
    line-height: 54px;
    display: flex;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #ededed;

    div {
        width: 160px;
        height: 54px;
        line-height: 54px;
        text-align: center;
        color: #333;
        font-size: 16px;
        font-weight: bold;
        background: url(http://192.168.1.234:19000/pre/image/png/20251217/17659580809026.png) no-repeat right center;

        &:last-child {
            background: none;
        }

        a {
            color: #333;
        }
    }
}
</style>