dy_qgsnfzzx_org_cn/components/home/pageNavigation.vue

<template>
    <div class="headerNavBox">
        <NuxtLink to="/list-renyuanchaxun.html">人员查询</NuxtLink>
        <NuxtLink to="/list-cheliangchaxun.html">车辆查询</NuxtLink>
        <NuxtLink to="/list-dishizhongxin.html">地市中心</NuxtLink>
        <NuxtLink to="/list-diaoyanxuanti.html">调研选题</NuxtLink>
        <NuxtLink to="/list-jieshaoxinchaxun.html">介绍信查询</NuxtLink>
    </div>
    <div class="headerNav-pc">
        <!-- <div class="headerNavMainBox" :class="{'headerNavMainBox_fixed':isFixed}" ref="navRef"> -->
        <div class="headerNavMainBox" >
            <div class="headerNavTop">
                <div class="first"><NuxtLink to="/" class="inner-link">首页</NuxtLink></div>
                <ul>
                    <li><NuxtLink to="/sannongkejiao/nongcunjiaoyu/list-1.html">法制资讯</NuxtLink></li>
                    <li><NuxtLink to="/sannongzixunzhifuxinxi/list-1.html">政策法规</NuxtLink></li>
                    <li><NuxtLink to="/">各地动态</NuxtLink></li>
                    <li><NuxtLink to="/">廉政时讯</NuxtLink></li>
                    <li><NuxtLink to="/">政策解读</NuxtLink></li>
                    <li><NuxtLink to="/">百家争鸣</NuxtLink></li>
                    <li><NuxtLink to="/">经济与法</NuxtLink></li>
                    <li><NuxtLink to="/">法治建设</NuxtLink></li>
                    <li><NuxtLink to="/">法纪通报</NuxtLink></li>
                    <li><NuxtLink to="/">社会调研</NuxtLink></li>
                    <li><NuxtLink to="/">法制文化</NuxtLink></li>
                    <li><NuxtLink to="/">特别关注</NuxtLink></li>
                    <li><NuxtLink to="/">媒体视点</NuxtLink></li>
                    <li><NuxtLink to="/">重点播报</NuxtLink></li>
                    <li><NuxtLink to="/">今日说法</NuxtLink></li>
                    <li><NuxtLink to="/">法制技术</NuxtLink></li>
                    <li><NuxtLink to="/">执法在线</NuxtLink></li>
                    <li><NuxtLink to="/">举报投诉</NuxtLink></li>
                    <li><NuxtLink to="/">法制观察</NuxtLink></li>
                    <li><NuxtLink to="/">典型案例</NuxtLink></li>
                    <li><NuxtLink to="/">百姓话题</NuxtLink></li>
                    <li><NuxtLink to="/">法制活动</NuxtLink></li>
                    <li><NuxtLink to="/">百姓话题</NuxtLink></li>
                    <li><NuxtLink to="/">法制活动</NuxtLink></li>
                </ul>
            </div>
            <div class="headerNavCenter">
                <div class="first"><NuxtLink to="/">互动</NuxtLink></div>
                <ul>
                    <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=ldxx&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">领导信箱</NuxtLink></li>
                    <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=jbts&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">投诉举报</NuxtLink></li>
                    <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=wszw&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">网上政务</NuxtLink></li>
                    <li><NuxtLink to="/">志愿服务</NuxtLink></li>
                    <li><NuxtLink to="/">公益活动</NuxtLink></li>
                    <li><NuxtLink to="/">在线服务</NuxtLink></li>
                    <li><NuxtLink to="/">网民留言</NuxtLink></li>
                    <li><NuxtLink to="/">法制知识</NuxtLink></li>
                    <li><NuxtLink to="/">法律咨询</NuxtLink></li>
                    <li><NuxtLink to="/">通知公告</NuxtLink></li>
                    <li><NuxtLink to="/">官网导航</NuxtLink></li>
                    <li><NuxtLink to="/">法律咨询</NuxtLink></li>
                    <li><NuxtLink to="/">通知公告</NuxtLink></li>
                    <li><NuxtLink to="/">官网导航</NuxtLink></li>
                </ul>
            </div>
            <div class="headerNavBottom">
                <div class="first"><NuxtLink to="/">查询</NuxtLink></div>
                <ul>
                    <li><NuxtLink to="/">人员查询</NuxtLink></li>
                    <li><NuxtLink to="/">车辆查询</NuxtLink></li>
                    <li><NuxtLink to="/">地市中心</NuxtLink></li>
                    <li><NuxtLink to="/">调研选题</NuxtLink></li>
                    <li><NuxtLink to="/">介绍信查询</NuxtLink></li>
                    <li><NuxtLink to="/">核心网站</NuxtLink></li>
                    <li><NuxtLink to="/">政务百网</NuxtLink></li>
                    <li><NuxtLink to="/">行业百网</NuxtLink></li>
                    <li><NuxtLink to="/">规章制度</NuxtLink></li>
                    <li><NuxtLink to="/">申请加入</NuxtLink></li>
                    <li><NuxtLink to="/">项目官网</NuxtLink></li>
                     <li><NuxtLink to="/">项目官网</NuxtLink></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="headerNavBox-mobile">
        <div class="headerNavBox-mobile-welcome">
            欢迎来到全国法制资讯发布中心!
        </div>
        <div class="headerNavBox-mobile-btn">
            首页
            <img src="@/public/index/btn.png" alt="" @click="openTopMenu = 2">
        </div>
        <div v-if="openTopMenu == 2" class="headerNavBox-mobile-menu">
            <div>
                <div class="headerNavBox-mobile-menu-list">
                    <NuxtLink to="/" target="_blank">用户登录</NuxtLink>
                </div>
                <div class="headerNavBox-mobile-menu-list">
                    <NuxtLink to="/sannongkejiao/nongcunjiaoyu/list-1.html">法制资讯</NuxtLink>
                    <NuxtLink to="/sannongzixunzhifuxinxi/list-1.html">政策法规</NuxtLink>
                    <NuxtLink to="/">各地动态</NuxtLink>
                    <NuxtLink to="/">廉政时讯</NuxtLink>
                    <NuxtLink to="/">政策解读</NuxtLink>
                    <NuxtLink to="/">百家争鸣</NuxtLink>
                    <NuxtLink to="/">经济与法</NuxtLink>
                    <NuxtLink to="/">法治建设</NuxtLink>
                    <NuxtLink to="/">法纪通报</NuxtLink>
                    <NuxtLink to="/">社会调研</NuxtLink>
                    <NuxtLink to="/">法制文化</NuxtLink>
                    <NuxtLink to="/">特别关注</NuxtLink>
                    <NuxtLink to="/">媒体视点</NuxtLink>
                    <NuxtLink to="/">重点播报</NuxtLink>
                    <NuxtLink to="/">今日说法</NuxtLink>
                    <NuxtLink to="/">法制技术</NuxtLink>
                    <NuxtLink to="/">执法在线</NuxtLink>
                    <NuxtLink to="/">举报投诉</NuxtLink>
                    <NuxtLink to="/">法制观察</NuxtLink>
                    <NuxtLink to="/">典型案例</NuxtLink>
                    <NuxtLink to="/">百姓话题</NuxtLink>
                    <NuxtLink to="/">法制活动</NuxtLink>
                </div>
                <div class="headerNavBox-mobile-menu-list">
                    <NuxtLink to="http://zwptfz.znxyw.org.cn/?s=ldxx&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">领导信箱</NuxtLink>
                    <NuxtLink to="http://zwptfz.znxyw.org.cn/?s=jbts&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">投诉举报</NuxtLink>
                    <NuxtLink to="http://zwptfz.znxyw.org.cn/?s=wszw&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">网上政务</NuxtLink>
                    <NuxtLink to="/">志愿服务</NuxtLink>
                    <NuxtLink to="/">公益活动</NuxtLink>
                    <NuxtLink to="/">在线服务</NuxtLink>
                    <NuxtLink to="/">网民留言</NuxtLink>
                    <NuxtLink to="/">法制知识</NuxtLink>
                    <NuxtLink to="/">法律咨询</NuxtLink>
                    <NuxtLink to="/">通知公告</NuxtLink>
                    <NuxtLink to="/">官网导航</NuxtLink>
                </div>
                <div class="headerNavBox-mobile-menu-list">
                    <NuxtLink to="/">人员查询</NuxtLink>
                    <NuxtLink to="/">车辆查询</NuxtLink>
                    <NuxtLink to="/">地市中心</NuxtLink>
                    <NuxtLink to="/">调研选题</NuxtLink>
                    <NuxtLink to="/">介绍信查询</NuxtLink>
                    <NuxtLink to="/">核心网站</NuxtLink>
                    <NuxtLink to="/">政务百网</NuxtLink>
                    <NuxtLink to="/">行业百网</NuxtLink>
                    <NuxtLink to="/">规章制度</NuxtLink>
                    <NuxtLink to="/">申请加入</NuxtLink>
                    <NuxtLink to="/">项目官网</NuxtLink>
                </div>
            </div>
            <div class="headerNavBox-mobile-menu-button">
                <img src="@/public/index/no.png" alt="" @click="openTopMenu = 1">
            </div>
        </div>
    </div>
</template>

<script setup>
//1.加载依赖 start ---------------------------------------->
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue';
import { ElSelect, ElOption } from 'element-plus'
import { useRoute } from 'vue-router'; 
const showZonePanel = ref(false)
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;
const route = useRoute();
const routeId = route.params.id; //获得该页面的id
//1.加载依赖 end ---------------------------------------->

//1.导航滚动 start ---------------------------------------->
// const isFixed=ref(false);
// const navRef=ref(null);
// let navOffsetTop=0;

// const handleScroll=()=>{
//     isFixed.value=window.scrollY>=navOffsetTop
// };
// onMounted(()=>{
//     navOffsetTop=navRef.value.navOffsetTop;
//     window.addEventListener('scroll',handleScroll)
// });
// onUnmounted(()=>{
//     window.removeEventListener('scroll',handleScroll)
// });
//1.导航滚动 end ---------------------------------------->


//2.加载模块数据 start ---------------------------------------->
// const navigation1 = ref("");
const navigation1 = useState('globalNavData', () => ([]))
async function getPageData2() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'placeid': 1,
            'pid': 0,
            'num': 35
        },
    });
    navigation1.value = mkdata.data;
}
getPageData2();
const getLinkPath = (item) => {
    if (item.is_url == 1) {
        return `${item.web_url}`;
    } else if (item.children_count == 0) {
        return `/${item.aLIas_pinyin}/list-1.html`;
    }  else {
        return `/${item.aLIas_pinyin}/index.html`;
    }
}
//2.加载模块数据 end ---------------------------------------->

//3.职能部门 start ---------------------------------------->
let department = ref("")
const depValue = ref("")
const typeValue = ref("")
//3.职能部门 end ---------------------------------------->

//4.展示行政区划 start ---------------------------------------->
//let areaList = ref("")
//4.1 省
let province = ref("")
let provinceid = ref("")
let provinceList = ref("")
//4.2 市
let city = ref("")
let cityid = ref("")
let cityList = ref("")
//4.3 县
let region = ref("")
let regionid = ref("")
let regionList = ref("")
//选择市
let change = async (id) => {
    provinceid.value = id;
    const shengData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': id,
        },
    });
    cityList.value = shengData.data;
    regionList.value = [];// 清空县 
}

//选择县
let change1 = async (id) => {
    cityid.value = id;
    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': id,
        },
    });
    regionList.value = xianData.data;
}
let change2 = async (id) => {
    regionid.value = id;
}
//4.展示行政区划 end ---------------------------------------->

//5.执行搜索 start ---------------------------------------->
const getcityid = ref("")
//获得cityid和11
let goToPrimary = async () => {
    if (province.value != "") { getcityid.value = province.value }
    if (city.value != "") { getcityid.value = city.value }
    if (region.value != "") { getcityid.value = region.value }
    console.log("getcityid.value=======",getcityid.value)
    if (province.value == "" && city.value == "" && region.value == "" && depValue.value == "") {
        ElMessage.error('请选择行政区划或者职能部门！')
    } else {
        const route = `/search/search?catids=${getcityid.value}&department_id=${depValue.value}`;
        window.location.href = route;
    }
}
const close_panel_fun = () => {
    foot_btn_clear_fun();
    showZonePanel.value = false;
}
const foot_btn_clear_fun = () => {
    regionList.value = [];// 清空县 
    region.value = "";// 清空县 名称
    city.value = "";// 清空市 名称
    cityList.value = [];// 清空市
    province.value = "";// 清空省 名称
    provinceid.value = "";// 清空省 id
}
let shake_bool = true // 声明在组件作用域顶部==防抖
const nav_department_drop_a_fun = (departmentId) => {
    if(shake_bool===true){//第1次点击
        shake_bool = false;
        depValue.value = departmentId;
        goToPrimary();
        // 行政职能查询
            ElMessage({
            message: '页面跳转中请稍等',
            type: 'success'
        });
        nav_department_drop_a_fun.timer = setTimeout(() => {
            shake_bool = true;
        }, 3333);
    }else{
        ElMessage({
            message: '请勿重复点击',
            type: 'warning'
        });
    }
}
//5.执行搜索 end ---------------------------------------->
onMounted(async () => {
    //从客户端获取行政职能部门 加快打开速度
    try {
        const { $webUrl, $CwebUrl } = useNuxtApp();
        const response = await fetch($webUrl + '/web/selectWebsiteDepartment', {
            headers: {
                'Content-Type': 'application/json',
                'Userurl': $CwebUrl,
                'Origin': $CwebUrl
            }
        });
        const result = await response.json();
        department.value = result.data;
    } catch (error) {
        console.error('获取部门数据失败:', error);
    }
    //从客户端获取行政区划
    try {
        const { $webUrl, $CwebUrl } = useNuxtApp();
        const response2 = await fetch($webUrl + '/web/selectWebsiteArea', {
            headers: {
                'Content-Type': 'application/json',
                'Userurl': $CwebUrl,
                'Origin': $CwebUrl
            }
        });
        const result2 = await response2.json();
        provinceList.value = result2.data;
    } catch (error) {
        console.error('获取行政区划数据失败:', error);
    }
    const targetElement = document.querySelector('.pc_none li .router-link-exact-active');
    const parentElement = document.querySelector('.nav_in');
    if (targetElement && parentElement) {
        const targetRect = targetElement.getBoundingClientRect();
        const parentRect = parentElement.getBoundingClientRect();
        const distanceToParentLeft = targetRect.left - parentRect.left;
        const navigationElement = document.querySelector('.partOne .navigationOne');
        if (navigationElement) {
            navigationElement.scrollLeft = distanceToParentLeft - 66;
        }
    }             
})

//打开顶部菜单 start ---------------------------------------->
const openTopMenu = ref(1)
//打开顶部菜单 end ---------------------------------------->
</script>

<style lang="less" scoped>
//自适应 start ---------------------------------------->
@media screen and (min-width: 1401px) {
    .headerNavBox-mobile {
        display: none;
    }
    .headerNav-pc {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        // background-color: #fff;
    }
    .headerNavBox {
        text-align: center;
        a{
            display: inline-block;
            overflow: hidden;
            width: 100PX !important;
            margin: 0 10PX !important;
            height: 40PX;
            line-height: 40PX !important;
            
            background: url(public/image/navBox.png);
            background-size: 100% 100%;
            text-align: center;
            font-size: 18PX !important;
            color: #fff;
        }
        /*a {
            width: 100PX !important;
            margin: 0 10PX !important;
            display: inline-block;
            height: 40PX !important;
            line-height: 40PX !important;
            background: #158d91;
            
            text-align: center;
            font-size: 18PX !important;
            color: #fff;
        }*/
    }
    .headerNavMainBox {
        max-width: 1401PX !important;
        width: 100%;
        overflow: hidden;
        margin: 20px auto 0;
        background-color: transparent; 
        // background: #fff;
        
        .headerNavTop {
            width: 100%;
            overflow: hidden;
            background-color: transparent; 
            //background: #158d91;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .first {
                padding: 0px;
                background: #DEB887;
                width: 2%;
                height: 70PX !important;
                line-height: 34PX !important;
                overflow: hidden;
                float: left;
                
                text-align: center;
                a {
                    display:block;
                    width:100%;
                    height:100%;
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: normal;
                }
                a:hover {
                    background: rgb(90, 128, 30);
                }
            }
            ul {
                width: 96.5%;
                height:80PX;
                background: #f1d5d5;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                //margin:10px 0;
                li {
                    width: 96.5PX !important;
                    height: 40PX !important;
                    line-height: 35PX !important;
                    text-align: center;
                    display: flex;
                    background: #f1d5d5;
                    a {
                        width: 100%;
                        height: 20px;
                        line-height: 20px;
                        overflow: hidden;
                        text-align: center;
                        color: #c9010c;
                        font-size: 16PX !important;
                       
                        font-weight: normal;
                        
                    }
                    a:hover {
                        background: rgb(243, 124, 124);
                        color: #fff;
                    }
                }
            }
        }
        .headerNavCenter {
            width: 100%;
            height:40PX;
            margin-top: 10PX !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .first {
                width: 5.5%;
                height: 40PX !important;
                float: left;
                background: #0e6ebe;
            
                a {
                    display:block;
                    width:100%;
                    height:100%;
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: normal;
                    text-align: center;
                    line-height: 40PX !important;
                }
                
            }
             ul {
                width: 95.5%;
                display: flex;
                justify-content: space-between;
                background:#4F94CD;
                li {
                    background:#4F94CD;
                    width: 80PX !important;
                    height: 40PX !important;
                    line-height: 40PX !important;
                    //overflow: hidden;
                    float: left;
                    text-align: center;
                
                    
                    a {
                        display:block;
                        width:100%;
                        height:100%;
                        font-size: 16PX !important;
                        color: #fff;
                        font-weight: normal;
                    }
                    a:hover {
                        background: rgb(185, 8, 8);
                        
                    }
                }
            }
        }
        .headerNavBottom  {
            width: 100%;
            height:40PX;
            //overflow: hidden;
            margin-top: 10PX !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .first {
                width: 5.5%;
                height: 40PX !important;
               
                float: left;
                background: #CD3700;
            
                a {
                    display:block;
                    width:100%;
                    height:100%;
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: normal;
                    text-align: center;
                    line-height: 40PX !important;
                }
                
            }
             ul {
                width: 95.5%;
                display: flex;
                //flex-wrap: wrap;
                justify-content: space-between;
                background: #8a2100;
                li {
                    background:#8a2100;
                    width: 80PX !important;
                    height: 40PX !important;
                    line-height: 40PX !important;
                    //overflow: hidden;
                    float: left;
                    text-align: center;
                
                    
                    a {
                        display:block;
                        width:100%;
                        height:100%;
                        font-size: 16PX !important;
                        color: #fff;
                        font-weight: normal;
                    }
                    
                    a:hover {
                        background: rgb(214, 45, 45);
                        
                    }
                }
            }
        }
    }
   
}
@media screen and (min-width: 801px) and (max-width: 1400px) {
    .headerNavBox-mobile {
        display: none;
    }
    .headerNav-pc {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        // background-color: #fff;
    }
    .headerNavBox {
        text-align: center;
        a{
            display: inline-block;
            overflow: hidden;
            width: 100PX !important;
            margin: 0 10PX !important;
            height: 40PX;
            line-height: 40PX !important;
            
            background: url(public/image/navBox.png);
            background-size: 100% 100%;
            text-align: center;
            font-size: 18PX !important;
            color: #fff;
        }
        
    }
    .headerNavMainBox {
        min-width: 801px !important;
        max-width: 1400PX !important;
        
        width: 100%;
        overflow: hidden;
        margin: 20px auto 0;
        background-color: transparent; 
        // background: #fff;
        
        .headerNavTop {
            width: 100%;
            overflow: hidden;
            background-color: transparent; 
            //background: #158d91;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .first {
                padding: 0px;
                background: #DEB887;
                width: 2%;
                height: 80PX !important;
                line-height: 40PX !important;
                overflow: hidden;
                float: left;
                
                text-align: center;
                a {
                    display:block;
                    width:100%;
                    height:100%;
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: normal;
                }
                a:hover {
                    background: rgb(90, 128, 30);
                }
            }
            ul {
                width: 96.5%;
                height:80PX;
                background: #f1d5d5;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                overflow: hidden;
                //margin:10px 0;
                li {
                    width: 80PX !important;
                    min-width: 80PX !important;
                    max-width:80PX !important;
                    height: 40PX !important;
                    line-height: 35PX !important;
                    text-align: center;
                    display: flex;
                    background: #f1d5d5;
                    overflow: hidden;
                    a {
                        display: block;
                        width: 100%;
                        // height: 20px;
                        // line-height: 20px;
                        overflow: hidden;
                        text-align: center;
                        color: #c9010c;
                        font-size: 16PX !important;
                        /* 字符间距收紧 */
                        letter-spacing: 0;
                        /* 字号略缩小，进一步节省空间 */
                        font-size: 16px;
                        // padding: 0 12px; /* 内边距缩小 */
                        // background: blue;
                       
                        font-weight: normal;
                        
                    }
                    a:hover {
                        background: rgb(243, 124, 124);
                        color: #fff;
                    }
                }
            }
        }
        .headerNavCenter {
            width: 100%;
            height:40PX;
            margin-top: 10PX !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .first {
                width: 5.5%;
                height: 40PX !important;
                float: left;
                background: #0e6ebe;
            
                a {
                    display:block;
                    width:100%;
                    height:100%;
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: normal;
                    text-align: center;
                    line-height: 40PX !important;
                }
                
            }
             ul {
                width: 95.5%;
                display: flex;
                justify-content: space-between;
                background:#4F94CD;
                li {
                    background:#4F94CD;
                    width: 80PX !important;
                    height: 40PX !important;
                    line-height: 40PX !important;
                    //overflow: hidden;
                    float: left;
                    text-align: center;
                
                    
                    a {
                        display:block;
                        width:100%;
                        height:100%;
                        font-size: 16PX !important;
                        color: #fff;
                        font-weight: normal;
                    }
                    a:hover {
                        background: rgb(185, 8, 8);
                        
                    }
                }
            }
        }
        .headerNavBottom  {
            width: 100%;
            height:40PX;
            //overflow: hidden;
            margin-top: 10PX !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .first {
                width: 5.5%;
                height: 40PX !important;
               
                float: left;
                background: #CD3700;
            
                a {
                    display:block;
                    width:100%;
                    height:100%;
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: normal;
                    text-align: center;
                    line-height: 40PX !important;
                }
                
            }
             ul {
                width: 95.5%;
                display: flex;
                //flex-wrap: wrap;
                justify-content: space-between;
                background: #8a2100;
                li {
                    background:#8a2100;
                    width: 80PX !important;
                    height: 40PX !important;
                    line-height: 40PX !important;
                    //overflow: hidden;
                    float: left;
                    text-align: center;
                
                    
                    a {
                        display:block;
                        width:100%;
                        height:100%;
                        font-size: 16PX !important;
                        color: #fff;
                        font-weight: normal;
                    }
                    
                    a:hover {
                        background: rgb(214, 45, 45);
                        
                    }
                }
            }
        }
    }
    
}
@media screen and (max-width: 800px) {
    .headerNav-pc {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        // background-color: #fff;
    }
    .headerNavBox {
        text-align: center;
        a{
            // display: block;
            overflow: hidden;
            width: 14% !important;
            margin: 0 5PX !important;
            height: 30PX;
            line-height: 30PX !important;
            padding: 5PX 7PX;
            background: url(public/image/navBox.png);
            background-size: 100% 100%;
            text-align: center;
            font-size: 12PX !important;
            color: #fff;
        }
        
    }
    .headerNavMainBox {
        display: none !important;
        max-width: 800px !important;
        width: 100%;
        overflow: hidden;
        margin: 20px auto 0;
        background-color: transparent; 
        // background: red;
        
        .headerNavTop {
            // display: none !important;
            width: 100%;
            overflow: hidden;
            background-color: transparent; 
            //background: #158d91;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .first {
                padding: 0px;
                background: #DEB887;
                width: 2%;
                height: 70PX !important;
                line-height: 34PX !important;
                overflow: hidden;
                float: left;
                
                text-align: center;
                a {
                    display:block;
                    width:100%;
                    height:100%;
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: normal;
                }
                a:hover {
                    background: rgb(90, 128, 30);
                }
            }
            ul {
                width: 96.5%;
                height:80PX;
                background: #f1d5d5;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                //margin:10px 0;
                li {
                    width: 96.5PX !important;
                    height: 40PX !important;
                    line-height: 35PX !important;
                    text-align: center;
                    display: flex;
                    background: #f1d5d5;
                    a {
                        width: 100%;
                        height: 20px;
                        line-height: 20px;
                        overflow: hidden;
                        text-align: center;
                        color: #c9010c;
                        font-size: 16PX !important;
                       
                        font-weight: normal;
                        
                    }
                    a:hover {
                        background: rgb(243, 124, 124);
                        color: #fff;
                    }
                }
            }
        }
        .headerNavCenter {
            display: none !important;
            width: 100%;
            height:40PX;
            margin-top: 10PX !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .first {
                width: 5.5%;
                height: 40PX !important;
                float: left;
                background: #0e6ebe;
            
                a {
                    display:block;
                    width:100%;
                    height:100%;
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: normal;
                    text-align: center;
                    line-height: 40PX !important;
                }
                
            }
             ul {
                width: 95.5%;
                display: flex;
                justify-content: space-between;
                background:#4F94CD;
                li {
                    background:#4F94CD;
                    width: 80PX !important;
                    height: 40PX !important;
                    line-height: 40PX !important;
                    //overflow: hidden;
                    float: left;
                    text-align: center;
                
                    
                    a {
                        display:block;
                        width:100%;
                        height:100%;
                        font-size: 16PX !important;
                        color: #fff;
                        font-weight: normal;
                    }
                    a:hover {
                        background: rgb(185, 8, 8);
                        
                    }
                }
            }
        }
        .headerNavBottom  {
            display: none !important;
            width: 100%;
            height:40PX;
            //overflow: hidden;
            margin-top: 10PX !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .first {
                width: 5.5%;
                height: 40PX !important;
               
                float: left;
                background: #CD3700;
            
                a {
                    display:block;
                    width:100%;
                    height:100%;
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: normal;
                    text-align: center;
                    line-height: 40PX !important;
                }
                
            }
             ul {
                width: 95.5%;
                display: flex;
                //flex-wrap: wrap;
                justify-content: space-between;
                background: #8a2100;
                li {
                    background:#8a2100;
                    width: 80PX !important;
                    height: 40PX !important;
                    line-height: 40PX !important;
                    //overflow: hidden;
                    float: left;
                    text-align: center;
                
                    
                    a {
                        display:block;
                        width:100%;
                        height:100%;
                        font-size: 16PX !important;
                        color: #fff;
                        font-weight: normal;
                    }
                    
                    a:hover {
                        background: rgb(214, 45, 45);
                        
                    }
                }
            }
        }
    }
 
    .headerNavBox-mobile {
        position: fixed;
        top: 0;
        width: 100%;
        height: 80px;
        background: #f1f1f1;
        border-bottom: 1px solid #ccc;
        padding: 0 20px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        .headerNavBox-mobile-welcome {
            font-size: 15PX;
        }
        .headerNavBox-mobile-btn {
            font-size: 15PX;
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
                display: inline-block;
                
                width: 16PX;
                height: 16PX;
                margin-left: 10PX;
                // background: red;
            }
        }
    }
    .headerNavBox-mobile-menu {
        // position: fixed;
        top: 30px;
        // left: 0;
        // width: 100%;
        // background: #999;
        box-sizing: border-box;
        padding: 20px;
        width: 100%;
        height: auto;
        overflow: hidden;
        position: absolute;
        right: 0;
        // top: .9rem;
        background: #999;
        padding: 20px;
        // display: none;
        z-index: 999;
            
        a {
            // font-size: 10PX;
            // color: #fff;
            // margin: 0 10px;
            // white-space: nowrap;
            font-size: 17PX;
            color: #fff;
            display: block;
            // float: left;
            text-align: center;
            height: 15PX;
            line-height: 15PX;
            margin: 0 5PX;
        }
        .headerNavBox-mobile-menu-list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            // background: blue;
            margin-bottom: 10px;
            height: auto;
            // border-bottom: 1px solid red;
            border-bottom: 1px solid #c1c1c1;
            padding: 5PX 0;
            a{
                margin-bottom: 10px;
                display: inline-block;
                width: auto;
                // background: yellow;
                // overflow: hidden;
                writing-mode: horizontal-tb; /* 强制横向排版（默认值，覆盖竖排设置） */
                white-space: nowrap; /* 禁止文字换行（如果是换行导致的竖排） */
                width: auto; /* 宽度自适应内容，取消固定窄宽度 */
            }
        }
        .headerNavBox-mobile-menu-button {
            padding: 10px 0;
            img {
                width: 30px;
                height: 30px;
                display: block;
                margin: 0 auto;
            }
        }
    }
    
}
//自适应 end ---------------------------------------->
</style>