From d469603253e4d6a9ef115bb78a7124a5584b4846 Mon Sep 17 00:00:00 2001 From: liuhanqing <447067298@qq.com> Date: Tue, 12 Jan 2021 22:11:19 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90message=E3=80=91=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E6=B6=88=E6=81=AF=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liuhanqing <447067298@qq.com> --- .../webapp/assets/modular/frame/message.css | 95 ++++++++++++------- .../webapp/assets/modular/frame/message.js | 23 +++-- .../webapp/pages/modular/index/message.html | 10 +- 3 files changed, 86 insertions(+), 42 deletions(-) diff --git a/src/main/webapp/assets/modular/frame/message.css b/src/main/webapp/assets/modular/frame/message.css index c23503d3..5139c3a5 100644 --- a/src/main/webapp/assets/modular/frame/message.css +++ b/src/main/webapp/assets/modular/frame/message.css @@ -1,68 +1,82 @@ +/** 消息列表样式 */ .message-list { position: absolute; - top: 51px; - bottom: 44px; + top: 48px; left: 0; right: 0; + bottom: 45px; overflow-y: auto; + -webkit-overflow-scrolling: touch; } .message-list-item { - padding: 10px 24px; + display: block; + padding: 10px 20px; + line-height: 24px; + position: relative; border-bottom: 1px solid #e8e8e8; - -ms-flex-align: start; - align-items: flex-start; - display: flex; - -ms-flex: 1 1; - flex: 1 1; } .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover { background: #F2F2F2; } -.message-item-icon { +.message-list-item .message-item-icon { width: 40px; height: 40px; - margin-right: 16px; - display: block; - margin-top: 4px; + line-height: 40px; + margin-top: -20px; + border-radius: 50%; + position: absolute; + left: 20px; + top: 50%; } -.message-item-right { - display: block; - flex: 1 0; - line-height: 24px; +.message-list-item .message-item-icon.layui-icon { + color: #fff; + font-size: 22px; + text-align: center; + background-color: #FE5D58; } -.message-item-title { +.message-list-item .message-item-icon + .message-item-right { + margin-left: 55px; +} + +.message-list-item .message-item-title { + color: #666; font-size: 14px; - color: rgba(0, 0, 0, .65); } -.message-item-text { - color: rgba(0, 0, 0, .45); +.message-list-item .message-item-text { + color: #999; font-size: 12px; } -.pull-right { - float: right; +.message-list-item > .layui-badge { + position: absolute; + right: 20px; + top: 12px; +} + +.message-list-item > .layui-badge + .message-item-right { + margin-right: 50px; } .message-btn-clear, .message-btn-more { + color: #666; display: block; padding: 10px 5px; - text-align: center; line-height: 24px; - color: #333; + text-align: center; + cursor: pointer; } .message-btn-clear { position: absolute; - bottom: 0; left: 0; - background: white; right: 0; + bottom: 0; border-top: 1px solid #e8e8e8; } @@ -71,13 +85,30 @@ font-size: 13px; } +.message-btn-more.ew-btn-loading > .ew-btn-loading-text { + font-size: 13px !important; +} + .message-list-empty { + color: #999; + padding: 100px 0; text-align: center; - color: rgba(0, 0, 0, .45); - padding: 73px 0 88px; + display: none; +} + +.message-list-empty > .layui-icon { + color: #ccc; + display: block; + font-size: 45px; + margin-bottom: 15px; +} + +.show-empty .message-list-empty { + display: block; +} + +.show-empty .message-btn-clear, .show-empty .message-list { + display: none; } -.message-list-empty img { - height: 76px; - margin-bottom: 16px; -} \ No newline at end of file +/** //消息列表样式结束 */ \ No newline at end of file diff --git a/src/main/webapp/assets/modular/frame/message.js b/src/main/webapp/assets/modular/frame/message.js index a1317d7a..e105384c 100644 --- a/src/main/webapp/assets/modular/frame/message.js +++ b/src/main/webapp/assets/modular/frame/message.js @@ -1,8 +1,8 @@ var Message = {} -layui.use(['element', 'admin', 'ax'], function () { +layui.use(['element', 'admin', 'HttpRequest'], function () { var $ = layui.jquery; var admin = layui.admin; - var $ax = layui.ax; + var HttpRequest = layui.HttpRequest; /* 加载更多按钮点击事件 */ /*$('#messageMoreBtn2').click(function () { @@ -17,18 +17,27 @@ layui.use(['element', 'admin', 'ax'], function () { * 全部标记为已读 */ Message.allReadMessage = function () { - var ajax = new $ax(Feng.ctxPath + "/sysMessage/allMessageReadFlag", function (data) { + var httpRequest = new HttpRequest(Feng.ctxPath + "/sysMessage/allMessageReadFlag", 'get', function (data) { + $('#messageClearBtn').parents('.layui-tab-item').addClass('show-empty'); + $('#msgCount').html(0); + Feng.success("标记已读成功!"); + }, function (data) { + Feng.error("标记已读失败!" + data.responseJSON.message); + }); + httpRequest.setAsync(true) + httpRequest.start(); + + /* var HttpRequest = new HttpRequest(Feng.ctxPath + "/sysMessage/allMessageReadFlag", 'get', function (data) { Feng.success("已读成功!"); }, function (data) { Feng.error("标记已读失败!" + data.responseJSON.message + "!"); }); - ajax.setAsync(true) - ajax.start(); + HttpRequest.setAsync(true) + HttpRequest.start();*/ }; /* 清空消息点击事件 */ $('#messageClearBtn').click(function () { - debugger - $(this).parents('.layui-tab-item').addClass('show-empty'); + Message.allReadMessage() }); diff --git a/src/main/webapp/pages/modular/index/message.html b/src/main/webapp/pages/modular/index/message.html index da03c346..ea5eb897 100644 --- a/src/main/webapp/pages/modular/index/message.html +++ b/src/main/webapp/pages/modular/index/message.html @@ -2,13 +2,17 @@
@if(isNotEmpty(msgUnReadList)){
- + +
+ +
没有消息
+
@for(msg in msgUnReadList){ @@ -16,7 +20,7 @@

${msg.messageTitle}

-

${msg.messageSendTime}

+

${msg.messageSendTime,"yyyy-MM-dd HH:mm:ss"}

@}