Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
任超
/
js.portalStaticPage
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
daf8dc14
authored
2021-01-28 10:31:45 +0800
by
任超
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
style:消息
1 parent
06c574bf
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
177 additions
and
44 deletions
staticCss/sysnews-center.css
staticImages/readed.png
staticJs/header.js
staticJs/sysnews-center.js
staticViews/sysnews-center.html
staticCss/sysnews-center.css
View file @
daf8dc1
.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
...
...
staticImages/readed.png
0 → 100644
View file @
daf8dc1
3.22 KB
staticJs/header.js
View file @
daf8dc1
...
...
@@ -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>'
...
...
staticJs/sysnews-center.js
View file @
daf8dc1
...
...
@@ -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
...
...
staticViews/sysnews-center.html
View file @
daf8dc1
<!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>
<!-- 列表 -->
<ul
class=
"sysnews-list flow-default"
id=
"sys-news"
>
</ul>
<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>
...
...
Please
register
or
sign in
to post a comment