fazhidy_org_cn/components/home/officialWebsiteNav.vue

<template>
    <div class="hundredWebSite">
        <div class="topNavList">
            <div class="topNavItem">
                <NuxtLink href="#">党委</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">人大</NuxtLink>
            </div>
            <div class="topNavItem active">
                <NuxtLink href="#">政府</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">政协</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">公安</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">检察院</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">法院</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">司法</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">纪检监察</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">信访</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">政法委</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">国安</NuxtLink>
            </div>
        </div>

        <div class="areaList">
            <select name="area" id="">
                <option value="">省</option>
                <option value="">北京市</option>
                <option value="">河北省</option>
            </select>
            <select name="area" id="">
                <option value="">市</option>
                <option value="">石家庄</option>
                <option value="">保定</option>
                <option value="">秦皇岛</option>
            </select>
            <select name="area" id="">
                <option value="">区</option>
                <option value="">桥西区</option>
                <option value="">莲池区</option>
                <option value="">海港区</option>
            </select>
        </div>

        <div class="webSiteList">
            <div class="webSiteItem" v-for="item in 21">
                <NuxtLink href="">
                    <span>法制资讯网</span>
                    <span>http://fzzxw.org.cn</span>
                </NuxtLink>
            </div>
        </div>

        <!-- 分页器 -->
        <div class="pagination pagination_phone_none" v-if="total > 0">
            <el-pagination size="small" background layout="total, prev, pager, next" :total="total" class="mt-4"
                :page-size="pageSize" :current-page="pageNum" prev-text="上一页" next-text="下一页"
                @current-change="changePage" />
        </div>
        <div class="pagination pagination_pc_none" v-if="total > 0">
            <el-pagination pager-count="5" size="small" background layout="pager" :total="total" class="mt-4"
                :page-size="pageSize" :current-page="pageNum" @current-change="changePage" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElPagination } from 'element-plus'

// 分页器
let pageNum = ref(1);
let total = ref(1);
let pageSize = ref(10);

// 分页器切换页码
const changePage = (val) => {
    pageNum.value = val;
}

</script>

<style lang="less" scoped>
@media screen and (min-width: 1401px) {
    .hundredWebSite {
        font-family: '微软雅黑', Microsoft YaHei;

        .topNavList {
            width: 100%;
            height: auto;
            overflow: hidden;
            background: #007eff;
            border-radius: 10PX;
            border: 1px solid #ccc;

            .topNavItem {
                float: left;
                height: 50PX;
                line-height: 50PX;
                width: 150PX;
                text-align: center;

                a {
                    font-size: 20PX;
                    color: #fff;
                    display: block;
                    padding: 0 10PX;
                }

                &:hover {
                    a {
                        text-decoration: underline;
                    }
                }
            }

            .active {
                background: #fff;

                a {
                    color: #007eff;
                }
            }
        }

        .areaList {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 20PX 0;

            select {
                width: 21%;
                height: 40PX;
                line-height: 40PX;
                text-align: center;
                float: left;
                margin: 0 2%;
                border-radius: 10PX;
                border: 1PX solid #ccc;
                font-size: 18PX;
            }
        }

        .webSiteList {
            width: 100%;
            height: auto;
            overflow: hidden;
            // padding: 20PX 0;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .webSiteItem {
                width: 23%;
                height: auto;
                overflow: hidden;
                border: 1PX solid #ccc;
                border-radius: 10PX;
                text-align: center;
                margin: 15PX 1%;
                padding: 10PX 0;
                box-sizing: border-box;

                a {
                    margin: 10PX 0;

                    span {
                        display: block;
                        width: 100%;
                        height: 25PX;
                        line-height: 25PX;
                        overflow: hidden;
                        font-size: 16PX;
                        color: #333;
                        text-align: center;
                        padding: 5PX 0;
                    }
                }

                &:hover {
                    border: 1PX solid #036af7;

                    a {
                        text-decoration: underline;
                        text-decoration-color: #666;

                        span {
                            color: #036af7;
                        }
                    }
                }
            }
        }

        // 分页器
        .pagination {
            width: 100%;
            height: 34PX;
            margin-left: 141PX;
            display: flex;
            justify-content: center;
            margin: 20PX 0;
            padding: 10PX 0;

            .el-pagination::v-deep {
                font-size: 12px;
            }

            // 鼠标移入后字体颜色
            .el-pagination::v-deep :hover {
                color: #1aa0f7;
            }

            .el-pagination.is-background::v-deep .btn-next,
            .el-pagination.is-background::v-deep .btn-prev {
                width: 70PX;
                height: 34PX;
                margin: 0PX 10PX;
                border-radius: 4PX;
            }

            .el-pagination.is-background::v-deep .el-pager li {
                margin: 0PX 10PX;
                width: 38PX;
                height: 34PX;
                border-radius: 4PX;
            }

            .el-pagination.is-background::v-deep .btn-next.is-active,
            .el-pagination.is-background::v-deep .btn-prev.is-active,
            .el-pagination.is-background::v-deep .el-pager li.is-active {
                background-color: #1aa0f7;
                color: #fff;
            }
        }

        .pagination_pc_none {
            display: none;
        }
    }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {
    .hundredWebSite {
        font-family: '微软雅黑', Microsoft YaHei;

        .topNavList {
            width: 100%;
            height: auto;
            overflow: hidden;
            background: #007eff;
            border-radius: 10PX;
            border: 1px solid #ccc;

            .topNavItem {
                float: left;
                height: 50PX;
                line-height: 50PX;
                width: 150PX;
                text-align: center;

                a {
                    font-size: 20PX;
                    color: #fff;
                    display: block;
                    padding: 0 10PX;
                }

                &:hover {
                    a {
                        text-decoration: underline;
                    }
                }
            }

            .active {
                background: #fff;

                a {
                    color: #007eff;
                }
            }
        }

        .areaList {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 20PX 0;

            select {
                width: 21%;
                height: 40PX;
                line-height: 40PX;
                text-align: center;
                float: left;
                margin: 0 2%;
                border-radius: 10PX;
                border: 1PX solid #ccc;
                font-size: 18PX;
            }
        }

        .webSiteList {
            width: 100%;
            height: auto;
            overflow: hidden;
            // padding: 20PX 0;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;

            .webSiteItem {
                height: auto;
                overflow: hidden;
                border: 1PX solid #ccc;
                border-radius: 10PX;
                text-align: center;
                margin: 15PX 1%;
                padding: 10PX 25PX;
                box-sizing: border-box;

                a {
                    margin: 10PX 0;

                    span {
                        display: block;
                        width: 100%;
                        height: 25PX;
                        line-height: 25PX;
                        overflow: hidden;
                        font-size: 16PX;
                        color: #333;
                        text-align: center;
                        padding: 5PX 0;
                    }
                }

                &:hover {
                    border: 1PX solid #036af7;

                    a {
                        text-decoration: underline;
                        text-decoration-color: #666;

                        span {
                            color: #036af7;
                        }
                    }
                }
            }
        }

        // 分页器
        .pagination {
            width: 100%;
            height: 34PX;
            margin-left: 141PX;
            display: flex;
            justify-content: center;
            margin: 20PX 0;
            padding: 10PX 0;

            .el-pagination::v-deep {
                font-size: 12px;
            }

            // 鼠标移入后字体颜色
            .el-pagination::v-deep :hover {
                color: #1aa0f7;
            }

            .el-pagination.is-background::v-deep .btn-next,
            .el-pagination.is-background::v-deep .btn-prev {
                width: 70PX;
                height: 34PX;
                margin: 0PX 10PX;
                border-radius: 4PX;
            }

            .el-pagination.is-background::v-deep .el-pager li {
                margin: 0PX 10PX;
                width: 38PX;
                height: 34PX;
                border-radius: 4PX;
            }

            .el-pagination.is-background::v-deep .btn-next.is-active,
            .el-pagination.is-background::v-deep .btn-prev.is-active,
            .el-pagination.is-background::v-deep .el-pager li.is-active {
                background-color: #1aa0f7;
                color: #fff;
            }
        }

        .pagination_pc_none {
            display: none;
        }
    }
}

@media screen and (max-width: 800px) {
    .hundredWebSite {
        font-family: '微软雅黑', Microsoft YaHei;

        .topNavList {
            width: 100%;
            height: auto;
            overflow: hidden;
            background: #007eff;
            border-radius: 10PX;
            border: 1px solid #ccc;

            .topNavItem {
                float: left;
                height: 100px;
                line-height: 100px;
                width: 50%;
                text-align: center;

                a {
                    font-size: 38px;
                    color: #fff;
                    display: block;
                    padding: 0 20px;
                }

                &:hover {
                    a {
                        text-decoration: underline;
                    }
                }
            }

            .active {
                background: #fff;

                a {
                    color: #007eff;
                }
            }
        }

        .areaList {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 20PX 0;

            select {
                width: 29%;
                height: 80px;
                line-height: 80px;
                text-align: center;
                float: left;
                margin: 0 2%;
                border-radius: 20px;
                border: 2px solid #ccc;
                font-size: 30px;
            }
        }

        .webSiteList {
            width: 100%;
            height: auto;
            overflow: hidden;
            // padding: 20px 0;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .webSiteItem {
                width: 100%;
                height: auto;
                overflow: hidden;
                border: 2px solid #ccc;
                border-radius: 20px;
                text-align: center;
                margin: 15px 1%;
                padding: 10px 0;
                box-sizing: border-box;

                a {
                    margin: 20px 0;

                    span {
                        display: block;
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        overflow: hidden;
                        font-size: 32px;
                        color: #333;
                        text-align: center;
                        padding: 10px 0;
                    }
                }

                &:active {
                    border: 1PX solid #036af7;

                    a {
                        text-decoration: underline;
                        text-decoration-color: #666;

                        span {
                            color: #036af7;
                        }
                    }
                }
            }
        }

        // 分页器
        .pagination {
            width: 100%;
            height: 68px;
            margin-left: 282px;
            display: flex;
            justify-content: center;
            margin: 40px 0;

            // 鼠标移入后字体颜色
            .el-pagination::v-deep :hover {
                color: #1aa0f7;
            }

            .el-pagination.is-background::v-deep .btn-next,
            .el-pagination.is-background::v-deep .btn-prev {
                width: 140px;
                height: 68px;
                margin: 0px 20px;
                border-radius: 8px;
            }

            .el-pagination.is-background::v-deep .el-pager li {
                margin: 0px 20px;
                width: 68px;
                height: 68px;
                border-radius: 8px;
                font-size: 28px;
            }

            .el-pagination.is-background::v-deep .btn-next.is-active,
            .el-pagination.is-background::v-deep .btn-prev.is-active,
            .el-pagination.is-background::v-deep .el-pager li.is-active {
                background-color: #1aa0f7;
                color: #fff;
            }
        }

        .pagination_phone_none {
            display: none;
        }
    }
}
</style>