nongzigongxiaowang/components/home/pageNavigation.vue

<template>
    <div class="navigate">

        <div class="partOne">

            <div class="inner">
                <div class="navLeft">
                    <div class="navClass">
                        <div>
                            资讯信息
                        </div>
                        <div>
                            网上互动
                        </div>
                    </div>
                </div>
                <ul class="navigationOne">
                    <li v-for="(item ,per_index) in navigation1"
                        @mousemove="item.alias == '供求信息' ? showTwo = true : showTwo = false">
                        <NuxtLink :href="getLinkPath(item)" :title="item.alias"
                            :target="item.is_url == 1 ? '_blank' : '_self'">
                             {{ item.alias }}
                        </NuxtLink>
                    </li>
                </ul>
                <ul class="navigationTwo" v-if="showTwo" @mouseleave="showTwo = false">
                    <li v-for="(item, index) in secNav" :key="index">
                        <NuxtLink :href="`/gongqiuxinxi/${item.aLIas_pinyin}/index.html`" :title="item.alias"
                            :target="item.is_url == 1 ? '_blank' : '_self'">
                            {{ item.alias }}
                        </NuxtLink>
                    </li>
                </ul>
            </div>
        </div>

        <div class="partTwo">

            <div class="inner">
                <ul class="part2_left">
                    <li>农资商城</li>
                    <li class="part2_navList" v-for="item in navigation2">
                        <NuxtLink :href="getLinkPath(item)" :title="item.alias"
                            :target="item.is_url == 1 ? '_blank' : '_self'">
                            {{ item.alias }}
                        </NuxtLink>
                    </li>
                </ul>
                <ul class="part2_right">
                    <li class="part2_right_navList" v-for="(item, index) in navigation3">
                        <NuxtLink :href="getLinkPath(item)" :title="item.alias"
                            :target="item.is_url == 1 ? '_blank' : '_self'">
                            {{ item.alias }}
                        </NuxtLink>
                        <em v-if="index != 2"></em>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 深度服务 -->
        <div class="deepServer">

            <div class="inner">
                <div class="deepServer_left">
                    <div class="serverTitle">
                        <NuxtLink href="/">
                            网站首页
                        </NuxtLink>
                    </div>
                    <el-radio-group v-model="checkList">
                        <el-radio value="1">资讯</el-radio>
                        <el-radio value="2">商城</el-radio>
                        <el-radio value="6">企业</el-radio>
                        <el-radio value="7">项目</el-radio>
                    </el-radio-group>
                    <!-- <div class="serverTitle1">
                        <a href="">
                            农资商务中心
                        </a>
                    </div> -->
                </div>
                <div class="deepServer_right">
                    <div class="searchRole">
                        <input type="text" v-model="inputValue" placeholder="输入关键词" class="ipt">
                        <em @click="goToPrimary"></em>
                    </div>
                    <!-- <div class="serverTitle_right">
                        【高级搜索】
                    </div> -->
                </div>
            </div>
        </div>

        
        <div class="phone_nav pc_none">

            <div class="phone_nav_in">
                 <NuxtLink 
                    to="/" 
                    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>
 
                            <NuxtLink 
                                v-for="(item, index) in navigation2" :key="index"
                                :to="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'">
                                {{ item.alias }} 
                            </NuxtLink>
 
                            <NuxtLink 
                                v-for="(item, index) in navigation3" :key="index"
                                :to="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'">
                                {{ item.alias }} 
                            </NuxtLink>
 
                            <NuxtLink 
                                v-for="(item, index) in navigation4" :key="index"
                                :to="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'">
                                {{ item.alias }} 
                            </NuxtLink>
 

                </div>

            </div>

        </div>

    </div>
</template>

<script setup>
//1.获取导航菜单 start ---------------------------------------->
import { ElCheckbox, ElCheckboxGroup, ElMessage, ElRadio, ElRadioGroup } from 'element-plus'
let showTwo = ref(false);

//第一行导航菜单 10个
const navigation1 = ref([]);
//两行的导航菜单 20个 
const navigation2 = ref([]);
//三行的导航菜单 3个
const navigation3 = ref([]);
//获取导航菜单1 
async function getNavigation1() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 28,
            'placeid': 1
        },
    });
    navigation1.value = mkdata.data;
}
getNavigation1();
//获取导航菜单2
async function getNavigation2() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 10,
            'placeid': 29
        },
    });
    navigation2.value = mkdata.data;
}
getNavigation2();
//获取导航菜单3
async function getNavigation3() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 3,
            'placeid': 39
        },
    });
    navigation3.value = mkdata.data;
}
getNavigation3();

// 1.4 获取供求信息二级导航
//引入导航
const { $pageNav } = useNuxtApp();
const pid = $pageNav[14];
console.log('供求信息二级栏目', pid);


const secNav = ref([]);
async function getNavigation4() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': pid,
            'num': 2,
            'placeid': 1,
            'type': 1
        },
    });
    console.log("供求信息二级栏目", mkdata.data);

    secNav.value = mkdata.data;
}
getNavigation4();
//1.获取导航菜单 end ---------------------------------------->

//2.搜索 start ---------------------------------------->
const typeValue = ref("")
const checkList = ref("1");// 单选


const inputValue = ref("") //关键词搜索
//2.1跳转到搜索页面
let goToPrimary = async () => {
    if (checkList.value == "") {
        ElMessage.error('搜索项类型不能为空！')
    } else {
        const route = `/search/search?keyword=${inputValue.value}&type=${checkList.value}`;
        window.location.href = route;
    }
}


onMounted(async () => {

})
//2.搜索 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>
@import url('@/assets/css/public/nav.less');
</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:#a91b33;
            }
            .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;}    

            
            
            .partOne{display:none;}
            .partTwo{display:none;}
            .deepServer{display:none;}

            .phone_none{display:none;}
    }


</style>