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
1 .sysnews-center { 1 .sysnews-head-search {
2 padding-bottom: 15px;
3 }
4 .sysnews-center-tab {
5 width: 1200px; 2 width: 1200px;
6 margin: 0 auto; 3 background: #FFFFFF;
7 overflow: hidden; 4 box-shadow: 0px 2px 4px 0px rgba(10, 14, 40, 0.05);
8 padding: 20px 0; 5 border-radius: 6px;
6 border: 1px solid #E5E8ED;
7 margin: 15px auto;
8 padding: 28px 20px;
9 box-sizing: border-box;
9 } 10 }
10 .date-select { 11 .sysnews-head-search h2 {
11 width: 50%; 12 font-weight: 500;
12 float: right; 13 color: #7A7A7A;
14 font-size: 16px;
15 margin-bottom: 15px;
13 } 16 }
14 .date-select input { 17 .date-select input {
15 width: 36%; 18 width: 400px;
16 display: inline-block; 19 display: inline-block;
20 height: 40px;
17 } 21 }
18 .sysnews-center-tab ul li { 22 .date-select p {
23 width: 180px;
24 height: 40px;
25 background: #0091FF;
26 border-radius: 4px;
27 color: #FFFFFF;
19 display: inline-block; 28 display: inline-block;
20 margin-right: 15px; 29 text-align: center;
21 cursor: pointer; 30 line-height: 40px;
31 margin-left: 30px;
22 } 32 }
23 .sysnews-center-tab ul { 33 .date-select span {
24 width: 30%; 34 margin: 0 20px;
25 float: left;
26 padding-top: 7px;
27 } 35 }
28 .sysnews-center-tab .search-button { 36 .date-select p img {
29 margin-left: 10px; 37 width: 15px;
38 height: 15px;
39 position: relative;
40 top: 1px;
30 } 41 }
31 /* 消息列表 */ 42 /* 消息列表 */
32 .sysnews-list { 43 .sysnews-list-box {
33 width: 1200px; 44 width: 1200px;
34 margin: 0 auto; 45 margin: 0 auto;
35 padding :20px;
36 height: 260px;
37 overflow: auto;
38 border-radius: 5px; 46 border-radius: 5px;
39 border: 1px solid #dedede; 47 border: 1px solid #dedede;
48 box-sizing: border-box;
49 margin-top: 20px;
50 box-shadow: 0px 2px 4px 0px rgba(10, 14, 40, 0.05);
51 border-radius: 6px;
52 border: 1px solid #E5E8ED;
53 margin-bottom: 30px;
54 }
55 .sysnews-list-head {
56 width: 100%;
57 height: 54px;
58 line-height: 54px;
59 color: #9B9B9B;
60 font-size: 16px;
61 border-bottom: 1px solid #E2EAF1;
62 }
63 .sysnews-list-head li {
64 display: inline-block;
65 margin-right: 70px;
66 margin-left: 20px;
67 cursor: pointer;
68 }
69 .sysnews-list {
70 height: 300px;
71 overflow: auto;
72 padding: 0 20px 30px 20px;
40 } 73 }
41 .sysnews-list li { 74 .sysnews-list li {
42 line-height: 50px; 75 line-height: 90px;
43 border-bottom: 1px dotted #dedede; 76 border-bottom: 1px dashed #dedede;
44 margin-bottom: 15px;
45 } 77 }
46 .sysnews-list li p { 78 .sysnews-list li p {
47 display: inline-block; 79 display: inline-block;
80 width: 800px;
81 color: #9B9B9B;
48 } 82 }
49 .sysnews-list li .list-date { 83 .sysnews-list li .list-date {
50 margin-right: 15px; 84 color: #7A7A7A;
51 color: #7e7b7b; 85 float: right;
86 font-size: 14px;
87 margin-right: 60px;
52 } 88 }
53 .sysnews-list li .list-type { 89 .sysnews-list li .list-type {
54 float: right; 90 float: right;
...@@ -60,7 +96,78 @@ ...@@ -60,7 +96,78 @@
60 .sysnews-list li p:hover { 96 .sysnews-list li p:hover {
61 color: #1E9FFF; 97 color: #1E9FFF;
62 } 98 }
63 .page { 99 .head-select {
100 color: #686666;
101 position: relative;
102 }
103 .head-select::after {
104 content: '';
105 position: absolute;
106 width: 100%;
107 height: 1px;
108 background-color: #0F93F6;
109 left: 0;
110 bottom: -2px;
111 }
112 .finish-reading {
113 padding: 0 20px;
114 line-height: 50px;
115 }
116 .finish-reading p {
117 border-bottom: 1px dashed #E6E6E6;
118 font-size: 14px;
119 color: #7A7A7A;
120 }
121 .finish-reading p span {
122 display: inline-block;
123 width: 14px;
124 height: 14px;
125 border-radius: 50%;
126 border: 1px solid #CDCDCD;
127 position: relative;
128 top: 3px;
129 right: 5px;
130 }
131 .finish-reading p span::before {
132 content: '';
133 width: 4px;
134 height: 4px;
135 background: #AAAAAA;
136 border-radius: 50%;
137 position: absolute;
138 left: 5px;
139 top: 5px;
140 }
141 .tips {
142 display: inline-block;
143 width: 50px;
144 height: 30px;
145 border-radius: 4px 8px 4px 8px;
146 border: 1px solid rgba(15, 147, 246, 0.5);
147 text-align: center;
148 line-height: 30px;
149 color: #0F93F6;
150 font-size: 14px;
151 margin-right: 20px;
152 }
153 .readed {
154 width: 50px;
155 height: 46px;
156 float: right;
157 position: relative;
158 top: 20px;
159 right: 10px;
160 }
161 .list-type-unread {
162 width: 70px;
163 height: 28px;
164 border-radius: 15px;
165 opacity: 0.6;
166 border: 1px solid #0F93F6;
167 color: #0F93F6;
168 font-size: 14px;
64 text-align: center; 169 text-align: center;
65 margin: 15px 0; 170 line-height: 28px;
171 position: relative;
172 top: 30px;
66 } 173 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -41,7 +41,7 @@ function fetchNewsData(userid, size) { ...@@ -41,7 +41,7 @@ function fetchNewsData(userid, size) {
41 if (result.code == 200 && result.data != null) { 41 if (result.code == 200 && result.data != null) {
42 for (var i = 0; i < result.data.length; i++) { 42 for (var i = 0; i < result.data.length; i++) {
43 li = '<dd>' 43 li = '<dd>'
44 li += '<a>' 44 li += '<a href="/staticViews/sysnews-center.html">'
45 li += '<p class="newsDetail ellipsis">' + result.data[i].content + '</p>' 45 li += '<p class="newsDetail ellipsis">' + result.data[i].content + '</p>'
46 li += '<div class="newsDetail-time"><span>' + result.data[i].addTime + '</span>' 46 li += '<div class="newsDetail-time"><span>' + result.data[i].addTime + '</span>'
47 li += '<span class="read">我知道了</span></div>' 47 li += '<span class="read">我知道了</span></div>'
......
...@@ -19,7 +19,15 @@ $(function () { ...@@ -19,7 +19,15 @@ $(function () {
19 if (getItem('myCookie') && getItem('myCookie').userid) { 19 if (getItem('myCookie') && getItem('myCookie').userid) {
20 initNewsData() 20 initNewsData()
21 } 21 }
22 handleInit();
22 }) 23 })
24 // tabselect
25 function handleInit() {
26 $('.sysnews-list-head li').click(function(){
27 $('.sysnews-list-head li').removeClass('head-select');
28 $(this).addClass('head-select');
29 })
30 }
23 function initNewsData() { 31 function initNewsData() {
24 layui.use('flow', function () { 32 layui.use('flow', function () {
25 var flow = layui.flow; 33 var flow = layui.flow;
...@@ -44,13 +52,15 @@ function initNewsData() { ...@@ -44,13 +52,15 @@ function initNewsData() {
44 success: function (result) {//返回数据根据结果进行相应的处理 52 success: function (result) {//返回数据根据结果进行相应的处理
45 if (result.code == 200 && result.data != null) { 53 if (result.code == 200 && result.data != null) {
46 for (var i = 0; i < result.data.length; i++) { 54 for (var i = 0; i < result.data.length; i++) {
47 li = '<li><span class="list-date">' + result.data[i].addTime + '</span>' 55 li = '<li>'
56 li += '<span class="tips">提示</span>'
48 li += '<p>' + result.data[i].content + '</p>' 57 li += '<p>' + result.data[i].content + '</p>'
49 if (result.data[i].status == 0) { 58 if (result.data[i].status == 0) {
50 li += '<span class="list-type list-type-unread">未读</span></li>' 59 li += '<span class="list-type list-type-unread">我知道了</span>'
51 } else { 60 } else {
52 li += '<span class="list-type list-type-read">已读</span></li>' 61 li += '<img class="readed" src="/staticImages/readed.png">'
53 } 62 }
63 li += '<span class="list-date">' + result.data[i].addTime + '</span></li>'
54 lis.push(li) 64 lis.push(li)
55 } 65 }
56 next(lis.join(''), page < 2); //假设总页数为 10 66 next(lis.join(''), page < 2); //假设总页数为 10
......
1 <!DOCTYPE html 1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <html xmlns="http://www.w3.org/1999/xhtml">
4
4 <head> 5 <head>
5 <style> 6 <style>
6 </style> 7 </style>
...@@ -9,6 +10,7 @@ ...@@ -9,6 +10,7 @@
9 <link rel="stylesheet" type="text/css" href="../staticCss/sysnews-center.css"> 10 <link rel="stylesheet" type="text/css" href="../staticCss/sysnews-center.css">
10 <script type="text/javascript" src="../staticJs/head.js"></script> 11 <script type="text/javascript" src="../staticJs/head.js"></script>
11 </head> 12 </head>
13
12 <body> 14 <body>
13 <div class="sysnews-center"> 15 <div class="sysnews-center">
14 <div class="navigation_crumbs"> 16 <div class="navigation_crumbs">
...@@ -20,25 +22,39 @@ ...@@ -20,25 +22,39 @@
20 </div> 22 </div>
21 </div> 23 </div>
22 <div class="middleZoneHeight"> 24 <div class="middleZoneHeight">
23 <div class="sysnews-center-tab"> 25 <div class="sysnews-head-search">
24 <ul> 26 <h2>消息查询</h2>
25 <li class="sysnewsTabActive">所有</li>
26 <li>未读消息</li>
27 <li>已读消息</li>
28 </ul>
29 <div class="date-select"> 27 <div class="date-select">
30 <input placeholder="请选择开始时间" type="text" class="layui-input" id="date1"> 28 <input placeholder="请选择开始时间" type="text" class="layui-input" id="date1">
31 <span>至</span> 29 <span>至</span>
32 <input placeholder="请选择结束时间" type="text" class="layui-input" id="date2"> 30 <input placeholder="请选择结束时间" type="text" class="layui-input" id="date2">
33 <button type="button" class="layui-btn layui-btn-normal search-button">查询</button> 31 <p>
32 <img src="/staticImages/search.png" />
33 查询
34 </p>
34 </div> 35 </div>
35 </div> 36 </div>
36 <!-- 列表 --> 37 <!-- 列表 -->
38 <div class="sysnews-list-box">
39 <ul class="sysnews-list-head">
40 <li class="head-select">所有消息</li>
41 <li>已读消息</li>
42 <li>未读消息</li>
43 </ul>
44 <div class="finish-reading">
45 <p>
46 <span></span>
47 全部标为已读
48 </p>
49 </div>
37 <ul class="sysnews-list flow-default" id="sys-news"> 50 <ul class="sysnews-list flow-default" id="sys-news">
51
38 </ul> 52 </ul>
39 </div> 53 </div>
40 </div> 54 </div>
55 </div>
41 </body> 56 </body>
57
42 </html> 58 </html>
43 <script type="text/javascript" src="../staticJs/common.js"></script> 59 <script type="text/javascript" src="../staticJs/common.js"></script>
44 <script type="text/javascript" src="../staticJs/down.js"></script> 60 <script type="text/javascript" src="../staticJs/down.js"></script>
......