fazhidy_org_cn/pages/wangminliuyan/index.vue

<template>
    <div class="wangminliuyan">
        <!-- 页面头部 -->
        <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="blueLine"></div>

        <!-- 页面内容 -->
        <div class="internetMessage">
            <!-- 留言列表 -->
            <ul class="internetMessage_content">
                <li class="contentItem">
                    <div class="content_title">
                        <span class="name">李先生:</span>
                        <span class="title">
                            我是郑州市调研员，能去商丘工作吗？
                        </span>
                        <span class="time">2025-12-15 17:53:13</span>
                    </div>
                    <div class="content">
                        内容:我是郑州市调研员，能去商丘工作吗？
                    </div>
                    <div class="answer">
                        <span>回复:</span>
                        不可以跨区域工作。
                    </div>
                </li>
                <li class="contentItem">
                    <div class="content_title">
                        <span class="name">冯:</span>
                        <span class="title">
                            你们中心的调研员申请有年龄限制吗？
                        </span>
                        <span class="time">2025-12-11 18:15:35</span>
                    </div>
                    <div class="content">
                        内容:调研员申请有年龄限制吗？
                    </div>
                    <div class="answer">
                        <span>回复:</span>
                        调研员申请年龄在25-65之间均可。
                    </div>
                </li>
                <li class="contentItem">
                    <div class="content_title">
                        <span class="name">汪先生:</span>
                        <span class="title">
                            因为一些原因没能及时去政府单位，介绍信时间过期了还能用吗？
                        </span>
                        <span class="time">2025-12-03 15:30:46</span>
                    </div>
                    <div class="content">
                        内容:我因为一些原因没能及时去政府单位，导致介绍信时间过期了还能用吗？
                    </div>
                    <div class="answer">
                        <span>回复:</span>
                        不能在进行使用，介绍信使用必须在开具有限期内使用。如果是中心，有空白介绍信的需重新开具，过期介绍信作废存档；如果是个人，重新向总部申请开具新的介绍信，并将已过期介绍信寄回总部换领新的介绍信。
                    </div>
                </li>
                <li class="contentItem">
                    <div class="content_title">
                        <span class="name">鲁先生:</span>
                        <span class="title">
                            投诉举报
                        </span>
                        <span class="time">2025-11-24 17:03:02</span>
                    </div>
                    <div class="content">
                        内容:我有个案子输了，我认为是法官自由裁量权有问题，你们能帮我翻案吗
                    </div>
                    <div class="answer">
                        <span>回复:</span>
                        可以。需要您按照我们单位的投诉程序操作，我们在收到您的投诉材料后根据案情情况给予您是否受理的意见。
                        投诉信的要求：当事人身份（您是谁）、被投诉方（我要投诉谁）、按时间顺序写案件的经过，要求叙述清楚明了，现有证据内容，投诉诉求，联系方式等内容并由投诉人本人签字按手印，附上本人身份证明，如果本案申请人超过15位申请人需要有所有申请人出具的委托书。同时附上案件现有证据的复印件（合同、协议、公告、判决书等），所有上述材料寄至北京总部，我们核查后会与您联系。
                    </div>
                </li>
                <li class="contentItem">
                    <div class="content_title">
                        <span class="name">钱xx:</span>
                        <span class="title">
                            法制内参调研证和法制调查网的调研证两个有什么区别？
                        </span>
                        <span class="time">2025-11-20 11:24:41</span>
                    </div>
                    <div class="content">
                        内容:法制内参调研证和法制调查网的调研证两个有什么区别？
                    </div>
                    <div class="answer">
                        <span>回复:</span>
                        证件样式没有区别，平台使用费一样，根据申请人的工作方向需要确定。
                    </div>
                </li>
            </ul>
            <!-- 分页器 -->
            <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 class="formList formList_phone_none">
                <el-form ref="ruleFormRef" style="max-width: 800PX" :model="ruleForm" :rules="rules"
                    label-width="180PX">
                    <el-form-item label="主题" prop="subject">
                        <el-input v-model="ruleForm.subject" />
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="联系电话" prop="">
                        <el-input v-model="ruleForm.phone" />
                    </el-form-item>
                    <el-form-item label="详细内容" prop="">
                        <el-input v-model="ruleForm.content" type="textarea" :rows="4" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)"
                            style="margin-left:200PX; margin-top: 30PX;">
                            提交内容
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="formList formList_pc_none">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                    <el-form-item label="主题" prop="subject">
                        <el-input v-model="ruleForm.subject" />
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="联系电话" prop="">
                        <el-input v-model="ruleForm.phone" />
                    </el-form-item>
                    <el-form-item label="详细内容" prop="">
                        <el-input v-model="ruleForm.content" type="textarea" :rows="4" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)"
                            style="margin-left:150PX; margin-top: 30PX;">
                            提交内容
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 页脚 -->
        <HomeFoot></HomeFoot>
    </div>

</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem, ElPagination, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'

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

// 表单
const ruleFormRef = ref(null);
const ruleForm = ref({
    subject: '',
    name: '',
    phone: '',
    content: ''
});
const rules = ref({
    subject: [{ required: true, message: '请输入主题', trigger: 'blur' }],
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
});

</script>

<style scoped lang="less">
@media screen and (min-width: 1401px) {

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

        .inner {
            width: 1400PX;
            color: #333;
            font-size: 15PX;
            padding: 15PX 15PX;
            list-style: none;
            background-color: #f5f5f5;
            border-radius: 4PX;
            box-sizing: border-box;
            margin: 0 auto;

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

        :deep(.el-breadcrumb__separator) {
            color: #333;
            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: #337ab7;
            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: #333;
        }

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

    .blueLine {
        width: 1400PX;
        height: 20PX;
        margin: 0 auto;
        background-color: #0e6ebe;
    }

    .internetMessage {
        width: 1400PX;
        height: auto;
        margin: 20PX auto;
        border-radius: 20PX;
        font-family: "微软雅黑";
        box-sizing: border-box;

        .internetMessage_title {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 40PX;
            line-height: 40PX;
            border-bottom: 1PX solid #ccc;

            .title {
                font-size: 22PX;
                color: #1476bd;

                a {
                    color: #1476bd;
                }
            }

            .liuyan {
                font-size: 16PX;
                color: #f00;

                a {
                    color: #f00;
                }
            }
        }

        .internetMessage_content {
            width: 97%;
            height: 450PX;
            margin-top: 20PX;
            height: auto;
            margin: 20PX auto;
            border: 1PX solid #ccc;
            border-radius: 10PX;
            padding: 20PX !important;

            .contentItem {
                width: 100%;
                height: auto;
                // margin-bottom: 5PX;

                .content_title {
                    display: flex;
                    width: 100%;
                    height: 40PX;
                    line-height: 40PX;

                    .name {
                        font-size: 16PX;
                        color: #333;
                    }

                    .title {
                        font-size: 17PX;
                        font-weight: bold;
                        color: #333;
                        padding: 0 10PX;
                    }

                    .time {
                        font-size: 16PX;
                        color: #333;
                    }
                }

                .content {
                    margin: 0;
                    height: auto;
                    line-height: 25PX;
                    font-size: 15PX;
                    color: #000;
                }

                .answer {
                    margin: 0;
                    height: auto;
                    line-height: 25PX;
                    font-size: 15PX;
                    color: #000;
                    font-weight: bold;

                    span {
                        color: #f00;
                    }
                }
            }
        }
    }

    // 分页器
    .pagination {
        width: 100%;
        height: 34PX;
        margin-left: 141PX;
        display: flex;
        justify-content: center;
        margin: 20PX 0;
        padding: 10PX 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: 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;
    }

    // 留言表单
    .formList {
        width: 1400PX;
        height: auto;
        margin: -20PX auto 10PX;
        padding: 0 140PX;
        border-radius: 20PX;
        font-family: "微软雅黑";
        box-sizing: border-box;

        :deep(.el-form-item__label) {
            height: 40PX;
            line-height: 40PX;
            justify-content: flex-start;
            color: #000;
            font-size: 15PX;
            font-weight: bold;
        }

        :deep(.el-input) {
            width: 300PX;
        }

        :deep(.el-textarea) {
            width: 900PX;
        }

        :deep(.el-textarea__inner) {
            width: 900PX;
        }

        :deep(.el-button),
        :deep(.el-button.is-round) {
            font-family: "微软雅黑";
            font-size: 14PX;
            padding: 8PX 15PX;
            background-color: #337ab7;
            border: none;

            &:hover {
                background-color: #286090;
            }
        }
    }

    .formList_pc_none {
        display: none;
    }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {

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

        .inner {
            width: 100%;
            color: #333;
            font-size: 15PX;
            padding: 15PX 15PX;
            list-style: none;
            background-color: #f5f5f5;
            border-radius: 4PX;
            box-sizing: border-box;
            margin: 0 auto;

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

        :deep(.el-breadcrumb__separator) {
            color: #333;
            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: #337ab7;
            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: #333;
        }

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

    .blueLine {
        width: 100%;
        height: 20PX;
        margin: 0 auto;
        background-color: #0e6ebe;
    }

    .internetMessage {
        width: 100%;
        height: auto;
        margin: 20PX auto;
        padding: 0 10PX;
        border-radius: 20PX;
        font-family: "微软雅黑";
        box-sizing: border-box;

        .internetMessage_title {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 40PX;
            line-height: 40PX;
            border-bottom: 1PX solid #ccc;

            .title {
                font-size: 22PX;
                color: #1476bd;

                a {
                    color: #1476bd;
                }
            }

            .liuyan {
                font-size: 16PX;
                color: #f00;

                a {
                    color: #f00;
                }
            }
        }

        .internetMessage_content {
            width: 100%;
            height: 450PX;
            margin-top: 20PX;
            height: auto;
            margin: 20PX auto;
            border: 1PX solid #ccc;
            border-radius: 10PX;
            padding: 10PX !important;
            box-sizing: border-box;

            .contentItem {
                width: 100%;
                height: auto;

                .content_title {
                    display: flex;
                    width: 100%;
                    height: 40PX;
                    line-height: 40PX;

                    .name {
                        font-size: 16PX;
                        color: #333;
                    }

                    .title {
                        font-size: 17PX;
                        font-weight: bold;
                        color: #333;
                        padding: 0 10PX;
                    }

                    .time {
                        font-size: 16PX;
                        color: #333;
                    }
                }

                .content {
                    margin: 0;
                    height: auto;
                    line-height: 25PX;
                    font-size: 15PX;
                    color: #000;
                }

                .answer {
                    margin: 0;
                    height: auto;
                    line-height: 25PX;
                    font-size: 15PX;
                    color: #000;
                    font-weight: bold;

                    span {
                        color: #f00;
                    }
                }
            }
        }
    }

    // 分页器
    .pagination {
        width: 100%;
        height: 34PX;
        margin-left: 141PX;
        display: flex;
        justify-content: center;
        margin: 20PX 0;
        padding: 10PX 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: 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;
    }

    // 留言表单
    .formList {
        width: 100%;
        height: auto;
        margin: -20PX auto 10PX;
        padding: 0 140PX;
        border-radius: 20PX;
        font-family: "微软雅黑";
        box-sizing: border-box;

        :deep(.el-form-item__label) {
            height: 40PX;
            line-height: 40PX;
            justify-content: flex-start;
            color: #000;
            font-size: 15PX;
            font-weight: bold;
        }

        :deep(.el-input) {
            width: 60%;
        }

        :deep(.el-textarea) {
            width: 100%;
        }

        :deep(.el-textarea__inner) {
            width: 100%;
        }

        :deep(.el-button),
        :deep(.el-button.is-round) {
            font-family: "微软雅黑";
            font-size: 14PX;
            padding: 8PX 15PX;
            background-color: #337ab7;
            border: none;

            &:hover {
                background-color: #286090;
            }
        }
    }

    .formList_pc_none {
        display: none;
    }
}

@media screen and (max-width: 800px) {

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

        .inner {
            width: 100%;
            color: #333;
            font-size: 30px;
            padding: 30px;
            list-style: none;
            background-color: #f5f5f5;
            border-radius: 4px;
            box-sizing: border-box;

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

        :deep(.el-breadcrumb__separator) {
            color: #333;
            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: #337ab7;
            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: #333;
        }

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

    .blueLine {
        width: 100%;
        height: 20px;
        margin: 0 auto;
        background-color: #0e6ebe;
    }

    .internetMessage {
        width: 100%;
        height: auto;
        margin: 40px auto;
        border-radius: 40px;
        font-family: "微软雅黑";
        box-sizing: border-box;

        .internetMessage_title {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 80px;
            line-height: 80px;
            border-bottom: 2px solid #ccc;

            .title {
                font-size: 44px;
                color: #1476bd;

                a {
                    color: #1476bd;
                }
            }

            .liuyan {
                font-size: 32px;
                color: #f00;

                a {
                    color: #f00;
                }
            }
        }

        .internetMessage_content {
            width: 97%;
            margin-top: 40px;
            height: auto;
            margin: 40px auto;
            border: 2px solid #ccc;
            border-radius: 20px;
            padding: 20px !important;
            box-sizing: border-box;

            .contentItem {
                width: 100%;
                height: auto;
                margin-bottom: 20px;

                .content_title {
                    width: 100%;
                    margin-bottom: 5px;

                    .name {
                        font-size: 32px;
                        color: #333;
                    }

                    .title {
                        font-size: 34px;
                        font-weight: bold;
                        color: #333;
                        padding: 0 20px;
                    }

                    .time {
                        font-size: 32px;
                        color: #333;
                    }
                }

                .content {
                    margin: 0;
                    height: auto;
                    line-height: 50px;
                    font-size: 32px;
                    color: #000;
                    margin-bottom: 5px;
                }

                .answer {
                    margin: 0;
                    height: auto;
                    line-height: 50px;
                    font-size: 32px;
                    color: #000;
                    font-weight: bold;
                    margin-bottom: 5px;

                    span {
                        color: #f00;
                    }
                }
            }
        }
    }

    // 分页器
    .pagination {
        width: 100%;
        height: 68px;
        margin-left: 282px;
        display: flex;
        justify-content: center;
        margin: 40px 0;
        padding: 10px 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;
    }

    // 留言表单
    .formList {
        width: 100%;
        height: auto;
        margin: -20px auto 10px;
        padding: 0 100px;
        border-radius: 20px;
        font-family: "微软雅黑";
        box-sizing: border-box;

        :deep(.el-form-item) {
            display: block;
        }

        :deep(.el-form-item__label) {
            height: 70px;
            line-height: 70px;
            justify-content: flex-start;
            color: #000;
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        :deep(.el-input) {
            width: 100%;
            font-size: 30px;
            height: 70px;
            border: none;
            border-radius: 10px;
            color: #333;
        }

        :deep(.el-textarea) {
            width: 100%;

        }

        :deep(.el-textarea__inner) {
            width: 100%;
            height: 200px;
            font-size: 30px;
        }

        :deep(.el-button),
        :deep(.el-button.is-round) {
            font-family: "微软雅黑";
            font-size: 28px;
            padding: 32px 60px;
            background-color: #337ab7;
            border: none;

            &:hover {
                background-color: #286090;
            }
        }

        // 错误提示
        :deep(.el-form-item__error) {
            color: var(--el-color-danger);
            font-size: 28px;
            left: 0;
            line-height: 1;
            padding-top: 2px;
            position: absolute;
            top: 100%;
        }
    }

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