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 { ...@@ -239,9 +239,9 @@ div.navigation {
239 margin-right: 15px; 239 margin-right: 15px;
240 cursor: pointer; 240 cursor: pointer;
241 height: auto!important; 241 height: auto!important;
242 line-height: auto!important;
243 position: relative; 242 position: relative;
244 top: -10px; 243 top: -10px;
244 height: auto;
245 } 245 }
246 .sysNewsItem { 246 .sysNewsItem {
247 position: relative; 247 position: relative;
...@@ -278,8 +278,8 @@ div.navigation { ...@@ -278,8 +278,8 @@ div.navigation {
278 display: block; 278 display: block;
279 } 279 }
280 .sysNewsList dd { 280 .sysNewsList dd {
281 height: 54px!important;
282 padding-top: 10px; 281 padding-top: 10px;
282 background-color: #ffffff!important;
283 } 283 }
284 .sysNewsList dd a:hover { 284 .sysNewsList dd a:hover {
285 background: none!important; 285 background: none!important;
...@@ -290,20 +290,12 @@ div.navigation { ...@@ -290,20 +290,12 @@ div.navigation {
290 display: block; 290 display: block;
291 line-height: 24px; 291 line-height: 24px;
292 color: #4a4a44; 292 color: #4a4a44;
293 white-space: normal;
293 } 294 }
294 .sysNewsList dd a p:hover { 295 .sysNewsList dd a p:hover {
295 color: #006CFF; 296 color: #006CFF;
296 } 297 }
297 .sysNewsList dd a p span { 298
298 font-size: 12px;
299 color: #006CFF;
300 }
301 .sysNewsList dd a p span:nth-child(1){
302 float: left;
303 }
304 .sysNewsList dd a p span:nth-child(2){
305 float: right;
306 }
307 .sysNewsTitle { 299 .sysNewsTitle {
308 background-color: #dedede; 300 background-color: #dedede;
309 line-height: 36px; 301 line-height: 36px;
...@@ -334,4 +326,19 @@ div.navigation { ...@@ -334,4 +326,19 @@ div.navigation {
334 background-color: #ffffff!important; 326 background-color: #ffffff!important;
335 color: #006CFF!important; 327 color: #006CFF!important;
336 font-weight: 100!important; 328 font-weight: 100!important;
329 }
330 .newsDetail {
331 width: 320px;
332 }
333 .ellipsis {
334 overflow: hidden!important;
335 text-overflow:ellipsis!important;
336 white-space: nowrap!important;
337 }
338 .newsDetail-time span{
339 font-size: 12px;
340 color: #006CFF!important;
341 }
342 .newsDetail-time span:nth-child(2){
343 float: right;
337 } 344 }
...\ No newline at end of file ...\ No newline at end of file
......
1 .sysnews-center-tab {
2 width: 1200px;
3 margin: 0 auto;
4 overflow: hidden;
5 padding: 20px 0;
6 }
7 .date-select {
8 width: 50%;
9 float: right;
10 }
11 .date-select input {
12 width: 36%;
13 display: inline-block;
14 }
15 .sysnews-center-tab ul li {
16 display: inline-block;
17 margin-right: 15px;
18 cursor: pointer;
19 }
20 .sysnews-center-tab ul {
21 width: 30%;
22 float: left;
23 padding-top: 7px;
24 }
25 .sysnews-center-tab .search-button {
26 margin-left: 10px;
27 }
28 /* 消息列表 */
29 .sysnews-list {
30 width: 1200px;
31 margin: 0 auto;
32 padding :20px;
33 border-radius: 5px;
34 border: 1px solid #dedede;
35 }
36 .sysnews-list li p {
37 display: inline-block;
38 }
39 .sysnews-list li .list-date {
40 margin-right: 15px;
41 color: #7e7b7b;
42 }
43 .sysnews-list li .list-type {
44 float: right;
45 color: #1E9FFF;
46 }
47 .sysnewsTabActive {
48 color: #1E9FFF;
49 }
50 .sysnews-list li p:hover {
51 color: #1E9FFF;
52 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -44,9 +44,9 @@ document.writeln(" <li class='layui-nav-item sysNews'>"); ...@@ -44,9 +44,9 @@ document.writeln(" <li class='layui-nav-item sysNews'>");
44 document.writeln(" <p class='sysNewsItem'><img class='userImage' src=\'" + localhostPaht + "/staticImages/xiaoxi.png\'><span class='sysNewsNum'>12</span></p>"); 44 document.writeln(" <p class='sysNewsItem'><img class='userImage' src=\'" + localhostPaht + "/staticImages/xiaoxi.png\'><span class='sysNewsNum'>12</span></p>");
45 document.writeln(" <dl class='layui-nav-child sysNewsList'>"); 45 document.writeln(" <dl class='layui-nav-child sysNewsList'>");
46 document.writeln(" <div class='sysNewsTitle'>最新消息</div>"); 46 document.writeln(" <div class='sysNewsTitle'>最新消息</div>");
47 document.writeln(" <div class='sysNewsOperation'><span>全部标记为已阅</span><a href=\'" + localhostPaht + "/staticViews/sysnews-center.html\'>历史消息</a></div>"); 47 document.writeln(" <div class='sysNewsOperation'><span>全部标记为已阅</span><a href=\'" + localhostPaht + "/staticViews/sysnews-center.html\'>查看全部</a></div>");
48 document.writeln(" <dd><a><p>您申请办理的XXX业务已成功提交</p><p><span>2020-12-32</span> <span>已读</span></p></a></dd>"); 48 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>");
49 document.writeln(" <dd><a><p>您申请办理的XXX业务已成功提交</p><p><span>2020-12-32</span> <span>已读</span></p></a></dd>"); 49 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>");
50 document.writeln(" </dl>"); 50 document.writeln(" </dl>");
51 document.writeln(" </li>"); 51 document.writeln(" </li>");
52 document.writeln(" <img class='userImage' src=\'" + localhostPaht + "/staticImages/user.png\'>"); 52 document.writeln(" <img class='userImage' src=\'" + localhostPaht + "/staticImages/user.png\'>");
......
1 $(function () {
2 newsCenterData();
3 })
4 function newsCenterData() {
5 $('.sysNewsList .newsDetail').mouseover(function () {
6 $('.sysNewsList .newsDetail').addClass('ellipsis');
7 $(this).removeClass('ellipsis');
8 })
9 }
...\ No newline at end of file ...\ No newline at end of file
......
1 layui.use('element', function () {
2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
3 });
4 layui.use('laydate', function () {
5 var laydate = layui.laydate;
6 //执行一个laydate实例
7 laydate.render({
8 elem: '#date1' //指定元素
9 });
10 });
11 layui.use('laydate', function () {
12 var laydate = layui.laydate;
13 //执行一个laydate实例
14 laydate.render({
15 elem: '#date2' //指定元素
16 });
17 });
18 $(function () {
19 initNewsData()
20 })
21 function initNewsData(){
22 $('.sysnews-center-tab ul li').click(function(){
23 $('.sysnews-center-tab ul li').removeClass('sysnewsTabActive');
24 $(this).addClass('sysnewsTabActive')
25 })
26 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
6 </style> 6 </style>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <title>消息中心</title> 8 <title>消息中心</title>
9 <link rel="stylesheet" type="text/css" href="../staticCss/sysnews-center.css">
9 <script type="text/javascript" src="../staticJs/head.js"></script> 10 <script type="text/javascript" src="../staticJs/head.js"></script>
10 <script type="text/javascript" src="../staticJs/sysnews-center.css"></script>
11 </head> 11 </head>
12 <body> 12 <body>
13 <div class="sysnews-center"> 13 <div class="sysnews-center">
...@@ -19,6 +19,31 @@ ...@@ -19,6 +19,31 @@
19 </span> 19 </span>
20 </div> 20 </div>
21 </div> 21 </div>
22 <div class="middleZoneHeight">
23 <div class="sysnews-center-tab">
24 <ul>
25 <li class="sysnewsTabActive">所有</li>
26 <li>未读消息</li>
27 <li>已读消息</li>
28 </ul>
29 <div class="date-select">
30 <input placeholder="请选择开始时间" type="text" class="layui-input" id="date1">
31 <span>至</span>
32 <input placeholder="请选择结束时间" type="text" class="layui-input" id="date2">
33 <button type="button" class="layui-btn layui-btn-normal search-button">查询</button>
34 </div>
35 </div>
36 <!-- 列表 -->
37 <ul class="sysnews-list">
38 <li>
39 <span class="list-date">2020-12-23</span>
40 <p>
41 您申请办理的XXX业务已成功提交，
42 </p>
43 <span class="list-type">已阅</span>
44 </li>
45 </ul>
46 </div>
22 </div> 47 </div>
23 </body> 48 </body>
24 </html> 49 </html>
......