update announcement page

src/pages/AnnouncementPage.vue

@@ -1,11 +1,29 @@
 <!-- 公告页面 -->
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
-const emit = defineEmits(['home']);
+import { useWsStore } from "../store";
-const content = ref('公告加载中...');
+const emit = defineEmits(["home"]);
 
+// load 公告
+const vertical_content = ref("公告加载中...");
+const horizontal_content = ref("公告加载中...");
+const store = useWsStore();
+store.$subscribe((mutation, state) => {
+  vertical_content.value =
+    (state.data3.deliveryNotification || []).map(
+      (item) => item.deliveryContent || ""
+    ).join('').replaceAll(/<br(\s?)\/>/g, '') || "暂无公告";
+  horizontal_content.value =
+    (state.data2.deliveryMsg || [])
+      .map((item) => item.deliveryContent || "")
+      .join("\t") || "暂无公告";
+
+  console.log('vertical_content.value', vertical_content.value)
+});
+
+// handlers
 const handleClose = () => {
-  emit('home');
+  emit("home");
 };
 </script>
 
@@ -14,7 +32,7 @@ const handleClose = () => {
     <h1 class="announcement-title">公告栏</h1>
     <main class="announcement-content">
       <ScrollText :vertical="true" :duration="10" :pause-on-hover="true">
-        {{ content }}
+        <div v-html="vertical_content"></div>
       </ScrollText>
     </main>
     <div class="announcement-footer">
@@ -24,7 +42,7 @@ const handleClose = () => {
       >
         返回
       </button>
-      <ScrollText> 数据加载异常 </ScrollText>
+      <ScrollText> {{ horizontal_content }} </ScrollText>
     </div>
   </div>
 </template>
@@ -54,6 +72,8 @@ const handleClose = () => {
   padding: 8px 80px;
   font-size: 72px;
   font-family: serif;
+  overflow: hidden;
+  user-select: none;
 }
 
 .announcement-footer {
@@ -64,5 +84,6 @@ const handleClose = () => {
   line-height: 128px;
   font-family: sans-serif;
   position: relative;
+  user-select: none;
 }
 </style>