全局消息

src/router/index.js

@@ -626,7 +626,7 @@ export const constantRoutes = [
         path: '',
         component: () => import('@/views/news/noticeList'),
         meta: {
-          title: '行政通知列表',
+          title: '通知列表',
           hidden: true,
           breadcrumb: true
         }
@@ -643,13 +643,76 @@ export const constantRoutes = [
         path: '',
         component: () => import('@/views/news/noticeListApply'),
         meta: {
-          title: '行政通知审核列表',
+          title: '通知待审核列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/adminNotice',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/notice/adminNotice'),
+        meta: {
+          title: '行政通知',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/noticeDetail',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/notice/noticeDetail'),
+        meta: {
+          title: '通知详情',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+    {
+    path: '/adminComplaint',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/notice/adminComplaint'),
+        meta: {
+          title: '行政投诉',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/complaintDetail',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/notice/complaintDetail'),
+        meta: {
+          title: '投诉详情',
           hidden: true,
           breadcrumb: true
         }
       }
     ]
-
   },
   {
     path: '/ncomplaintList',
@@ -666,7 +729,6 @@ export const constantRoutes = [
         }
       }
     ]
-
   },
   {
     path: '/ncomplaintListApply',
@@ -1092,7 +1154,7 @@ export const constantRoutes = [
     ]
   },
 
-  
+
   {
     path: '/tabbar',
     component: Layout,

src/styles/global.less

@@ -86,7 +86,8 @@
 .listDeleteBtn,
 .listEditBtn,
 .listMainBtn,
-.listUpBtn {
+.listUpBtn,
+.listLookBtn {
   width: 70px;
   height: 28px;
   line-height: 28px;
@@ -100,6 +101,11 @@
   }
 }
 
+.listLookBtn {
+  color: #5570F1;
+  background: @editBg;
+}
+
 .listLinkBtn {
   width: 120px;
   height: 28px;
@@ -151,7 +157,31 @@
   background: @upBg;
 }
 
+.level1,
+.level2,
+.level3 {
+  display: inline-block;
+  width: 50px;
+  height: 29px;
+  line-height: 29px;
+  text-align: center;
+  border-radius: 4px;
+}
+
+.level1 {
+  color: #55b5f1;
+  background-color: #e4f3fd;
+}
+
+.level2 {
+  color: #cc5f5f;
+  background-color: #f7e5e5;
+}
 
+.level3 {
+  color: #519c66;
+  background-color: #e3efe6;
+}
 
 //表单样式微调
 //1.网站列表
@@ -359,4 +389,4 @@
 //   margin-bottom: 5px;
 // }
 
-// el-cascader高度 end
+// el-cascader高度 end

src/utils/baseUrl.js

@@ -7,7 +7,7 @@ const URL = {
   //baseUrl: 'http://adminpre.bjzxtw.org.cn:9501',//pre环境域名
 
   webUrl: 'adminpre.bjzxtw.org.cn',//管理系统地址，如果用户因为某种原因以外退出，需要一个userurl用于请求接口
-  baseUrl: 'http://apipre1.bjzxtw.org.cn:29501',//pre环境域名2
+  baseUrl: 'https://apipre1.bjzxtw.org.cn',//pre环境域名2
   //baseUrl: 'http://192.168.1.201:9501',//刘佳伟本地环境
   //baseUrl:'http://192.168.1.115:9501',//冯蕊的本地环境
   //baseUrl: 'http://192.168.1.129:9501',//刘剑的本地环境
@@ -17,13 +17,13 @@ const URL = {
   //WebsocketUrl: 'ws://admindev.bjzxtw.org.cn:9506',//测试环境域名
   //WebsocketUrl: 'ws://116.131.8.26:9506'//pre环境ip -- websocket地址
   //WebsocketUrl: 'ws://adminpre.bjzxtw.org.cn:9506'//pre环境域名 -- websocket地址
-  WebsocketUrl: 'ws://apipre1.bjzxtw.org.cn:29501',//pre环境域名 -- websocket地址
+  WebsocketUrl: 'wss://apipre1.bjzxtw.org.cn',//pre环境域名 -- websocket地址
   //WebsocketUrl: 'ws://103.105.201.2:9506'//正式环境ip -- websocket地址
   //WebsocketUrl: 'wss://flzxw.bjzxtw.org.cn'//正式环境域名 wss可用 -- websocket地址
-  WebCloginUrl: 'http://apipre1.bjzxtw.org.cn/api/loginapi', //单点登录地址
-  WebCLogoutUrl: 'http://apipre1.bjzxtw.org.cn:29501/api/logoutapi', //单点登录退出
+  WebCloginUrl: 'https://apipre1.bjzxtw.org.cn/api/loginapi', //单点登录地址
+  WebCLogoutUrl: 'https://apipre1.bjzxtw.org.cn:29501/api/logoutapi', //单点登录退出
   //webClogBackUrL: 'http://adminpre.bjzxtw.org.cn/auth/back_login.php' //单点登录返回地址 - 王鹏
-  webClogBackUrL: 'http://adminpre.bjzxtw.org.cn/adminapi/api/backlogin' //单点登录返回地址 - 刘佳伟
+  webClogBackUrL: 'https://adminpre.bjzxtw.org.cn/adminapi/api/backlogin' //单点登录返回地址 - 刘佳伟
 }
 
 export default URL;

src/views/notice/adminComplaint.vue

@@ -0,0 +1,287 @@
+<template>
+    <div class="mainBox">
+        <!--搜索功能 start------------------------------------------------------------>
+        <div class="layerBox_search">
+            <div class="layerBoxLine">
+                <el-row>
+                    <el-col :span="6">
+                        <div class="searchBox">
+                            <div class="searchTitle">投诉主题：</div>
+                            <el-input placeholder="请输入投诉主题" autocomplete="off" v-model="getApiData.title" />
+                        </div>
+                    </el-col>
+                    <el-col :span="6">
+                        <div class="searchBox">
+                            <div class="searchTitle">投诉类型：</div>
+                            <el-select v-model="getApiData.department_id" placeholder="请选择投诉类型">
+                                <el-option v-for="department in department" :key="department.id"
+                                    :label="department.name" :value="department.id"></el-option>
+                            </el-select>
+                        </div>
+                    </el-col>
+                    <el-col :span="6">
+                        <div class="searchBox">
+                            <div class="searchTitle">处理状态：</div>
+                            <el-select v-model="getApiData.deal" placeholder="请选择处理状态">
+                                <el-option label="未处理" value="1"></el-option>
+                                <el-option label="处理中" value="2"></el-option>
+                                <el-option label="已完结" value="3"></el-option>
+                                <el-option label="不予处理" value="4"></el-option>
+                            </el-select>
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+        </div>
+
+        <div class="layerBoxNoBg">
+            <div>
+            </div>
+            <div>
+                <el-button @click="clearSearchList">重置</el-button>
+                <el-button type="primary" @click="getData('search')">搜索</el-button>
+            </div>
+        </div>
+        <!--搜索功能 end------------------------------------------------------------>
+
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <el-row>
+                <template>
+                    <el-table :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+                        <el-table-column prop="title" label="投诉标题" width="">
+                        </el-table-column>
+                        <el-table-column prop="department_name" label="投诉类型" width="">
+                        </el-table-column>
+                        <el-table-column prop="cityname" label="投诉地区" width="">
+                        </el-table-column>
+                        <el-table-column prop="deal" label="处理状态" width="">
+                            <template slot-scope="scope">
+                                <span class="  listUpBtn" v-if="scope.row.deal == 1">
+                                    未处理
+                                </span>
+                                <span class="listDeleteBtn" v-if="scope.row.deal == 2">
+                                    处理中
+                                </span>
+                                <span class="listEditBtn" v-if="scope.row.deal == 3">
+                                    已完结
+                                </span>
+                                <span class="listDeleteBtn" v-if="scope.row.deal == 4">
+                                    不予处理
+                                </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="start" label="发生日期" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
+                        <el-table-column fixed="right" label="操作" width="300" header-align="center">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i
+                                            class="el-icon-delete"></i>删除</div>
+                                    <div class="listLookBtn" @click="goLook(scope.row.id, scope.row)"><i
+                                            class="el-icon-view"></i>查看</div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page"
+                        @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
+                        :total="allCount"></el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+
+//获得用户身份
+import { getUseType } from '@/utils/auth'
+
+//引入公用样式
+import '@/styles/global.less';
+
+export default {
+    components: {
+        tableTitle,//表格标题
+    },
+    data() {
+        return {
+            //1.列表和分页相关 start ------------------------------------------------------------>
+            tableDivTitle: "投诉列表",
+            tableData: [],//内容
+            editId: 0,//要修改的网站id
+            department: [],//部门
+            getApiData: {
+                name: "",//标题
+                category_name: "",//导航池id
+                website_name: "",//网站名称
+                type_id: "",//发布类型
+                status: 2,//发布状态
+                department_id: "",//部门id
+
+                page: 1,//当前是第几页
+                page_size: 10,//一共多少条
+            },
+            allCount: 0,//总条数
+            type_id: 0,
+            //分页相关 end ------------------------------------------------------------>
+
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        returnRow(id) {
+            this.$confirm('确定要撤回吗?', '提示', {
+                confirmButtonText: '撤回',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                //撤回，把文章状态修改为0，重新进行审核
+                this.upRow(id, 1)
+            })
+        },
+        //1.3 修改网站状态
+
+        //1.1 开始请求列表信息方法
+        getData(type) {
+            if (type == "search") {
+                this.getApiData.page = 1;
+            }
+            console.log(this.getApiData, '---1--')
+            this.$store.dispatch('news/getComplaintList', this.getApiData).then(res => {
+                console.log(this.getApiData, '---2-')
+                let data = [];
+                for (let item of res.data.rows) {
+                    data.push(item)
+                }
+                this.tableData = res.data.rows; //给与内容
+                this.allCount = res.data.count; //给与总条数
+            })
+        },
+        //1.2 删除内容
+        deleteRow(id) {
+            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                console.log("当前删除：" + id)
+                this.$store.dispatch('news/deleteComplaint', { id: id }).then(res => {
+                    this.getData();
+                    this.$message({
+                        type: 'success',
+                        message: '删除成功!'
+                    });
+                }).catch(() => {
+                    this.$message({
+                        type: 'warning',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 修改网站状态
+        upRow(id, status) {
+            let data = {
+                id: id,
+                status: status
+            }
+            this.$store.dispatch('news/updateComplaintStatus', data).then(res => {
+                if (res.code == 200) {
+                    this.getData();
+                    this.$message({
+                        type: 'success',
+                        message: '举报状态已修改!'
+                    });
+                }
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.getApiData.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.getApiData.page = val;
+            this.getData();
+        },
+        //1.6 重置按钮
+        clearSearchList() {
+            this.tableData = [];
+            this.getApiData.title = "";
+            this.getApiData.level = "";
+            this.getApiData.department_id = "";
+            this.getApiData.deal = "";
+
+            this.getApiData.page = 1;
+            this.getApiData.pageSize = 10;
+            this.getData();
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+        //2.添加新闻 start ------------------------------------------------------------>
+        //跳转到举报发布页面
+        // goCreat() {
+        //     this.$router.push({
+        //         path: '/addNcomplaint',
+        //     });
+        // },
+        goLook(id) {
+            let data = {
+                id: id
+            }
+            this.$router.push({
+                path: '/complaintDetail',
+                query: data
+            });
+        },
+
+        getDepartment() {
+            this.$store.dispatch('pool/getDepartment', { 'pid': 0 }).then(res => {
+                if (res.code == 200) {
+                    this.department = res.data;
+                }
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '网络错误，请重试！'
+                });
+            })
+        }
+        //添加新闻 end ------------------------------------------------------------>
+    },
+    mounted() {
+        this.type_id = getUseType()
+        //1.获得初始数据
+        this.getData();
+        this.getDepartment();
+    }
+}
+</script>
+<style scoped lang="less"></style>

src/views/notice/adminNotice.vue

@@ -0,0 +1,271 @@
+<template>
+    <div class="mainBox">
+        <!--搜索功能 start------------------------------------------------------------>
+        <div class="layerBox_search">
+            <div class="layerBoxLine">
+                <el-row>
+                    <el-col :span="6">
+                        <div class="searchBox">
+                            <div class="searchTitle">标题：</div>
+                            <el-input placeholder="请输入标题" autocomplete="off" v-model="getApiData.title" />
+                        </div>
+                    </el-col>
+                    <el-col :span="6">
+                        <div class="searchBox">
+                            <div class="searchTitle">类型：</div>
+                            <el-select v-model="getApiData.type" placeholder="请选择类型">
+                                <el-option label="通知" value="1"></el-option>
+                                <el-option label="公告" value="2"></el-option>
+                            </el-select>
+                        </div>
+                    </el-col>
+                    <el-col :span="6">
+                        <div class="searchBox">
+                            <div class="searchTitle">级别：</div>
+                            <el-select v-model="getApiData.level" placeholder="请选择级别">
+                                <el-option label="常规" value="1"></el-option>
+                                <el-option label="紧急" value="2"></el-option>
+                                <el-option label="特急" value="3"></el-option>
+                            </el-select>
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+        </div>
+
+        <div class="layerBoxNoBg">
+            <div>
+                <!-- <el-button type="primary" @click="goCreat">发布通知</el-button> -->
+            </div>
+            <div>
+                <el-button @click="clearSearchList">重置</el-button>
+                <el-button type="primary" @click="getData('search')">搜索</el-button>
+            </div>
+        </div>
+        <!--搜索功能 end------------------------------------------------------------>
+
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <el-row>
+                <template>
+                    <el-table :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+                        <el-table-column prop="title" label="标题" width="">
+                        </el-table-column>
+                        <el-table-column prop="type" label="类型" width="">
+                            <template slot-scope="scope">
+                                <span v-if="scope.row.type == 1">
+                                    公告
+                                </span>
+                                <span v-if="scope.row.type == 2">
+                                    通知
+                                </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="level" label="级别" width="">
+                            <template slot-scope="scope">
+                                <span v-if="scope.row.level == 1" class="level1">
+                                    常规
+                                </span>
+                                <span v-if="scope.row.level == 2" class="level2">
+                                    紧急
+                                </span>
+                                <span v-if="scope.row.level == 3" class="level3">
+                                    特急
+                                </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="start" label="开始时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="end" label="到期时间" width=""></el-table-column>
+                        <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200" header-align="center">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i
+                                            class="el-icon-delete"></i>删除</div>
+                                    <div class="listLookBtn" @click="goLook(scope.row.id, scope.row)"><i
+                                            class="el-icon-view"></i>查看</div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page"
+                        @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
+                        :total="allCount"></el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+import { getUseType } from '@/utils/auth'
+
+
+export default {
+    components: {
+        tableTitle,//表格标题
+    },
+    data() {
+        return {
+            //1.列表和分页相关 start ------------------------------------------------------------>
+            tableDivTitle: "通知列表",
+            tableData: [],//内容
+            editId: 0,//要修改的网站id
+            getApiData: {
+                name: "",//标题
+                category_name: "",//导航池id
+                website_name: "",//网站名称
+                type_id: "",//发布类型
+                status: 2,
+                page: 1,//当前是第几页
+                page_size: 10,//一共多少条
+            },
+            allCount: 0,//总条数
+            //分页相关 end ------------------------------------------------------------>
+
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+
+        returnRow(id) {
+            this.$confirm('确定要撤回吗?', '提示', {
+                confirmButtonText: '撤回',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                //撤回，把文章状态修改为0，重新进行审核
+                this.upRow(id, 1);
+                this.getData();
+            })
+        },
+        //1.3 修改网站状态
+
+        //1.1 开始请求列表信息方法
+        getData(type) {
+            if (type == "search") {
+                this.getApiData.page = 1;
+            }
+            console.log(this.getApiData, '---1--')
+            this.$store.dispatch('news/getNoticeList', this.getApiData).then(res => {
+                console.log(this.getApiData, '---2-')
+                let data = [];
+                for (let item of res.data.rows) {
+                    data.push(item)
+                }
+                this.tableData = res.data.rows; //给与内容
+                this.allCount = res.data.count; //给与总条数
+            })
+        },
+        //1.2 删除内容
+        deleteRow(id) {
+            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                console.log("当前删除：" + id)
+                this.$store.dispatch('news/deleteNotice', { id: id }).then(res => {
+                    this.getData();
+                    this.$message({
+                        type: 'success',
+                        message: '删除成功!'
+                    });
+                }).catch(() => {
+                    this.$message({
+                        type: 'warning',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 修改网站状态
+        upRow(id, status) {
+            let data = {
+                id: id,
+                status: status
+            }
+            this.$store.dispatch('news/updateNoticeStatus', data).then(res => {
+                if (res.code == 200) {
+                    this.getData();
+                    this.$message({
+                        type: 'success',
+                        message: '通知状态已修改!'
+                    });
+                }
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.getApiData.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.getApiData.page = val;
+            this.getData();
+        },
+        //1.6 重置按钮
+        clearSearchList() {
+            this.tableData = [];
+            this.getApiData.title = "";
+            this.getApiData.level = "";
+
+            this.getApiData.page = 1;
+            this.getApiData.pageSize = 10;
+            this.getData();
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+        //2.添加新闻 start ------------------------------------------------------------>
+        //跳转到通知发布页面
+        goCreat() {
+            this.$router.push({
+                path: '/addNotice',
+            });
+        },
+        goLook(id) {
+            let data = {
+                id: id
+            }
+            this.$router.push({
+                path: '/noticeDetail',
+                query: data
+            });
+        }
+        //添加新闻 end ------------------------------------------------------------>
+    },
+    mounted() {
+        //1.获得初始数据
+        this.getData();
+        this.type_id = getUseType()
+    }
+}
+</script>
+<style scoped lang="less"></style>

src/views/notice/complaintDetail.vue

@@ -0,0 +1,547 @@
+<template>
+    <div class="mainBox">
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <el-row>
+                <template>
+                    <!-- 在此位置下面写 -->
+                    <div class="article-detail">
+                        <div class="article-card">
+                            <div class="article-title">
+                                {{ dataInfo.title }}
+                            </div>
+                            <div class="article-meta">
+                                <div class="left">
+                                    <span>投诉地区：北京市-大兴区</span>
+                                    <span>投诉类型：公安</span>
+                                </div>
+                                <span class="happenTime">发生日期：2023-08-01 10:00:00</span>
+                            </div>
+                            <el-divider> </el-divider>
+                            <div class="detail_title">
+                                <div class="title">
+                                    事件描述:
+                                </div>
+                            </div>
+                            <div class="background-color">
+                                <div class="article-author">
+                                    <div class="article_box">
+                                        <div class="article_panel" :class="{ collapsed: !isExpanded }">
+                                            <div v-html="dataInfo.content"></div>
+                                        </div>
+                                        <span class="article_panel_btn" v-if="showReadMoreBtn && !isExpanded"
+                                            @click="toggleExpand">
+                                            阅读全文
+                                            <i class="el-icon-arrow-down"></i>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div>我的要求:</div>
+                            <div class="background-color">
+                                <div class="article-author">
+                                    <div class="article_box">
+                                        <div class="article_panel" :class="{ collapsed: !isExpanded }">
+                                            <div v-html="dataInfo.content"></div>
+                                        </div>
+                                        <span class="article_panel_btn" v-if="showReadMoreBtn && !isExpanded"
+                                            @click="toggleExpand">
+                                            阅读全文
+                                            <i class="el-icon-arrow-down"></i>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="comment-section">
+                            <div class="box_1 clearfix">
+                                <div class="box_in">附件:</div>
+                            </div>
+
+                            <!-- <div class="comment-list">
+                                <div class="comment_li" v-for="(per_obj, keys) in replyList" :key="keys">
+                                    <el-avatar class="comment_li_img" :src="per_obj.avatar" />
+                                    <div class="comment_li_name">{{ per_obj.nickname }}：</div>
+                                    <div class="comment_li_text">
+                                        {{ per_obj.content }}
+                                    </div>
+                                    <div class="comment_li_time">{{ per_obj.created_at }}</div>
+                                </div>
+                            </div> -->
+                            <!-- <div class="alignBox">
+                                <el-row>
+                                    <el-col :span="24">
+                                        <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange"
+                                            @current-change="handleCurrentChange" :page-size="5"
+                                            layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+                                    </el-col>
+                                </el-row>
+                            </div> -->
+                            <div class="comment-actions">
+                                <el-button type="info" @click="goBack">返回</el-button>
+                                <!-- <el-button type="info" plain>信息按钮</el-button> -->
+                                <!-- <el-button type="primary" @click="viewGroupChat">查看群聊</el-button> -->
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </el-row>
+        </div>
+
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+import InputTag from '@/components/InputTag'
+import { getTopicDataInfo, getTopicReply } from '@/api/chat'
+import emitter from '@/eventBus';
+
+export default {
+    components: {
+        tableTitle,//表格标题
+        InputTag
+    },
+    data() {
+        let self = this;
+        return {
+            id: '',
+            dataInfo: {},
+            isExpanded: false, // btn添加展开状态
+            showReadMoreBtn: false,
+            //1.列表和分页相关 start ------------------------------------------------------------>
+            tableDivTitle: "通知详情",
+            getApiData: {
+                page: 1,//当前是第几页
+                pageSize: 5,//一共多少条
+            },
+            allCount: 0,//总条数
+            replyList: [],
+            currentGroupId: null
+        }
+    },
+    methods: {
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.getApiData.page = val;
+            this.getTopicReplyList();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.getApiData.page = val;
+            this.getTopicReplyList();
+        },
+        toggleExpand() { // 添加切换方法
+
+            this.isExpanded = true;
+        },
+        checkPanelHeight() {
+            this.$nextTick(() => {
+                const panel = this.$el.querySelector('.article_panel');
+                if (panel) {
+                    this.showReadMoreBtn = panel.scrollHeight > 270;
+                }
+            });
+        },
+        getDataINfo() {
+            getTopicDataInfo({
+                id: self.id
+            }).then(data => {
+                // this.loading=false;
+                console.log("返回数据", data.data);
+                this.dataInfo = data.data;
+                console.log("赋值：", self.dataInfo)
+
+            })
+        },
+        getTopicReplyList() {
+            getTopicReply({
+                id: self.id,
+                page: this.getApiData.page,
+                page_size: this.getApiData.pageSize
+            }).then(data => {
+                this.replyList = data.data.data;
+                this.allCount = data.data.total;
+
+            })
+        },
+        goBack() {
+            this.$router.back();
+        },
+        viewGroupChat() {
+            console.log('[businessDistrictDetail] 触发 view-group-chat 事件，id1:', this.dataInfo);
+            emitter.emit('view-group-chat', this.dataInfo);
+        },
+        handleViewGroupChat(ids) {
+            console.log('[businessDistrictDetail] 收到 view-group-chat 事件，id2:', ids);
+            // 这里一般不需要监听自己发的事件，除非有特殊需求
+        },
+
+        getMainData() {
+            let data = {
+                id: 41
+            };
+            this.$store.dispatch('news/getNoticeInfo', data).then(res => {
+                console.log('详情数据', res);
+                this.dataInfo = res.data;
+            })
+        },
+    },
+    mounted() {
+        // 1.获取详情数据
+        self.id = this.$route.query.id + '';
+        this.getDataINfo();
+        this.getTopicReplyList();
+        this.checkPanelHeight();
+        // 可选：如果你需要监听（一般只在调试时用）
+        emitter.on('view-group-chat', this.handleViewGroupChat);
+        this.getMainData();
+    },
+    beforeDestroy() {
+        emitter.off('view-group-chat', this.handleViewGroupChat);
+    },
+    // watch: {
+    //     'dataInfo.content': function () {
+    //         this.checkPanelHeight();
+    //     }
+    // }
+}
+</script>
+
+<style scoped lang="less">
+.article-detail {
+    // padding: 24px;
+    // background: #f5f7fa;
+    min-height: 100vh;
+
+    .article-card {
+        margin-bottom: 24px;
+        padding: 24px 0px;
+        background: #fff;
+
+        .article-title {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: bold;
+            font-size: 28px;
+            color: #333333;
+            display: flex;
+            align-items: center;
+
+            .article-tag {
+                margin-left: 30px;
+            }
+        }
+
+        .article-meta {
+            margin-top: 31px;
+            color: #888;
+            font-size: 16px;
+            display: block;
+            height: 40px;
+
+            .left {
+                float: left;
+            }
+
+            .article-link {
+                margin-left: 12px;
+            }
+
+            .happenTime {
+                float: right;
+                margin-right: 20px;
+            }
+        }
+
+
+        .detail_title {
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 1px solid #E1E1E1;
+            margin-bottom: 40px;
+
+            .title {
+                width: 103px;
+                font-size: 22px;
+                font-weight: bold;
+                color: #5570f1;
+                border-bottom: 3px solid #5570f1;
+            }
+        }
+
+        .article-author {
+            margin-top: 12px;
+            color: #999;
+            font-size: 18px;
+
+            span {
+                font-weight: 400;
+                font-size: 18px;
+                color: #6A82F3;
+                text-align: center;
+                // margin-right: 16px;
+                display: block;
+                line-height: 30px;
+            }
+        }
+    }
+
+    .comment-section {
+        // padding: 24px 32px;
+        background: #fff;
+        border-radius: 8px;
+
+        .comment-title {
+            font-weight: bold;
+            font-size: 22px;
+            color: #5570F1;
+            // font-size: 16px;
+            // font-weight: bold;
+            // color: #333;
+            margin-bottom: 8px;
+            text-align: left;
+        }
+
+        // 蓝色短分割线，宽度10%，居中
+        .el-divider {
+            margin: 8px auto 16px auto;
+            border: none;
+            height: 0;
+            width: 10%;
+            min-width: 40px;
+            max-width: 100px;
+            border-top: 2px solid #5570F1;
+            border-radius: 2px;
+            background: transparent;
+        }
+
+        .comment-list {
+            margin-top: 40px;
+            margin-bottom: 16px;
+            min-height: 200px;
+
+            .comment_li {
+                background: #FAFAFA;
+                border: solid 1px #E1E1E1;
+                overflow: hidden;
+                margin-bottom: 20px;
+            }
+
+            .comment_li_img {
+                float: left;
+                width: 52px;
+                height: 52px;
+                border-radius: 50%;
+                margin: 30px 0px 30px 30px;
+            }
+
+            .comment_li_name {
+                float: left;
+                margin: 44px 0px 44px 20px;
+                color: #333;
+                font-size: 16px;
+                line-height: 24px;
+            }
+
+            .comment_li_text {
+                float: left;
+                margin: 45px 0px 11px 20px;
+                color: #333;
+                font-size: 16px;
+                line-height: 24px;
+                font-weight: bold;
+                max-width: 1000px;
+            }
+
+            .comment_li_time {
+                float: right;
+                margin: 44px 30px 44px 0px;
+                color: #999;
+                font-size: 16px;
+                line-height: 24px;
+            }
+
+
+
+            .comment-item {
+                display: flex;
+                align-items: center;
+                padding: 12px 0;
+                border-bottom: 1px solid #f0f0f0;
+
+                &:last-child {
+                    border-bottom: none;
+                }
+
+                .comment-avatar {
+                    width: 36px;
+                    height: 36px;
+                    margin-right: 12px;
+                }
+
+                .comment-content {
+                    .comment-user {
+                        font-size: 15px;
+                        color: #555;
+                        font-weight: 500;
+                    }
+
+                    .comment-time {
+                        font-size: 12px;
+                        color: #aaa;
+                        margin-top: 2px;
+                    }
+                }
+            }
+        }
+
+        .comment-actions {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-top: 12px;
+        }
+    }
+
+    .article-meta-item1 {
+        position: relative;
+        padding-left: 27px;
+
+        &::before {
+            content: '';
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            background: url('../../assets/notice/notice1.png') no-repeat center center;
+            background-size: contain;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            margin-right: 4px;
+        }
+    }
+
+    .article-meta-item2 {
+        position: relative;
+        padding-left: 27px;
+        margin-left: 40px;
+
+        &::before {
+            content: '';
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            background: url('../../assets/notice/notice2.png') no-repeat center center;
+            background-size: contain;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            margin-right: 4px;
+        }
+    }
+
+    .article-meta-item3 {
+        position: relative;
+        padding-left: 27px;
+        margin-left: 40px;
+
+        &::before {
+            content: '';
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            background: url('http://img.bjzxtw.org.cn/master/www/admin/wechat.png') no-repeat center center;
+            background-size: contain;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            margin-right: 4px;
+        }
+    }
+
+    .top-button {
+        margin-left: 30px;
+    }
+
+    .background-color {
+        min-height: 617px;
+        background: #f0f2f5;
+        padding: 10px 20px 0px 20px;
+    }
+
+    .clearfix::after {
+        content: '';
+        display: block;
+        height: 0;
+        visibility: hidden;
+        clear: both;
+    }
+
+    .box_1 {
+        border-bottom: solid 1px #E9EDF7;
+        box-sizing: border-box;
+    }
+
+    .box_in {
+        font-weight: bold;
+        float: left;
+        font-size: 22px;
+        color: #5570F1;
+        height: 33px;
+        line-height: 33px;
+        border-bottom: solid 2px #5570F1;
+        margin-bottom: -1px;
+    }
+}
+
+.article_box {
+    margin-top: 11;
+    overflow: hidden;
+}
+
+.article_panel {
+    transition: max-height 0.3s;
+    overflow: hidden;
+    position: relative;
+    max-height: none;
+
+    // 展开时无高度限制
+    &.collapsed {
+        max-height: 270px; // 固定高度
+
+        // 可选：加渐变遮罩
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            // height: 36px;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 80%);
+            pointer-events: none;
+        }
+    }
+}
+
+.article_panel_btn {
+    display: inline-block;
+    color: #5570F1;
+    cursor: pointer;
+    margin-top: 8px;
+    font-size: 15px;
+}
+
+.dot1 {
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>

src/views/notice/components/tableTitle.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{ name }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+.tableTitle {
+  color: #333333;
+  position: relative;
+  padding-bottom: 20px;
+  margin-top: 20px;
+
+  .tableFloatLine {
+    width: 3px;
+    height: 16px;
+    background: #5570F1;
+    display: block;
+    position: absolute;
+    left: -20px;
+    top: 1px;
+  }
+}
+</style>

src/views/notice/noticeDetail.vue

@@ -0,0 +1,526 @@
+<template>
+    <div class="mainBox">
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <el-row>
+                <template>
+                    <!-- 在此位置下面写 -->
+                    <div class="article-detail">
+                        <div class="article-card">
+                            <div class="article-title">
+                                {{ dataInfo.title }}
+                                <el-tag class="article-tag" v-if="dataInfo.level == 1">普通</el-tag>
+                                <el-tag class="article-tag" v-if="dataInfo.level == 2" type="success">特急</el-tag>
+                                <el-tag class="article-tag" v-if="dataInfo.level == 3" type="danger">紧急</el-tag>
+                            </div>
+                            <div class="article-meta">
+                                <div class="left">
+                                    <span class="article-meta-item1" v-if="dataInfo.type == 1">公告</span>
+                                    <span class="article-meta-item1" v-if="dataInfo.type == 2">通知</span>
+                                    <span class="article-meta-item3"> {{ dataInfo.group_name }}</span>
+                                    <el-button class="top-button" type="primary" @click="viewGroupChat">查看群聊</el-button>
+                                </div>
+
+                                <span class="happenTime">发生日期：2023-08-01 10:00:00</span>
+                            </div>
+                            <el-divider></el-divider>
+                            <div class="background-color">
+                                <div class="article-author">
+                                    <div class="article_box">
+                                        <div class="article_panel" :class="{ collapsed: !isExpanded }">
+                                            <div v-html="dataInfo.content"></div>
+                                        </div>
+                                        <span class="article_panel_btn" v-if="showReadMoreBtn && !isExpanded"
+                                            @click="toggleExpand">
+                                            阅读全文
+                                            <i class="el-icon-arrow-down"></i>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="comment-section">
+                            <div class="box_1 clearfix">
+                                <div class="box_in">附件:</div>
+                            </div>
+
+                            <!-- <div class="comment-list">
+                                <div class="comment_li" v-for="(per_obj, keys) in replyList" :key="keys">
+                                    <el-avatar class="comment_li_img" :src="per_obj.avatar" />
+                                    <div class="comment_li_name">{{ per_obj.nickname }}：</div>
+                                    <div class="comment_li_text">
+                                        {{ per_obj.content }}
+                                    </div>
+                                    <div class="comment_li_time">{{ per_obj.created_at }}</div>
+                                </div>
+                            </div> -->
+                            <!-- <div class="alignBox">
+                                <el-row>
+                                    <el-col :span="24">
+                                        <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange"
+                                            @current-change="handleCurrentChange" :page-size="5"
+                                            layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+                                    </el-col>
+                                </el-row>
+                            </div> -->
+                            <div class="comment-actions">
+                                <el-button type="info" @click="goBack">返回</el-button>
+                                <!-- <el-button type="info" plain>信息按钮</el-button> -->
+                                <!-- <el-button type="primary" @click="viewGroupChat">查看群聊</el-button> -->
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </el-row>
+        </div>
+
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+import InputTag from '@/components/InputTag'
+import { getTopicDataInfo, getTopicReply } from '@/api/chat'
+import emitter from '@/eventBus';
+
+export default {
+    components: {
+        tableTitle,//表格标题
+        InputTag
+    },
+    data() {
+        let self = this;
+        return {
+            id: '',
+            dataInfo: {},
+            isExpanded: false, // btn添加展开状态
+            showReadMoreBtn: false,
+            //1.列表和分页相关 start ------------------------------------------------------------>
+            tableDivTitle: "通知详情",
+            getApiData: {
+                page: 1,//当前是第几页
+                pageSize: 5,//一共多少条
+            },
+            allCount: 0,//总条数
+            replyList: [],
+            currentGroupId: null
+        }
+    },
+    methods: {
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.getApiData.page = val;
+            this.getTopicReplyList();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.getApiData.page = val;
+            this.getTopicReplyList();
+        },
+        toggleExpand() { // 添加切换方法
+
+            this.isExpanded = true;
+        },
+        checkPanelHeight() {
+            this.$nextTick(() => {
+                const panel = this.$el.querySelector('.article_panel');
+                if (panel) {
+                    this.showReadMoreBtn = panel.scrollHeight > 270;
+                }
+            });
+        },
+        getDataINfo() {
+            getTopicDataInfo({
+                id: self.id
+            }).then(data => {
+                // this.loading=false;
+                console.log("返回数据", data.data);
+                this.dataInfo = data.data;
+                console.log("赋值：", self.dataInfo)
+
+            })
+        },
+        getTopicReplyList() {
+            getTopicReply({
+                id: self.id,
+                page: this.getApiData.page,
+                page_size: this.getApiData.pageSize
+            }).then(data => {
+                this.replyList = data.data.data;
+                this.allCount = data.data.total;
+
+            })
+        },
+        goBack() {
+            this.$router.back();
+        },
+        viewGroupChat() {
+            console.log('[businessDistrictDetail] 触发 view-group-chat 事件，id1:', this.dataInfo);
+            emitter.emit('view-group-chat', this.dataInfo);
+        },
+        handleViewGroupChat(ids) {
+            console.log('[businessDistrictDetail] 收到 view-group-chat 事件，id2:', ids);
+            // 这里一般不需要监听自己发的事件，除非有特殊需求
+        },
+
+        getMainData() {
+            let data = {
+                id: 41
+            };
+            this.$store.dispatch('news/getNoticeInfo', data).then(res => {
+                console.log('详情数据', res);
+                this.dataInfo = res.data;
+            })
+        },
+    },
+    mounted() {
+        // 1.获取详情数据
+        self.id = this.$route.query.id + '';
+        this.getDataINfo();
+        this.getTopicReplyList();
+        this.checkPanelHeight();
+        // 可选：如果你需要监听（一般只在调试时用）
+        emitter.on('view-group-chat', this.handleViewGroupChat);
+        this.getMainData();
+    },
+    beforeDestroy() {
+        emitter.off('view-group-chat', this.handleViewGroupChat);
+    },
+    // watch: {
+    //     'dataInfo.content': function () {
+    //         this.checkPanelHeight();
+    //     }
+    // }
+}
+</script>
+
+<style scoped lang="less">
+.article-detail {
+    // padding: 24px;
+    // background: #f5f7fa;
+    min-height: 100vh;
+
+    .article-card {
+        margin-bottom: 24px;
+        padding: 24px 0px;
+        background: #fff;
+        // border-radius: 8px;
+        // box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+
+        .article-title {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: bold;
+            font-size: 28px;
+            color: #333333;
+            display: flex;
+            align-items: center;
+
+            .article-tag {
+                margin-left: 30px;
+            }
+        }
+
+        .article-meta {
+            margin-top: 31px;
+            color: #888;
+            font-size: 16px;
+            display: block;
+            height: 40px;
+            .left{
+                float: left;
+            }
+
+            .article-link {
+                margin-left: 12px;
+            }
+
+            .happenTime {
+                float: right;
+                margin-right: 20px;
+            }
+        }
+
+        .article-content {
+            // margin: 18px 0 12px 0;
+            color: #444;
+            font-size: 15px;
+            line-height: 1.8;
+            word-break: break-all;
+        }
+
+        .article-author {
+            margin-top: 12px;
+            color: #999;
+            font-size: 18px;
+
+            span {
+                font-weight: 400;
+                font-size: 18px;
+                color: #6A82F3;
+                text-align: center;
+                // margin-right: 16px;
+                display: block;
+                line-height: 30px;
+            }
+        }
+    }
+
+    .comment-section {
+        // padding: 24px 32px;
+        background: #fff;
+        border-radius: 8px;
+
+        .comment-title {
+            font-weight: bold;
+            font-size: 22px;
+            color: #5570F1;
+            // font-size: 16px;
+            // font-weight: bold;
+            // color: #333;
+            margin-bottom: 8px;
+            text-align: left;
+        }
+
+        // 蓝色短分割线，宽度10%，居中
+        .el-divider {
+            margin: 8px auto 16px auto;
+            border: none;
+            height: 0;
+            width: 10%;
+            min-width: 40px;
+            max-width: 100px;
+            border-top: 2px solid #5570F1;
+            border-radius: 2px;
+            background: transparent;
+        }
+
+        .comment-list {
+            margin-top: 40px;
+            margin-bottom: 16px;
+            min-height: 200px;
+
+            .comment_li {
+                background: #FAFAFA;
+                border: solid 1px #E1E1E1;
+                overflow: hidden;
+                margin-bottom: 20px;
+            }
+
+            .comment_li_img {
+                float: left;
+                width: 52px;
+                height: 52px;
+                border-radius: 50%;
+                margin: 30px 0px 30px 30px;
+            }
+
+            .comment_li_name {
+                float: left;
+                margin: 44px 0px 44px 20px;
+                color: #333;
+                font-size: 16px;
+                line-height: 24px;
+            }
+
+            .comment_li_text {
+                float: left;
+                margin: 45px 0px 11px 20px;
+                color: #333;
+                font-size: 16px;
+                line-height: 24px;
+                font-weight: bold;
+                max-width: 1000px;
+            }
+
+            .comment_li_time {
+                float: right;
+                margin: 44px 30px 44px 0px;
+                color: #999;
+                font-size: 16px;
+                line-height: 24px;
+            }
+
+
+
+            .comment-item {
+                display: flex;
+                align-items: center;
+                padding: 12px 0;
+                border-bottom: 1px solid #f0f0f0;
+
+                &:last-child {
+                    border-bottom: none;
+                }
+
+                .comment-avatar {
+                    width: 36px;
+                    height: 36px;
+                    margin-right: 12px;
+                }
+
+                .comment-content {
+                    .comment-user {
+                        font-size: 15px;
+                        color: #555;
+                        font-weight: 500;
+                    }
+
+                    .comment-time {
+                        font-size: 12px;
+                        color: #aaa;
+                        margin-top: 2px;
+                    }
+                }
+            }
+        }
+
+        .comment-actions {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-top: 12px;
+        }
+    }
+
+    .article-meta-item1 {
+        position: relative;
+        padding-left: 27px;
+
+        &::before {
+            content: '';
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            background: url('../../assets/notice/notice1.png') no-repeat center center;
+            background-size: contain;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            margin-right: 4px;
+        }
+    }
+
+    .article-meta-item2 {
+        position: relative;
+        padding-left: 27px;
+        margin-left: 40px;
+
+        &::before {
+            content: '';
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            background: url('../../assets/notice/notice2.png') no-repeat center center;
+            background-size: contain;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            margin-right: 4px;
+        }
+    }
+
+    .article-meta-item3 {
+        position: relative;
+        padding-left: 27px;
+        margin-left: 40px;
+
+        &::before {
+            content: '';
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            background: url('http://img.bjzxtw.org.cn/master/www/admin/wechat.png') no-repeat center center;
+            background-size: contain;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            margin-right: 4px;
+        }
+    }
+
+    .top-button {
+        margin-left: 30px;
+    }
+
+    .background-color {
+        min-height: 617px;
+        background: #f0f2f5;
+        padding: 10px 20px 0px 20px;
+    }
+
+    .clearfix::after {
+        content: '';
+        display: block;
+        height: 0;
+        visibility: hidden;
+        clear: both;
+    }
+
+    .box_1 {
+        border-bottom: solid 1px #E9EDF7;
+        box-sizing: border-box;
+    }
+
+    .box_in {
+        font-weight: bold;
+        float: left;
+        font-size: 22px;
+        color: #5570F1;
+        height: 33px;
+        line-height: 33px;
+        border-bottom: solid 2px #5570F1;
+        margin-bottom: -1px;
+    }
+}
+
+.article_box {
+    margin-top: 11;
+    overflow: hidden;
+}
+
+.article_panel {
+    transition: max-height 0.3s;
+    overflow: hidden;
+    position: relative;
+    max-height: none;
+
+    // 展开时无高度限制
+    &.collapsed {
+        max-height: 270px; // 固定高度
+
+        // 可选：加渐变遮罩
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            // height: 36px;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 80%);
+            pointer-events: none;
+        }
+    }
+}
+
+.article_panel_btn {
+    display: inline-block;
+    color: #5570F1;
+    cursor: pointer;
+    margin-top: 8px;
+    font-size: 15px;
+}
+
+.dot1 {
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>