zizhujianzhan_web/components/template/component/menu/190x368/1.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>
</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: #fff;
        border-bottom: 1px solid #fff;
        border:1px solid #EEEEEE;
        font-size: 20px;
        a {
            color: #333;
        }
        &:last-child {
            border-bottom: 2px solid #A72213;
        }
    }
    .title {
        color: #fff;
        margin-bottom: 10px;
        background: #A72213;
    }
    .active {
        background: #A72213;
        a {
            color: #fff;
        }
    }
}
//基本样式 end ---------------------------------------->
//样式2 start ---------------------------------------->
.floatMenuStyle2 {
    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color: #fff;
        border-bottom: 1px solid #fff;
        border:1px solid #EEEEEE;
        font-size: 20px;
        a {
            color: #333;
        }
        &:last-child {
            border-bottom: 2px solid #A72213;
        }
    }
    .title {
        color: #fff;
        margin-bottom: 10px;
        background: #fff;
        color:#A72213;
        font-weight: bold;
    }
    .active {
        background: #A72213;
        a {
            color: #fff;
        }
    }
}
//样式3 start ---------------------------------------->
.floatMenuStyle3 {
    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color: #F9FAFB;
        border-bottom: 1px solid #fff;
        border:1px solid #EEEEEE;
        font-size: 20px;
        a {
            color: #333;
        }
        &:last-child {
            border-bottom: 2px solid #A72213;
        }
    }
    .title {
        color: #fff;
        margin-bottom: 10px;
        background: #A72213;
    }
    .active {
        background: #A72213;
        a {
            color: #fff;
        }
    }
}
//样式4 start ---------------------------------------->
.floatMenuStyle4 {
    div {
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color: #F9FAFB;
        border-bottom: 1px solid #fff;
        border:1px solid #EEEEEE;
        font-size: 20px;
        a {
            color: #333;
        }
        &:last-child {
            border-bottom: 2px solid #A72213;
        }
    }
    .title {
        color: #fff;
        margin-bottom: 10px;
        background: #fff;
        color:#A72213;
        font-weight: bold;
    }
    .active {
        background: #A72213;
        a {
            color: #fff;
        }
    }
}
</style>