Skip to content

任超 / js.portalStaticPage

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

style:消息

1 parent 06c574bf
Inline Side-by-side
Showing 5 changed files with 175 additions and 42 deletions
.sysnews-center {
padding-bottom: 15px;
}
.sysnews-center-tab {
.sysnews-head-search {
width: 1200px;
margin: 0 auto;
overflow: hidden;
padding: 20px 0;
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(10, 14, 40, 0.05);
border-radius: 6px;
border: 1px solid #E5E8ED;
margin: 15px auto;
padding: 28px 20px;
box-sizing: border-box;
}
.date-select {
width: 50%;
float: right;
.sysnews-head-search h2 {
font-weight: 500;
color: #7A7A7A;
font-size: 16px;
margin-bottom: 15px;
}
.date-select input {
width: 36%;
width: 400px;
display: inline-block;
height: 40px;
}
.sysnews-center-tab ul li {
.date-select p {
width: 180px;
height: 40px;
background: #0091FF;
border-radius: 4px;
color: #FFFFFF;
display: inline-block;
margin-right: 15px;
cursor: pointer;
text-align: center;
line-height: 40px;
margin-left: 30px;
}
.sysnews-center-tab ul {
width: 30%;
float: left;
padding-top: 7px;
.date-select span {
margin: 0 20px;
}
.sysnews-center-tab .search-button {
margin-left: 10px;
.date-select p img {
width: 15px;
height: 15px;
position: relative;
top: 1px;
}
/* 消息列表 */
.sysnews-list {
.sysnews-list-box {
width: 1200px;
margin: 0 auto;
padding :20px;
height: 260px;
overflow: auto;
border-radius: 5px;
border: 1px solid #dedede;
box-sizing: border-box;
margin-top: 20px;
box-shadow: 0px 2px 4px 0px rgba(10, 14, 40, 0.05);
border-radius: 6px;
border: 1px solid #E5E8ED;
margin-bottom: 30px;
}
.sysnews-list-head {
width: 100%;
height: 54px;
line-height: 54px;
color: #9B9B9B;
font-size: 16px;
border-bottom: 1px solid #E2EAF1;
}
.sysnews-list-head li {
display: inline-block;
margin-right: 70px;
margin-left: 20px;
cursor: pointer;
}
.sysnews-list {
height: 300px;
overflow: auto;
padding: 0 20px 30px 20px;
}
.sysnews-list li {
line-height: 50px;
border-bottom: 1px dotted #dedede;
margin-bottom: 15px;
line-height: 90px;
border-bottom: 1px dashed #dedede;
}
.sysnews-list li p {
display: inline-block;
width: 800px;
color: #9B9B9B;
}
.sysnews-list li .list-date {
margin-right: 15px;
color: #7e7b7b;
color: #7A7A7A;
float: right;
font-size: 14px;
margin-right: 60px;
}
.sysnews-list li .list-type {
float: right;
......@@ -60,7 +96,78 @@
.sysnews-list li p:hover {
color: #1E9FFF;
}
.page {
.head-select {
color: #686666;
position: relative;
}
.head-select::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #0F93F6;
left: 0;
bottom: -2px;
}
.finish-reading {
padding: 0 20px;
line-height: 50px;
}
.finish-reading p {
border-bottom: 1px dashed #E6E6E6;
font-size: 14px;
color: #7A7A7A;
}
.finish-reading p span {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid #CDCDCD;
position: relative;
top: 3px;
right: 5px;
}
.finish-reading p span::before {
content: '';
width: 4px;
height: 4px;
background: #AAAAAA;
border-radius: 50%;
position: absolute;
left: 5px;
top: 5px;
}
.tips {
display: inline-block;
width: 50px;
height: 30px;
border-radius: 4px 8px 4px 8px;
border: 1px solid rgba(15, 147, 246, 0.5);
text-align: center;
line-height: 30px;
color: #0F93F6;
font-size: 14px;
margin-right: 20px;
}
.readed {
width: 50px;
height: 46px;
float: right;
position: relative;
top: 20px;
right: 10px;
}
.list-type-unread {
width: 70px;
height: 28px;
border-radius: 15px;
opacity: 0.6;
border: 1px solid #0F93F6;
color: #0F93F6;
font-size: 14px;
text-align: center;
margin: 15px 0;
line-height: 28px;
position: relative;
top: 30px;
}
\ No newline at end of file
......
......@@ -41,7 +41,7 @@ function fetchNewsData(userid, size) {
if (result.code == 200 && result.data != null) {
for (var i = 0; i < result.data.length; i++) {
li = '<dd>'
li += '<a>'
li += '<a href="/staticViews/sysnews-center.html">'
li += '<p class="newsDetail ellipsis">' + result.data[i].content + '</p>'
li += '<div class="newsDetail-time"><span>' + result.data[i].addTime + '</span>'
li += '<span class="read">我知道了</span></div>'
......
......@@ -19,7 +19,15 @@ $(function () {
if (getItem('myCookie') && getItem('myCookie').userid) {
initNewsData()
}
handleInit();
})
// tabselect
function handleInit() {
$('.sysnews-list-head li').click(function(){
$('.sysnews-list-head li').removeClass('head-select');
$(this).addClass('head-select');
})
}
function initNewsData() {
layui.use('flow', function () {
var flow = layui.flow;
......@@ -44,13 +52,15 @@ function initNewsData() {
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200 && result.data != null) {
for (var i = 0; i < result.data.length; i++) {
li = '<li><span class="list-date">' + result.data[i].addTime + '</span>'
li = '<li>'
li += '<span class="tips">提示</span>'
li += '<p>' + result.data[i].content + '</p>'
if (result.data[i].status == 0) {
li += '<span class="list-type list-type-unread">未读</span></li>'
li += '<span class="list-type list-type-unread">我知道了</span>'
} else {
li += '<span class="list-type list-type-read">已读</span></li>'
li += '<img class="readed" src="/staticImages/readed.png">'
}
li += '<span class="list-date">' + result.data[i].addTime + '</span></li>'
lis.push(li)
}
next(lis.join(''), page < 2); //假设总页数为 10
......
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
......@@ -9,6 +10,7 @@
<link rel="stylesheet" type="text/css" href="../staticCss/sysnews-center.css">
<script type="text/javascript" src="../staticJs/head.js"></script>
</head>
<body>
<div class="sysnews-center">
<div class="navigation_crumbs">
......@@ -20,25 +22,39 @@
</div>
</div>
<div class="middleZoneHeight">
<div class="sysnews-center-tab">
<ul>
<li class="sysnewsTabActive">所有</li>
<li>未读消息</li>
<li>已读消息</li>
</ul>
<div class="sysnews-head-search">
<h2>消息查询</h2>
<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>
<p>
<img src="/staticImages/search.png" />
查询
</p>
</div>
</div>
<!-- 列表 -->
<div class="sysnews-list-box">
<ul class="sysnews-list-head">
<li class="head-select">所有消息</li>
<li>已读消息</li>
<li>未读消息</li>
</ul>
<div class="finish-reading">
<p>
<span></span>
全部标为已读
</p>
</div>
<ul class="sysnews-list flow-default" id="sys-news">
</ul>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="../staticJs/common.js"></script>
<script type="text/javascript" src="../staticJs/down.js"></script>
......