修改 消息列表可滚动

src/views/setting/notice/components/noticeContent.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="notice-content">
     <aside>
-      <a-list item-layout="horizontal"
-              :data-source="noticeList">
+      <a-list item-layout="horizontal" :data-source="noticeList">
         <template #renderItem="{ item }">
           <a-list-item @click="choose(item)">
             <a-list-item-meta :description="formatTime(item.createtime)">
               <template #title>
-                <a :style="{ color: item.readed ? '@m-grey2' : '@m-white1' }"
-                   href="javascript:;">{{ item.title }}</a>
+                <a :style="{ color: item.readed ? '@m-grey2' : '@m-white1' }" href="javascript:;">{{ item.title }}</a>
               </template>
               <template #avatar>
                 <a-badge :color="item.readed ? '@m-grey2' : 'orange'" />
@@ -35,48 +33,48 @@ import { formatTime } from '@/common/methods/format';
 import { watchEffect } from '@vue/runtime-core';
 
 function chooseNotice(fn: Function) {
-    interface ItemNotice {
-        title: string;
-        content: string; //内容
-        createtime: string; //创建时间
-    }
-    const chooseItemNotice = reactive<ItemNotice>({
-        title: '',
-        content: '',
-        createtime: '',
-    });
-    function choose(item: QueryNoticeRsp) {
-        item.content = item.content.replace(/\n/g, '<br />');
-        fn(item);
-        mergeObj(chooseItemNotice, item);
-    }
-    return { chooseItemNotice, choose };
+  interface ItemNotice {
+    title: string;
+    content: string; //内容
+    createtime: string; //创建时间
+  }
+  const chooseItemNotice = reactive<ItemNotice>({
+    title: '',
+    content: '',
+    createtime: '',
+  });
+  function choose(item: QueryNoticeRsp) {
+    item.content = item.content.replace(/\n/g, '<br />');
+    fn(item);
+    mergeObj(chooseItemNotice, item);
+  }
+  return { chooseItemNotice, choose };
 }
 
 export default defineComponent({
-    name: 'notice',
-    props: {
-        noticeList: {
-            type: Object as PropType<QueryNoticeRsp[]>,
-            default: [],
-        },
-    },
-    setup(props) {
-        // 公告消息
-        const { readNotice } = handleNotice();
-        const { chooseItemNotice, choose } = chooseNotice(readNotice);
-        watchEffect(() => {
-            if (props.noticeList.length) {
-                props.noticeList[0].content = props.noticeList[0].content.replace(/\n/g, '<br />');
-                mergeObj(chooseItemNotice, props.noticeList[0]);
-            }
-        });
-        return {
-            choose,
-            formatTime,
-            chooseItemNotice,
-        };
+  name: 'notice',
+  props: {
+    noticeList: {
+      type: Object as PropType<QueryNoticeRsp[]>,
+      default: [],
     },
+  },
+  setup(props) {
+    // 公告消息
+    const { readNotice } = handleNotice();
+    const { chooseItemNotice, choose } = chooseNotice(readNotice);
+    watchEffect(() => {
+      if (props.noticeList.length) {
+        props.noticeList[0].content = props.noticeList[0].content.replace(/\n/g, '<br />');
+        mergeObj(chooseItemNotice, props.noticeList[0]);
+      }
+    });
+    return {
+      choose,
+      formatTime,
+      chooseItemNotice,
+    };
+  },
 });
 </script>
 
@@ -88,6 +86,7 @@ export default defineComponent({
         padding: 10px;
         width: 202px;
         height: 619px;
+        overflow-y: auto;
         .ant-list-split {
             .ant-list-item-meta-title {
                 > a {