gitee
/
guns
mirror of https://gitee.com/stylefeng/guns
1
0
Fork 0
Code Issues Releases Wiki Activity

【message】修改message展示界面

pull/65/head
liuhanqing 2021-01-10 18:06:10 +08:00
parent e567f77da7
commit cceee80bfd
5 changed files with 194 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/main/java/cn/stylefeng/guns/modular/index/controller/IndexViewController.java
View File

@ -88,4 +88,15 @@ public class IndexViewController {
return "/modular/index/change_password.html"; 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";
}
} }

99
src/main/webapp/assets/modular/frame/message.css
View File

@ -1,68 +1,82 @@
/** 消息列表样式 */
.message-list { .message-list {
position: absolute; position: absolute;
top: 51px; top: 48px;
bottom: 44px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 45px;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
} }
.message-list-item { .message-list-item {
padding: 10px 24px; display: block;
padding: 10px 20px;
line-height: 24px;
position: relative;
border-bottom: 1px solid #e8e8e8; 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 { .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
background: #F2F2F2; background: #F2F2F2;
} }
.message-item-icon { .message-list-item .message-item-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: 16px; line-height: 40px;
display: block; margin-top: -20px;
margin-top: 4px; border-radius: 50%;
position: absolute;
left: 20px;
top: 50%;
} }
.message-item-right { .message-list-item .message-item-icon.layui-icon {
display: block; color: #fff;
flex: 1 0; font-size: 22px;
line-height: 24px; 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; font-size: 14px;
color: rgba(0, 0, 0, .65);
} }
.message-item-text { .message-list-item .message-item-text {
color: rgba(0, 0, 0, .45); color: #999;
font-size: 12px; font-size: 12px;
} }
.pull-right { .message-list-item > .layui-badge {
float: right; position: absolute;
right: 20px;
top: 12px;
}
.message-list-item > .layui-badge + .message-item-right {
margin-right: 50px;
} }
.message-btn-clear, .message-btn-more { .message-btn-clear, .message-btn-more {
color: #666;
display: block; display: block;
padding: 10px 5px; padding: 10px 5px;
text-align: center;
line-height: 24px; line-height: 24px;
color: #333; text-align: center;
cursor: pointer;
} }
.message-btn-clear { .message-btn-clear {
position: absolute; position: absolute;
bottom: 0;
left: 0; left: 0;
background: white;
right: 0; right: 0;
bottom: 0;
border-top: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8;
} }
@ -71,13 +85,30 @@
font-size: 13px; font-size: 13px;
} }
.message-list-empty { .message-btn-more.ew-btn-loading > .ew-btn-loading-text {
text-align: center; font-size: 13px !important;
color: rgba(0, 0, 0, .45);
padding: 73px 0 88px;
} }
.message-list-empty img { .message-list-empty {
height: 76px; color: #999;
margin-bottom: 16px; 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;
}
/** //消息列表样式结束 */

27
src/main/webapp/assets/modular/frame/message.js
View File

@ -1,21 +1,20 @@
layui.use(['element'], function () { layui.use(['element', 'admin'], function () {
var $ = layui.jquery; var $ = layui.jquery;
var element = layui.element; var admin = layui.admin;
// 加载更多按钮点击事件 /* 加载更多按钮点击事件 */
$('#btn-more1').click(function () { $('#messageMoreBtn2').click(function () {
var $that = $(this); var $that = $(this);
var str = $that.prev()[0].outerHTML; admin.btnLoading($that);
for (var i = 0; i < 5; i++) { setTimeout(function () {
$that.before(str); admin.btnLoading($that, false);
} $that.before($that.prev()[0].outerHTML);
}, 300);
}); });
// 清空消息点击事件 /* 清空消息点击事件 */
$('.message-btn-clear').click(function () { $('#messageClearBtn1,#messageClearBtn2,#messageClearBtn3').click(function () {
$(this).css('display', 'none'); $(this).parents('.layui-tab-item').addClass('show-empty');
$(this).prev().find('.message-list-item').remove();
$(this).prev().find('.message-btn-more').remove();
$(this).prev().find('.message-list-empty').css('display', 'block');
}); });
}); });

6
src/main/webapp/pages/layout/_header.html
View File

@ -21,6 +21,12 @@
</ul> </ul>
<ul class="layui-nav layui-layout-right"> <ul class="layui-nav layui-layout-right">
<li class="layui-nav-item" lay-unselect="">
<a ew-event="message" title="消息" data-url="${ctxPath}/view/message">
<i class="layui-icon layui-icon-notice"></i>
<span class="layui-badge-dot"></span>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect> <li class="layui-nav-item layui-hide-xs" lay-unselect>
<a ew-event="fullScreen" title="全屏"><i class="layui-icon layui-icon-screen-full"></i></a> <a ew-event="fullScreen" title="全屏"><i class="layui-icon layui-icon-screen-full"></i></a>
</li> </li>

212
src/main/webapp/pages/modular/index/message.html
View File

@ -1,128 +1,114 @@
@layout("/layout/_container.html",{title:"消息列表",css:["/assets/modular/frame/message.css"],js:["/assets/modular/frame/message.js"]}){ <link rel="stylesheet" href="${ctxPath}/assets/modular/frame/message.css" />
<div class="layui-tab layui-tab-brief" style="padding: 5px 0;margin: 0;"> <div class="layui-card" style="box-shadow: none;border: none;">
<ul class="layui-tab-title" style="text-align: center;"> <div class="layui-tab layui-tab-brief">
<li class="layui-this">通知(5)</li> <ul class="layui-tab-title" style="text-align: center;">
<li>私信(12)</li> <li class="layui-this">通知(5)</li>
<li>待办(3)</li> <li>私信(12)</li>
</ul> <li>待办(3)</li>
<div class="layui-tab-content" style="padding: 5px 0;"> </ul>
<div class="layui-tab-content" style="padding: 0;">
<!-- tab1 --> <!-- tab1 -->
<div class="layui-tab-item layui-show"> <div class="layui-tab-item layui-show">
<div class="message-list"> <div class="message-list">
<!-- 实际项目请使用后台数据循环出来 --> <!-- 实际项目请使用后台数据循环出来 -->
<a class="message-list-item" href="javascript:;"> <a class="message-list-item" href="javascript:;">
<img class="message-item-icon" src="${ctxPath}/assets/common/images/message.png"> <i class="layui-icon layui-icon-speaker message-item-icon"></i>
<div class="message-item-right"> <div class="message-item-right">
<h2 class="message-item-title">你收到了14份新周报</h2> <h2 class="message-item-title">你收到了14份新周报</h2>
<p class="message-item-text">10个月前</p> <p class="message-item-text">10个月前</p>
</div> </div>
</a> </a>
<a class="message-list-item" href="javascript:;"> <a class="message-list-item" href="javascript:;">
<img class="message-item-icon" src="${ctxPath}/assets/common/images/message.png"> <i class="layui-icon layui-icon-speaker message-item-icon"></i>
<div class="message-item-right"> <div class="message-item-right">
<h2 class="message-item-title">你收到了14份新周报</h2> <h2 class="message-item-title">你收到了14份新周报</h2>
<p class="message-item-text">10个月前</p> <p class="message-item-text">10个月前</p>
</div> </div>
</a> </a>
<a class="message-list-item" href="javascript:;"> <a class="message-list-item" href="javascript:;">
<img class="message-item-icon" src="${ctxPath}/assets/common/images/message.png"> <i class="layui-icon layui-icon-speaker message-item-icon"></i>
<div class="message-item-right"> <div class="message-item-right">
<h2 class="message-item-title">你收到了14份新周报</h2> <h2 class="message-item-title">你收到了14份新周报</h2>
<p class="message-item-text">10个月前</p> <p class="message-item-text">10个月前</p>
</div> </div>
</a> </a>
</div>
<!-- 列表为空 --> <!-- 列表为空 -->
<div class="message-list-empty" style="display: none;"> <div class="message-list-empty">
<img src="${ctxPath}/assets/common/images/img_msg_notice.svg"> <i class="layui-icon layui-icon-notice"></i>
<div>没有通知</div> <div>没有通知</div>
</div> </div>
<a id="messageClearBtn1" class="message-btn-clear">全部标记已读</a>
</div> </div>
<!-- tab2 -->
<a class="message-btn-clear" href="javascript:;">全部标记已读</a> <div class="layui-tab-item">
<div class="message-list">
</div> <a class="message-list-item" href="javascript:;">
<img class="message-item-icon" src="${ctxPath}/assets/common/images/head.jpg" alt="">
<!-- tab2 --> <div class="message-item-right">
<div class="layui-tab-item"> <h2 class="message-item-title">xx评论了你</h2>
<div class="message-list"> <p class="message-item-text">哈哈哈哈哈哈</p>
<a class="message-list-item" href="javascript:;"> <p class="message-item-text">10个月前</p>
<img class="message-item-icon" src="${ctxPath}/assets/common/images/head.png"> </div>
<div class="message-item-right"> </a>
<h2 class="message-item-title">xx评论了你</h2> <a class="message-list-item" href="javascript:;">
<p class="message-item-text">哈哈哈哈哈哈</p> <img class="message-item-icon" src="${ctxPath}/assets/common/images/head.jpg" alt="">
<p class="message-item-text">10个月前</p> <div class="message-item-right">
</div> <h2 class="message-item-title">xx评论了你</h2>
</a> <p class="message-item-text">哈哈哈哈哈哈</p>
<a class="message-list-item" href="javascript:;"> <p class="message-item-text">10个月前</p>
<img class="message-item-icon" src="${ctxPath}/assets/common/images/head.png"> </div>
<div class="message-item-right"> </a>
<h2 class="message-item-title">xx评论了你</h2> <a class="message-list-item" href="javascript:;">
<p class="message-item-text">哈哈哈哈哈哈</p> <img class="message-item-icon" src="${ctxPath}/assets/common/images/head.jpg" alt="">
<p class="message-item-text">10个月前</p> <div class="message-item-right">
</div> <h2 class="message-item-title">xx评论了你</h2>
</a> <p class="message-item-text">哈哈哈哈哈哈</p>
<a class="message-list-item" href="javascript:;"> <p class="message-item-text">10个月前</p>
<img class="message-item-icon" src="${ctxPath}/assets/common/images/head.png"> </div>
<div class="message-item-right"> </a>
<h2 class="message-item-title">xx评论了你</h2> <a id="messageMoreBtn2" class="message-btn-more">加载更多</a>
<p class="message-item-text">哈哈哈哈哈哈</p> </div>
<p class="message-item-text">10个月前</p>
</div>
</a>
<a id="btn-more1" class="message-btn-more" href="javascript:;">加载更多</a>
<!-- 列表为空 --> <!-- 列表为空 -->
<div class="message-list-empty" style="display: none;"> <div class="message-list-empty">
<img src="${ctxPath}/assets/common/images/img_msg_pri.svg"> <i class="layui-icon layui-icon-dialogue"></i>
<div>没有消息</div> <div>没有消息</div>
</div> </div>
<a id="messageClearBtn2" class="message-btn-clear">清空消息</a>
</div> </div>
<!-- tab3 -->
<a class="message-btn-clear" href="javascript:;">清空消息</a> <div class="layui-tab-item">
<div class="message-list">
</div> <a class="message-list-item" href="javascript:;">
<span class="layui-badge layui-badge-yellow">待完成</span>
<!-- tab3 --> <div class="message-item-right">
<div class="layui-tab-item"> <h2 class="message-item-title">你收到了14份新周报</h2>
<div class="message-list"> <p class="message-item-text">10个月前</p>
<a class="message-list-item" href="javascript:;"> </div>
<div class="message-item-right"> </a>
<span class="layui-badge pull-right">待完成</span> <a class="message-list-item" href="javascript:;">
<h2 class="message-item-title">你收到了14份新周报</h2> <span class="layui-badge layui-badge-green">已完成</span>
<p class="message-item-text">10个月前</p> <div class="message-item-right">
</div> <h2 class="message-item-title">你收到了14份新周报</h2>
</a> <p class="message-item-text">10个月前</p>
<a class="message-list-item" href="javascript:;"> </div>
<div class="message-item-right"> </a>
<span class="layui-badge layui-bg-gray pull-right">已完成</span> <a class="message-list-item" href="javascript:;">
<h2 class="message-item-title">你收到了14份新周报</h2> <span class="layui-badge layui-badge-red">未完成</span>
<p class="message-item-text">10个月前</p> <div class="message-item-right">
</div> <h2 class="message-item-title">你收到了14份新周报</h2>
</a> <p class="message-item-text">10个月前</p>
<a class="message-list-item" href="javascript:;"> </div>
<div class="message-item-right"> </a>
<span class="layui-badge layui-bg-gray pull-right">已完成</span> </div>
<h2 class="message-item-title">你收到了14份新周报</h2>
<p class="message-item-text">10个月前</p>
</div>
</a>
<!-- 列表为空 --> <!-- 列表为空 -->
<div class="message-list-empty" style="display: none;"> <div class="message-list-empty">
<img src="${ctxPath}/assets/common/images/img_msg_db.svg"> <i class="layui-icon layui-icon-flag"></i>
<div>没有待办</div> <div>没有待办</div>
</div> </div>
<a id="messageClearBtn3" class="message-btn-clear">清空待办</a>
</div> </div>
<a class="message-btn-clear" href="javascript:;">清空待办</a>
</div> </div>
</div> </div>
</div> </div>
@} <script type="text/javascript" href="${ctxPath}/assets/modular/frame/message.js"></script>