fazhidy_org_cn/components/home/websiteInfo.vue

<template>
    <div class="websiteInfo">
        <div class="topInfo">
            <img src="../../public/index/logo.jpg" alt="">
            <div class="topInfoText">
                <NuxtLink href="">
                    <span>法制内参（独立官网）</span>
                    <span>http://fzzxw.org.cn</span>
                </NuxtLink>
            </div>
        </div>
        <div class="companyInfo">
            <div class="companyInfoItem">
                <span class="companyInfoTitle">主办单位</span>
                <span class="companyInfoContent">北京金政国信资讯中心</span>
            </div>
            <div class="companyInfoItem">
                <span class="companyInfoTitle">电话</span>
                <span class="companyInfoContent">010-56212745、010-53382908</span>
            </div>
            <div class="companyInfoItem">
                <span class="companyInfoTitle">邮箱</span>
                <span class="companyInfoContent">qgfzdyzx@163.com</span>
            </div>
            <div class="companyInfoItem">
                <span class="companyInfoTitle">地址</span>
                <span class="companyInfoContent">第一办公区：北京市东城区建国门内大街26号新闻大厦5层，邮编：100005</span>
                <span class="companyInfoContent">第二办公区：北京市西城区砖塔胡同56号西配楼，邮编：100810</span>
            </div>
            <div class="companyInfoItem">
                <span class="companyInfoTitle">QQ</span>
                <span class="companyInfoContent">3206414697、1224368922</span>
            </div>
        </div>
        <div class="line"></div>
        <div class="introduction">
            <span class="introductionTitle">政讯通·全国法制调研中心法制内参简介</span>
            <div class="introductionContent">
                法制内参是国内法制调研类的独立域名网站，由政讯通-全国政务信息一体化办公室主管，北京金政国信资讯中心主办。法制内参于2018年5月加入政讯通·全国法制调研中心，正式成为政讯通·全国法制调研中心的核心网站之一。

                政讯通·全国法制调研中心是政讯通-全国政务信息一体化办公室联合30多家企事业单位组成，北京政讯通法律咨询有限公司（国有控股）牵头运营的全国性法律综合服务平台。平台坚决贯彻落实“坚持以人民为中心；协调平衡各方利益、维护社会公平正义；坚持可持续发展理念”的指示精神，以“要在全体人民共同奋斗、经济社会不断发展的基础上，通过制度安排，依法保障人民权益，让全体人民依法平等享有权利和履行义务”为使命，充分利用网络资源和传媒优势，宣传党和国家的法律法规，持续加强内容建设。目前已开设了栏目上千个，地市中心可全面覆盖我国334个地级市，业务范围涵盖资讯信息、舆情服务、法律咨询、法律调研、法律宣传、法规教育、法律援助等领域，网络信息化会员遍布全国各地，实施行业、区域全覆盖，是我国具有广泛传播力、影响力的新型主流媒体。

                法制内参自加入政讯通·全国法制调研中心以来，积极带动网站会员以及政讯通专兼职工作人员开展有利于社会发展进步的工作；始终坚持“宣传和推进中国社会主义民主与法治进程”的理念，以“社会性、权威性、新闻性、纪实性、科学性”为宗旨，积极宣传国家政策法规、及时发布海量法制资讯、全面创新法律服务理念，致力于为广大用户提供更便捷、更省时、更全面、更专业、更有效的互联网信息一体化服务。现面向全国诚聘各类工作人员，并诚邀全国各地有志之士加入地市级联合中心，与我们一起助力推进依法治国，为加快建设中国特色社会主义法治体系和社会主义法治国家贡献力量。

                法制内参作为核心网站，在政讯通·全国法制调研中心的领导下，坚决贯彻落实“法治兴则国兴，法治强则国强”的指导思想，以“推进依法行政、建设法治政府，建立科学的行政执法责任体系，进一步强化政府责任”为目标，从功能性上设立资讯中心和查询中心两大板块，旨在为不同用户群体提供针对性服务。下设纪检公告、政法领域、大家说法、行业风采、法制沙龙、时政资讯、法制动态、法律咨询、舆论监督、案件追踪、法制聚焦、法制舆情、维权援助、法制人物、政策法规、反腐倡廉、法制观察、法制纵横、今日关注、依法行政、民主法制、群众监督、举报投诉等多个专题栏目，以实现法制资讯发布、舆情监测、法制信息宣传和法制调研四大功能。

                法制内参具有更新快、信息全、领域广、体量大的优势，自运营至今已发布法治资讯十万余条、完成法治调研课题百余件、协调处理百余条百姓求助事项，多次对弱势群体提供法律援助，保护其合法权益不受侵害，获得广大人民群众的一致好评！我们希望有着和我们一样强烈意愿，为这个时代不断增砖加瓦的有志之士加入我们，与我们一起开展法治宣传教育，增强全民法治观念，共同建设我们的法治强国。

                法制内参拥有以法学界的知名学者、司法工作者、律师、新闻界的学者、资深媒体人等组成的管理团队和政府、学术界的专家学者组成的顾问团队。

                法制内参与法制行业相关媒体、监管部门、企业、第三方服务机构都保持着密切联系与合作。并与一百余家相关党政机关职能部门和媒体形成监督联动机制。

                法制内参是政讯通·全国法制调研中心的政务百网站群成员网站之一。为了给广大人民群众提供更好的资讯发布、舆情监测、法制调研、法律咨询和依法维权等服务，政讯通·全国法制调研中心现面向全国建立地市级法制联合中心，并面向全国招聘法制调研员、法制监督员、法制调解员、法制宣传员、舆情处理师、舆情监测员、法制观察员、特邀编辑、特约通讯员、法制资讯信息员、法制调查员等多个公益性岗位。诚邀全国各地的有志之士加入我们，共同关注法制领域，为全面推进依法治国，加快社会主义法制建设贡献出一份力量。
            </div>
        </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) {
    .websiteInfo {
        font-family: '微软雅黑', Microsoft YaHei;
        border: 1PX solid #ccc;

        .topInfo {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 20PX 10PX 20PX 40PX;
            border-bottom: 5PX solid #ccc;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;

            img {
                width: 402PX;
                height: 122PX;
                overflow: hidden;
                margin-right: 20PX;
                border: 1PX solid #ccc;
            }

            .topInfoText {
                padding: 20PX 0;

                span {
                    display: block;
                    height: 40PX;
                    line-height: 40PX;
                    color: #036af7;
                    font-weight: bold;
                    font-size: 20PX;
                }
            }
        }

        .topInfo:hover {
            .topInfoText {
                span {
                    text-decoration: underline;
                    text-decoration-color: #333;
                }
            }
        }

        .companyInfo {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 20PX 50PX;
            box-sizing: border-box;

            .companyInfoItem {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin-top: 20Px;
                padding-left: 40PX;
                box-sizing: border-box;

                .companyInfoTitle {
                    display: inline-block;
                    border-bottom: 1PX dashed #000;
                    font-size: 24PX;
                    color: #333;
                    line-height: 45PX;
                    font-weight: 500;
                }

                .companyInfoContent {
                    display: block;
                    width: 100%;
                    height: auto;
                    overflow: hidden;
                    font-size: 22PX;
                    color: #db0101;
                    font-weight: 500;
                }
            }
        }

        .line {
            width: 94%;
            margin: 0 auto;
            height: 5PX;
            background-color: #ccc;
        }

        .introduction {
            min-height: 500PX;
            padding: 20PX 30PX;
            font-size: 19PX;
        }
    }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {
    .websiteInfo {
        font-family: '微软雅黑', Microsoft YaHei;
        border: 1PX solid #ccc;

        .topInfo {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 20PX 10PX 20PX 40PX;
            border-bottom: 5PX solid #ccc;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;

            img {
                width: 50%;
                overflow: hidden;
                margin-right: 20PX;
                border: 1PX solid #ccc;
            }

            .topInfoText {
                padding: 20PX 0;

                span {
                    display: block;
                    height: 40PX;
                    line-height: 40PX;
                    color: #036af7;
                    font-weight: bold;
                    font-size: 20PX;
                }
            }
        }

        .topInfo:hover {
            .topInfoText {
                span {
                    text-decoration: underline;
                    text-decoration-color: #333;
                }
            }
        }

        .companyInfo {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 20PX 50PX;
            box-sizing: border-box;

            .companyInfoItem {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin-top: 20Px;
                padding-left: 40PX;
                box-sizing: border-box;

                .companyInfoTitle {
                    display: inline-block;
                    border-bottom: 1PX dashed #000;
                    font-size: 24PX;
                    color: #333;
                    line-height: 45PX;
                    font-weight: 500;
                }

                .companyInfoContent {
                    display: block;
                    width: 100%;
                    height: auto;
                    overflow: hidden;
                    font-size: 22PX;
                    color: #db0101;
                    font-weight: 500;
                }
            }
        }

        .line {
            width: 94%;
            margin: 0 auto;
            height: 5PX;
            background-color: #ccc;
        }

        .introduction {
            min-height: 500PX;
            padding: 20PX 30PX;
            font-size: 19PX;
        }
    }
}

@media screen and (max-width: 800px) {
    .websiteInfo {
        font-family: '微软雅黑', Microsoft YaHei;
        border: 2px solid #ccc;

        .topInfo {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 20px;
            border-bottom: 10px solid #ccc;
            box-sizing: border-box;

            img {
                width: 100%;
                overflow: hidden;
                margin-right: 20px;
                border: 1px solid #ccc;
            }

            .topInfoText {
                padding: 20px 0;

                span {
                    display: block;
                    height: 60px;
                    line-height: 60px;
                    color: #036af7;
                    font-weight: bold;
                    font-size: 40px;
                }
            }
        }

        .topInfo:hover {
            .topInfoText {
                span {
                    text-decoration: underline;
                    text-decoration-color: #333;
                }
            }
        }

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

            .companyInfoItem {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin-top: 20px;
                padding-left: 40px;
                box-sizing: border-box;

                .companyInfoTitle {
                    display: inline-block;
                    border-bottom: 2px dashed #000;
                    font-size: 48px;
                    color: #333;
                    line-height: 90px;
                    font-weight: 500;
                }

                .companyInfoContent {
                    display: block;
                    width: 100%;
                    height: auto;
                    overflow: hidden;
                    font-size: 44px;
                    color: #db0101;
                    font-weight: 500;
                }
            }
        }

        .line {
            width: 94%;
            margin: 0 auto;
            height: 10px;
            background-color: #ccc;
        }

        .introduction {
            min-height: 500PX;
            padding: 30px 40px;
            font-size: 36px;
        }
    }
}
</style>