根据接口对停水公告及其详情页进行渲染

src/components/notice/index.vue

@@ -1,21 +1,28 @@
 <template>
   <ul>
-    <li v-for="item,index in 4" :key="index">
-      <div class="l" @click="toDetail">{{title}}</div>
-      <div class="r">2022.03.08</div>
+    <li v-for="item,index in records" :key="index">
+      <div class="l" @click="toDetail(item.id)">{{item.theme}}</div>
+      <div class="r">{{item.createTime.slice(0,10)}}</div>
     </li>
   </ul>
 </template>
 
 <script>
 export default {
-    props:['title'],
+    props:{
+      title:{
+        type:String
+      },
+      records:{
+        type:Array,
+      }
+    },
   data() {
     return {};
   },
   methods: {
-    toDetail() {
-      this.$emit('toDetail')
+    toDetail(proId) {
+      this.$emit('toDetail',proId)
     },
   },
 };

src/views/currentSystem/InfoDisclosure/announcement.vue

@@ -3,65 +3,85 @@
     <!-- 停水公告 -->
     <div class="content">
       <div class="mian" v-if="ishowDetails">
-        <Notice title="停水公告" @toDetail='toDetail'></Notice>
+        <Notice
+          :records="result.records"
+          title="停水公告"
+          @toDetail="toDetail"
+        ></Notice>
         <Pagination />
       </div>
-       <div class="datails" v-else>
-         <Datails @backFn='backFn'></Datails>
-        </div> 
+      <div class="datails" v-else>
+        <Datails :detailObj="detailObj" @backFn="backFn"></Datails>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import Pagination from '@/components/Pagination/index.vue'
-import Notice from '@/components/notice/index.vue'
-import Datails from './dataile.vue'
+import Pagination from "@/components/Pagination/index.vue";
+import Notice from "@/components/notice/index.vue";
+import Datails from "./dataile.vue";
+import { getCurrentPage } from "@/api/currentpage";
 export default {
-    components:{
-        Pagination,
-        Notice,
-        Datails
-    },
+  components: {
+    Pagination,
+    Notice,
+    Datails,
+  },
   data() {
     return {
-      ishowDetails:true,
+      ishowDetails: true,
+      result: {},
+      detailObj: {},
     };
   },
+  created() {
+    getCurrentPage().then((res) => {
+      console.log(res);
+      if (res.code === 1) {
+        this.result = res.result;
+      }
+    });
+  },
   methods: {
-    toDetail(){
-      this.ishowDetails=false
+    toDetail(proId) {
+      this.ishowDetails = false;
+      this.result.records.forEach((item) => {
+        if (item.id === proId) {
+          this.detailObj = item;
+          console.log("111", this.detailObj);
+        }
+      });
     },
-    backFn(){
-      this.ishowDetails=true
-    }
-  }
-}
-
+    backFn() {
+      this.ishowDetails = true;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .t-container {
   width: 100%;
 }
-ul{
-    li{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 20px;
-        position: relative;
-        margin: 20px 0 20px 10px;
-        .l::before{
-            content: '';
-            position: absolute;
-            left: -8px;
-            top: 8px;
-            width: 4px;
-            height: 4px;
-            background: #000;
-            border-radius: 50%;
-        }
+ul {
+  li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 20px;
+    position: relative;
+    margin: 20px 0 20px 10px;
+    .l::before {
+      content: "";
+      position: absolute;
+      left: -8px;
+      top: 8px;
+      width: 4px;
+      height: 4px;
+      background: #000;
+      border-radius: 50%;
     }
+  }
 }
 </style>

src/views/currentSystem/InfoDisclosure/dataile.vue

@@ -3,23 +3,16 @@
     <!-- 详情页 -->
     <div class="main">
       <div class="title">
-        <h2>震惊！！！一男子竟然在睡觉</h2>  
+        <h2>{{detailObj.theme}}</h2>  
       </div>
       <div class="content">
         <p>
-          正文：地理信息系统（Geographic Information System或 Geo－Information system，GIS）有时又称为“地学信息系统”。它是一种特定的十分重要的空间信息系统。它是在计算机硬、软件系统支持下，对整个或部分地球表层（包括大气层）空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术系统。
-          位置与地理信息既是LBS的核心，也是LBS的基础。一个单纯的经纬度坐标只有置于特定的地理信息中，代表为某个地点、标志、方位后，才会被用户认识和理解。用户在通过相关技术获取到位置信息之后，还需要了解所处的地理环境，查询和分析环境信息，从而为用户活动提供信息支持与服务。
-          地理信息系统（GIS，Geographic Information
-          System）是一门综合性学科，结合地理学与地图学以及遥感和计算机科学，已经广泛的应用在不同的领域，是用于输入、存储、查询、分析和显示地理数据的计算机系统，随着GIS的发展，也有称GIS为“地理信息科学”（Geographic
-          Information Science），近年来，也有称GIS为"地理信息服务"（Geographic
-          Information
-          service）。GIS是一种基于计算机的工具，它可以对空间信息进行分析和处理（简而言之，是对地球上存在的现象和发生的事件进行成图和分析）。
-          GIS技术把地图这种独特的视觉化效果和地理分析功能与一般的数据库操作（例如查询和统计分析等）集成在一起。
+          {{detailObj.content}}
         </p>
       </div>
       <div class="down">
-        <div class="date">2022-3-16</div>
-        <div class="author">某某某</div>
+        <div class="date">{{detailObj.createTime}}</div>
+        <div class="author">{{detailObj.createUserName}}</div>
       </div>
       <p @click="backFn"><a href="javascript:;">⬅返回上一页</a></p>
     </div>
@@ -28,6 +21,12 @@
 
 <script>
 export default {
+  props:{
+    detailObj:{
+      type:Object,
+      default:{}
+    }
+  },
   data() {
     return {};
   },

src/views/currentSystem/InfoDisclosure/openWork.vue

@@ -3,11 +3,11 @@
     <!-- 办事公开 -->
     <div class="content">
       <div class="mian" v-if="ishowDetails">
-        <Notice title="办事公开公告" @toDetail='toDetail'></Notice>
+        <Notice :records="records" title="办事公开公告" @toDetail='toDetail'></Notice>
         <Pagination />
       </div>
        <div class="datails" v-else>
-         <Datails @backFn='backFn'></Datails>
+         <Datails :detailObj="detailObj" @backFn='backFn'></Datails>
         </div> 
     </div>
   </div>
@@ -26,6 +26,30 @@ export default {
   data() {
     return {
       ishowDetails:true,
+      detailObj:{
+            content: "hdahadhaod",
+            createTime: "2022-03-14 11:47:11",
+            createUserName: "luozhi",
+            id: 1,
+            theme:"办事公开"
+          },
+      records:[
+        {
+          id:1,
+          theme:'办事公开',
+          createTime:'2022-3.18'
+        },
+        {
+          id:2,
+          theme:'办事公开2',
+          createTime:'2022-3.18'
+        },
+        {
+          id:3,
+          theme:'办事公开3',
+          createTime:'2022-3.18'
+        },
+      ]
     };
   },
   methods: {