style:新闻列表

@@ -384,8 +384,11 @@ div.top-logo .top_logo_search i {
 }
 .newsDetail-time span{
     font-size: 12px;
-    color: #006CFF!important;
+    color: #555454;
 }
 .newsDetail-time span:nth-child(2){
     float: right;
 }
+.read {
+    color: #006CFF!important;
+}
\ No newline at end of file

@@ -33,6 +33,8 @@
     width: 1200px;
     margin: 0 auto;
     padding :20px;
+    height: 260px;
+    overflow: auto;
     border-radius: 5px;
     border: 1px solid #dedede;
 }

 $(function () {
     newsCenterData();
-    // 
-    fetchNewsData(getItem('myCookie').username);
+    if (getItem('myCookie') && getItem('myCookie').userid) {
+        fetchNewsData(getItem('myCookie').userid, 5);
+    }
 })
 function newsCenterData() {
     $(document).on("mouseover", ".sysNewsList .newsDetail", function (e) {
@@ -14,6 +15,9 @@ function newsCenterData() {
 }
 // 根据用户id及展示数量读取消息提醒
 function fetchNewsData(userid, size) {
+    var sysNewsList = $("#sysNewsList-con");
+    sysNewsList.empty();
+    var li;
     $.ajax({
         type: "get",  //提交方式  
         url: portal.api_url + "/portal/messageRemind/getDetailByUserid?userid="+userid+"&size="+size,//路径  
@@ -23,7 +27,18 @@ function fetchNewsData(userid, size) {
             if (result.code == 200 && result.data != null) {
                 console.log(result.data)
                 for (var i = 0; i < result.data.length; i++) {
-                   
+                    li = '<dd>'
+                    li += '<a>'
+                    li += '<p class="newsDetail ellipsis">'+result.data[i].content+'</p>'
+                    li += '<div class="newsDetail-time"><span>'+result.data[i].addTime+'</span>'
+                    if (result.data[i].status == 0) {
+                        li += '<span clas="unread" style="color: #ff0000">未读</span></div>'
+                    }else {
+                        li += '<span class="read">已读</span></div>'
+                    }
+                    li += '</a>'
+                    li += '</dd>'
+                    sysNewsList.append(li);
                 }
             }
         }

@@ -111,18 +111,8 @@ function appendData() {
     '<div class="sysNewsOperation">' +
     '<span>全部标记为已阅</span><a href="/staticViews/sysnews-center.html">查看全部</a>' +
     '</div>' +
-    '<dd>' +
-    '<a>' +
-    '<p class="newsDetail ellipsis">您申请办理的XXX业务已成功提交您申请办理的XXX业务已成功提交</p>' +
-    '<div class="newsDetail-time"><span>2020-12-32</span> <span>已读</span></div>' +
-    '</a>' +
-    '</dd>' +
-    '<dd>' +
-    '<a>' +
-    '<p class="newsDetail ellipsis">您申请办理的XXX业务已成功提交您申请办理的XXX业务已成功提交</p>' +
-    '<div class="newsDetail-time"><span>2020-12-32</span> <span>已读</span></div>' +
-    '</a>' +
-    '</dd>' +
+    '<div id="sysNewsList-con">'+
+    '</div>'+
     '</dl>' +
     '</li>' +
     '<img class="userImage" src="/staticImages/user.png">' +

@@ -16,15 +16,29 @@ layui.use('laydate', function () {
     });
 });
 $(function () {
+    if (getItem('myCookie') && getItem('myCookie').userid) {
         initNewsData()
+    }
 })
 function initNewsData() {
-    $('.sysnews-center-tab ul li').click(function () {
-        $('.sysnews-center-tab ul li').removeClass('sysnewsTabActive');
-        $(this).addClass('sysnewsTabActive')
-    })
+    layui.use('flow', function () {
+        var flow = layui.flow;
+        flow.load({
+            elem: '#sys-news' //流加载容器
+            , scrollElem: '#sys-news' //滚动条所在元素，一般不用填，此处只是演示需要。
+            , done: function (page, next) { //执行下一页的回调
+                //模拟数据插入
+                setTimeout(function () {
+                    var lis = [];
+                    for (var i = 0; i < 8; i++) {
+                        lis.push('<li>' + ((page - 1) * 8 + i + 1) + '</li>')
+                    }
+
+                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
+                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
+                    next(lis.join(''), page < 10); //假设总页数为 10
+                }, 500);
+            }
+        });
+    });
 }
\ No newline at end of file
-var data = { //数据
-    total: 10,
-    curr: 1
-};
\ No newline at end of file

@@ -34,7 +34,7 @@
                 </div>
             </div>
             <!-- 列表 -->
-            <ul class="sysnews-list">
+            <ul class="sysnews-list flow-default" id="sys-news">
                 <li>
                     <span class="list-date">2020-12-23</span>
                     <p>