fzxfb_org_cn/components/home/pageNavigation.vue

<template>
    <div class="headerNavBox">
        <NuxtLink to="http://fzxfb.org.cn/list-renyuanchaxun.html">人员查询</NuxtLink>
        <NuxtLink to="http://fzxfb.org.cn/list-cheliangchaxun.html">车辆查询</NuxtLink>
        <NuxtLink to="http://fzxfb.org.cn/list-dishizhongxin.html">地市中心</NuxtLink>
        <NuxtLink to="http://fzxfb.org.cn/list-diaoyanxuanti.html">调研选题</NuxtLink>
        <NuxtLink to="http://fzxfb.org.cn/list-jieshaoxinchaxun.html">介绍信查询</NuxtLink>
    </div>
    <div class="headerNavMainBox">
        <div class="headerNavTop">
            <div class="first"><NuxtLink to="/">首页</NuxtLink></div>
            <ul>
                <li><NuxtLink to="/sannongkejiao/nongcunjiaoyu/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>
            </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>
            </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>
            </ul>
        </div>
    </div>
    <!-- <div class="navigate">
        <div class="partOne">
            <div class="inner">
                <div class="navLeft">
                    <div class="navIndex phone_none">
                        <NuxtLink :to="'/'"> 首页</NuxtLink>
                    </div> 
                    <div class="navIndex pc_none">
                        <NuxtLink 
                            to="/" title="首页" 
                            class="phone_nav_index"
                            :class="{ 'phone_nav_index_only': $route.path === '/' }"
                            >
                            首页
                        </NuxtLink>
                    </div> 
                    <div class="navClass">
                        <div>主题资讯</div>
                        <div>互动资讯</div>
                    </div>
                </div>
                <ul class="navigationOne">
                    <div class="nav_in clearfix phone_none">
                        <li v-for="(item, index) in navigation1" :key="index">
                            <NuxtLink :href="getLinkPath(item)" :title="item.alias" v-if="index <= 23"
                                :target="item.is_url == 1 ? '_blank' : '_self'">
                                <span class="active" v-if="item.category_id == routeId">{{ item.alias }}</span>
                                <span v-else>{{ item.alias }}</span>
                            </NuxtLink>
                        </li>
                    </div>
                    <div class="nav_in clearfix pc_none">
                        <li v-for="(item, index) in navigation1" :key="index">
                            <NuxtLink :href="getLinkPath(item)" :title="item.alias" v-if="index <= 23"
                                :target="item.is_url == 1 ? '_blank' : '_self'">
                                <span class="active" v-if="item.category_id == routeId">{{ item.alias }}</span>
                                <span v-else>{{ item.alias }}</span>
                            </NuxtLink>
                        </li>
                    </div>
                </ul>
            </div>
        </div>
        <div class="cityBox">
            <div class="cityMain">
                <div class="cityTitle">地方频道</div>
                <ul class="cityList" v-if="provinceList.length > 0">
                    <li v-for="item in provinceList">
                        <NuxtLink :to="{ path: `/search/${item.id}` }">
                            {{ item.abbreviation }}
                        </NuxtLink>
                    </li>
                </ul>
            </div>
        </div>
        <div class="select" >
            <div class="inner">
                <div class="role left">
                    <div class="title">行政职能查询  </div>
                    <div class="searchRole">
                        <El-select v-model="depValue" placeholder="职能部门" filterable size="large" style="width: 330px">
                            <El-option v-for="(item, index) in department" :key="index" :label="item.name"
                                :value="item.id" />
                        </El-select>
                        <em @click="goToPrimary"></em>
                    </div>
                </div>
                <div class="region left">
                    <div class="title">行政区划查询</div>
                    <div class="searchRole" v-if="provinceList.length > 0">
                        <El-select v-model="province" placeholder="请选择省" size="large" style="width: 80px">
                            <El-option v-for="item in provinceList" :key="item.id" :label="item.name"
                                @click="change(item.id)" :value="item.id" />
                        </El-select>
                        <i></i>
                        <El-select v-model="city" placeholder="请选择市" no-data-text="请先选择省份" size="large"
                            style="width: 80px">
                            <El-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
                                @click="change1(item.id)" :value="item.id" />
                        </El-select>
                        <i></i>
                        <El-select v-model="region" placeholder="请选择区/县" no-data-text="请先选择市" size="large"
                            style="width: 100px">
                            <El-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
                        </El-select>
                        <em @click="goToPrimary"></em>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="navigate_phone" v-if="false">
        <div class="nav_select_btn_box">
            <div class="nav_select_btn nav_department_btn_box" >
                行政职能查询
                <div class="nav_department_drop_box">
                    <a class="nav_department_drop_a" title="" v-for="(per_obj,per_index) in department" :key="per_obj" @click="nav_department_drop_a_fun(per_obj.id)">
                        {{per_obj.name}}
                    </a>
                </div>
            </div>
            <div class="nav_select_btn" @click="showZonePanel = true">行政区划查询</div>
        </div>
        <div class="nav_department_panel" v-show="showZonePanel">
            <div class="panel_head_box">
                <span class="panel_head_btn nav_department_btn" @click="close_panel_fun"></span>
                <h4 class="panel_head_h4">行政区划查询</h4>
            </div>
            <div class="nav_department_panel_in">
                <div class="nav_department_panel_ul">
                    <a class="nav_department_panel_ul_a" title="" v-for="(per_obj,per_index) in provinceList"
                     :key="per_obj" @click="change(per_obj.id)"  
                     :class="{'nav_department_panel_ul_a_only':provinceid == per_obj.id}" >
                     {{ per_obj.name}} 
                    </a>
                </div>   
                <div class="nav_department_panel_ul nav_department_panel_ul_2">
                    <a class="nav_department_panel_ul_a" title="" v-for="(per_obj,per_index) in cityList" :key="per_obj"
                        @click="change1(per_obj.id)"
                        :class="{'nav_department_panel_ul_a_only':cityid == per_obj.id}" >

                        {{ per_obj.name}} 
                    </a>
                </div>   
                <div class="nav_department_panel_ul nav_department_panel_ul_3">
                    <a class="nav_department_panel_ul_a" title="" 
                        v-for="(per_obj,per_index) in regionList" :key="per_obj"
                        @click="change2(per_obj.id)"
                        :class="{'nav_department_panel_ul_a_only':regionid == per_obj.id}"
                    >
                        {{ per_obj.name}} 
                    </a>
                </div>   
                <div class="nav_department_panel_foot clearfix">
                    <div class="nav_department_panel_foot_btn nav_department_panel_foot_btn_clear" @click="foot_btn_clear_fun">清空</div>
                    <div class="nav_department_panel_foot_btn nav_department_panel_foot_btn_sure" @click="goToPrimary">确定</div>
                </div>
            </div>
        </div>
    </section> -->
</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 ---------------------------------------->

//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}/`;
//         return `/newsList/${item.category_id}?page=1`;
//     }else{
//         //return `/${item.aLIas_pinyin}/`;
//         return `/primaryNavigation/${item.category_id}`;
//     }
// }
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("")
// let departmentList = async () => {
//     const mkdata = await requestDataPromise('/web/selectWebsiteDepartment', {
//         method: 'GET',
//         query: {
//             'keyword': department.value,
//         },
//     });
//     if(mkdata.code == 200){
//         department.value = mkdata.data;
//     }else{
//         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
//         console.log("错误位置：获取职能部门")
//         console.log("后端错误反馈：",mkdata.message)
//         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
//     }
// }
// //获得所有部门
// departmentList();
//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 areaArrList = async () => {
//     const mkdata =  await requestDataPromise('/web/selectWebsiteArea', {
//         method: 'GET',
//         query: {},
//     });
//     if(mkdata.code == 200){
//         provinceList.value = mkdata.data;
//     }else{
//         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
//         console.log("错误位置：获取行政区划")
//         console.log("后端错误反馈：",mkdata.message)
//         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
//     }
// }
// //一开始只需要获取一下省
// areaArrList();

//选择市
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("")
//跳转到搜索页面
// let goToSearch = (id) => {
//     console.log(id)
//     const route = `/search/search?catids=${id}`;
//     window.location.href = route;
// }
//获得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 responseStatus =  await requestDataPromise('/web/selectWebsiteCategory', {
        // method: 'GET',
        //     query: {
        //         'cityid': getcityid.value,
        //         'department_id': depValue.value
        //     },
        // });
        // if (responseStatus.data.catid && responseStatus.data.catid.length > 0) {
        //     const catids = responseStatus.data.catid.join(',');
        //     const route = `/search/search?catids=${catids}`;
        //     window.location.href = route;
        // } else {
        //     // 可以在这里处理数组为空的情况
        //     console.log('没有可用的分类ID');
        //     const route = `/search/search`;
        //     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;
        }
    }             
})
</script>

<style lang="less" scoped>
//PC端 start ---------------------------------------->
.headerNavBox {
    text-align: center;
    a {
        width: 100px;
        margin: 0 10px;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        background: #158d91;
        text-align: center;
        font-size: 18px;
        color: #fff;
    }
}
.headerNavMainBox {
    max-width: 1400px;
    width: 100%;
    overflow: hidden;
    margin: 20px auto 0;
    .headerNavTop,.headerNavCenter,.headerNavBottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        ul {
            width: 95%;
            display: flex;
            flex-wrap: wrap;
            li {
                width: 120px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                a {
                    font-size: 16px;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
    }
    .headerNavTop {
        width: 100%;
        //height: 70px;
        overflow: hidden;
        background: #158d91;
        .first {
            width: 5%;
            height: 70px;
            line-height: 70px;
            overflow: hidden;
            float: left;
            text-align: center;
            a {
                font-size: 16px;
                color: #fff;
                font-weight: bold;
            }
        }
    }
    .headerNavCenter {
        width: 100%;
        //height: 40px;
        overflow: hidden;
        background: #0072ff;
        margin-top: 4px;
        .first {
            width: 5%;
            height: 40px;
            line-height: 40px;
            float: left;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            a {
                font-size: 16px;
                color: #fff;
                font-weight: bold;
            }
        }
    }
    .headerNavBottom {
        background: #f90;
        //height: 40px;
        margin-top: 4px;
        overflow: hidden;
        .first {
            width: 5%;
            height: 40px;
            line-height: 40px;
            float: left;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            a {
                font-size: 16px;
                color: #fff;
                font-weight: bold;
            }
        }
    }
}
//PC端 end ---------------------------------------->

// 导航部分
// .partOne .navigationOne,
// .partOne .navigationOne>li,
// .partTwo .navigationTwo,
// .partTwo .navigationTwo>li {
//     float: left;
// }
// .partOne {
//     width: 100%;
//     height: 110px;
//     margin-bottom: 10px;
//     background-color: #fff;
//     font-size: 20px;
//     font-family: PingFang SC-Semibold;
//     background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/head/menubg.png") no-repeat center;
//     .inner {
//         display: flex;
//         justify-content: space-between;
//         .navLeft {
//             width:160px;
//             font-size: 16px;
//             display: flex;
//         }
//         .navIndex {
//             height: 100px;
//             line-height: 120px;
//             a {
//                 font-size: 16px;
//                 color: #fff;
//                 font-weight: bold;
//                 &:hover {
//                     color: #ABE874;
//                 }
//             }
//         }
//         .navClass {
//             padding-top: 29px;
//             padding-left: 30px;
//             font-weight: bold;
//             color: #fff;
//             a {
//                 color: #fff; 
//                 &:hover {
//                     color: #ABE874;
//                 }
//             }
//             div:nth-child(2){
//                 padding-top:20px;
//             }
//         }
//     }
//     .navigationOne {
//         width: 1200px;
//         color: #333;
//         display: flex;
//         flex-wrap: wrap;
//         padding-top: 20px;
//         li {
//             width: 68px;
//             font-family: PingFang SC;
//             height: 40px;
//             line-height: 40px;
//             font-size: 16px;
//             text-align: left;
//             font-style: normal;
//             text-transform: none;
//             margin: 0 10px;
//             text-align: center;
//             a {
//                 color: #fff;
//                 display: block;
//             }
//         }
//         >li:hover a {
//             color: #ABE874;
//         }
//         .active{
//             color: #ABE874;
//         }
//     }
// }
// .partThree {
//     width: 100%;
//     height: 105px;
//     .inner {
//         margin-bottom: 5px;
//         display: flex;
//     }
//     .channel,.areaChannel {
//         float: left;
//         margin-top: 17px;
//     }
//     .channel {
//         width: 56px;
//         height: 20px;
//         font-family: PingFang SC, PingFang SC;
//         font-weight: 600;
//         font-size: 14px;
//         color: #666666;
//         line-height: 20px;
//         text-align: left;
//         font-style: normal;
//         text-transform: none;
//     }
//     .areaChannel {
//         width: 1122px;
//         margin-left: 14px;
//         >span {
//             display: inline-block;
//             height: 16px;
//             line-height: 16px;
//             margin-bottom: 10px;
//             padding: 0 8px;
//             text-align: center;
//             font-family: PingFang SC, PingFang SC;
//             font-weight: 400;
//             font-size: 14px;
//             text-align: center;
//             font-style: normal;
//             text-transform: none;
//             border-right: 1px solid #e6e6e6;
//             a {
//                 display: inline-block;
//                 height: 16px;
//                 color: #868686;
//             }
//             a:hover {
//                 color: #868686;
//             }
//         }
//         >span:last-child,
//         >span:nth-child(18),
//         >span:nth-child(32) {
//             border-right: none;
//         }
//         >span:hover a {
//             color: #139602;
//         }
//     }
// }
// .logo {
//     margin-top: 5px;
//     height: 90px;
//     img {
//         width: 1200px;
//         height: 90px;
//     }
// }
// // 行政查询
// .select {
//     width: 100%;
//     height: 62px;
//     line-height: 62px;
//     margin-top: 10px;
//     .inner {
//         width: 1200px;
//         height: 62px;
//         margin-top: 10px;
//         background-color: #fafafa;
//     }
//     .role,.region {
//         float: left;
//         height: 62px;
//         .el-select--large::v-deep .el-select__wrapper {
//             font-size: 14px;
//             gap: 6px;
//             line-height: 24px;
//             min-height: 35px;
//             padding: 0;
//             border: none;
//             box-shadow: none;
//         }
//         .el-select__placeholder::v-deep.is-transparent {
//             color: #999999;
//             font-weight: 600;
//         }
//         >.title {
//             float: left;
//             width: 120px;
//             font-family: PingFang SC, PingFang SC;
//             font-weight: 600;
//             font-size: 20px;
//             color: #666666;
//             text-align: left;
//             font-style: normal;
//             text-transform: none;
//         }
//         .searchRole {
//             float: left;
//             padding-left: 20px;
//             box-sizing: border-box;
//             i {
//                 display: inline-block;
//                 width: 1px;
//                 height: 12px;
//                 background-color: #d9d9d9;
//                 margin: 0 10px;
//                 vertical-align: middle;
//             }
//         }
//     }
//     .role {
//         padding-left: 16px;
//         .searchRole {
//             width: 440px;
//             height: 40px;
//             line-height: 35px;
//             background-color: #fff;
//             border: 1px solid #ededed;
//             margin: 10px 20px 12px 22px;
//             border-radius: 25px;
//             em {
//                 display: inline-block;
//                 width: 29px;
//                 height: 29px;
//                 margin: 4px;
//                 margin-right: 25px;
//                 margin-left: 20px;
//                 vertical-align: -13px;
//                 background: url('http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png');
//                 cursor: pointer;
//             }
//             >.ipt {
//                 width: 245px;
//                 font-family: PingFang SC, PingFang SC;
//                 font-weight: 600;
//                 font-size: 14px;
//                 color: #666;
//                 line-height: 16px;
//                 padding-left: 22px;
//                 box-sizing: border-box;
//                 text-align: left;
//                 font-style: normal;
//                 text-transform: none;
//                 border: none;
//                 outline: none;
//             }
//             >.ipt::placeholder {
//                 color: #cccccc;
//             }
//             span {
//                 color: #999999;
//             }
//         }
//     }
//     .region {
//         .searchRole {
//             width: 440px;
//             height: 40px;
//             line-height: 35px;
//             background-color: #fff;
//             border: 1px solid #ededed;
//             margin: 10px 0px 12px 16px;
//             border-radius: 25px;
//         }
//         em {
//             display: inline-block;
//             width: 29px;
//             height: 29px;
//             margin-left: 48px;
//             vertical-align: middle;
//             background: url('http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png');
//             cursor: pointer;
//         }
//         i {
//             display: inline-block;
//             width: 24px;
//             height: 24px;
//             margin-right: 11px;
//             vertical-align: middle;
//             background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
//         }
//         span {
//             color: #999999;
//             margin-right: 22px;
//         }
//     }
// }
// .cityBox {
//     height: 60px;
//     background: #9CD26B;
//     display: flex;
//     margin: 0 auto;
//     .cityMain {
//         width: 1200px;
//         height: 60px;
//         line-height: 60px;
//         margin: 0 auto;
//         display: flex;
//         justify-content: flex-start;
//         .cityTitle {
//             font-size: 16px;
//             color: #fff;
//             font-weight: bold;
//             padding-left: 60px;
//             margin-right: 30px;
//             width: 76px;
//         }
//         .cityList {
//             li {
//                 font-size: 16px;
//                     float: left;
//                     color: #fff;
//                     margin-right: 14px;
//                     cursor: pointer;
//                 a {
//                     font-size: 16px;
//                     color: #fff;
//                     cursor: pointer;
//                     &:hover {
//                         color: #ABE874;
//                     }
//                 }
//             }
//         }
//     }
// }

// 移动端 start ---------------------------------------->
@media screen and (min-width:801px){
    .nav_in{ 
        display:flex;
        width:100%;
        flex-wrap: wrap;
    }
    .pc_none{
        display:none;
    }
}
@media screen and (max-width:800px){
    /*ipad_phone*/
    .partOne{
        height:auto;
        background:#49a769;
        margin-top:11px;
        padding:6px 0px;
    }
    .partOne .inner{ 
        overflow: hidden;
        position:relative;
    }
    .partOne .inner .navLeft{
        display:flex;
        overflow:hidden;
        word-break: keep-all; 
        white-space: nowrap;
        height:33px;
        text-align:left;
        width:auto;
        float:left;
        font-weight:bold;
        margin-right:20px;
    }
    .partOne .inner .navIndex{ 
        line-height:31px;
        height:33px;
        overflow:hidden;
        width:auto; 
    } 
    .partOne .inner .navClass{ 
        line-height:33px;
        height:33px;
        padding:0px;
        word-break: keep-all; 
        white-space: nowrap;
        overflow:hidden;
        display:none;
    }
    .partOne .inner .navClass div{
        margin-left:8px;
        float:left;
    }
    .partOne .inner .navClass div:nth-child(2){
        padding:0px;
    }
    .partOne .navigationOne{ 
        height:33px; 
        display:block;  
        width:auto;        
        flex:1;
        padding:0;
        margin:0;
        box-sizing:border-box;
        overflow-y: hidden;// 改为 overlay 模式
        overflow-x: auto;// 改为 overlay 模式
        /* 新增滚动条样式 */
        &::-webkit-scrollbar {
            // width: 10;
            height: 4px;
        }
        // 隐藏滚动条轨道
        &::-webkit-scrollbar-track {
            background: transparent;
            // width: 10;
            height: 4;
        }
        // 隐藏滚动条滑块
        &::-webkit-scrollbar-thumb {
            background: transparent;
        }
    }
    .nav_in{
        height:100%;
        word-break: keep-all; 
        white-space: nowrap; 
        box-sizing:border-box;
    }
    .partOne .navigationOne li{
        width:auto;
        display:inline-block;
        height:100%;
        line-height:33px;
        overflow:hidden;
        font-size:16px; 
    }                           
    .partOne .navigationOne li:nth-of-type(1){
        margin-left:0px;
        
    }                              
    .cityBox{
        display: block;
        overflow:hidden;
        height:auto;
        display:none;
    }
    .cityBox .cityMain{
        display: block;
        overflow:hidden;
        height:auto;
        width:100%;
    }
    .cityBox .cityMain .cityTitle{
        line-height: 22px;
        padding:0;
        margin:10px 0px 0px 10px;
        width:auto;
    }
    .cityList{
        overflow:hidden;
    }
    .cityBox .cityMain .cityList li{
        line-height:22px;
        margin:11px;
    }
    .select{
        overflow:hidden;
        height:auto;
        line-height:normal;
    }
    .select .inner{
        width:96%;
        margin:0px auto;
        overflow:hidden;
        height:auto; 
    }
    .select .role{
        padding:0;
        height:auto;
        overflow:hidden;
        float:none;
    } 
    .select .role .searchRole{
        box-sizing:border-box;
        width:333px; 
        float:left;
        margin-left:0px;
    }
    .select .el-select{
        width:230px!important;
    }
    .select .role .searchRole em{
        margin:4px 10px;
        float:right;
    }
    .select .role > .title, .select .region > .title{
        float:none;
        font-size:18px;
    }
    .select .region{
        overflow:hidden;
        height:auto;
        float:none;
    }
    .select .region .searchRole{
        float:none;
        padding:10px 0;
        width:90%;
        margin:5px;
        height:auto;
    }
    .select .region .el-select{
        margin-left:17px;
    }
    .select .region em{
        margin-left:22px;
    }
    .nav_select_btn_box{
        padding:5px 0px;
        border-bottom:1px solid #ededed;
        width:92%;margin:0px auto;
    }
    .nav_select_btn_box::after{
        content: '';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .nav_select_btn{
        height: 33px;
        line-height: 33px;
        color: #333;font-size:14px;
        padding:0px 30px 0px 6px;
        float:left;margin:0px 20px 5px 0px;
        background:url(../../public/image/Iconly.png) no-repeat right center;
        background-size:auto 20px;
    } 
    .nav_department_btn_box{
        position:relative;
        .nav_department_select{
            width:100%;
            height:100%;
            position:absolute;
            left:0px;
            top:0px;
            border:0; 
        }
    }
    .nav_department_drop_box{
        position:absolute;
        left:0px;
        top:33px;
        z-index:111;
        width:100%;
        height:333px;
        border:1px solid #ededed;
        background:#fff;
        overflow:auto;
        border-radius:6px;
        box-sizing:border-box;
        display:none;
    }
    .nav_department_btn_box:hover .nav_department_drop_box{
        display:block;
    }
    .nav_department_drop_a{
        width:100%;
        height:44px;
        line-height:44px;
        display:block;
        font-size:14px;
        color:#333;
        padding:0px 10px 0px;
        box-sizing:border-box;
        word-break: keep-all;
        white-space: nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .partOne .inner .navIndex a{
        font-size:16px;
        font-weight:normal;
        opacity:.6; 
    }
    .partOne .inner .navIndex .phone_nav_index_only{
        font-weight:bold;
        opacity:1; 
    }
    .nav_department_panel{
        width:100%;
        background:#fff;
        left:0px;
        top:0px;
        position:fixed;
        z-index:999;
        height:100%;
    }
    .panel_head_box{
        width:97%;
        margin:0px auto 4px;
        height:50px;
        border-bottom:1px solid #b8b8b8;
        text-align:center;
        position:relative;
    }
    .panel_head_h4{
        height:50px;
        line-height:50px;
        display:inline-block;
        font-size:22px;
        color:#333;
        text-align:center;
    }
    .panel_head_btn{
        float:right;
        width:22px;
        height:22px;
        top:12px;
        position:absolute;right:0px;
        background:url('../../public/image/guanbi1.png') no-repeat center center;
        background-size:100% 100%;
    }
    .nav_department_panel_in{
        width:100%;
        height:100%; 
        box-sizing:border-box;
        overflow:auto;
        position:relative;
        padding-bottom:122px;
    }  
    .nav_department_panel_ul{
        width:30%; 
        float:left;
        height:100%;
        box-sizing:border-box; 
        overflow:auto;
    }
    .nav_department_panel_ul_2{
        width:35%; 
        background:#F2F3F7;
    }
    .nav_department_panel_ul_3{
        width:35%; 
        background:#F2F3F7;
    }
    .nav_department_panel_ul_a{
        width:100%;
        height:40px;
        line-height:40px;
        display:block;
        font-size:16px;
        color:#333;
        padding:0px 10px 0px;
        box-sizing:border-box;
        word-break: keep-all; 
        white-space: nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .nav_department_panel_ul_a_only{
        font-weight:bold; 
        color:#46D333;
    }
    .nav_department_panel_foot{ 
        width:100%;
        margin:0px auto;
        height:36px; 
        position:absolute;
        left:0px;bottom:70px;
        background:#fff;
        text-align:center;
        .nav_department_panel_foot_btn{
            width:33%;
            height:36px;
            line-height:36px; 
            display:inline-block;
            text-align:center; 
            border-radius:16px;
            font-size:16px;
            padding:0px 10px;
            margin:0px 11px;
        }
        .nav_department_panel_foot_btn_clear{
            background:#abe874;
            color:#fff;
        }
        .nav_department_panel_foot_btn_sure{
            background:#46D333;
            color:#fff;
        }
    } 
    .partOne .navigationOne li a span{
        display:block;
        line-height:33px;
        height:33px;
        opacity:0.6;     
    }
    .nav_in .router-link-exact-active span{
        font-size:16px;
        font-weight:bold;
        opacity:1!important;
    }       
    .select{display:none;} 
    .phone_none{display:none;} 
}
//移动端 end ---------------------------------------->
</style>