fazhidy_org_cn/pages/shenqingjiaru/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="/shenqingjiaru">申请加入</NuxtLink>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>

        <!-- 申请加入内容 -->
        <div class="content">
            <div class="contentItem">
                <h3>网络会员</h3>
                <ul>
                    <li><a href="">调研员</a></li>
                </ul>
            </div>
            <div class="contentItem">
                <h3>专兼职人员</h3>
                <ul>
                    <li><a href="">调研员</a></li>
                    <li><a href="">法制监督员</a></li>
                    <li><a href="">法制调解员</a></li>
                    <li><a href="">法制宣传员</a></li>
                    <li><a href="">舆情处理器</a></li>
                    <li><a href="">舆情检测员</a></li>
                    <li><a href="">法制观察员</a></li>
                    <li><a href="">特邀编辑</a></li>
                    <li><a href="">特约通讯员</a></li>
                    <li><a href="">法制资讯信息员</a></li>
                    <li><a href="">法制调研员</a></li>
                    <li><a href="">其他工作人员</a></li>
                </ul>
            </div>
            <div class="contentItem">
                <h3>地市级中心</h3>
                <ul>
                    <li><a href="">地市级法制联合中心 申请说明</a></li>
                </ul>
            </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 {
        width: 100%;
        font-family: '微软雅黑', Microsoft YaHei;

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

            .inner {
                width: 1400PX !important;
                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;
            }
        }

        .content {
            width: 1400PX;
            margin: 10PX auto;
            display: flex;
            justify-content: space-between;

            .contentItem {
                width: 32.33%;
                min-height: 550PX;
                overflow: hidden;
                padding: 10PX 20PX;
                background: #55b1e1;
                box-sizing: border-box;

                h3 {
                    width: 100%;
                    height: 40PX;
                    line-height: 40PX;
                    overflow: hidden;
                    text-align: center;
                    font-size: 18PX;
                    font-weight: 400;
                    color: #55b1e1;
                    background: #fff;
                }

                ul {
                    width: 100%;
                    height: auto;
                    overflow: hidden;

                    li {
                        width: 100%;
                        line-height: 40PX;
                        overflow: hidden;
                        text-align: center;
                        border-bottom: 1PX dashed #fff;

                        a {
                            font-size: 14PX;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {
    .gzzd {
        width: 100%;
        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;
            }
        }

        .content {
            width: 100%;
            margin: 10PX auto;
            display: flex;
            justify-content: space-between;

            .contentItem {
                width: 32.33%;
                min-height: 550PX;
                overflow: hidden;
                padding: 10PX 20PX;
                background: #55b1e1;
                box-sizing: border-box;

                h3 {
                    width: 100%;
                    height: 40PX;
                    line-height: 40PX;
                    overflow: hidden;
                    text-align: center;
                    font-size: 18PX;
                    font-weight: 400;
                    color: #55b1e1;
                    background: #fff;
                }

                ul {
                    width: 100%;
                    height: auto;
                    overflow: hidden;

                    li {
                        width: 100%;
                        line-height: 40PX;
                        overflow: hidden;
                        text-align: center;
                        border-bottom: 1PX dashed #fff;

                        a {
                            font-size: 14PX;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .gzzd {
        width: 100%;
        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;
                margin: 0 auto;

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

        .content {
            width: 100%;
            margin: 20px auto;

            .contentItem {
                width: 100%;
                min-height: 1000px;
                overflow: hidden;
                padding: 20px 40px;
                background: #55b1e1;
                box-sizing: border-box;

                h3 {
                    width: 100%;
                    height: 80px;
                    line-height: 80px;
                    overflow: hidden;
                    text-align: center;
                    font-size: 32px;
                    font-weight: 400;
                    color: #55b1e1;
                    background: #fff;
                }

                ul {
                    width: 100%;
                    height: auto;
                    overflow: hidden;

                    li {
                        width: 100%;
                        line-height: 80px;
                        overflow: hidden;
                        text-align: center;
                        border-bottom: 2px dashed #fff;

                        a {
                            font-size: 28px;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}
</style>