fazyqjczx_org_cn/components/home/pageHead.vue

<template>
    <div>
        <!-- 手机端 -->
        <div class="headTitle">
            <div class="left">
                <a href="#">欢迎来到全国法制舆情监测中心!</a>
            </div>
            <div class="right" @click="isShowNav = !isShowNav">
                <span>首页</span>
                <img src="../../public/index/btn.png" alt="">
            </div>
        </div>
        <div class="phoneNavList" v-show="isShowNav">
            <div class="login">
                <a href="#">用户登录</a>
            </div>
            <div class="navlist1">
                <a href="/sannongzixunzhifuxinxi/list-1.html">法制资讯</a>
                <a href="#">各地动态</a>
                <a href="#">特别关注</a>
                <a href="#">媒体视点</a>
                <a href="#">法纪通报</a>
                <a href="#">今日说法</a>
                <a href="#">政策法规</a>
                <a href="#">政策解读</a>
                <a href="#">政务公开</a>
                <a href="#">内参纪要</a>
                <a href="#">执法在线</a>
                <a href="#">法制监察</a>
                <a href="#">监督调查</a>
                <a href="#">社会调研</a>
                <a href="#">典型案例</a>
                <a href="#">廉政时讯</a>
                <a href="#">法制时评</a>
                <a href="#">法制宣传</a>
                <a href="#">百姓话题</a>
                <a href="#">举报投诉</a>
                <a href="#">经济与法</a>
                <a href="#">法制建设</a>
            </div>
            <div class="navlist1">
                <a href="#">领导信箱</a>
                <a href="#">投诉举报</a>
                <a href="#">网上政务</a>
                <a href="#">志愿服务</a>
                <a href="#">公益活动</a>
                <a href="#">在线服务</a>
                <a href="#">网民留言</a>
                <a href="#">法制知识</a>
                <a href="#">法律咨询</a>
                <a href="#">通知公告</a>
                <a href="#">官网导航</a>
            </div>
            <div class="navlist1">
                <a href="#">人员查询</a>
                <a href="#">车辆查询</a>
                <a href="#">地市中心</a>
                <a href="#">调研选题</a>
                <a href="#">介绍信查询</a>
                <a href="#">核心网站</a>
                <a href="#">政务百网</a>
                <a href="#">行业百网</a>
                <a href="#">规章制度</a>
                <a href="#">申请加入</a>
                <a href="#">项目官网</a>
            </div>
            <div class="close" @click="isShowNav = false">
                <img src="../../public/index/no.png" alt="">
            </div>
        </div>
        <!-- PC端 -->
        <div class="pageHead">
            <div class="head">
                <div class="inner">
                    <div class="left">
                        <a href="#">欢迎来到全国法制舆情监测中心!</a>
                    </div>
                    <div class="right">
                        <a href="#">收藏</a>
                        <span>|</span>
                        <a href="/renyuanchaxun">人员查询</a>
                        <span>|</span>
                        <a href="/cheliangchaxun">车辆查询</a>
                        <span>|</span>
                        <a href="#">用户登录</a>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="topTitle">
                    <a href="#">公安部</a>
                    <a href="#">最高人民法院</a>
                    <a href="#">最高人民检察院</a>
                    <a href="#">司法部</a>
                    <a href="#">中央纪委国家监委</a>
                </div>
                <div class="bottomContent">
                    <div class="leftLogo">
                        <img src="../../public/index/logo.png" alt="">
                    </div>
                    <div class="contentRight">
                        <h1 class="title">
                            <a href="#">全国法制舆情监测中心 官网</a>
                        </h1>
                        <div class="subtitle">
                            <a href="#">全国政务信息一体化应用平台</a>
                            <a href="#">fazyqjczx.org.cn</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cxBtn">
                <div class="cxBtnItem">
                    <a href="/renyuanchaxun">人员查询</a>
                </div>
                <div class="cxBtnItem">
                    <a href="/cheliangchaxun">车辆查询</a>
                </div>
                <div class="cxBtnItem">
                    <a href="/dishizhongxin">地市中心</a>
                </div>
                <div class="cxBtnItem">
                    <a href="/diaoyanxuanti">调研选题</a>
                </div>
                <div class="cxBtnItem">
                    <a href="/jieshaoxinchaxun">介绍信查询</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const isShowNav = ref(false)
</script>

<style scoped lang="less">
// PC端 >1400px
@media screen and (min-width: 1401px) {
    .headTitle {
        display: none;
    }

    .phoneNavList {
        display: none;
    }

    .pageHead {
        width: 100%;
        height: 315PX;

        .head {
            width: 100%;
            background-color: rgba(255, 255, 255, .7);
            margin-bottom: 20PX;

            .inner {
                width: 1400PX;
                margin: 0 auto;
                line-height: 38PX;
                font-family: "微软雅黑", "microsoft yahei";
                display: flex;
                justify-content: space-between;

                .left {
                    a {
                        color: #000;
                        font-size: 18PX;
                    }
                }

                .right {
                    a {
                        color: #000;
                        font-size: 18PX;
                        padding: 0 10PX;
                        box-sizing: border-box;
                    }

                    span {
                        font-size: 14PX;
                        color: #333;
                    }
                }
            }
        }

        .content {
            width: 100%;
            height: 190PX;
            width: 1300PX;
            margin: 0 auto;

            .topTitle {
                display: flex;
                justify-content: flex-end;

                a {
                    font-size: 22PX;
                    color: #FF0024;
                    font-weight: bold;
                    padding-left: 2%;
                    text-shadow: 1PX 0 0 #fff, 0 1PX 0 #fff, 0 -1PX 0 #fff, -1PX 0 0 #fff, 1PX 0 1PX #fff, 0 1PX 1PX #fff, 0 -1PX 1PX #fff, -1PX 0 1PX #fff;
                }
            }

            .bottomContent {
                font-family: "微软雅黑", "microsoft yahei";
                display: flex;
                justify-content: space-between;

                .leftLogo {
                    img {
                        width: 180PX;
                        height: 145PX;
                        margin-top: 10PX;
                    }
                }

                .contentRight {
                    .title {
                        height: 120PX;
                        line-height: 120PX;

                        a {
                            font-size: 81PX;
                            color: #FF0024;
                            font-weight: bold;
                            -webkit-text-stroke: 1px #fff;
                        }
                    }

                    .subtitle {
                        height: 40PX;
                        line-height: 40PX;
                        display: flex;
                        justify-content: space-between;

                        a {
                            font-size: 22PX;
                            color: #ff0024;
                            font-weight: bold;
                            text-shadow: 1PX 0 0 #fff, 0 1PX 0 #fff, 0 -1PX 0 #fff, -1PX 0 0 #fff, 1PX 0 1PX #fff, 0 1PX 1PX #fff, 0 -1PX 1PX #fff, -1PX 0 1PX #fff;
                        }
                    }
                }
            }
        }

        .cxBtn {
            width: 1300PX;
            margin: 0 auto;
            height: 40PX;
            line-height: 40PX;
            display: flex;
            justify-content: center;

            .cxBtnItem {
                width: 100PX;
                margin: 0 10PX;
                display: inline-block;
                line-height: 30PX;
                background: #ff0024;
                text-align: center;

                a {
                    font-size: 18PX;
                    color: #fff;
                }
            }
        }
    }
}

// 801px -- 1400px
@media screen and (min-width: 801px) and (max-width: 1400px) {
    .headTitle {
        display: none;
    }

    .phoneNavList {
        display: none;
    }

    .pageHead {
        width: 100%;
        height: 310PX;

        .head {
            font-size: 14px;
            width: 100%;
            background-color: rgba(255, 255, 255, .7);
            // border-bottom: 2px solid #ccc;
            margin-bottom: 20PX;
            padding: 0 1%;
            box-sizing: border-box;

            .inner {
                width: 100%;
                margin: 0 auto;
                line-height: 30px;
                font-family: "微软雅黑", "microsoft yahei";
                display: flex;
                justify-content: space-between;

                .left {
                    a {
                        color: #000;
                    }
                }

                .right {
                    a {
                        color: #000;
                        padding: 0 10px;
                        box-sizing: border-box;
                    }

                    span {
                        color: #333;
                    }
                }
            }
        }

        .content {
            width: 100%;
            padding: 0 1%;
            box-sizing: border-box;

            .topTitle {
                display: flex;
                justify-content: flex-end;

                a {
                    font-size: 18px;
                    color: #ff0024;
                    font-weight: bold;
                    padding-left: 2%;
                    -webkit-text-stroke: 1px #fff;
                }
            }

            .bottomContent {
                font-family: "微软雅黑", "microsoft yahei";

                .leftLogo {
                    width: 20%;
                    float: left;

                    img {
                        width: 85px;
                        height: 66px;
                        margin-top: 10PX;
                        margin-right: 20PX;
                    }
                }

                .contentRight {
                    width: 80%;
                    float: left;

                    .title {
                        width: 100%;
                        height: 100PX;
                        line-height: 110PX;
                        text-align: center;

                        a {
                            font-size: 27px;
                            color: #ff0024;
                            font-weight: bold;
                            letter-spacing: 10px;
                            text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, -2px 0 0 #fff, 2px 0 2px #fff, 0 2px 2px #fff, 0 -2px 2px #fff, -2px 0 2px #fff;
                        }
                    }

                    .subtitle {
                        width: 100%;
                        height: 40PX;
                        line-height: 40PX;
                        display: flex;
                        justify-content: space-between;

                        a {
                            font-size: 20PX;
                            color: #ff0024;
                            font-weight: bold;
                            text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 1px 0 1px #fff, 0 1px 1px #fff, 0 -1px 1px #fff, -1px 0 1px #fff;
                        }
                    }
                }
            }
        }

        .cxBtn {
            width: 100%;
            margin: 0 auto;
            height: 40PX;
            padding-top: 10PX;
            display: flex;
            justify-content: center;

            .cxBtnItem {
                width: 100PX;
                margin: 0 10PX;
                display: inline-block;
                line-height: 40PX;
                background: #ff0024;
                text-align: center;

                a {
                    font-size: 18PX;
                    color: #fff;
                    font-family: "微软雅黑", "microsoft yahei";
                }
            }
        }
    }
}

// 手机端 <= 800px
@media screen and (max-width: 800px) {
    .headTitle {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999999;
        font-family: "微软雅黑", "microsoft yahei";
        width: 100%;
        height: 90px;
        line-height: 90px;
        font-size: 30px;
        background-color: #f1f1f1;
        padding: 0 20px;
        box-sizing: border-box;
        overflow: hidden;

        .left {
            a {
                font-size: 30px;
                color: #000;
            }
        }

        .right {
            span {
                display: inline-block;
                margin-right: 20px;
            }

            img {
                width: 34px;
                height: 34px;
                vertical-align: -3px;
            }
        }
    }

    .phoneNavList {
        position: fixed;
        top: 90px;
        left: 0;
        z-index: 9999999;
        width: 100%;
        padding: 40px;
        box-sizing: border-box;
        background-color: #eeeeee;

        .login {
            width: 100%;
            height: 100px;
            line-height: 100px;
            border-bottom: 1px solid #c1c1c1;
            padding: 0 20px;

            a {
                font-size: 37px;
                color: #333;
                padding: 10px 0;
            }
        }

        .navlist1 {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            border-bottom: 1px solid #c1c1c1;
            padding: 14px 0;

            a {
                font-size: 37px;
                color: #333;
                padding: 6px 20px;
            }
        }

        .close {
            width: 68px;
            height: 68px;
            line-height: 68px;
            text-align: center;
            background-color: #333;
            border-radius: 100%;
            margin: 30px auto 5px;

            img {
                width: 36px;
                height: 36px;
                padding: 15px;
            }
        }
    }

    .pageHead {
        margin-top: 90px;
        font-family: "微软雅黑", "microsoft yahei";
        position: relative;
        width: 100%;
        height: 300px;
        background: url(../../public/index/banner.jpg) no-repeat center top;
        background-size: 100% 100%;
        overflow: hidden;

        .head {
            display: none;
        }

        .content {
            width: 100%;
            margin: 0 auto;

            .topTitle {
                display: none;
            }

            .bottomContent {
                width: 100%;
                height: auto;
                overflow: hidden;
                padding: 40px 20px;
                box-sizing: border-box;

                .leftLogo {
                    width: 20%;
                    float: left;
                    margin-top: 0;

                    img {
                        width: 100%;
                    }
                }

                .contentRight {
                    width: 78%;
                    float: right;
                    overflow: hidden;
                    height: auto;
                    margin-top: 10px;

                    .title {
                        width: 100%;
                        text-align: center;

                        a {
                            font-size: 40px;
                            letter-spacing: 4px;
                            color: #ff0024;
                            font-weight: bold;
                            text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, -2px 0 0 #fff, 2px 0 2px #fff, 0 2px 2px #fff, 0 -2px 2px #fff, -2px 0 2px #fff;
                        }
                    }

                    .subtitle {
                        width: 100%;
                        margin-top: 26px;
                        display: flex;
                        justify-content: space-between;

                        a {
                            font-size: 24px;
                            color: #ff0024;
                            font-weight: bold;
                            text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 1px 0 1px #fff, 0 1px 1px #fff, 0 -1px 1px #fff, -1px 0 1px #fff;
                        }
                    }
                }
            }
        }

        .cxBtn {
            width: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: center;

            .cxBtnItem {
                width: 19%;
                margin: 0 10px;
                display: inline-block;
                height: 60px;
                line-height: 60px;
                background-color: #ff0024;
                // background: linear-gradient(to bottom, #52dcfb, #187ef1);
                text-align: center;

                a {
                    font-size: 26px;
                    color: #fff;
                }
            }
        }
    }
}
</style>