xiangcunwang_web/components/home/pageNavigation.vue

<template>
    <!-- 导航 -->
    <div class="navigate">
        <div class="partOne">
            <div class="inner">
                <!-- 导航一 -->
                <div class="navLeft">
                    <div class="navIndex">
                        <NuxtLink to="/" target="_blank" title="首页">
                            首页
                        </NuxtLink>
                    </div>
                    <div class="navClass">
                        <div>乡村资讯</div>
                        <div>社会资讯</div>
                    </div>
                </div>
                <ul class="navigationOne">
                    <li v-for="(item, index) in navigation1" :key="index">
                        <NuxtLink :to="getLinkPath(item)">
                            <span>{{ item.alias }}</span>
                        </NuxtLink>
                    </li>
                </ul>
                <div class="navRight">
                    <div class="nav111" v-for="(item, index) in navigation2">
                        <NuxtLink :to="getLinkPath(item)">
                            <span>{{ item.alias }}</span>
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
        <div class="partTwo">
            <div class="inner">
                <h3>
                    深度服务
                </h3>
                <ul class="partTwoTitle">
                    <li class="titleList" v-for="(item, index) in navigation3">
                        <NuxtLink :to="getLinkPath(item)">
                            <span>{{ item.alias }}</span>
                        </NuxtLink>
                    </li>
                </ul>
                <div class="searchBox">
                    <input v-model="keywords" type="text" placeholder="请输入关键词" @keydown.enter="goToSearch">
                    <img src="../../public/image/search.png" @keydown.enter="goToSearch">
                </div>
            </div>
        </div>
        <div class="littleNav">
            <div class="inner">
                <img src="../../public/index/hdpt.png" alt="">
                <ul class="leftPart">
                    <li class="navList" v-for="item in navigation4">
                        <NuxtLink :to="getLinkPath(item)">
                            <span>{{ item.alias }}</span>
                        </NuxtLink>
                    </li>
                </ul>
                <ul class="rightPart">
                    <li class="navList" v-for="item in navigation4data2">
                        <NuxtLink :to="getLinkPath(item)" >
                            <span>{{ item.alias }}</span>
                        </NuxtLink>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
//1.加载依赖 start ---------------------------------------->

//1.加载依赖 end ---------------------------------------->

//2.页面公用方法 start ---------------------------------------->
const getLinkPath = (item) => {
    if (item.is_url == 1) {
        return {
            url: item.web_url,
            target: '_blank'
        }
    }else{
        if (item.children_count != 0) {
            return { path: `/primaryNavigation/${item.category_id}` }
        }else{
            return { path: `/newsList/${item.category_id}` }
        }
    }
}
//2.页面公用方法 end ---------------------------------------->

//3.获取导航菜单 start ---------------------------------------->
const navigation1 = ref([]);
//2是那个独立的2个
const navigation2 = ref([]); 
const navigation3 = ref([]);
//下面一行是2边分开的 一边5个
const navigation4 = ref([]);
const navigation4data2 = ref([]);

//获取导航菜单1
async function getNavigation1() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 20,
            'placeid': 1
        },
    });
    navigation1.value = mkdata.data;
}
getNavigation1();

//获取导航菜单2
async function getNavigation2() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 2,
            'placeid': 20
        },
    });
    navigation2.value = mkdata.data;
}
getNavigation2();

//获取导航菜单3
async function getNavigation3() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 6,
            'placeid': 22
        },
    });
    navigation3.value = mkdata.data;
}
getNavigation3();


//获取导航菜单4
async function getNavigation4() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 10,
            'placeid': 28
        },
    });
    for(let i in mkdata.data){
        if(i < 5){
            navigation4.value.push(mkdata.data[i]);
        }else{
            navigation4data2.value.push(mkdata.data[i]);
        }
    }
    //navigation4.value = mkdata.data;
    //navigation4data2.value = mkdata.data;
}
getNavigation4();
//3.获取导航菜单 end ---------------------------------------->

//4.跳转到搜索页面 start ---------------------------------------->
const keywords = ref("")
let goToSearch = () => {
    const route = "/search/search?keyword=" + keywords.value;
    window.open(route, '_blank');
}
//4.跳转到搜索页面 end ---------------------------------------->
</script>

<style lang="less" scoped>
// 导航部分
.partOne .navigationOne,
.partOne .navigationOne>li {
    float: left;
}

.partOne {
    width: 100%;
    height: 133px;
    // margin-bottom: 10px;
    background-color: #a01c0e;
    font-size: 20px;
    font-family: PingFang SC-Semibold;

    .inner {
        display: flex;
        justify-content: space-between;

        .navLeft {
            width: 160px;
            font-size: 16px;
            display: flex;

        }

        .navIndex {
            height: 100px;
            line-height: 130px;

            a {
                font-weight: bold;
                font-size: 16px;
                color: #F8ECD2;
            }
        }

        .navClass {
            padding-top: 35px;
            padding-left: 30px;
            font-weight: bold;
            color: #F8ECD2;

            div:nth-child(2) {
                padding-top: 20px;
            }
        }
    }

    .navigationOne {
        width: 1200px;
        color: #333;
        display: flex;
        flex-wrap: wrap;
        padding-top: 24px;

        //justify-content: space-around;

        li {
            width: 74px;
            font-family: PingFang SC;
            height: 42px;
            line-height: 42px;
            //font-weight: 600;
            font-size: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin: 0 10px;
            text-align: center;

            // &:nth-last-child(1) {
            //     margin-right: 0px;
            // }

            a {
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
                display: block;
            }
        }

        >li:hover a {
            color: #F8ECD2;
        }

        .active {
            color: #F8ECD2;
            // display: inline-block;
            // height: 50px;
            // border-bottom: 2px solid #139602
        }
    }

    .navRight {
        width: 135px;
        height: 75px;
        font-size: 16px;
        margin-top: 30px;
        background: url(/_nuxt/public/index/nav_bg.png) no-repeat;

        .nav111 {
            width: 98px;
            height: 30px;
            line-height: 44px;
            text-align: center;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            font-size: 16px;

            a {
                font-weight: bold;
                background: linear-gradient(to bottom, #FFF6B1 0%, #F5BC38 100%);
                -webkit-background-clip: text;
                color: transparent;
            }

        }
    }

}

.partTwo {
    width: 100%;
    height: 60px;
    line-height: 60px;
    // border-bottom: 1px solid #e3e3e3;
    background-color: #fafafa;

    .inner {
        width: 1200px;
        height: 57px;
        display: flex;
        // justify-content: space-between;

        h3 {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            font-size: 16px;
            padding-left: 60px;

            a {
                color: #333333;
            }
        }

        .partTwoTitle {
            display: flex;
            justify-content: flex-start;
            width: 633px;
            padding-left: 40px;
            padding-right: 40px;

            .titleList {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                margin-right: 40px;
                a {
                    color: #333333;
                }
            }

            .titleList:hover a {
                color: #A01C0E;
            }
        }

        .searchBox {
            width: 356px;
            height: 40px;
            line-height: 40px;
            background-color: #fff;
            margin-top: 10px;
            border-radius: 25px;
            border: 1px solid #ededed;

            input {
                width: 285px;
                height: 35px;
                line-height: 35px;
                margin-left: 20px;
                border: none;
                outline: none;
            }

            img {
                width: 32px;
                height: 32px;
                vertical-align: middle;
                cursor: pointer;
            }

        }
    }
}

//小导航
.littleNav {
    width: 100%;
    height: 88px;
    margin-top: 15px;

    .inner {
        width: 1200px;
        height: 88px;
        line-height: 88px;
        margin: 0 auto;
        display: flex;
        border: 1px solid #D3D5D8;
        background-color: #fafafa;

        img {
            width: 138px;
            height: 38px;
            margin-top: 22px;
            margin-left: 25px;
        }

        .leftPart {
            margin-left: 40px;
            margin-right: 10px;
        }

        .leftPart,
        .rightPart {
            width: 470px;
            height: 78px;
            margin-top: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            border-bottom: 3px solid #A01C0E;

            .navList {
                a {
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: bold;
                    font-size: 16px;
                    color: #333333;
                    line-height: 19px;
                }
            }

            .navList:hover a {
                color: #A01C0E;
            }
        }
    }
}
</style>