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

<template>
    <div :class="'innerLeft' + skinId">
        <ul>
            <li class="listNewsTitle" v-if="skinId==1">
                导航列表
            </li>
            <li class="listNewsTitle_skin2" v-if="skinId==2">
                导航列表
            </li>
            <li v-for="(item, index) in bottomMenu" :key="index">
                <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`" :title="item.name" :class="item.id == pageId ? 'active color'+skinId : ''">
                    {{ item.name }}
                </NuxtLink>
                <NuxtLink v-else-if="item.type == 1" :to="`/about/${item.name_pinyin}/list-1.html`" :title="item.name" :class="item.id == pageId ? 'active color'+skinId : ''">
                    {{ item.name}}
                </NuxtLink>
            </li>
        </ul>
    </div>
</template>

<script setup>
const props = defineProps({
    skinId: Number,//皮肤id
    bottomMenu: Array,//底部菜单
    pageId: Number,//页面id
});
</script>

<style lang="less" scoped>
//样式1
.listNewsTitle {
    color: #004564;
    width: 144px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.color1 {
    background: #004564;
    color: #fff;
}
//样式2
.listNewsTitle_skin2 {
    background: #A91B33;
    color: #fff;
    width: 144px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.color2 {
    background: #A91B33;
    color: #fff;
}
//左侧菜单样式
.innerLeft1 {
    width: 144px;
    position: absolute;
    top: 15px;
    left: -165px;
    .rightMenuTitle {
        width: 144px;
        height: 69px;
        font-size: 22px;
        font-weight: bold;
        line-height: 58px;
        text-align: center;
        color: #fff;
        margin-bottom: 30px;
    }
    ul {
        li {
            background-color: #F9FAFB;
            border-bottom:1px solid #fff;
            a {
                display: inline-block;
                width: 144px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                border-top: 1px #fff solid;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color:#333;
                &.active {
                    color: #fff;
                }
            }
        }
    }
}
</style>