fazhidy_org_cn/components/home/pageNavigation.vue

<template>
    <div class="nav">
        <div class="partOne">
            <div class="itemHome">
                <a href="/">首页</a>
            </div>
            <div class="itemContent">
                <div v-for="item in navList1" :key="item.name" class="item">
                    <a :href="item.url">{{ item.name }}</a>
                </div>
            </div>
        </div>
        <div class="partTwo">
            <div class="itemHome">
                <a href="#">互动</a>
            </div>
            <div class="itemContent">
                <div v-for="item in navList2" :key="item.name" class="item">
                    <a :href="item.url">{{ item.name }}</a>
                </div>
            </div>
        </div>
        <div class="partThree">
            <div class="itemHome">
                <a href="#">查询</a>
            </div>
            <div class="itemContent">
                <div v-for="item in navList3" :key="item.name" class="item">
                    <a :href="item.url">{{ item.name }}</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const navList1 = [
    {
        name: '法制资讯',
        url: '/'
    },
    {
        name: '各地动态',
        url: '/about'
    },
    {
        name: '特别关注',
        url: '/law'
    },
    {
        name: '媒体视点',
        url: '/case'
    },
    {
        name: '法纪通报',
        url: '/contact'
    },
    {
        name: '今日说法',
        url: '/contact'
    },
    {
        name: '政策法规',
        url: '/case'
    },
    {
        name: '政策解读',
        url: '/'
    },
    {
        name: '政务公开',
        url: '/about'
    },
    {
        name: '内参纪要',
        url: '/law'
    },
    {
        name: '执法在线',
        url: '/case'
    },
    {
        name: '法制监察',
        url: '/contact'
    },
    {
        name: '监督调查',
        url: '/contact'
    },
    {
        name: '社会调研',
        url: '/case'
    },
    {
        name: '典型案例',
        url: '/'
    },
    {
        name: '廉政时讯',
        url: '/about'
    },
    {
        name: '法制时评',
        url: '/law'
    },
    {
        name: '法制宣传',
        url: '/case'
    },
    {
        name: '百姓话题',
        url: '/contact'
    },
    {
        name: '投诉举报',
        url: '/contact'
    },
    {
        name: '经济与法',
        url: '/case'
    },
    {
        name: '法制建设',
        url: '/case'
    }
]
const navList2 = [
    {
        name: '领导信箱',
        url: '/'
    },
    {
        name: '投诉举报',
        url: '/about'
    },
    {
        name: '网上政务',
        url: '/law'
    },
    {
        name: '志愿服务',
        url: '/case'
    },
    {
        name: '公益活动',
        url: '/contact'
    },
    {
        name: '在线服务',
        url: '/contact'
    },
    {
        name: '网民留言',
        url: '/wangminliuyan'
    },
    {
        name: '法制知识',
        url: '/'
    },
    {
        name: '法律咨询',
        url: '/falvzixun'
    },
    {
        name: '通知公告',
        url: '/law'
    },
    {
        name: '官网导航',
        url: '/guanwangdaohang'
    }
]
const navList3 = [
    {
        name: '人员查询',
        url: '/'
    },
    {
        name: '车辆查询',
        url: '/about'
    },
    {
        name: '地市中心',
        url: '/law'
    },
    {
        name: '调研选题',
        url: '/case'
    },
    {
        name: '介绍信查询',
        url: '/contact'
    },
    {
        name: '核心网站',
        url: '/hexinwangzhan'
    },
    {
        name: '政务百网',
        url: '/zhengwubaiwang'
    },
    {
        name: '行业百网',
        url: '/hangyebaiwang'
    },
    {
        name: '规章制度',
        url: '/guizhangzhidu'
    },
    {
        name: '申请加入',
        url: '/shenqingjiaru'
    },
    {
        name: '项目官网',
        url: '/xiangmuguanwang'
    }
]
</script>

<style lang="less" scoped>
// >1400px
@media screen and (min-width: 1401px) {
    .nav {
        position: sticky; //粘性定位
        top: 0; //滚动到距离顶部0px时固定
        z-index: 999; //保证固定时在其他内容上方
        width: 100%;
        font-family: "微软雅黑", "microsoft yahei";

        .partOne {
            width: 1400PX;
            height: 70PX;
            background-color: #49cdf9;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;

            .itemHome {
                width: 70PX;
                height: 70PX;
                line-height: 70PX;
                float: left;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                width: 1330PX;
                height: 70PX;
                line-height: 27PX;

                .item {
                    width: 120PX;
                    float: left;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }

                }
            }
        }

        .partTwo {
            width: 1400PX;
            height: 40PX;
            background-color: #134ac6;
            margin: 0 auto;
            border-top: 4PX solid #fff;


            .itemHome {
                width: 70PX;
                height: 40PX;
                line-height: 40PX;
                float: left;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                .item {
                    width: 120PX;
                    float: left;
                    line-height: 30PX;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }
                }
            }
        }

        .partThree {
            width: 1400PX;
            height: 40PX;
            background-color: #b1006a;
            margin: 0 auto;
            border-top: 4PX solid #fff;

            .itemHome {
                width: 70PX;
                height: 40PX;
                line-height: 40PX;
                float: left;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                height: 40PX;
                line-height: 40PX;

                .item {
                    width: 120PX;
                    float: left;
                    line-height: 30PX;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }

                }
            }
        }
    }
}

// 800px-1400px
@media (min-width: 801px) and (max-width: 1400px) {
    .nav {
        position: sticky; //粘性定位
        top: 0; //滚动到距离顶部0px时固定
        z-index: 999; //保证固定时在其他内容上方
        width: 100%;
        font-family: "微软雅黑", "microsoft yahei";

        .partOne {
            width: 100%;
            height: auto;
            background-color: #49cdf9;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;

            .itemHome {
                width: 8%;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                width: 92%;
                line-height: 30PX;

                .item {
                    width: 120PX;
                    float: left;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }

                }
            }
        }

        .partTwo {
            width: 100%;
            height: auto;
            background-color: #134ac6;
            margin: 0 auto;
            border-top: 4PX solid #fff;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;

            .itemHome {
                width: 8%;
                height: auto;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                width: 92%;
                line-height: 30PX;

                .item {
                    width: 120PX;
                    float: left;
                    line-height: 30PX;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }

                }
            }
        }

        .partThree {
            width: 100%;
            height: auto;
            background-color: #b1006a;
            margin: 0 auto;
            border-top: 4PX solid #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            .itemHome {
                width: 8%;
                overflow: hidden;
                font-size: 16PX;
                color: #fff;
                font-weight: bold;
                text-align: center;

                a {
                    font-size: 16PX;
                    font-weight: bold;
                    color: #fff;
                }
            }

            .itemContent {
                width: 92%;
                line-height: 30PX;

                .item {
                    width: 120PX;
                    float: left;
                    line-height: 30PX;

                    a {
                        display: inline-block;
                        width: 120PX;
                        font-size: 16PX;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;

                        &:hover {
                            color: #FF8000;
                        }
                    }

                }
            }
        }
    }
}

// <=800px
@media (max-width: 800px) {
    .nav {
        display: none;
    }
}
</style>