fazhidy_org_cn/components/home/hundredWebSite.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">
                <NuxtLink href="#">资讯信息类</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">舆情测控类</NuxtLink>
            </div>
            <div class="topNavItem">
                <NuxtLink href="#">发展促进类</NuxtLink>
            </div>
        </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;
            padding: 20PX 0;
            border-bottom: 5PX solid #ccc;
            box-sizing: border-box;
            display: flex;

            .topNavItem {
                width: 16%;
                height: 40PX;
                line-height: 38PX;
                overflow: hidden;
                text-align: center;
                margin: 0 2%;
                border: 1PX solid #ccc;
                border-radius: 10PX;

                a {
                    font-size: 20PX;
                    color: #333;
                    font-weight: bold;
                    display: block;
                    width: 100%;
                }

                &:first-child {
                    border: 1PX solid #036af7;
                    color: #036af7;

                    a {
                        color: #036af7;
                    }
                }

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

        }

        .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;
            padding: 20PX 0;
            border-bottom: 5PX solid #ccc;
            box-sizing: border-box;
            display: flex;

            .topNavItem {
                width: 16%;
                height: 40PX;
                line-height: 38PX;
                overflow: hidden;
                text-align: center;
                margin: 0 2%;
                border: 1PX solid #ccc;
                border-radius: 10PX;

                a {
                    font-size: 20PX;
                    color: #333;
                    font-weight: bold;
                    display: block;
                    width: 100%;
                }

                &:first-child {
                    border: 1PX solid #036af7;
                    color: #036af7;

                    a {
                        color: #036af7;
                    }
                }

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

        }

        .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;
            padding: 20px 0;
            border-bottom: 10px solid #ccc;
            box-sizing: border-box;
            display: flex;

            .topNavItem {
                width: 16%;
                height: 80px;
                line-height: 80px;
                overflow: hidden;
                text-align: center;
                margin: 0 2%;
                border: 2px solid #ccc;
                border-radius: 20px;

                a {
                    font-size: 40px;
                    color: #333;
                    font-weight: bold;
                    display: block;
                    width: 100%;
                }

                &:first-child {
                    border: 2px solid #036af7;
                    color: #036af7;

                    a {
                        color: #036af7;
                    }
                }

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

        }

        .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>