zizhujianzhan_web/components/template/component/menu/1200x100/channel/4.vue

<template>
    <div>
        <div class="channelMenuTitle_skin4" 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>
        <!--样式7-->
        <div class="menuListStyle7" v-if="componentStyle == 7">
            <div class="channelMenuListTitle">{{ title }}</div>
            <div class="hannelMenuListFloatMenu">
                <div 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>
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!--样式8-->
        <div class="menuListStyle7 menuListStyle8" v-if="componentStyle == 8">
            <div class="channelMenuListTitle">{{ title }}</div>
            <div class="hannelMenuListFloatMenu">
                <div 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>
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!--样式9-->
        <div class="menuListStyle7 menuListStyle9" v-if="componentStyle == 9">
            <div class="channelMenuListTitle">{{ title }}</div>
            <div class="hannelMenuListFloatMenu">
                <div 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>
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!--样式10-->
        <div class="menuListStyle7 menuListStyle9 menuListStyle8" v-if="componentStyle == 10">
            <div class="channelMenuListTitle">{{ title }}</div>
            <div class="hannelMenuListFloatMenu">
                <div 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>
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!--样式11-->
        <div class="menuListStyle11" v-if="componentStyle == 11">
            <div class="style11">
                <div class="channelMenuListTitle">
                    <span>{{ title }}</span>
                </div>
                <div class="hannelMenuListFloatMenu">
                    <div 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>
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
        <!--样式12-->
        <div class="menuListStyle12" v-if="componentStyle == 12">
            <div class="channelMenuListTitle">
                <span>{{ title }}</span>
            </div>
            <div class="hannelMenuListFloatMenu">
                <div 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>
                    </NuxtLink>
                </div>
            </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.alias;
}
//获取当前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_skin4 {
    width: 1200px;
    height: 32px;
    line-height: 32px;
    font-size: 24px;
    color: #fe8f00;
    font-weight: bold;
    text-align: center;
    background: url('https://img.bjzxtw.org.cn/pre/image/png/20251017/1760682472803297.png') no-repeat center center;
    margin-bottom: 25px;
}

.channelMenuList {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #333;
    border-bottom: 2px solid #fe8f00;
    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: #fe8f00;
            }
        }

        a.active {
            color: #fe8f00;
        }

        &:first-child {
            color: #fe8f00;
        }
    }
}

//基本样式 end ---------------------------------------->

//样式2 start ---------------------------------------->
.menuListStyle2 {
    border-bottom: 0;
}

//样式2 end ---------------------------------------->
//样式3
.menuListStyle3 {
    border-bottom: 0;

    div {
        text-align: center;
        height: 36px;

        &:hover {
            color: #fe8f00;
            padding-bottom: 15px;
            border-bottom: 2px solid #fe8f00;
            box-sizing: border-box;
        }
    }
}

//样式4
.menuListStyle4 {
    height: 54px;
    padding-top: 23px;
    padding-bottom: 0px;

    .menuTitle {
        width: 140px;
        font-size: 26px;
        font-weight: bold;
        color: #fe8f00;
        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: #fe8f00;
                }
            }

            .line {
                color: #fe8f00;
                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: #fe8f00;
}

//样式7
.menuListStyle7 {
    margin-top: 30px;
    position: relative;
    padding-top: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #E4E4E4;

    .channelMenuListTitle {
        background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/1760682499809925.png) no-repeat center center;
        width: 200px;
        height: 40px;
        line-height: 40px;
        color: #ffffff;
        font-size: 24px;
        padding-left: 30px;
        box-sizing: border-box;
    }

    .hannelMenuListFloatMenu {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        color: #333333;
        font-weight: bold;
        top: 33px;
        right: 0;

        div {
            width: 123px;
            font-size: 16px;
            text-align: center;
            font-weight: bold;

            &:last-child {
                background: none;
            }

            &.active {
                color: #fe8f00
            }

            a {
                color: #333333;
            }

            a:hover {
                color: #fe8f00;
            }

        }
    }
}

//样式8
.menuListStyle8 {
    border-bottom: none;
}

//样式9
.menuListStyle9 {
    .hannelMenuListFloatMenu {
        div {
            width: 123px;
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            height: 43px;

            &:last-child {
                background: none;
            }

            &.active {
                color: #fe8f00;
                border-bottom: 2px solid #fe8f00;
            }

            &:hover {
                color: #fe8f00;
                border-bottom: 2px solid #fe8f00;
            }
        }
    }
}

//样式11
.menuListStyle11 {
    padding-top: 1px;

    .style11 {
        width: 1200px;
        height: 61px;
        display: flex;
        background-color: #fe8f00;
        color: #fff;
        margin-top: 20px;

        .channelMenuListTitle {
            width: 144px;
            height: 51px;
            text-align: center;
            background-color: #fff;
            color: #fe8f00;
            margin-top: 10px;
            margin-left: 35px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;

            span {
                display: inline-block;
                font-size: 16px;
                font-weight: bold;
                padding: 10px 0;
                box-sizing: border-box;
                border-bottom: 2px solid #fe8f00;
            }
        }

        .hannelMenuListFloatMenu {
            width: 925px;
            height: 21px;
            margin-top: 23px;
            padding: 0 50px 0 45px;
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            font-weight: bold;

            div {
                width: 122px;
                height: 20px;
                line-height: 16px;
                text-align: center;
                background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/176068252136920.png) no-repeat right 2px;

                &:last-child {
                    background: none;
                }

                &.active {
                    color: #fe8f00
                }

                a {
                    color: #fff;
                }
            }
        }
    }

}

//样式12
.menuListStyle12 {
    margin-top: 12px;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid #d9d9d9;
    display: flex;

    .channelMenuListTitle {
        width: 153px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/1760682509222738.png) no-repeat left -4px;
    }

    .hannelMenuListFloatMenu {
        margin-left: 15px;
        width: 1030px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        height: 52px;
        line-height: 60px;

        div {
            width: 96px;
            padding: 0 15px;
            padding-bottom: 9px;
            text-align: center;
            background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/176068362214862.png) no-repeat right 22px;

            &:last-child {
                background: none;
            }

            &.active {
                color: #fe8f00;
                border-bottom: 2px solid #fe8f00;
            }

            a {
                color: #333333;

                span {
                    display: inline-block;
                    height: 70px;

                    &:hover {
                        color: #fe8f00;
                        border-bottom: 2px solid #fe8f00;
                    }
                }
            }
        }
    }
}
</style>