From cceee80bfd7a88de9c29084cee68d74413632e13 Mon Sep 17 00:00:00 2001 From: liuhanqing <447067298@qq.com> Date: Sun, 10 Jan 2021 18:06:10 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E3=80=90message=E3=80=91=E4=BF=AE=E6=94=B9?= =?UTF-8?q?message=E5=B1=95=E7=A4=BA=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index/controller/IndexViewController.java | 11 + .../webapp/assets/modular/frame/message.css | 99 +++++--- .../webapp/assets/modular/frame/message.js | 27 ++- src/main/webapp/pages/layout/_header.html | 6 + .../webapp/pages/modular/index/message.html | 212 ++++++++---------- 5 files changed, 194 insertions(+), 161 deletions(-) diff --git a/src/main/java/cn/stylefeng/guns/modular/index/controller/IndexViewController.java b/src/main/java/cn/stylefeng/guns/modular/index/controller/IndexViewController.java index da910b78..70d10c18 100644 --- a/src/main/java/cn/stylefeng/guns/modular/index/controller/IndexViewController.java +++ b/src/main/java/cn/stylefeng/guns/modular/index/controller/IndexViewController.java @@ -88,4 +88,15 @@ public class IndexViewController { return "/modular/index/change_password.html"; } + + /** + * 系统消息界面 + * + * @author liuhanqing + * @date 2021/1/10 17:42 + */ + @GetResource(name = "系统消息界面", path = "/view/message", requiredPermission = false) + public String message() { + return "/modular/index/message.html"; + } } 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-list-empty { - text-align: center; - color: rgba(0, 0, 0, .45); - padding: 73px 0 88px; +.message-btn-more.ew-btn-loading > .ew-btn-loading-text { + font-size: 13px !important; } -.message-list-empty img { - height: 76px; - margin-bottom: 16px; -} \ No newline at end of file +.message-list-empty { + color: #999; + padding: 100px 0; + text-align: center; + 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; +} + +/** //消息列表样式结束 */ \ 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 01c6dc97..976018b1 100644 --- a/src/main/webapp/assets/modular/frame/message.js +++ b/src/main/webapp/assets/modular/frame/message.js @@ -1,21 +1,20 @@ -layui.use(['element'], function () { +layui.use(['element', 'admin'], function () { var $ = layui.jquery; - var element = layui.element; + var admin = layui.admin; - // 加载更多按钮点击事件 - $('#btn-more1').click(function () { + /* 加载更多按钮点击事件 */ + $('#messageMoreBtn2').click(function () { var $that = $(this); - var str = $that.prev()[0].outerHTML; - for (var i = 0; i < 5; i++) { - $that.before(str); - } + admin.btnLoading($that); + setTimeout(function () { + admin.btnLoading($that, false); + $that.before($that.prev()[0].outerHTML); + }, 300); }); - // 清空消息点击事件 - $('.message-btn-clear').click(function () { - $(this).css('display', 'none'); - $(this).prev().find('.message-list-item').remove(); - $(this).prev().find('.message-btn-more').remove(); - $(this).prev().find('.message-list-empty').css('display', 'block'); + /* 清空消息点击事件 */ + $('#messageClearBtn1,#messageClearBtn2,#messageClearBtn3').click(function () { + $(this).parents('.layui-tab-item').addClass('show-empty'); }); + }); \ No newline at end of file diff --git a/src/main/webapp/pages/layout/_header.html b/src/main/webapp/pages/layout/_header.html index 8bffb849..938edfc8 100644 --- a/src/main/webapp/pages/layout/_header.html +++ b/src/main/webapp/pages/layout/_header.html @@ -21,6 +21,12 @@