From c6e567215be6a86cd693af20d85172e270829a4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=86=E9=92=B1=E8=90=BD=E5=B0=BD=E6=A7=BF=E8=8A=B1?=
 =?UTF-8?q?=E7=A8=80?= <2675540038@qq.com>
Date: Wed, 2 Jul 2025 17:47:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AppHome.vue       |  10 +-
 components/AppRegiment.vue   |  10 +-
 pages/messageBoard/index.vue | 556 +++++++++++++++++++++--------------
 3 files changed, 339 insertions(+), 237 deletions(-)

diff --git a/components/AppHome.vue b/components/AppHome.vue
index 7be6652..b25016e 100644
--- a/components/AppHome.vue
+++ b/components/AppHome.vue
@@ -36,7 +36,7 @@
                     <div class="re_box">
                         <div class="flex justify-between align-center w-full ">
                             <img class="re_top_img" :src="`/img/index/wzjx.png`"></img>
-                            <div class="pr-[20px] more_j" @click="toMore">
+                            <div class="pr-[20px] more_j" @click="toMore(3)">
                                 <span>更多</span>
                                 <img src="/img/index/more_j.png" alt=""
                                     style="width: 8px;height: 13px;margin-left: 10px;"></img>
@@ -71,7 +71,7 @@
                                     <div v-if="listIndex == item.id" class="t_line"></div>
                                 </div>
                             </div>
-                            <div class="pr-[20px]" style="display: flex;align-items: center;">
+                            <div class="pr-[20px]" @click="toMore(3)" style="display: flex;align-items: center;cursor: pointer;">
                                 <span style="color: #999999;">更多</span>
                                 <img src="/img/index/more_j.png" alt=""
                                     style="width: 8px;height: 13px;margin-left: 5px;"></img>
@@ -104,7 +104,7 @@
                                     通知公告
                                 </div>
                             </div>
-                            <div class="pr-[20px]" style="display: flex;align-items: center;">
+                            <div class="pr-[20px]" @click="toMore(3)" style="display: flex;align-items: center;cursor: pointer;">
                                 <span style="color: #999999;">更多</span>
                                 <img src="/img/index/more_j.png" alt=""
                                     style="width: 8px;height: 13px;margin-left: 5px;"></img>
@@ -346,8 +346,8 @@ const toSearch = () => {
     window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
 }
 // 查看更多
-const toMore = () => {
-    emit('toSwpe', 3);
+const toMore = (index:number) => {
+    emit('toSwpe', index);
 }
 const bstList = ref([
     { title: "中国共产主义青年团的性质是什么?", id: 5969 },
diff --git a/components/AppRegiment.vue b/components/AppRegiment.vue
index 8cabdcc..3a56f2e 100644
--- a/components/AppRegiment.vue
+++ b/components/AppRegiment.vue
@@ -2,8 +2,6 @@
     <!-- PC端布局 -->
     <div class="flex justify-between w-full h-full">
         <!-- 左边导航栏 -->
-
-
         <!-- 右边内容栏 -->
         <div class="rightcon">
             <div class="flex top_search ">
@@ -64,7 +62,7 @@
                                             热门百科
                                         </div>
                                     </div>
-                                    <div class="pr-[5px]" style="display: flex;align-items: center;">
+                                    <div class="pr-[5px]" @click="toMore()" style="display: flex;align-items: center;cursor: pointer;">
                                         <span style="color: #999999;">更多</span>
                                         <img src="/img/index/more_j.png" alt=""
                                             style="width: 8px;height: 13px;margin-left: 5px;"></img>
@@ -97,7 +95,7 @@
                                             国务院百事通
                                         </div>
                                     </div>
-                                    <div class="pr-[20px]" style="display: flex;align-items: center;">
+                                    <div class="pr-[20px]" @click="toMore()" style="display: flex;align-items: center;cursor: pointer;">
                                         <span style="color: #999999;">更多</span>
                                         <img src="/img/index/more_j.png" alt=""
                                             style="width: 8px;height: 13px;margin-left: 5px;"></img>
@@ -163,6 +161,10 @@ onMounted(() => {
 })
 const emit = defineEmits(['toSwpe'])
 
+const toMore = () => {
+    window.open(`/messageBoard`)
+}
+
 //跳转详情
 const openUrl = (id: number) => {
     window.open(`/info/${id}?type=1`)
diff --git a/pages/messageBoard/index.vue b/pages/messageBoard/index.vue
index cb6f916..360c7d9 100644
--- a/pages/messageBoard/index.vue
+++ b/pages/messageBoard/index.vue
@@ -2,81 +2,80 @@
     <!-- PC端布局 -->
     <div class="flex justify-between w-full h-full">
         <!-- 左边导航栏 -->
-        <AppHeader></AppHeader>   
+
+        <AppHeader></AppHeader>
 
         <!-- 右边内容栏 -->
         <div class="rightcon">
             <div class="flex top_search ">
-                <div style="width: 572px;height: 69px;margin-left: 415px;">
+                <div style="width: 350px;">
                     <img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
                 </div>
-                <!-- <div class="inputform">
+                <div class="inputform">
                     <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
                         placeholder="请输入搜索关键字" />
-                    <div class="search_rinput">
+                    <div class="search_rinput" @click="toSearch">
                         <img src="/img/index/hmsearch.png" alt="">
                     </div>
-                </div> -->
+                </div>
             </div>
-            <div class="flex flex-col w-full h-full" style="width: 1300px;margin: 0 auto;">
-                <div
-                    style="z-index: 1;background: #ffffff;padding: 30px;border-radius: 16px;margin-top: 20px;margin-left: 100px;">
-                    <div class="liuyanba">团团留言板</div>
-                    <form class="contactForm w-full" @submit.prevent="submitForm">
-                        <div class="inputforms">
-                            <span>姓名</span>
-                            <input v-model="formData.name"
-                                class="contactInputs  mt-[15px] md:mt-[30px] w-full md:w-[600px]" type="text"
-                                placeholder="输入您的姓名" />
-                            <span>电话</span>
-                            <input v-model="formData.mobile"
-                                class="contactInputs mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[600px]"
-                                type="text" placeholder="请输入您的联系电话" />
-                            <span>邮箱</span>
-                            <input v-model="formData.emil"
-                                class="contactInputs mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[600px]"
-                                type="text" placeholder="请输入您的邮箱" />
-                        </div>
-                        <div class="relative mt-4 md:mt-8 w-full md:w-[1100px] flex">
-                            <span style="width: 60px;text-align: right;padding-right: 10px;">描述</span>
-                            <textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息"
-                                rows="5" maxlength="100"></textarea>
-                        </div>
-                        <button type="submit" class="contactBut">
-                            {{ '提交' }}
-                        </button>
-                    </form>
+            <div class="top_bar">
+                <div style="background: #ffffff;width: 100%;display: flex;align-items: center;padding: 18px;">
+                    <div>
+                        <img :src="`/img/key.png`" style="width: 22px;height: 22px;">
+                    </div>
+                    <div style="font-size: 18px;color: #323232;margin-left: 10px;">当前位置：首页 > 服务青年 > <span
+                            style="color: #3B90DF;">团务百科</span></div>
                 </div>
-                <div class="re_top">
-                    <div class="re_col" style="margin-left: 100px;"></div>
-                    <div class="re_tit">精选留言</div>
-                    <div class="re_col"></div>
+            </div>
+            <div class="News_box">
+                <div class="lef_box">
+                    <!-- @click="getMesList(null)" 新闻动态总 -->
+                    <div class="lef_boxitem1">
+                        <div class="lef_boxitem1_shu"></div>
+                        <div class="lef_boxitem1_title">团务百科</div>
+                    </div>
+                    <div :class="['lef_boxitem2', { 'active': cateid == item.id }]" v-for="(item, index) in newsListtyp"
+                        :key="index" @click="getMesList(item.id, 1)">
+                        <div class="lef_boxitem2_title">{{ item.name }}</div>
+                    </div>
                 </div>
-                <div class="flex justify-between ml-[100px]">
-                    <div class="re_list" v-for="item, index in liuyanList">
-                        <div style="margin: 30px;">
-                            <div class="re_list_tit flex" style="width: 100%;">
-                                <span style="width: 12%">问题：</span>
-                                <span style="color: #323232;width:90% ;">{{ item.question }}</span>
+                <div class="rig_box">
+                    <div class="re_box">
+                        <div class="re_box_item" v-for="(item, index) in MesList" :key="index"
+                            @click="openUrl(item.id)">
+                            <div class="re_title">
+                                <div class="dian"></div>
+                                <span class="one-line-ellipsis">{{ item.title }}</span>
                             </div>
-                            <div class="re_list_tit flex" style="margin-top: 15px;width: 100%;">
-                                <span style="width: 12%">描述：</span>
-                                <span :title="item.message" class="three-line-ellipsis"
-                                    style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.message
-                                    }}</span>
-                            </div>
-                            <div class="re_list_tit flex" style="margin-top: 15px;">
-                                <span style="color: #368FDF;width: 12%;">回复：</span>
-                                <span :title="item.answer" class="two-line-ellipsis"
-                                    style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.answer
-                                    }}</span>
+                            <div class="re_date">
+                                <div class="shu"></div>
+                                <div class="right_tex">
+                                    <span class="span1">{{ item.release_time_text.slice(8, 10) }}</span>
+                                    <span class="span2">{{ item.release_time_text.slice(0, 7) }}</span>
+                                </div>
                             </div>
                         </div>
                     </div>
+
+                    <!-- 分页 -->
+
                 </div>
+
+            </div>
+            <div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;">
+                <n-pagination v-model:page="page" :page-sizes="[7]" :item-count="total" size="medium"
+                    @update:page="getPageList" show-quick-jumper>
+                    <template #goto>
+                        到第
+                    </template>
+                    <template #prefix="{ itemCount }">
+                        共 {{ itemCount }} 条
+                    </template>
+                </n-pagination>
             </div>
 
-
+            <AppFooter></AppFooter>
             <!-- 右分享 -->
             <!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
             <img :src="`/img/index/douyin.png`" alt="">
@@ -85,7 +84,7 @@
             <img :src="`/img/index/blbl.png`" alt="">
         </div> -->
             <!-- 底部鼠标 -->
-            <!-- <div style="position: absolute;bottom: 30px;right:30px;">
+            <!-- <div class="mouse_img">
                 <img :src="`/img/index/hmouse.png`" alt="">
             </div> -->
         </div>
@@ -93,97 +92,85 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref } from 'vue'
+import { defineEmits } from 'vue'
+import { NPagination } from 'naive-ui'
 import $api from '@/service/webRequest'
+import emitter from '@/plugins/emitter'
 const inputSearch = ref('');
-// 表单数据
-const formData = reactive({
-    name: '',
-    mobile: '',
-    emil: '',
-    message: ''
-})
+const MesList = ref([]);
+const newsListtyp = ref([]);
+const page = ref(1);
 const total = ref(0);
-const liuyanList = ref([]);
+const cateid = ref(null);
+const detailId = ref(null);
 
-const getLiuyanList = async () => {
-    const res = await $api.post('/api/home.leave_word/index',
+// 信息公开
+onMounted(() => {
+    getMesList();
+    getNewstypeList();
+})
+const emit = defineEmits(['toSwpe'])
+
+//跳转详情
+const openUrl = (id: number) => {
+    window.open(`/info/${id}?type=1`)
+}
+//跳转详情
+// const gotoDetail = (id: number) => {
+//     detailId.value = {
+//         id: id,
+//         type: '1'
+//     };
+//     localStorage.setItem('detailId', JSON.stringify(detailId.value));
+//     emit('toSwpe',6)
+//     emitter.emit('detailId', detailId.value);
+// }
+//搜索
+const toSearch = () => {
+    // emit('toSwpe',9);
+    // emitter.emit('inputSea', {
+    //     keywords:inputSearch.value,
+    //     type: 1,
+    // });
+    window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
+}
+const getPageList = async () => {
+    page.value = page.value;
+    getMesList();
+}
+const getMesList = async (id: number, pagecru: number) => {
+    cateid.value = id ? id : cateid.value;
+    page.value = pagecru ? pagecru : page.value;
+    const res = await $api.post('/api/home.news/index',
         {
-            limit: 2,
-            page: 1,
-            status: 2,
-            show: 1
-
+            cate_id: cateid.value,
+            limit: 9,
+            page: page.value,
+            isnews: 1
         }
     )
     total.value = res.data.data.count;
-    liuyanList.value = res.data.data.list;
+    MesList.value = res.data.data.list;
 }
-onMounted(() => {
-    getLiuyanList();
-})
-// 表单方法
-const submitForm = () => {
-    console.log(formData);
-
-    // 这里可以添加表单验证逻辑
-    if (!formData.name) {
-        alert('请输入您的姓名')
-        return
-    }
-
-    if (!formData.mobile) {
-        alert('请输入您的手机号码')
-        return
-    }
-
-    if (!formData.emil) {
-        alert('请输入您的邮箱')
-        return
-    }
-
-    if (!formData.message) {
-        alert('请输入您的留言内容')
-        return
-    }
-    $api.post("/api/home.leave_word/add", formData)
-        .then((res: any) => {
-            console.log(res)
-            if (res.status == 200) {
-                alert('留言成功')
-            } else {
-                alert('失败')
-            }
-            formData.name = '';
-            formData.mobile = '';
-            formData.emil = '';
-            formData.message = '';
-        })
-        .catch((err) => {
-            console.dir(err)
-        })
-    // 重置表单
-    // formData.name = ''
-    // formData.mobile = ''
-    // formData.content = ''
+const getNewstypeList = async () => {
+    const res = await $api.get('/api/home.news/cate?isnews=1')
+    newsListtyp.value = res.data.data.list;
 }
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/index.scss';
 
+
 /* pc端样式 */
+
 .rightcon {
-    width:100%;
-    height:100%;
-    background-image: url('/img/messageb.png');
+    width: 100%;
+    height: 100%;
+    background-image: url('/img/index/rightcons.png');
     background-size: 100% 100%;
-    min-height: 919px;
-    .fiximg {
-        img {
-            margin-bottom: 20px;
-        }
-    }
+    overflow-y: auto;
+    position: absolute;
 }
 
 .top_search {
@@ -191,12 +178,13 @@ const submitForm = () => {
     height: 70px;
     justify-content: space-between;
     align-items: center;
+    margin-left: 415px;
+    width: 1200px;
 }
 
 .inputform {
     position: relative;
     width: 340px;
-    margin-right: 319px;
 }
 
 .contactInput {
@@ -219,7 +207,7 @@ const submitForm = () => {
 .search_rinput {
     width: 68px;
     height: 50px;
-    background: #E6E6E6;
+    background: #338CDE;
     border-radius: 0px 8px 8px 0px;
     position: absolute;
     top: 0;
@@ -229,125 +217,237 @@ const submitForm = () => {
     align-items: center;
 }
 
-//------------------------------------------
-.liuyanba {
-    width: 1200px;
-    /* height: 22px; */
+.News_box {
+    display: flex;
+    justify-content: space-between;
+    width: 1300px;
     margin: 0 auto;
-    font-family: Microsoft YaHei UI;
-    font-weight: bold;
-    font-size: 22px;
-    color: #358DDE;
-}
 
-.contactForm {
-    width: 100%;
-    margin-left: 30px;
+    .lef_box {
+        width: 260px;
+        height: 100%;
+        margin-top: 20px;
+        margin-left: 100px;
 
-    .inputforms {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 1100px;
+        .lef_boxitem1 {
+            width: 260px;
+            height: 64px;
+            background: linear-gradient(0deg, #338CDE 0%, #3D92E0 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-        span {
-            width: 50px;
-            margin-top: 30px;
-            margin-left: 20px;
-            height: 100%;
+            // cursor: pointer;
+            .lef_boxitem1_title {
+                width: 88px;
+                // height: 22px;
+                font-family: Microsoft YaHei UI;
+                font-weight: bold;
+                font-size: 22px;
+                color: #FFFEFE;
+            }
+
+            .lef_boxitem1_shu {
+                width: 4px;
+                height: 25px;
+                background: #FFFFFF;
+                margin-right: 20px;
+            }
+        }
+
+        .lef_boxitem2 {
+            width: 260px;
+            height: 64px;
+            background: #FFFFFF;
+            color: #323232;
+            display: flex;
+            align-items: center;
+            margin-top: 10px;
+            cursor: pointer;
+
+            .lef_boxitem2_title {
+                width: 100%;
+                // height: 19px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                font-size: 20px;
+                text-align: center;
+            }
+
+            &:hover {
+                background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
+                color: #3A91DF;
+
+            }
+
+            &.active {
+                background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
+                color: #3A91DF;
+            }
         }
     }
 
-}
+    .rig_box {
+        width: 921px;
 
-.contactInputs {
-    width: 380px;
-    height: 50px;
-    background: #FFFFFF;
-    border-radius: 6px;
-    padding-left: 20px;
-    border: 1px solid #999999;
-}
+        .re_box {
+            width: 100%;
+            margin: 0 auto;
+            margin-top: 20px;
+            // padding-left: 60px;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-content: flex-start;
+            gap: 10px;
 
-.contactInputs::placeholder {
-    color: #768597;
-}
+            .re_box_item {
+                width: 100%;
+                height: 90px;
+                background: #FFFFFF;
+                border: 1px solid #EEF7FF;
+                padding: 20px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
 
-.contactInputs:focus {
-    outline: none;
-}
+                .re_title {
+                    // width: 640px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 18px;
+                    color: #323232;
+                    display: flex;
+                    align-items: center;
 
-#myTextarea {
-    width: 1100px;
-    height: 167px;
-    background: #FFFFFF;
-    border-radius: 6px 6px 6px 6px;
-    opacity: 0.8;
-    padding-left: 10px;
-    padding-top: 10px;
-    resize: none;
-    border: 1px solid #999999;
-}
+                    .dian {
+                        width: 10px;
+                        height: 10px;
+                        background: #3B90DF;
+                        border-radius: 50%;
+                        margin-right: 15px;
+                    }
+                }
 
-#myTextarea::placeholder {
-    color: #768597;
-}
+                .re_date {
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #368BDB;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
 
-#myTextarea:focus {
-    outline: none;
-}
+                    .shu {
+                        background: #EEEEEE;
+                        width: 1px;
+                        height: 50px;
+                        margin-right: 20px;
+                    }
 
-.contactBut {
-    width: 140px;
-    border-radius: 4px 4px 4px 4px;
-    // position: absolute;
-    // bottom: 20px;
-    // right: 30px;
-    height: 50px;
-    margin-top: 20px;
-    margin-left: 50px;
-    background: linear-gradient(0deg, #338CDE 0%, #469CE2 100%);
-    border: none;
-    font-weight: bold;
-    font-size: 18px;
-    color: #FFFFFF;
-}
+                    .right_tex {
+                        display: flex;
+                        flex-direction: column;
+                        width: 80px;
+                        text-align: center;
 
-.re_top {
-    width: 100%;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 20px;
+                        .span1 {
+                            width: 100%;
+                            font-family: Microsoft YaHei;
+                            font-weight: 600;
+                            font-size: 22px;
+                            color: #378EDF;
+                        }
 
-    .re_tit {
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        font-size: 36px;
-        color: #4E3C3C;
-        margin: 0 30px;
-    }
+                        .span2 {
+                            width: 100%;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            font-size: 16px;
+                            color: #378EDF;
+                        }
+                    }
+                }
+
+                &:hover {
+                    background-image: url('/img/listbg.png');
+                    background-size: 100% 100%;
+                    cursor: pointer;
+
+                    .re_date {
+                        .shu {
+                            background: #FFFFFF;
+                        }
+                    }
+                }
+            }
+        }
 
-    .re_col {
-        width: 78px;
-        height: 3px;
-        background: #348CDD;
     }
 }
 
-.re_list {
-    width: 585px;
-    height: 243px;
-    margin-top: 20px;
-    background: #FFFFFF;
-    border-radius: 8px;
+.pages_tsw {
+    padding:30px 0px 0px 270px;
+    :deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
+        color: #ffffff;
+        background-color: #388FDF;
+        border: 1px solid #388FDF;
+    }
 
-    .re_list_tit {
-        font-family: Microsoft YaHei;
-        font-weight: bold;
+    :deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button) {
+        color: #999999;
+    }
+
+    :deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover) {
+        color: #388FDF;
+        // border: 1px solid #388FDF;
+    }
+
+    :deep(.n-pagination .n-pagination-item--active:hover) {
+        color: #ffffff !important;
+        // border: 1px solid #388FDF;
+    }
+
+    :deep(.n-pagination .n-pagination-item) {
+        border: none;
+        width: 42px;
+        height: 30px;
         font-size: 18px;
-        color: #FFA234;
+        background: #FFFFFF;
+    }
+
+    :deep(.n-pagination-quick-jumper) {
+        &:after {
+            content: '页'
+        }
+    }
+}
+.top_bar {
+    margin: 0px auto;
+    width: 1300px;
+    padding-left: 100px;
+    padding-top: 50px;
+}
+@media (max-width: 1440px) {
+    .top_search {
+        width: 920px;
+        margin-left: 373px;
+
+    }
+
+    .News_box {
+        width: 1032px;
+        margin-left: 270px;
+    }
+
+    .rig_box {
+        width: 650px !important;
+    }
+    .top_bar {
+        margin: 0px;
+        width: 1032px;
+        margin-left: 270px;
     }
 }
 </style>