添加到家服务 公告管理页面

packages/homeServer/index/index.vue

@@ -304,7 +304,7 @@ export default {
 
     // 查看公告
     lookNotice() {
-      NavgateTo("/packages/homeServer/noticeDetials/index");
+      NavgateTo("/packages/homeServer/noticeManage/index");
     },
   },
   onLoad() {

packages/homeServer/noticeManage/index.css

@@ -0,0 +1,49 @@
+page {
+    background-color: #f6f7fb;
+}
+
+.container {
+    padding: 30rpx;
+}
+
+.notice-item {
+    border-radius: 20rpx;
+    margin-bottom: 25rpx;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.notice-image {
+    width: 100%;
+    height: 400rpx;
+    border-radius: 20rpx 20rpx 0 0;
+}
+
+.notice-main {
+    background-color: white;
+    border-radius: 0 0 20rpx 20rpx;
+    padding: 20rpx 15rpx;
+}
+
+.notice-title {
+    font-size: 30rpx;
+    font-weight: bold;
+}
+
+.notice-content {
+    font-size: 28ropx;
+    color: #586271;
+    margin: 20rpx 0;
+}
+
+.notice-date {
+    display: flex;
+    font-size: 26rpx;
+    color: #a0a7b1;
+    align-items: center;
+}
+
+.date-image {
+    width: 25rpx;
+    height: 25rpx;
+    margin-right: 10rpx;
+}

packages/homeServer/noticeManage/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <view class="container">
+    <view v-for="(item, index) in noticeList" :key="index">
+      <view class="notice-item" @click="toNoticeDetail(item)">
+        <image :src="item.image" class="notice-image"></image>
+        <view class="notice-main">
+          <view class="notice-title">{{ item.title }}</view>
+          <view class="notice-content">{{ item.content }}</view>
+          <view class="notice-date">
+            <image
+              src="http://localhost:8080/time.png"
+              class="date-image"
+            ></image>
+            <view>{{ item.date }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  request,
+  picUrl,
+  NavgateTo,
+  menuButtonInfo,
+} from "../../../utils/index";
+export default {
+  data() {
+    return {
+      noticeList: [
+        {
+          image: "http://localhost:8080/test.png",
+          title: "公告标题1",
+          content: "公告内容",
+          date: "2023-01-01",
+        },
+        {
+          image: "http://localhost:8080/test.png",
+          title: "公告标题2",
+          content: "公告内容",
+          date: "2023-01-02",
+        },
+      ],
+    };
+  },
+  methods: {
+    toNoticeDetail(item) {
+      NavgateTo("/packages/homeServer/noticeDetails/index");
+    },
+  },
+};
+</script>
+
+<style>
+@import url("./index.css");
+</style>

pages.json

@@ -717,7 +717,14 @@
 					}
 				},
 				{
-					"path": "noticeDetials/index",
+					"path": "noticeManage/index",
+					"style": {
+						"navigationBarTitleText": "公告管理",
+						"navigationBarBackgroundColor": "#fff"
+					}
+				},
+				{
+					"path": "noticeDetails/index",
 					"style": {
 						"navigationBarTitleText": "公告详情",
 						"navigationBarBackgroundColor": "#fff"