sannongzixunwang_web/components/pageNavigation.vue

<template>
    <div class="navigate">
        <!-- 导航 -->
        <div class="partOne">
            <div class="inner">
                <!-- 导航一 -->
                <ul class="navigationOne">
                    <li>贴身宝贝</li>
                    <li>新农村</li>
                    <li>政策法规</li>
                    <li>三农之窗</li>
                    <li>区域经济</li>
                    <li>三农投资</li>
                    <li>农贸资讯</li>
                    <li>三农科教</li>
                    <li>文化生活</li>
                    <li>三农探索</li>
                    <li>三农人物</li>
                    <li>三农专题</li>
                </ul>
            </div>
        </div>

        <div class="partTwo">
            <div class="inner">
                <ul class="navigationTwo">
                    <li>写作大全</li>
                    <li>招工招聘</li>
                    <li>农资购销</li>
                    <li>农产购销</li>
                    <li>致富信息</li>
                    <li>书刊信息</li>
                    <li>农业导航</li>
                    <li>打假维权</li>
                    <li>三农服务</li>
                    <li>三农调差</li>
                    <li>三农内参</li>
                    <li>贴身宝贝</li>
                </ul>
            </div>
        </div>

        <div class="partThree">
            <!-- 地方频道 -->
            <div class="inner">
                <!-- channel 频道 -->
                <h5 class="channel">地方频道</h5>
                <p class="areaChannel">
                    <span v-for="(item, index) in areaList" :key="index">
                        <a href="#">{{ item }}</a>
                    </span>
                </p>
            </div>
        </div>

        <!-- 导航栏下的大图 -->
        <div class="logo">
            <div class="inner">
                <img src="../static/images/banner 1.png" alt="">
            </div>
        </div>

        <!-- 行政查询 (未完成) -->
        <div class="select">
            <div class="inner">
                <ul class="role left">
                    <li class="title">行政职能查询</li>
                    <li class="searchRole">
                        <em></em>
                        <input type="text" placeholder="输入关键词">
                        <i></i>
                        <span>职能部门</span>
                        <!-- <select>
                            <option value="1">北京</option>
                            <option value="1">天津</option>
                            <option value="1">上海</option>
                            <option value="1">广州</option>
                        </select> -->
                    </li>
                </ul>
                <ul class="region left">
                    <li class="title">行政区划查询</li>
                    <li class="searchRole">
                        <em></em>
                        <i></i>
                        <span>请选择省</span>
                        <i></i>
                        <span>请选择市</span>
                        <i></i>
                        <span>请选择区/县</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</template>

<script setup>
let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '香港', '澳门', '台湾']

</script>

<style lang="less" scoped>
// 导航部分
.partOne .navigationOne,
.partOne .navigationOne>li,
.partTwo .navigationTwo,
.partTwo .navigationTwo>li {
    float: left;
}

.partOne {
    width: 100%;
    height: 66px;
    line-height: 66px;
    background-color: #fff;
    font-size: 20px;
    font-family: PingFang SC-Semibold;

    .navigationOne {
        color: #333;

        li {
            font-family: PingFang SC;
            font-weight: 600;
            font-size: 20px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-right: 23px;

            &:nth-last-child(1) {
                margin-right: 0px;
            }
        }

    }
}

.partTwo {
    width: 100%;
    height: 57px;
    line-height: 57px;
    border-bottom: 1px solid #e3e3e3;

    .navigationTwo {
        width: 1207px;
        height: 57px;
        color: #333333;
        border-bottom: 1px solid #e3e3e3;

        li {
            font-weight: 600;
            font-size: 20px;
            height: 56px;
            margin-right: 21px;

            &:nth-last-child(1) {
                margin-right: 0px;
            }
        }

        li:hover {
            color: #139602;
            border-bottom: 2px solid #139602;
        }

    }
}

.partThree {
    width: 100%;
    height: 75px;

    .inner {
        margin-bottom: 5px;
    }

    .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: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;

    }

    .areaChannel {
        width: 1122px;
        margin-left: 14px
    }

    .areaChannel {
        >span {
            display: inline-block;
            width: 49px;
            height: 16px;
            line-height: 16px;
            margin-bottom: 10px;
            text-align: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin-right: 5px;
            border-right: 1px solid #e6e6e6;

            a {
                display: inline-block;
                width: 49px;
                height: 16px;
                color: #868686;
            }

            a:hover {
                color: #868686;
            }
        }

        >span:last-child,
        >span:nth-child(20) {
            border-right: none;

        }
    }
}

.logo {
    margin-top: 5px;
    height: 130px;
}

// 行政查询(未完成)
.select {
    width: 100%;
    height: 62px;
    line-height: 62px;

    .inner {
        // width: 1200px;
        height: 62px;
        margin-top: 10px;
        background-color: #fafafa;
    }

    .role,
    .region {
        float: left;
        height: 62px;

        >.title {
            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;
        }

        li {
            float: left;
        }

    }

    .role {
        padding-left: 16px;

        .searchRole {
            width: 440px;
            height: 40px;
            line-height: 40px;
            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 21px 4px 22px;
                vertical-align: middle;
                background: url('../static/images/Iconly／Broken／Search.png');
            }

            input {
                width: 243px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 14px;
                color: #999999;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                border: none;
                outline: none;
            }

            i {
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 19px;
                vertical-align: middle;
                background: url("../static/images/Iconly／Two-tone／Arrow - Down 3.png");
            }

            span {
                color: #999999;
            }
        }
    }

    .region {
        .searchRole {
            width: 440px;
            height: 40px;
            line-height: 40px;
            background-color: #fff;
            border: 1px solid #ededed;
            margin: 10px 0px 12px 16px;
            border-radius: 25px;
        }

        em {
            display: inline-block;
            width: 29px;
            height: 29px;
            margin: 4px 21px 4px 22px;
            vertical-align: middle;
            background: url('../static/images/Iconly／Broken／Search.png');
        }

        i {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: 11px;
            vertical-align: middle;
            background: url("../static/images/Iconly／Two-tone／Arrow - Down 3.png");
        }

        span {
            color: #999999;
            margin-right: 22px;
        }
    }
}
</style>