fazhidy_org_cn/pages/guizhangzhidu/index.vue

<template>
    <div class="gzzd">
        <!-- 页面头部 -->
        <HomePageHead></HomePageHead>
        <!-- 页面导航 -->
        <HomePageNavigation></HomePageNavigation>

        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <div class="inner">
                <span class="location">当前位置:</span>
                <el-breadcrumb :separator-icon="ArrowRight">
                    <el-breadcrumb-item>
                        <NuxtLink to="/">首页</NuxtLink>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <NuxtLink to="/">规章制度</NuxtLink>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>

        <!-- 规章制度列表 -->
        <div class="gzzdList">
            <div class="listItem">
                <a href="#">本溪全域联动！《中华人民共和国法治宣传教育法》宣传“燃”动山城</a>
                <span>[下载]</span>
            </div>
            <div class="listItem">
                <a href="#">2023年1月1日，中国法律学会发布《中华人民共和国法治宣传教育法》</a>
                <span>[下载]</span>
            </div>
            <div class="listItem">
                <a href="#">2023年1月1日，中国法律学会发布《中华人民共和国法治宣传教育法》</a>
                <span>[下载]</span>
            </div>
        </div>

        <!-- 平台简介列表 -->
        <div class="ptjjList">
            <h3 class="listTitle">平台简介———— </h3>
            <div class="listItem">
                <a href="#">2023年1月1日，中国法律学会发布《中华人民共和国法治宣传教育法》</a>
                <span>[下载]</span>
            </div>
        </div>

        <!-- 查询版块列表 -->
        <div class="cxbkList">
            <h3 class="listTitle">查询版块———— </h3>
            <div class="listItem">
                <a href="#">2023年1月1日，中国法律学会发布《中华人民共和国法治宣传教育法》</a>
                <span>[下载]</span>
            </div>
        </div>

        <!-- 信件文函列表 -->
        <div class="xjwhList">
            <h3 class="listTitle">信件文函———— </h3>
            <div class="listItem">
                <a href="#">2023年1月1日，中国法律学会发布《中华人民共和国法治宣传教育法》</a>
                <span>[下载]</span>
            </div>
        </div>

        <!-- 调研须知列表 -->
        <div class="dyxzList">
            <h3 class="listTitle">调研须知———— </h3>
            <div class="listItem">
                <a href="#">2023年1月1日，中国法律学会发布《中华人民共和国法治宣传教育法》</a>
                <span>[下载]</span>
            </div>
        </div>

        <!-- 网络平台列表 -->
        <div class="wlptList">
            <h3 class="listTitle">网络平台———— </h3>
            <div class="listItem">
                <a href="#">2023年1月1日，中国法律学会发布《中华人民共和国法治宣传教育法》</a>
                <span>[下载]</span>
            </div>
        </div>

        <!-- 配套用品列表 -->
        <div class="ptypList">
            <h3 class="listTitle">配套用品———— </h3>
            <div class="listItem">
                <a href="#">2023年1月1日，中国法律学会发布《中华人民共和国法治宣传教育法》</a>
                <span>[下载]</span>
            </div>
        </div>

        <!-- 页面底部 -->
        <HomeFoot></HomeFoot>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'

</script>

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

        //导航条
        .breadcrumb {
            width: 100%;
            height: 30PX;
            line-height: 30PX;
            margin-top: 20PX;
            margin-bottom: 20PX;

            .inner {
                width: 1400PX;
                border: 1PX solid #ccc;
                color: #000;
                font-size: 16PX;
                margin: 0 auto;

                .location {
                    margin-right: 20PX;
                    width: 100PX;
                    height: 22PX;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16PX;
                    color: #000;
                    line-height: 23PX;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            :deep(.el-breadcrumb__separator) {
                color: #000;
                font-weight: bold;
                margin: 0 9PX;
            }

            :deep(.el-breadcrumb) {
                display: inline-block;
                vertical-align: -4PX;
            }

            :deep(.el-breadcrumb__inner a),
            :deep(.el-breadcrumb__inner.is-link) {
                color: #000;
                font-weight: 400;
                text-decoration: none;
                transition: var(--el-transition-color);
            }

            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) {
                color: #000;
            }

            span {
                font-weight: 400;
                font-size: 16PX;
                color: #000;
                line-height: 23PX;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        // 列表
        .gzzdList {
            width: 1400PX;
            margin: 0 auto;
            padding-top: 20PX;


            .listItem {
                font-size: 18PX;
                color: #000;
                padding: 0 20PX;
                margin-bottom: 20PX;

                a {
                    color: #000;
                    font-weight: 400;
                    text-decoration: none;
                    transition: var(--el-transition-color);
                }

                span {
                    float: right;
                    font-weight: 400;
                    font-size: 18PX;
                    color: #000;
                    line-height: 23PX;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        // 列表
        .ptjjList,
        .cxbkList,
        .xjwhList,
        .dyxzList,
        .wlptList,
        .ptypList {
            width: 1400PX;
            margin: 0 auto;
            padding-top: 20PX;

            .listTitle {
                font-size: 20PX;
                color: #333;
                margin-bottom: 20PX;
            }

            .listItem {
                font-size: 18PX;
                color: #000;
                padding: 0 20PX;
                margin-bottom: 20PX;

                a {
                    color: #000;
                    font-weight: 400;
                    text-decoration: none;
                    transition: var(--el-transition-color);
                }

                span {
                    float: right;
                    font-weight: 400;
                    font-size: 18PX;
                    color: #000;
                    line-height: 23PX;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }
    }
}

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

        //导航条
        .breadcrumb {
            width: 100%;
            height: 30PX;
            line-height: 30PX;
            margin-top: 20PX;
            margin-bottom: 20PX;

            .inner {
                width: 100%;
                border: 1PX solid #ccc;
                color: #000;
                font-size: 16PX;
                margin: 0 auto;
                padding: 0 20PX;
                box-sizing: border-box;

                .location {
                    margin-right: 20PX;
                    width: 100PX;
                    height: 22PX;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16PX;
                    color: #000;
                    line-height: 23PX;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            :deep(.el-breadcrumb__separator) {
                color: #000;
                font-weight: bold;
                margin: 0 9PX;
            }

            :deep(.el-breadcrumb) {
                display: inline-block;
                vertical-align: -4PX;
            }

            :deep(.el-breadcrumb__inner a),
            :deep(.el-breadcrumb__inner.is-link) {
                color: #000;
                font-weight: 400;
                text-decoration: none;
                transition: var(--el-transition-color);
            }

            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) {
                color: #000;
            }

            span {
                font-weight: 400;
                font-size: 16PX;
                color: #000;
                line-height: 23PX;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        // 列表
        .gzzdList {
            width: 100%;
            margin: 0 auto;
            padding-top: 20PX;
            padding: 0 5PX;
            box-sizing: border-box;


            .listItem {
                font-size: 18PX;
                color: #000;
                padding: 0 20PX;
                margin-bottom: 20PX;

                a {
                    color: #000;
                    font-weight: 400;
                    text-decoration: none;
                    transition: var(--el-transition-color);
                }

                span {
                    float: right;
                    font-weight: 400;
                    font-size: 18PX;
                    color: #000;
                    line-height: 23PX;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        // 列表
        .ptjjList,
        .cxbkList,
        .xjwhList,
        .dyxzList,
        .wlptList,
        .ptypList {
            width: 100%;
            margin: 0 auto;
            padding-top: 20PX;
            padding: 0 5PX;
            box-sizing: border-box;

            .listTitle {
                font-size: 20PX;
                color: #333;
                margin-bottom: 20PX;
            }

            .listItem {
                font-size: 18PX;
                color: #000;
                padding: 0 20PX;
                margin-bottom: 20PX;

                a {
                    color: #000;
                    font-weight: 400;
                    text-decoration: none;
                    transition: var(--el-transition-color);
                }

                span {
                    float: right;
                    font-weight: 400;
                    font-size: 18PX;
                    color: #000;
                    line-height: 23PX;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }
    }
}

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

        //导航条
        .breadcrumb {
            width: 100%;
            height: 60px;
            line-height: 60px;
            margin-top: 40px;
            margin-bottom: 40px;

            .inner {
                width: 100%;
                border: 1px solid #ccc;
                color: #000;
                font-size: 32px;

                .location {
                    margin-right: 40px;
                    width: 200px;
                    height: 44px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 32px;
                    color: #000;
                    line-height: 46px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            :deep(.el-breadcrumb__separator) {
                color: #000;
                font-weight: bold;
                margin: 0 18px;
            }

            :deep(.el-breadcrumb) {
                display: inline-block;
                vertical-align: -10px;
            }

            :deep(.el-breadcrumb__inner a),
            :deep(.el-breadcrumb__inner.is-link) {
                color: #000;
                font-weight: 400;
                text-decoration: none;
                transition: var(--el-transition-color);
            }

            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) {
                color: #000;
            }

            span {
                font-weight: 400;
                font-size: 32px;
                color: #000;
                line-height: 46px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        // 列表
        .gzzdList {
            width: 100%;
            margin: 0 auto;
            padding-top: 40px;

            .listItem {
                font-size: 36px;
                color: #000;
                padding: 0 20px;
                margin-bottom: 20px;
                box-sizing: border-box;
                // 首行缩进
                text-indent: 1em;

                a {
                    color: #000;
                    font-weight: 400;
                    text-decoration: none;
                    transition: var(--el-transition-color);
                }

                span {
                    float: right;
                    font-weight: 400;
                    font-size: 36px;
                    color: #000;
                    line-height: 50px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        // 列表
        .ptjjList,
        .cxbkList,
        .xjwhList,
        .dyxzList,
        .wlptList,
        .ptypList {
            width: 100%;
            margin: 0 auto;
            padding-top: 40px;

            .listTitle {
                font-size: 40px;
                color: #333;
                margin-bottom: 40px;
            }

            .listItem {
                font-size: 36px;
                color: #000;
                padding: 0 20px;
                margin-bottom: 20px;
                // 首行缩进
                text-indent: 1em;

                a {
                    color: #000;
                    font-weight: 400;
                    text-decoration: none;
                    transition: var(--el-transition-color);
                }

                span {
                    float: right;
                    font-weight: 400;
                    font-size: 36px;
                    color: #000;
                    line-height: 50px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }
    }
}
</style>