xiangcunwang_web/components/home/pageNavigation.vue

<template>
    <!-- 导航 -->
    <div class="navigate">

        <div class="partOne">

            <div class="inner">
                <!-- 导航一 -->
                <div class="navLeft">
                    <div class="navIndex">
                        <NuxtLink to="/" 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)" :target="item.is_url == 1 ? '_blank' : '_self'">
                            <span> {{ item.alias }}</span>
                        </NuxtLink>
                    </li>
                </ul>
                <div class="navRight">
                    <div class="nav111" v-for="(item, index) in navigation2" :key="index">
                        <NuxtLink :to="getLinkPath(item)" :target="item.is_url == 1 ? '_blank' : '_self'">
                            <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" :key="index">
                        <NuxtLink :to="getLinkPath(item)" :target="item.is_url == 1 ? '_blank' : '_self'">
                            <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" @click="goSearch">
                </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" :key="index">
                        <NuxtLink :to="getLinkPath(item)" :target="item.is_url == 1 ? '_blank' : '_self'">
                            <span>{{ item.alias }}</span>
                        </NuxtLink>
                    </li>
                </ul>
                <ul class="rightPart">
                    <li class="navList" v-for="item in navigation4data2" :key="index">
                        <NuxtLink :to="getLinkPath(item)" :target="item.is_url == 1 ? '_blank' : '_self'">
                            <span>{{ item.alias }}</span>
                        </NuxtLink>
                    </li>
                </ul>
            </div>
        </div>
  
        <div class="phone_nav pc_none">
            

            <div class="phone_nav_in">
                
                 <NuxtLink 
                    to="/" title="首页" 
                    class="phone_nav_index"
                    :class="{ 'phone_nav_index_only': $route.path === '/' }"
                    >
                            首页
                 </NuxtLink>


               <div class="phone_nav_a_box">
                                            
                            <NuxtLink 
                                v-for="(item, index) in navigation1" :key="index"
                                :to="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'">
                                {{ item.alias }} 
                            </NuxtLink>

                </div>

            </div>

        </div>

 


    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const $route = useRoute();

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

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

//2.页面公用方法 start ---------------------------------------->

//搜索跳转
//点击搜索按钮
let goSearch = () => {
    const route = `/search/search?keyword=${keywords.value}`;
    window.location.href = route;
}
//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': 21
        },
    });
    navigation2.value = mkdata.data;
}
getNavigation2();




//获取导航菜单4
async function getNavigation4() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 10,
            'placeid': 23
        },
    });
    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
async function getNavigation3() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 6,
            'placeid': 33
        },
    });
    navigation3.value = mkdata.data;
}
getNavigation3();
//3.获取导航菜单 end ---------------------------------------->

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


const delayTimer = ref(null);
onMounted(() => {
    delayTimer.value = setTimeout(() => {
        const parentElement = document.querySelector('.phone_nav_a_box');
        const targetElement = document.querySelector('.phone_nav_a_box .router-link-exact-active');
         
     
        if (targetElement) {

            const targetRect = targetElement.getBoundingClientRect();
            const parentRect = parentElement.getBoundingClientRect();
    
           const distanceToParentLeft = targetRect.left - parentRect.left;
    
            parentElement.scrollLeft = distanceToParentLeft;
  
        }   
 
    }, 999);

})

 </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: 17px;
            }
        }
    }

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

        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;

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

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

        .active {
            color: #F8ECD2;
        }
    }

    .navRight {
        width: 135px;
        height: 75px;
        font-size: 16px;
        margin-top: 30px;
        background: url(https://img.bjzxtw.org.cn/master/www/xcw/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: 30px;
            padding-right: 30px;

            .titleList {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                margin-right: 25px;

                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: 28px;
            margin-top: 30px;
            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>

<style lang="less" scoped>


    @media screen and (min-width:801px){/*pc*/
         
		
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/
            .phone_nav{ 
                 
                width:100%;margin:10px auto 0;
                height:44px;background:#A01C0E;
            }
            .phone_nav_in{height:44px;width:92%;margin:0px auto;}
            .phone_nav_index{height:44px;line-height:44px;font-size:16px;float:left;
                                color:rgba(255, 255, 255,.6);;margin-right:20px;}

            .phone_nav_a_box{height:44px; 
                overflow-x:auto;overflow-y:hidden;word-break: keep-all; white-space: nowrap;
            }
            .phone_nav_a_box::-webkit-scrollbar{height:0px;}
            .phone_nav_a_box a{display:inline-block;height:44px;line-height:44px;font-size:16px;margin:0 10px;
                                color:rgba(255, 255, 255,.6);}

            .phone_nav_index_only{    color:#fff; font-weight:bold;}
            .phone_nav_a_box a.router-link-exact-active{color:#fff;font-weight:bold;}    

            //  .phone_nav_a_box::-webkit-scrollbar{height:0px;}   







            .partOne{display:none;}
            .partTwo{display:none;}
            .littleNav{display:none;}
            
            .phone_none{display:none;}
    }



</style>