完成公告

src/pages/index/index.vue

@@ -25,7 +25,7 @@
                                 interval="3000"
                                 duration="1000"
                             >
-                                <swiper-item v-for="(item, index) in notifyList" :key="index">
+                                <swiper-item v-for="(item, index) in notifyList" :key="index" @click="notifyDetail(item)">
                                     <view class="swiper-item notify-item">
                                         <text class="limit-line clamp-1">
                                             {{ item.title }}
@@ -74,11 +74,17 @@
                 </view>
             </view>
         </view>
+        <widget-modal v-show="showNotifyModal" @close="showNotifyModal = false" :title="notify.title">
+            <view class="message-box">
+                <rich-text :nodes="notify.content"></rich-text>
+            </view>
+        </widget-modal>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import WidgetModal from "@/components/widgets/modal";
 export default {
     name: "index",
     data() {
@@ -87,6 +93,11 @@ export default {
             safePt: 0,
             backgroundImage: require("@/static/temp/1.png"),
             notifyList: [],
+            showNotifyModal: false,
+            notify: {
+                title: "",
+                content: "",
+            },
             action: {
                 item1: 0,
                 item2: 0,
@@ -97,6 +108,7 @@ export default {
     },
     components: {
         AppLayout,
+        WidgetModal,
     },
     onLoad() {
         this.$models.system.notifyList(1, 1).then((list) => {
@@ -119,6 +131,11 @@ export default {
             this.$store.commit("system/messageTabIndex", id);
             this.$utils.toPage("/pages/message/message", {}, "switch");
         },
+        notifyDetail(detail) {
+            this.showNotifyModal = true;
+            this.notify.title = detail.title;
+            this.notify.content = detail.message;
+        },
     },
 };
 </script>
@@ -240,4 +257,8 @@ export default {
         background: linear-gradient(135deg, #328eff, #2fb2fe, #44c2ee);
     }
 }
+.message-box {
+    max-height: 400rpx;
+    overflow-y: scroll;
+}
 </style>