Skip to content

任超 / js.portalStaticPage

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

refactor:新闻动态

1 parent 0afd5a2d
Inline Side-by-side
Showing 4 changed files with 158 additions and 43 deletions
...@@ -30,7 +30,6 @@ ...@@ -30,7 +30,6 @@
30 </div> 30 </div>
31 </div> 31 </div>
32 </div> 32 </div>
33 <!-- 头部搜索区域 -->
34 <div class="head-search"> 33 <div class="head-search">
35 <div class="head-contentBox"> 34 <div class="head-contentBox">
36 <img class="logo-img" src="/staticImages/logo.png" alt="不动产"> 35 <img class="logo-img" src="/staticImages/logo.png" alt="不动产">
...@@ -97,23 +96,45 @@ ...@@ -97,23 +96,45 @@
97 <div class="news-module-box"> 96 <div class="news-module-box">
98 <img class="news-img" src="/staticImages/default-news.png" /> 97 <img class="news-img" src="/staticImages/default-news.png" />
99 <ul class="news-title"> 98 <ul class="news-title">
100 <li class="hot-focus"> 99 <li class="hot-focus item-title news-active" data-id="1">
101 <img src="/staticImages/redian.png" /> 100 <img src="/staticImages/redian.png" />
102 热点聚焦 101 热点聚焦
103 </li> 102 </li>
104 <li> 103 <li class="item-title" data-id="2">
105 新闻动态 104 新闻动态
106 </li> 105 </li>
107 <li class="see-more"> 106 <li class="see-more">
108 <a>查看全部</a> 107 <a href="/staticViews/newsList/1.html">查看全部</a>
109 <img src="/staticImages/more.png" /> 108 <img src="/staticImages/more.png" />
110 </li> 109 </li>
111 </ul> 110 </ul>
112 <ul class="hotspot-list"> 111 <!-- 热点聚焦内容 -->
113 112 <ul class="hotspot-list item-list">
113 <li>
114 <svg class="icon svg-icon" aria-hidden="true">
115 <use xlink:href="#iconzuixin"></use>
116 </svg>
117 <a class="newest" href="">创新技术体系引领事业发展事实预计创新技术体系引领事业发展事实预计</a>
118 <span>2020-06-19</span>
119 </li>
120 <li>
121 <a href="">创新技术体系引领事业发展事实预计创新技术体系引领事业发展事实预计</a>
122 <span>2020-06-19</span>
123 </li>
114 </ul> 124 </ul>
115 <ul class="news-information-list"> 125 <!-- 新闻动态内容 -->
116 126 <ul class="news-information-list item-list">
127 <li>
128 <svg class="icon svg-icon" aria-hidden="true">
129 <use xlink:href="#iconzuixin"></use>
130 </svg>
131 <a class="newest" href="">1创新技术体系引领事业发展事实预计创新技术体系引领事业发展事实预计</a>
132 <span>2020-06-19</span>
133 </li>
134 <li>
135 <a href="">1创新技术体系引领事业发展事实预计创新技术体系引领事业发展事实预计</a>
136 <span>2020-06-19</span>
137 </li>
117 </ul> 138 </ul>
118 </div> 139 </div>
119 </div> 140 </div>
......
...@@ -633,13 +633,20 @@ div.c_five ul li a img { ...@@ -633,13 +633,20 @@ div.c_five ul li a img {
633 color: #4A4A4A; 633 color: #4A4A4A;
634 cursor: pointer; 634 cursor: pointer;
635 } 635 }
636 .news-title .item-title {
637 position: relative;
638 }
636 .news-title .hot-focus { 639 .news-title .hot-focus {
637 margin-right: 100px; 640 margin-right: 100px;
638 position: relative;
639 } 641 }
640 .news-title .hot-focus::after { 642 /* 选中样式 */
643 .news-active {
644 font-size: 24px!important;
645 font-weight: 700;
646 }
647 .news-active::after {
641 position: absolute; 648 position: absolute;
642 width: 124px; 649 width: 100%;
643 height: 1px; 650 height: 1px;
644 background-color: #006CFF; 651 background-color: #006CFF;
645 content: ""; 652 content: "";
...@@ -666,4 +673,55 @@ div.c_five ul li a img { ...@@ -666,4 +673,55 @@ div.c_five ul li a img {
666 .news-title .see-more img{ 673 .news-title .see-more img{
667 width: 6px; 674 width: 6px;
668 height: 12px; 675 height: 12px;
676 }
677 .item-list {
678 float: right;
679 width: 496px;
680 }
681 .news-information-list {
682 display: none;
683 }
684
685 .item-list li{
686 font-size: 18px;
687 font-weight: 400;
688 color: #4A4A4A;
689 line-height: 45px;
690 overflow: hidden;
691 }
692 .item-list li .icon {
693 height: 26px;
694 width: 10%!important;
695 float: left;
696 margin-top: 9px;
697 margin-left: -5px;
698 }
699 .item-list li a {
700 display: inline-block;
701 float: left;
702 overflow: hidden;
703 text-overflow:ellipsis;
704 white-space: nowrap;
705 width: 373px;
706 text-align: left;
707 position: relative;
708 padding-left: 10px;
709 }
710 .item-list li .newest {
711 width: 325px;
712 }
713 .item-list li a::before {
714 position: absolute;
715 width: 4px;
716 height: 4px;
717 border-radius: 4px;
718 background-color: #4a4a4a;
719 content: "";
720 left: 2px;
721 top: 20px;
722 }
723 .item-list li span {
724 font-size: 16px;
725 color: #9B9B9B;
726 float: right;
669 } 727 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,7 +4,6 @@ var pos = curWwwPath.indexOf(pathName); ...@@ -4,7 +4,6 @@ var pos = curWwwPath.indexOf(pathName);
4 var localhostPaht = curWwwPath.substring(0, pos); 4 var localhostPaht = curWwwPath.substring(0, pos);
5 document.writeln("<!DOCTYPE html>"); 5 document.writeln("<!DOCTYPE html>");
6 document.writeln("<html lang=\'en\'>"); 6 document.writeln("<html lang=\'en\'>");
7 document.writeln("");
8 document.writeln("<head>"); 7 document.writeln("<head>");
9 document.writeln(" <meta charset=\'UTF-8\'>"); 8 document.writeln(" <meta charset=\'UTF-8\'>");
10 document.writeln(" <meta name=\'copyright\' content=\' &reg 技术支持 All Rights Reserved\' />"); 9 document.writeln(" <meta name=\'copyright\' content=\' &reg 技术支持 All Rights Reserved\' />");
...@@ -21,51 +20,76 @@ document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/sta ...@@ -21,51 +20,76 @@ document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/sta
21 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticJs/common.js\'></script>"); 20 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticJs/common.js\'></script>");
22 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticJs/header.js\'></script>"); 21 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticJs/header.js\'></script>");
23 document.writeln("</head>"); 22 document.writeln("</head>");
24 document.writeln(""); 23 document.writeln("<div class=\'home-sticky\'>");
25 document.writeln("<div class='home-sticky'>"); 24 document.writeln(" <div class=\'top-logo\'>");
26 document.writeln(" <div class=\'top-logo\'>"); 25 document.writeln(" <div class=\'top_logo_content\'>");
27 document.writeln(" <div class=\'top_logo_content\'>"); 26 document.writeln(" <div class=\'head-time\'>今天是2021年1月19日 星期二</div>");
28 document.writeln(" <h1><a href=\'" + localhostPaht + "/index.html\'><img src=\'" + localhostPaht + "/staticImages/logo.png\' alt=\'西安市不动产登记平台\' /></a></h1>"); 27 document.writeln(" <ul class=\'login layui-nav login-con\'>");
29 document.writeln(""); 28 document.writeln(" <span class=\'loginButton\' id=\'login\'>登录</span>");
30 document.writeln(" <div class=\'top_logo_search\'>"); 29 document.writeln(" <p class=\'loginButton register\' id=\'register\'><a href=\'/staticViews/register.html\'>注册</a></p>");
31 document.writeln(" <input type=\'text\' name=\'title\' required lay-verify=\'required\' placeholder=\'请输入关键字搜索\' autocomplete=\'off\'"); 30 document.writeln(" </ul>");
32 document.writeln(" class=\'layui-input\'>");
33 document.writeln(" <img class=\'search_img\' src=\'" + localhostPaht + "/staticImages/search.png\'>");
34 document.writeln(" </div>"); 31 document.writeln(" </div>");
35 document.writeln(" <ul class='login layui-nav login-con'>");
36 document.writeln(" <span class='loginButton' id='login'>登录</span>");
37 document.writeln(" <p class='loginButton register' id='register'><a href=\'" + localhostPaht + "/staticViews/register.html\'>注册</a></p>");
38 document.writeln(" </ul>");
39 document.writeln(" </div>"); 32 document.writeln(" </div>");
40 document.writeln(" </div>"); 33 document.writeln(" </div>");
41 document.writeln(" <div class=\'navigation\'>"); 34 document.writeln(" <div class=\'head-search\'>");
42 document.writeln(" <ul class=\'layui-nav layui-bg-blue\' lay-filter=\'\'>"); 35 document.writeln(" <div class=\'head-contentBox\'>");
43 document.writeln(" <li id='index' class=\'layui-nav-item\'><a href=\'" + localhostPaht + "/index.html\' title=\'首页\'>首页</a></li>"); 36 document.writeln(" <img class=\'logo-img\' src=\'/staticImages/logo.png\' alt=\'不动产\'>");
44 document.writeln(" <li id='news' class=\'layui-nav-item\'><a href=\'" + localhostPaht + "/staticViews/newsList/1.html\' title=\'新闻动态\'>新闻动态</a></li>"); 37 document.writeln(" <div class=\'content-search\'>");
45 document.writeln(" <li id='zwgk' class=\'layui-nav-item\'>"); 38 document.writeln(" <input type=\'text\' placeholder=\'请输入关键字搜索\' class=\'layui-input head-search-input\'>");
39 document.writeln(" <p class=\'search-button\'>");
40 document.writeln(" <img src=\'/staticImages/search.png\' />");
41 document.writeln(" 一键查询");
42 document.writeln(" </p>");
43 document.writeln(" <ul class=\'search-hint\'>");
44 document.writeln(" <li class=\'hot-search\'>");
45 document.writeln(" <img src=\'/staticImages/remen.png\' />");
46 document.writeln(" 热门搜索");
47 document.writeln(" </li>");
48 document.writeln(" <li>");
49 document.writeln(" 在线预约");
50 document.writeln(" </li>");
51 document.writeln(" <li>");
52 document.writeln(" 网上申请");
53 document.writeln(" </li>");
54 document.writeln(" <li>");
55 document.writeln(" 办事指南");
56 document.writeln(" </li>");
57 document.writeln(" <li>");
58 document.writeln(" 档案查询");
59 document.writeln(" </li>");
60 document.writeln(" </ul>");
61 document.writeln(" </div>");
62 document.writeln(" </div>");
63 document.writeln(" </div>");
64 document.writeln(" <div class=\'layui-nav navigation layui-bg-blue\'>");
65 document.writeln(" <ul class=\'navigation-content\'>");
66 document.writeln(" <li id=\'index\' class=\'layui-nav-item\'><a href=\'/index.html\' title=\'首页\'>首页</a></li>");
67 document.writeln(" <li id=\'news\' class=\'layui-nav-item\'><a href=\'/staticViews/newsList/1.html\' title=\'新闻动态\'>新闻动态</a></li>");
68 document.writeln(" <li id=\'zwgk\' class=\'layui-nav-item\'>");
46 document.writeln(" <a href=\'javascript:;\'>政务公开</a>"); 69 document.writeln(" <a href=\'javascript:;\'>政务公开</a>");
47 document.writeln(" <dl class=\'layui-nav-child\'>"); 70 document.writeln(" <dl class=\'layui-nav-child\'>");
48 document.writeln(" <dd><a href=\'" + localhostPaht + "/staticViews/policyList/1.html\'>相应政策</a></dd>"); 71 document.writeln(" <dd><a href=\'/staticViews/policyList/1.html\'>相应政策</a></dd>");
49 document.writeln(" <dd><a href=\'" + localhostPaht + "/staticViews/lawList/1.html\'>法律法规</a></dd>"); 72 document.writeln(" <dd><a href=\'/staticViews/lawList/1.html\'>法律法规</a></dd>");
50 document.writeln(" <dd><a href=\'" + localhostPaht + "/staticViews/gsgg.html\'>公示公告</a></dd>"); 73 document.writeln(" <dd><a href=\'/staticViews/gsgg.html\'>公示公告</a></dd>");
51 document.writeln(" </dl>"); 74 document.writeln(" </dl>");
52 document.writeln(" </li>"); 75 document.writeln(" </li>");
53 document.writeln(" <li id='bszn' class=\'layui-nav-item\'><a href=\'" + localhostPaht + "/staticViews/bszn.html\' title=\'办事指南\'>办事指南</a></li>"); 76 document.writeln(" <li id=\'bszn\' class=\'layui-nav-item\'><a href=\'/staticViews/bszn.html\' title=\'办事指南\'>办事指南</a></li>");
54 document.writeln(" <li id='wssq' class=\'layui-nav-item\'><a href=\'" + localhostPaht + "/staticViews/wssq.html\' title=\'网上申请\'>网上申请</a></li>"); 77 document.writeln(" <li id=\'wssq\' class=\'layui-nav-item\'><a href=\'/staticViews/wssq.html\' title=\'网上申请\'>网上申请</a></li>");
55 document.writeln(" <li class=\'layui-nav-item\'>"); 78 document.writeln(" <li class=\'layui-nav-item\'>");
56 document.writeln(" <a href=\'javascript:;\'>查验中心</a>"); 79 document.writeln(" <a href=\'javascript:;\'>查验中心</a>");
57 document.writeln(" <dl class=\'layui-nav-child\'>"); 80 document.writeln(" <dl class=\'layui-nav-child\'>");
58 document.writeln(" <!-- 二级菜单 -->"); 81 document.writeln(" <!-- 二级菜单 -->");
59 document.writeln(" <dd><a href=\'" + localhostPaht + "/staticViews/convenienceService/fileQuery.html\'>档案查询</a></dd>"); 82 document.writeln(" <dd><a href=\'/staticViews/convenienceService/fileQuery.html\'>档案查询</a></dd>");
60 document.writeln(" <dd><a href=\'" + localhostPaht + "/staticViews/convenienceService/recordInquiry.html\'>合同备案查询</a></dd>"); 83 document.writeln(" <dd><a href=\'/staticViews/convenienceService/recordInquiry.html\'>合同备案查询</a>");
61 document.writeln(" <dd><a href=\'" + localhostPaht + "/staticViews/convenienceService/certificateVerification.html\'>证书核验</a></dd>"); 84 document.writeln(" </dd>");
85 document.writeln(" <dd><a href=\'/staticViews/convenienceService/certificateVerification.html\'>证书核验</a>");
86 document.writeln(" </dd>");
62 document.writeln(" </dl>"); 87 document.writeln(" </dl>");
63 document.writeln(" </li>"); 88 document.writeln(" </li>");
64 document.writeln(" <li id='zxjf' class=\'layui-nav-item\'><a href=\'" + localhostPaht + "/staticViews/zxjf.html\'>在线缴费</a></li>"); 89 document.writeln(" <li id=\'zxjf\' class=\'layui-nav-item\'><a href=\'/staticViews/zxjf.html\'>在线缴费</a></li>");
65 document.writeln(" <li id='evaluate' class=\'layui-nav-item\'><a href=\'" + localhostPaht + "/staticViews/evaluate.html\'>好差评</a></li>"); 90 document.writeln(" <li id=\'evaluate\' class=\'layui-nav-item\'><a href=\'/staticViews/evaluate.html\'>好差评</a></li>");
66 document.writeln(" </ul>"); 91 document.writeln(" </ul>");
67 document.writeln(" </div> "); 92 document.writeln(" </div>");
68 document.writeln(" </div> ");
69 document.writeln("</html>"); 93 document.writeln("</html>");
70 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticLib/layui/layui.js\'></script>"); 94 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticLib/layui/layui.js\'></script>");
71 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticJs/login.js\'></script>"); 95 document.writeln("<script type='text/javascript' src=\'" + localhostPaht + "/staticJs/login.js\'></script>");
......
...@@ -51,6 +51,18 @@ function initData() { ...@@ -51,6 +51,18 @@ function initData() {
51 window.open('./staticViews/wdyy.html', '_self') 51 window.open('./staticViews/wdyy.html', '_self')
52 } 52 }
53 }) 53 })
54 // 新闻头部切换
55 $('.news-title .item-title').click (function() {
56 $('.news-title .item-title').removeClass('news-active');
57 $(this).addClass('news-active');
58 let indexId = $(this).attr('data-id');
59 $('.item-list').hide();
60 if (indexId =='1') {
61 $('.hotspot-list').show();
62 }else {
63 $('.news-information-list').show();
64 }
65 })
54 } 66 }
55 // 获取汉字长度 67 // 获取汉字长度
56 function strLength(str) { 68 function strLength(str) {
......