Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
ccb3b579 by 任超
Options

style:消息

1 parent 1e13ad23
Inline Side-by-side
Showing 6 changed files with 135 additions and 16 deletions
......@@ -239,9 +239,9 @@ div.navigation {
margin-right: 15px;
cursor: pointer;
height: auto!important;
line-height: auto!important;
position: relative;
top: -10px;
height: auto;
}
.sysNewsItem {
position: relative;
......@@ -278,8 +278,8 @@ div.navigation {
display: block;
}
.sysNewsList dd {
height: 54px!important;
padding-top: 10px;
background-color: #ffffff!important;
}
.sysNewsList dd a:hover {
background: none!important;
......@@ -290,20 +290,12 @@ div.navigation {
display: block;
line-height: 24px;
color: #4a4a44;
white-space: normal;
}
.sysNewsList dd a p:hover {
color: #006CFF;
}
.sysNewsList dd a p span {
font-size: 12px;
color: #006CFF;
}
.sysNewsList dd a p span:nth-child(1){
float: left;
}
.sysNewsList dd a p span:nth-child(2){
float: right;
}
.sysNewsTitle {
background-color: #dedede;
line-height: 36px;
......@@ -335,3 +327,18 @@ div.navigation {
color: #006CFF!important;
font-weight: 100!important;
}
.newsDetail {
width: 320px;
}
.ellipsis {
overflow: hidden!important;
text-overflow:ellipsis!important;
white-space: nowrap!important;
}
.newsDetail-time span{
font-size: 12px;
color: #006CFF!important;
}
.newsDetail-time span:nth-child(2){
float: right;
}
\ No newline at end of file
......
.sysnews-center-tab {
width: 1200px;
margin: 0 auto;
overflow: hidden;
padding: 20px 0;
}
.date-select {
width: 50%;
float: right;
}
.date-select input {
width: 36%;
display: inline-block;
}
.sysnews-center-tab ul li {
display: inline-block;
margin-right: 15px;
cursor: pointer;
}
.sysnews-center-tab ul {
width: 30%;
float: left;
padding-top: 7px;
}
.sysnews-center-tab .search-button {
margin-left: 10px;
}
/* 消息列表 */
.sysnews-list {
width: 1200px;
margin: 0 auto;
padding :20px;
border-radius: 5px;
border: 1px solid #dedede;
}
.sysnews-list li p {
display: inline-block;
}
.sysnews-list li .list-date {
margin-right: 15px;
color: #7e7b7b;
}
.sysnews-list li .list-type {
float: right;
color: #1E9FFF;
}
.sysnewsTabActive {
color: #1E9FFF;
}
.sysnews-list li p:hover {
color: #1E9FFF;
}
\ No newline at end of file
......
......@@ -44,9 +44,9 @@ document.writeln(" <li class='layui-nav-item sysNews'>");
document.writeln(" <p class='sysNewsItem'><img class='userImage' src=\'" + localhostPaht + "/staticImages/xiaoxi.png\'><span class='sysNewsNum'>12</span></p>");
document.writeln(" <dl class='layui-nav-child sysNewsList'>");
document.writeln(" <div class='sysNewsTitle'>最新消息</div>");
document.writeln(" <div class='sysNewsOperation'><span>全部标记为已阅</span><a href=\'" + localhostPaht + "/staticViews/sysnews-center.html\'>历史消息</a></div>");
document.writeln(" <dd><a><p>您申请办理的XXX业务已成功提交</p><p><span>2020-12-32</span> <span>已读</span></p></a></dd>");
document.writeln(" <dd><a><p>您申请办理的XXX业务已成功提交</p><p><span>2020-12-32</span> <span>已读</span></p></a></dd>");
document.writeln(" <div class='sysNewsOperation'><span>全部标记为已阅</span><a href=\'" + localhostPaht + "/staticViews/sysnews-center.html\'>查看全部</a></div>");
document.writeln(" <dd><a><p class='newsDetail ellipsis'>您申请办理的XXX业务已成功提交您申请办理的XXX业务已成功提交</p><div class='newsDetail-time'><span>2020-12-32</span> <span>已读</span></div></a></dd>");
document.writeln(" <dd><a><p class='newsDetail ellipsis'>您申请办理的XXX业务已成功提交您申请办理的XXX业务已成功提交</p><div class='newsDetail-time'><span>2020-12-32</span> <span>已读</span></div></a></dd>");
document.writeln(" </dl>");
document.writeln(" </li>");
document.writeln(" <img class='userImage' src=\'" + localhostPaht + "/staticImages/user.png\'>");
......
$(function () {
newsCenterData();
})
function newsCenterData() {
$('.sysNewsList .newsDetail').mouseover(function () {
$('.sysNewsList .newsDetail').addClass('ellipsis');
$(this).removeClass('ellipsis');
})
}
\ No newline at end of file
......
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
});
layui.use('laydate', function () {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#date1' //指定元素
});
});
layui.use('laydate', function () {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#date2' //指定元素
});
});
$(function () {
initNewsData()
})
function initNewsData(){
$('.sysnews-center-tab ul li').click(function(){
$('.sysnews-center-tab ul li').removeClass('sysnewsTabActive');
$(this).addClass('sysnewsTabActive')
})
}
\ No newline at end of file
......
......@@ -6,8 +6,8 @@
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>消息中心</title>
<link rel="stylesheet" type="text/css" href="../staticCss/sysnews-center.css">
<script type="text/javascript" src="../staticJs/head.js"></script>
<script type="text/javascript" src="../staticJs/sysnews-center.css"></script>
</head>
<body>
<div class="sysnews-center">
......@@ -19,6 +19,31 @@
</span>
</div>
</div>
<div class="middleZoneHeight">
<div class="sysnews-center-tab">
<ul>
<li class="sysnewsTabActive">所有</li>
<li>未读消息</li>
<li>已读消息</li>
</ul>
<div class="date-select">
<input placeholder="请选择开始时间" type="text" class="layui-input" id="date1">
<span>至</span>
<input placeholder="请选择结束时间" type="text" class="layui-input" id="date2">
<button type="button" class="layui-btn layui-btn-normal search-button">查询</button>
</div>
</div>
<!-- 列表 -->
<ul class="sysnews-list">
<li>
<span class="list-date">2020-12-23</span>
<p>
您申请办理的XXX业务已成功提交，
</p>
<span class="list-type">已阅</span>
</li>
</ul>
</div>
</div>
</body>
</html>
......