九宫格相关跳转链接的实现

src/router/router.config.js

@@ -217,6 +217,29 @@ export const constantRouterMap = [
     name: 'dynamic',
     component: () => import('@/views/dynamic'),
     meta: { title: '动态详情', keepAlive: false }
+  },
+  {
+    path: '/govAffairs',
+    name: 'govAffairs',
+    component: () => import('@/views/govAffairs'),
+    meta: { title: '政务办理', keepAlive: false }
+  },
+  {
+    path: '/supervision',
+    name: 'supervision',
+    component: () => import('@/views/supervision'),
+    meta: { title: '民主监督', keepAlive: false }
+  },
+  {
+    path: '/employment',
+    name: 'employment',
+    component: () => import('@/views/employment'),
+    meta: { title: '就业服务', keepAlive: false }
+  },{
+    path: '/checklist',
+    name: 'communityPublicity',
+    component: () => import('@/views/communityPublicity'),
+    meta: { title: '一次办结清单', keepAlive: false }
   }
   
 ]

src/views/employment/index.vue

@@ -0,0 +1,311 @@
+<template>
+    <div>
+        <div class="flex flex-mean" style="background-color: #FFFFFF;">
+            <van-search class="flex flex-1" v-model="searchValue" shape="round" placeholder="请输入搜索关键词">
+                <template #action>
+
+                </template>
+            </van-search>
+            <van-button round type="info" class="custom-button font-size13 m-top10 m-right12" @click="handleSearch">查询</van-button>
+
+        </div>
+
+        <div class="card m-top10">
+            <div class="title">
+                <span>就业平台</span>
+            </div>
+            <div class="grid-container nav flex-mean m-top18">
+                <div class="flex-y flex flex-center1 flex-center2 nav font-size12" v-for="(item, index) in squaredList"
+                    @click="handelClickJump(item.path,'tab')" :key="index">
+                    <img :src="item.imgSrc" alt="">
+                    <span >{{ item.title }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class='container'>
+                    <div class="flex flex-y flex1 flex-end" v-if="PublicityList.length !== 0">
+                        <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
+                            @load="communityPublicity" class="card" :offset="50">
+                            <div class="activity_content flex flex-y" v-for="(item, index) in PublicityList"
+                                :key="index" @click="toDetail(item)">
+                                <div class="flex  flex1 oh">
+                                    <div class="flex flex-y flex1 m-right10 oh">
+                                        <span class="van-multi-ellipsis--l2 text1" style="line-height: 28px;">
+                                            {{ item.title }}
+                                        </span>
+                                        <div class="flex flex-end text2">
+                                            <span class="van-ellipsis y66666 font-size15">
+                                            {{ item.newContent }}    </span>
+                                    
+                                        <div class="">{{ item.releaseTime }}</div>
+                                        </div>
+                                
+                                    </div>
+                                    <img v-if="item.coverPic" :src="item.coverPic" style="width: 130px;height: 100px;border-radius: 20;"
+                                        alt="">
+                                </div>
+                                <div class="flex flex-end flex-center gray m-top10 font-size13">
+                                    <!-- <div class="flex flex-center"><img src="@/assets/images/icons/support.png" alt=""
+                                            class="img_16 m-right7"><span>{{ item.likes || 0 }}</span>
+                                    </div> -->
+                            
+                                </div>
+                            </div>
+                        </van-list>
+                    </div>
+                    <div v-else class="no-data">
+                        暂无数据~
+                    </div>
+
+        </div>
+        <Android></Android>
+    </div>
+
+
+</template>
+
+<script>
+import { advertisingTag, communityPublicity } from '@/api/home';
+export default {
+    data() {
+        return {
+            PublicityList: [],
+            tagList: [],
+            tagActive: 'new',
+            tagId: null,
+            pageSize: 5,
+            pageNo: 1,
+            agencyId: null,
+            finished: false,
+            loading: true,
+            showRegister: false,
+            searchValue: "",
+
+            squaredList:[
+                {
+                    imgSrc: require('@/assets/images/squaredPaper/12.png'),
+                    title: '菏泽继续教育',
+                    path: 'govAffairs'
+                },
+                {
+                    imgSrc: require('@/assets/images/squaredPaper/2.png'),
+                    title: '菏泽人才网',
+                    path: 'communityPublicity'
+                },
+                {
+                    imgSrc: require('@/assets/images/squaredPaper/3.png'),
+                    title: '携程',
+                    path: 'communityPublicity'
+                }
+            ],
+        };
+    },
+    created() {
+        this.agencyId = this.$route.query.agencyId?this.$route.query.agencyId: this.$store.state.app.agencyId;
+        this.advertisingTag();//获取社区讯息菜单
+        this.communityPublicity()//获取讯息列表
+    },
+    methods: {
+        toDetail(item){
+            this.$router.push({name:'communityPublicityDetail',query:{id:item.id}})
+        },
+        handleSearch(){
+            this.PublicityList = [];
+            this.pageNo = 1;
+            this.communityPublicity()
+        },
+        filterTagId(tagId) {
+            return this.tagList.filter(item => item.id === tagId)[0].tagName || '--';
+        },
+        async advertisingTag() {
+            let parm = {
+                pageSize: 10,
+                pageNo: 1,
+                status: 1,
+                tagName: null
+            }
+            let res = await advertisingTag(parm)
+            if (res.code === 0) {
+                this.tagList = res.data.list;
+                this.tagList.unshift({ tagName: '最新', id: 'new' })
+            }
+        },
+        async communityPublicity() {
+            let parm = {
+                pageSize: 10,
+                pageNo: 1,
+                title: this.searchValue,
+                tagId: this.tagId,
+                startTime: '',
+                endTime: '',
+                agencyId: this.agencyId,
+                status:1
+            }
+            let res = await communityPublicity(parm)
+            if (res.code === 0) {
+                this.loading = false;
+                res.data.list.forEach(item => {
+                    if (item.content) {
+                        item.newContent = this.extractChineseCharactersAndPunctuation(item.content)
+                    }
+                })
+                if (!res.data || res.data.list.length < this.pageSize) {
+                    this.finished = true;
+                }
+                this.PublicityList = this.PublicityList.concat(res.data.list);
+            }
+        },
+        extractChineseCharactersAndPunctuation(str) {
+            const chineseCharsAndPunctuation = str.match(/[\u4e00-\u9fa5\u3000-\u303F\uff00-\uffef]/g);
+            return chineseCharsAndPunctuation ? chineseCharsAndPunctuation.join('') : '';
+        },
+        handelChangeTags(val, title) {
+            this.PublicityList = [];
+            if (val !== 0) {
+                this.tagId = this.tagList[val].id;
+            } else {
+                this.tagId = '';
+            }
+            this.communityPublicity()
+        },
+    },
+    components: {},
+    computed: {},
+    watch: {},
+}
+</script>
+
+<style lang='less' scoped>
+.text2{
+    font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 12px;
+        color: #999999;
+        line-height: 48px;
+}
+.text1{
+    font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 20px;
+        color: #000000;
+        line-height: 44px;
+}
+.custom-button {
+    width: 60px;
+    height: 33px;
+}
+
+.activity_content {
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    width: 100%;
+    border-bottom: 1px solid #EAEAEA;
+    margin-top: 14px;
+    min-height: 50px;
+
+    .img {
+        width: 231px;
+        height: 33px;
+        margin: 5px 3px 0 3px;
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+
+    .content {
+
+        width: 325px;
+        height: 40px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+        line-height: 23px;
+    }
+
+    .dianzan {
+        width: 325px;
+        height: 20px;
+        display: flex;
+        font-size: 13px;
+        color: #AAAAAA;
+        flex-direction: row;
+        justify-content: space-evenly;
+        align-items: center;
+
+        .img {
+            width: 14.5px;
+            height: 15px;
+        }
+    }
+
+
+}
+
+.header {}
+
+.header .input_search {
+    width: 279px;
+    height: 33px;
+    background: rgba(193, 193, 193, 0.16);
+    border-radius: 17px;
+    // flex: 1;
+    color: #333333;
+    border: none;
+    /* 取消边框 */
+    margin-left: 10px;
+}
+
+.header .btn_search {
+    width: 60px;
+    height: 33px;
+    background: #3974F6;
+    border-radius: 17px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 23px;
+    border: none;
+    /* 取消边框 */
+    margin-right: 10px;
+}
+::v-deep .van-search__content {
+  background-color: white; 
+  border: 1px solid #3974F6; 
+}
+
+::v-deep .van-search__input {
+  color: #000; 
+}
+
+::v-deep .van-field__control::placeholder {
+  color: #A0A0A0; 
+}
+:deep(.van-field__control) {
+    font-size: 13px;
+}
+.van-tab__title {
+  padding: 5px 12px; /* 内边距调整 */
+  font-size: 14px; /* 字体大小 */
+}
+
+.van-tabs__nav {
+  justify-content: space-between; /* 平均分布 */
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); /* 每列4个 */
+    gap: 10px; /* 图片之间的间距 */
+    // padding: 16px;
+    align-items: start; /* 子元素顶对齐 */
+}
+
+.font-size12{
+    font-size: 12px;
+  }
+</style>

src/views/govAffairs/index.vue

@@ -0,0 +1,200 @@
+<template>
+    <div class="main-container">
+    <!-- 顶部搜索框 -->
+    <div class="search-bar">
+      <van-search class="search-input" left-icon="" shape="round" placeholder="请输入搜索关键词" />
+      <van-button round type="info" class="custom-button" @click="onSearch()">查询</van-button>
+    </div>
+
+    <!-- 主内容区域 -->
+    <div class="content-wrapper">
+      <!-- 左侧Tab栏，固定不动 -->
+      <div class="left-tab">
+        <div
+          v-for="(tab, index) in tabs"
+          :key="index"
+          :class="['tab-item', { active: activeTab === index }]"
+          @click="switchTab(index)"
+        >
+          {{ tab.name }}
+        </div>
+      </div>
+
+      <!-- 右侧内容区域：显示所有图标列表，可滚动 -->
+      <div class="right-content" ref="rightContent">
+        <div
+          v-for="(tab, index) in tabs"
+          :key="index"
+          class="icon-list"
+        >
+          <h3 class="tab-title" :ref="'tabTitle' + index">{{ tab.name }}</h3> <!-- 使用ref获取标题 -->
+          <div class="icon-item" v-for="(icon, iconIndex) in tab.icons" :key="iconIndex">
+            <img :src="icon.url" :alt="icon.name" class="icon-image" />
+            <div class="icon-name">{{ icon.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Android></Android>
+  </div>
+
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            activeTab: 0, // 当前激活的Tab索引
+            tabs: [
+                { 
+                name: "公积金服务", 
+                icons: [
+                    { name: "公积金账户信息查询", url: require('@/assets/images/govAffairs/gjjzh.png')},
+                    { name: "公积金账户明细", url: require('@/assets/images/govAffairs/mx.png')},
+                    { name: "公积金账户缴存明细", url: require('@/assets/images/govAffairs/jcmx.png')},
+                    { name: "公积金账户提取明细", url: require('@/assets/images/govAffairs/tqmx.png')}
+                ]
+                },
+                { 
+                name: "社保医保", 
+                icons: [
+                    { name: "医保电子凭证", url: require('@/assets/images/govAffairs/ybdz.png')},
+                    { name: "跨省异地就医备案", url: require('@/assets/images/govAffairs/ksyd.png')},
+                    { name: "医保机构查询", url: require('@/assets/images/govAffairs/ybjg.png')},
+                    { name: "定点零售药店", url: require('@/assets/images/govAffairs/ddls.png')}
+                ]
+                },
+                { 
+                name: "出入境服务", 
+                icons: [
+                ]
+                },
+                { 
+                name: "助残服务", 
+                icons: [
+                ]
+                },
+                { 
+                name: "执业资质", 
+                icons: [
+                ]
+                }
+            ]
+        };
+    },
+    created() {
+
+
+    },
+    methods: {
+        switchTab(index) {
+            this.activeTab = index;
+
+            // 获取标题的位置
+            const titleRef = this.$refs[`tabTitle${index}`];
+            if (titleRef && titleRef[0]) {
+                const topPosition = titleRef[0].offsetTop; // 获取标题的上边距
+                this.$refs.rightContent.scrollTo({
+                top: topPosition-100,
+                behavior: "smooth"
+                });
+            }
+        }
+        
+    },
+    components: {},
+    computed: {},
+    watch: {},
+}
+</script>
+
+<style lang='less' scoped>
+.main-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  background-color: #FFFFFF;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.search-input {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.custom-button {
+  font-size: 13px;
+}
+
+.content-wrapper {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.left-tab {
+  width: 100px;
+  background-color: #f0f0f0;
+  padding: 10px;
+  overflow-y: auto;
+  position: relative;
+}
+
+.tab-item {
+  padding: 10px;
+  cursor: pointer;
+  color: #333;
+  text-align: left;
+  padding-left: 10px;
+  transition: color 0.3s;
+  font-size: 16px;
+}
+
+.tab-item.active {
+  color: #007bff; /* 选中项字体为蓝色 */
+}
+
+.right-content {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  background-color: #fff;
+}
+
+.icon-list {
+  margin-bottom: 20px;
+}
+
+.tab-title {
+  margin: 20px 0 10px; /* 设置标题的上下边距 */
+  font-size: 18px; /* 设置标题字体大小 */
+  color: #333; /* 设置标题颜色 */
+}
+
+.icon-item {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+//   margin: 10px;
+  width: 30%;
+}
+
+.icon-image {
+  width: 50px;
+  height: 50px;
+}
+
+.icon-name {
+  margin-top: 5px;
+  font-size: 14px;
+  color: #333;
+}
+</style>

src/views/home2/index.less

@@ -74,3 +74,7 @@
     // background-image: url('@/assets/dialog_bg.png');
     // background-size: 100% 100%;
 }
+
+.font-size12{
+    font-size: 12px;
+  }

src/views/home2/index.vue

@@ -57,7 +57,7 @@
                     <span>服务中心</span>
                 </div>
                 <div class="grid-container nav flex-mean m-top18">
-                    <div class="flex-y flex flex-center1 flex-center2 nav font-size13 " v-for="(item, index) in squaredList"
+                    <div class="flex-y flex flex-center1 flex-center2 nav font-size12" v-for="(item, index) in squaredList"
                         @click="handelClickJump(item.path,'tab')" :key="index">
                         <img :src="item.imgSrc" alt="">
                         <span >{{ item.title }}</span>
@@ -145,7 +145,11 @@
         </div>
         <register-dialog v-if="showRegister" @close="showRegister = false" :registerFlag="registerFlag" :content="tipContent"></register-dialog>
     </div>
+    <van-popup v-model="showLaunch" round  v-if="mpObj">
+          <launch-weapp  :mpObj="mpObj"></launch-weapp>
+    </van-popup>
     </div>
+
 </template>
 
 <script>
@@ -153,6 +157,7 @@ import registerDialog from '@/components/registerDialog';
 import { communityActivity, icEventOldDiscuss, advertisingTag, communityPublicity,handelClicsupport,communityPublicityGiveLike } from '@/api/home';
 import { querystaffmessage } from '@/api/message';
 import { inspRecord } from '@/api/satisfaction';
+import launchWeapp from '@/components/launchWeapp/index'
 
 export default {
     data() {
@@ -162,7 +167,7 @@ export default {
                 {
                     imgSrc: require('@/assets/images/squaredPaper/1.png'),
                     title: '政务办理',
-                    path: 'communityPublicity'
+                    path: 'govAffairs'
                 },
                 {
                     imgSrc: require('@/assets/images/squaredPaper/2.png'),
@@ -172,12 +177,12 @@ export default {
                 {
                     imgSrc: require('@/assets/images/squaredPaper/3.png'),
                     title: '居民议事',
-                    path: 'communityPublicity'
+                    path: 'discussion'
                 },
                 {
                     imgSrc: require('@/assets/images/squaredPaper/4.png'),
                     title: '民生监督',
-                    path: 'communityPublicity'
+                    path: 'supervision'
                 },
                 {
                     imgSrc: require('@/assets/images/squaredPaper/5.png'),
@@ -192,7 +197,7 @@ export default {
                 {
                     imgSrc: require('@/assets/images/squaredPaper/7.png'),
                     title: '就业服务',
-                    path: 'communityPublicity'
+                    path: 'employment'
                 },
                 {
                     imgSrc: require('@/assets/images/squaredPaper/8.png'),
@@ -202,7 +207,7 @@ export default {
                 {
                     imgSrc: require('@/assets/images/squaredPaper/9.png'),
                     title: '网上缴费',
-                    path: 'communityPublicity'
+                    path: 'payfee'
                 },
                 {
                     imgSrc: require('@/assets/images/squaredPaper/10.png'),
@@ -212,12 +217,12 @@ export default {
                 {
                     imgSrc: require('@/assets/images/squaredPaper/11.png'),
                     title: '社区便利店',
-                    path: 'communityPublicity'
+                    path: 'store'
                 },
                 {
                     imgSrc: require('@/assets/images/squaredPaper/12.png'),
                     title: '一次办结清单',
-                    path: 'communityPublicity'
+                    path: 'checklist'
                 },
               
             ],
@@ -265,6 +270,8 @@ export default {
             pageNo: 1,
             list: {},
             questionnaireUrl:"",
+            mpObj:null,
+            showLaunch:false,
 
         };
     },
@@ -465,7 +472,7 @@ export default {
                 }
         },
         handelClickJump(path,item) {
-            if (path === 'event' || path === 'Enjoyableservices') {
+            if (path === 'event' || path === 'Enjoyableservices'|| path === 'payfee'|| path === 'store') {
                 if(path === 'event'){
                     if (this.$store.state.app.userInfo.mobile) {
                         this.$router.push({ path: `/${path}` });
@@ -483,6 +490,22 @@ export default {
                         this.showRegister = true;
                     }
                 }
+                if(path === 'payfee'){
+                    
+                    this.mpObj = {
+                        appid: "wxd2ade0f25a874ee2",
+                        url: "main/pages/nativeindex/nativeindex"
+                    };
+                    this.showLaunch = true;
+                }
+                if(path === 'store'){
+                    
+                    this.mpObj = {
+                        appid: "wxd2ade0f25a874ee2",
+                        url: "main/pages/nativeindex/nativeindex"
+                    };
+                    this.showLaunch = true;
+                }
             } else if(item){
                 this.$router.push({ path: `/${path}`,query:{id:item.id} })
             }else{
@@ -491,7 +514,7 @@ export default {
         },
         
     },
-    components: { registerDialog },
+    components: { registerDialog,launchWeapp },
     computed: {
         recordFlag(){
             return (item)=>{
@@ -530,4 +553,13 @@ export default {
 :deep(.van-field__control) {
     font-size: 13px;
 }
+:deep .van-popup{
+    width: 290px;
+    height: 244px;
+    padding-top: 15px;
+    box-sizing: border-box;
+    background: url('@/assets/images/houseQR/dialog_bg.png') no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+}
 </style>

src/views/supervision/index.vue

@@ -0,0 +1,330 @@
+<template>
+    <div>
+        <div class="flex flex-mean" style="background-color: #FFFFFF;">
+            <van-search class="flex flex-1" v-model="searchValue" shape="round" placeholder="请输入搜索关键词">
+                <template #action>
+                    <!-- 添加样式确保按钮显示，并设置合适的宽高和对齐 -->
+                    <!-- <div @click="onSearch"
+                        style="display: flex; align-items: center; justify-content: center; padding: 0 10px; cursor: pointer;">
+                        a搜索
+                    </div> -->
+                </template>
+            </van-search>
+            <van-button round type="info" class="custom-button font-size13 m-top10 m-right12" @click="handleSearch">查询</van-button>
+
+        </div>
+
+        <div class="card m-top10">
+            <div class="title">
+                <span>廉政平台</span>
+            </div>
+            <div class="grid-container nav flex-mean m-top18">
+                <div class="flex-y flex flex-center1 flex-center2 nav font-size12" v-for="(item, index) in squaredList"
+                    @click="handelClickJump(item.path,'tab')" :key="index">
+                    <img :src="item.imgSrc" alt="">
+                    <span >{{ item.title }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class='container'>
+                    <div class="flex flex-y flex1 flex-end" v-if="PublicityList.length !== 0">
+                        <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
+                            @load="communityPublicity" class="card" :offset="50">
+                            <div class="activity_content flex flex-y" v-for="(item, index) in PublicityList"
+                                :key="index" @click="toDetail(item)">
+                                <div class="flex  flex1 oh">
+                                    <div class="flex flex-y flex1 m-right10 oh">
+                                        <span class="van-multi-ellipsis--l2 text1" style="line-height: 28px;">
+                                            {{ item.title }}
+                                        </span>
+                                        <div class="flex flex-end text2">
+                                            <span class="van-ellipsis y66666 font-size15">
+                                            {{ item.newContent }}    </span>
+                                    
+                                        <div class="">{{ item.releaseTime }}</div>
+                                        </div>
+                                
+                                    </div>
+                                    <img v-if="item.coverPic" :src="item.coverPic" style="width: 130px;height: 100px;border-radius: 20;"
+                                        alt="">
+                                </div>
+                                <div class="flex flex-end flex-center gray m-top10 font-size13">
+                                    <!-- <div class="flex flex-center"><img src="@/assets/images/icons/support.png" alt=""
+                                            class="img_16 m-right7"><span>{{ item.likes || 0 }}</span>
+                                    </div> -->
+                            
+                                </div>
+                            </div>
+                        </van-list>
+                    </div>
+                    <div v-else class="no-data">
+                        暂无数据~
+                    </div>
+
+        </div>
+        <Android></Android>
+    </div>
+
+
+</template>
+
+<script>
+import { advertisingTag, communityPublicity } from '@/api/home';
+export default {
+    data() {
+        return {
+            PublicityList: [],
+            tagList: [],
+            tagActive: 'new',
+            tagId: null,
+            pageSize: 5,
+            pageNo: 1,
+            agencyId: null,
+            finished: false,
+            loading: true,
+            showRegister: false,
+            searchValue: "",
+
+            squaredList:[
+                {
+                    imgSrc: require('@/assets/images/squaredPaper/1.png'),
+                    title: '廉洁宁陵',
+                    path: 'govAffairs'
+                },
+                {
+                    imgSrc: require('@/assets/images/squaredPaper/2.png'),
+                    title: '基层小微权力监督一点通',
+                    path: 'communityPublicity'
+                },
+                {
+                    imgSrc: require('@/assets/images/squaredPaper/3.png'),
+                    title: '廉教中心',
+                    path: 'communityPublicity'
+                },
+                {
+                    imgSrc: require('@/assets/images/squaredPaper/4.png'),
+                    title: '廉政便民服务快车道',
+                    path: 'supervision'
+                },
+                {
+                    imgSrc: require('@/assets/images/squaredPaper/5.png'),
+                    title: '济宁消防廉线',
+                    path: 'communityPublicity'
+                },
+                {
+                    imgSrc: require('@/assets/images/squaredPaper/6.png'),
+                    title: '清风郑州',
+                    path: 'communityPublicity'
+                }
+            ],
+        };
+    },
+    created() {
+        this.agencyId = this.$route.query.agencyId?this.$route.query.agencyId: this.$store.state.app.agencyId;
+        this.advertisingTag();//获取社区讯息菜单
+        this.communityPublicity()//获取讯息列表
+    },
+    methods: {
+        toDetail(item){
+            this.$router.push({name:'communityPublicityDetail',query:{id:item.id}})
+        },
+        handleSearch(){
+            this.PublicityList = [];
+            this.pageNo = 1;
+            this.communityPublicity()
+        },
+        filterTagId(tagId) {
+            return this.tagList.filter(item => item.id === tagId)[0].tagName || '--';
+        },
+        async advertisingTag() {
+            let parm = {
+                pageSize: 10,
+                pageNo: 1,
+                status: 1,
+                tagName: null
+            }
+            let res = await advertisingTag(parm)
+            if (res.code === 0) {
+                this.tagList = res.data.list;
+                this.tagList.unshift({ tagName: '最新', id: 'new' })
+            }
+        },
+        async communityPublicity() {
+            let parm = {
+                pageSize: 10,
+                pageNo: 1,
+                title: this.searchValue,
+                tagId: this.tagId,
+                startTime: '',
+                endTime: '',
+                agencyId: this.agencyId,
+                status:1
+            }
+            let res = await communityPublicity(parm)
+            if (res.code === 0) {
+                this.loading = false;
+                res.data.list.forEach(item => {
+                    if (item.content) {
+                        item.newContent = this.extractChineseCharactersAndPunctuation(item.content)
+                    }
+                })
+                if (!res.data || res.data.list.length < this.pageSize) {
+                    this.finished = true;
+                }
+                this.PublicityList = this.PublicityList.concat(res.data.list);
+            }
+        },
+        extractChineseCharactersAndPunctuation(str) {
+            const chineseCharsAndPunctuation = str.match(/[\u4e00-\u9fa5\u3000-\u303F\uff00-\uffef]/g);
+            return chineseCharsAndPunctuation ? chineseCharsAndPunctuation.join('') : '';
+        },
+        handelChangeTags(val, title) {
+            this.PublicityList = [];
+            if (val !== 0) {
+                this.tagId = this.tagList[val].id;
+            } else {
+                this.tagId = '';
+            }
+            this.communityPublicity()
+        },
+    },
+    components: {},
+    computed: {},
+    watch: {},
+}
+</script>
+
+<style lang='less' scoped>
+.text2{
+    font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 12px;
+        color: #999999;
+        line-height: 48px;
+}
+.text1{
+    font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 20px;
+        color: #000000;
+        line-height: 44px;
+}
+.custom-button {
+    width: 60px;
+    height: 33px;
+}
+
+.activity_content {
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    width: 100%;
+    border-bottom: 1px solid #EAEAEA;
+    margin-top: 14px;
+    min-height: 50px;
+
+    .img {
+        width: 231px;
+        height: 33px;
+        margin: 5px 3px 0 3px;
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+
+    .content {
+
+        width: 325px;
+        height: 40px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+        line-height: 23px;
+    }
+
+    .dianzan {
+        width: 325px;
+        height: 20px;
+        display: flex;
+        font-size: 13px;
+        color: #AAAAAA;
+        flex-direction: row;
+        justify-content: space-evenly;
+        align-items: center;
+
+        .img {
+            width: 14.5px;
+            height: 15px;
+        }
+    }
+
+
+}
+
+.header {}
+
+.header .input_search {
+    width: 279px;
+    height: 33px;
+    background: rgba(193, 193, 193, 0.16);
+    border-radius: 17px;
+    // flex: 1;
+    color: #333333;
+    border: none;
+    /* 取消边框 */
+    margin-left: 10px;
+}
+
+.header .btn_search {
+    width: 60px;
+    height: 33px;
+    background: #3974F6;
+    border-radius: 17px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 23px;
+    border: none;
+    /* 取消边框 */
+    margin-right: 10px;
+}
+::v-deep .van-search__content {
+  background-color: white; 
+  border: 1px solid #3974F6; 
+}
+
+::v-deep .van-search__input {
+  color: #000; 
+}
+
+::v-deep .van-field__control::placeholder {
+  color: #A0A0A0; 
+}
+:deep(.van-field__control) {
+    font-size: 13px;
+}
+.van-tab__title {
+  padding: 5px 12px; /* 内边距调整 */
+  font-size: 14px; /* 字体大小 */
+}
+
+.van-tabs__nav {
+  justify-content: space-between; /* 平均分布 */
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); /* 每列4个 */
+    gap: 10px; /* 图片之间的间距 */
+    // padding: 16px;
+    align-items: start; /* 子元素顶对齐 */
+}
+
+.font-size12{
+    font-size: 12px;
+  }
+</style>