zizhujianzhan_web/components/template/component/menu/144x365/3.vue

<template>
    <!--样式1-->
    <div class="floatMenuBox" v-if="componentStyle==1">
        <div class="title">导航列表</div>
        <div v-for="(item, index) in bottomMenu" :key="index" :class="item.id == pageId ? 'active' : ''">
            <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 class="title">导航列表</div>
        <div v-for="(item, index) in bottomMenu" :key="index" :class="item.id == pageId ? 'active' : ''">
            <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 class="title">导航列表</div>
        <div v-for="(item, index) in bottomMenu" :key="index" :class="item.id == pageId ? 'active' : ''">
            <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" :class="item.id == pageId ? 'active' : ''">
            <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>
    <!--样式5-->
    <div class="floatMenuStyle5" v-if="componentStyle == 5">
        <div class="title">导航列表</div>
        <div v-for="(item, index) in bottomMenu" :key="index" :class="item.id == pageId ? 'active' : ''">
            <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>
    <!--样式6-->
    <div class="floatMenuStyle6" v-if="componentStyle == 6">
        <div class="title">导航列表</div>
        <div v-for="(item, index) in bottomMenu" :key="index" :class="item.id == pageId ? 'active' : ''">
            <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>
    <!--样式7-->
    <div class="floatMenuStyle7" v-if="componentStyle == 7">
        <div class="title">导航列表</div>
        <div v-for="(item, index) in bottomMenu" :key="index" :class="item.id == pageId ? 'active' : ''">
            <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>
    <!--样式8-->
    <div class="floatMenuStyle8" v-if="componentStyle == 8">
        <div class="title">导航列表</div>
        <div v-for="(item, index) in bottomMenu" :key="index" :class="item.id == pageId ? 'active' : ''">
            <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>
    <!--样式9-->
    <div class="floatMenuStyle9" v-if="componentStyle == 9">
        <div class="title">导航列表</div>
        <div v-for="(item, index) in bottomMenu" :key="index" :class="item.id == pageId ? 'active' : ''">
            <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>
    <!--样式10-->
    <div class="floatMenuStyle10" v-if="componentStyle == 10">
        <div class="title">导航列表</div>
        <div v-for="(item, index) in bottomMenu" :key="index" :class="item.id == pageId ? 'active' : ''">
            <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 {
    div {
        height: 60px;
        line-height: 60px;
        text-align: center; 
        background-color: #f9fafb;
        border-bottom: 1px solid #fff;
        a {
            color:#333;
        }
    }
    .title {
        color:#c82200;
    }
    .active {
        background: #c82200;
        a {
            color:#fff;
        }
    }
}
//基本样式 end ---------------------------------------->
//样式2 start ---------------------------------------->
.floatMenuStyle2 {
    div {
        height: 60px;
        line-height: 60px;
        text-align: center; 
        background-color: #f9fafb;
        border-bottom: 1px solid #fff;
        a {
            color:#333;
        }
    }
    .title {
        background: #c82200;
        color:#fff;
    }
    .active {
        background: #c82200;
        a {
            color:#fff;
        }
    }
}
//样式2 end ---------------------------------------->
//样式3
.floatMenuStyle3 {
    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333333;
        background-color: #f9fafb;
        border-bottom: 1px solid #fff;

        a {
            color: #333333;
        }
    }

    .title {
        background: #c82200;
        color: #fff;
    }

    .active {
        background: #f9fafb;
        color: #c82200;

        a {
            color: #c82200;
        }
    }
}

//样式4
.floatMenuStyle4 {
    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333333;
        background-color: #f9fafb;
        border-bottom: 1px solid #fff;

        a {
            color: #333333;
        }
    }

    .title {
        background: #c82200;
        color: #fff;
    }

    .active {
        background: #f0f0f0;
        color: #c82200;
        border-left: 2px solid #c82200;

        a {
            color: #c82200;
        }
    }
}

//样式5
.floatMenuStyle5 {
    border: 1px solid #eeeeee;

    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333333;
        border-bottom: 1px solid #eeeeee;

        a {
            color: #333333;
        }

        &:last-child {
            border-bottom: none;
        }
    }

    .title {
        color: #c82200;
    }

    .active {
        background: #c82200;
        color: #fff;

        a {
            color: #fff;
        }
    }
}

//样式6
.floatMenuStyle6 {
    border: 1px solid #eeeeee;

    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333333;
        border-bottom: 1px solid #eeeeee;

        a {
            color: #333333;
        }

        &:last-child {
            border-bottom: none;
        }
    }

    .title {
        background: #c82200;
        color: #fff;
    }

    .active {
        background: #c82200;
        color: #fff;

        a {
            color: #fff;
        }
    }
}

//样式7
.floatMenuStyle7 {
    border: 1px solid #eeeeee;

    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333333;
        border-bottom: 1px solid #eeeeee;

        a {
            color: #333333;
        }

        &:last-child {
            border-bottom: none;
        }
    }

    .title {
        background: #c82200;
        color: #fff;
    }

    .active {
        color: #c82200;

        a {
            color: #c82200;
        }
    }
}

//样式8
.floatMenuStyle8 {
    border: 1px solid #eeeeee;

    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333333;
        border-bottom: 1px solid #eeeeee;

        a {
            color: #333333;
        }

        &:last-child {
            border-bottom: none;
        }
    }

    .title {
        background: #c82200;
        color: #fff;
    }

    .active {
        background: #f0f0f0;
        color: #c82200;
        border-left: 2px solid #c82200;

        a {
            color: #c82200;
        }
    }
}

//样式9
.floatMenuStyle9 {
    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333333;
        border-bottom: 1px dashed #cccccc;

        a {
            color: #333333;
        }
    }

    .active {
        border-bottom: none;
    }
}

//样式10
.floatMenuStyle10 {
    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333333;
        border-bottom: 1px dashed #cccccc;

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