zizhujianzhan_web/components/template/component/menu/1200x100/list/1.vue

<template>
    <div>
        <div class="channelMenuTitle" v-if="componentStyle == 1 || componentStyle == 2 || componentStyle == 3">
            {{title}}
        </div>
        <!--样式1-->
        <div class="channelMenuList" v-if="componentStyle==1">
            <div v-for="item in navigateData">
                <NuxtLink :to="{path:`/${targetSegment}/${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment2 == item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
            </div>
        </div>
        <!--样式2-->
        <div class="channelMenuList menuListStyle2" v-if="componentStyle==2">
            <div v-for="item in navigateData">
                <NuxtLink :to="{path:`/${targetSegment}/${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment2 == item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
            </div>
        </div>
        <!-- 样式3 -->
        <div class="channelMenuList menuListStyle3" v-if="componentStyle == 3">
            <div v-for="item in navigateData">
                <NuxtLink :to="{path:`/${targetSegment}/${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment2 == item.aLIas_pinyin}">{{item.alias}}</NuxtLink>
            </div>
        </div>
        <!-- 样式4 -->
        <div class="channelMenuList menuListStyle4" v-if="componentStyle == 4">
            <div class="menuTitle">{{ title }}</div>
            <div class="menulist" v-for="item in navigateData">
                <NuxtLink :to="{path:`/${targetSegment}/${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment2 == item.aLIas_pinyin}">
                    <span class="title">{{item.alias}}</span>
                    <span class="line" v-if="item.alias != navigateData[navigateData.length - 1].alias">/</span>
                </NuxtLink>
            </div>
        </div>
        <!-- 样式5 -->
        <div class="channelMenuList menuListStyle4 menuListStyle5" v-if="componentStyle == 5">
            <div class="menuTitle">{{ title }}</div>
            <div class="menulist" v-for="item in navigateData">
                <NuxtLink :to="{path:`/${targetSegment}/${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment2 == item.aLIas_pinyin}">
                    <span class="title">{{item.alias}}</span>
                    <span class="line" v-if="item.alias != navigateData[navigateData.length - 1].alias">/</span>
                </NuxtLink>
            </div>
        </div>
        <!-- 样式6 -->
        <div class="channelMenuList menuListStyle4 menuListStyle6" v-if="componentStyle == 6">
            <div class="menuTitle">{{ title }}</div>
            <div class="menulist" v-for="item in navigateData">
                <NuxtLink :to="{path:`/${targetSegment}/${item.aLIas_pinyin}/list-1.html`}" :class="{active:targetSegment2 == item.aLIas_pinyin}">
                    <span class="title">{{item.alias}}</span>
                    <span class="line" v-if="item.alias != navigateData[navigateData.length - 1].alias">/</span>
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import {ref} from 'vue';
//获得新闻数据
const props = defineProps({
    componentStyle:Number,//样式编号
    navigateData:Array,//子导航数据
    routeId:Number//导航对应的cid
});
//获得导航名称
const title = ref("")
const mkdata = await requestDataPromise('/web/getOneWebsiteCategory', {
    method: 'GET',
    query: {
        'catid': props.routeId,
    },
});
if (mkdata.code == 200) {
    title.value = mkdata.data.parent_name;
} 
//获取当前url路径
const route = useRoute();
//获得当前的完整路径
const fullPath = route.path;
const segments = fullPath.split('/');
const targetSegment = segments[1];
const targetSegment2 = segments[2];
//判断当前为第几层的列表页
// const routeLevel = ref(0);
// if(route.name == "dir-list-id"){
//     routeLevel.value = 1;
//     console.log("当前的路由层级为：" + routeLevel.value);
// }
// if(route.name == "dir-dir-list-id"){
//     routeLevel.value = 2;
//     console.log("当前的路由层级为：" + routeLevel.value);
// }
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.channelMenuTitle {
    width: 1200px;
    height: 32px;
    line-height: 32px;
    font-size: 24px;
    color:#1C5468;
    font-weight: bold;
    text-align: center;
    background: url('http://img.bjzxtw.org.cn/pre/image/jpeg/20250620/1750381219965589.jpg') no-repeat center center;
    margin-bottom: 25px;
}
.channelMenuList {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #333;
    border-bottom: 2px solid #004564;
    padding-bottom: 15px;
    div {
        font-size: 16px;
        font-weight: bold;
        width: 150px;
        height: 22px;
        line-height: 22px;
        a {
            color: #333;
            display: block;
            text-align: center;
            &:hover {
                color: #004564;
            }
        }
        a.active {
            color: #004564;
        }
        &:first-child {
            color: #004564;
        }
    }
}
//基本样式 end ---------------------------------------->
//样式2 start ---------------------------------------->
.menuListStyle2 {
    border-bottom: 0;
}
//样式2 end ---------------------------------------->
//样式3
.menuListStyle3 {
    border-bottom: 0;
    div{
        text-align: center;
        height: 36px;
        &:hover {
            color: #1c5468;
            padding-bottom: 15px;
            border-bottom: 2px solid #004564;
            box-sizing: border-box;
        }
    }
}
//样式4
.menuListStyle4 {
    height: 54px;
    padding-top: 23px;
    padding-bottom: 0px;
    .menuTitle {
        width: 140px;
        font-size: 26px;
        font-weight: bold;
        color: #1c5468;
        margin-right: 80px;
    }
    .menulist {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        padding: 15px 0;
        a{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .title{
                width: 120px;
                height: 16px;
                text-align: center;
                &:hover{
                    color: #1c5468;
                }
            }
            .line{
                color: #1c5468;
                padding-top: 5px;
            }
        }
        
        
        
    }
}
//样式5
.menuListStyle5 {
    border-bottom: none;
}
//样式6
.menuListStyle6 {
    border-bottom: none;
    position: relative;
}
.menuListStyle6::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 8%;
    height: 2px;
    background-color: #004564;
}
</style>