Skip to content

任超 / js.portalStaticPage

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

style:头部新闻

1 parent 66121dac
Inline Side-by-side
Showing 4 changed files with 47 additions and 124 deletions
...@@ -90,44 +90,13 @@ ...@@ -90,44 +90,13 @@
90 <li id='evaluate' class='layui-nav-item'><a href='/staticViews/evaluate.html'>好差评</a></li> 90 <li id='evaluate' class='layui-nav-item'><a href='/staticViews/evaluate.html'>好差评</a></li>
91 </ul> 91 </ul>
92 </div> 92 </div>
93 <!-- 轮播 -->
94 <div class="homeindex"> 93 <div class="homeindex">
95 <div class="banner"> 94 <!-- 新闻模块 -->
96 <div class="layui-carousel" id="banner_swiper"> 95 <div class="news-module">
97 <div carousel-item> 96 <a class="top-title">党的十八大以来 双拥工将生产能力烈士来作综述：为实现中国梦强军梦凝聚强大力量</a>
98 <div class="swiper_item"> 97
99 <img class="swiper_img" alt="背景图" src="./staticImages/bg.png" />
100 </div>
101 </div>
102 </div>
103 <ul class="banner_title">
104 <li>
105 <a class="cardItem" href="./staticViews/convenienceService/fileQuery.html" title="查询档案">
106 <img src="./staticImages/dacx.png" alt="查询档案">
107 查询档案
108 </a>
109 </li>
110 <li>
111 <a class="cardItem" href="./staticViews/convenienceService/progressInquiry.html" title="进度查询">
112 <img src="./staticImages/jdcx.png" alt="进度查询">
113 进度查询
114 </a>
115 </li>
116 <li>
117 <a class="cardItem" id="onlineBooking" title="在线预约">
118 <img src="./staticImages/zxyy.png" alt="在线预约">
119 在线预约
120 </a>
121 </li>
122 <li>
123 <a class="cardItem" href="./staticViews/convenienceService/certificateVerification.html"
124 title="证书核验">
125 <img src="./staticImages/zshy.png" alt="证书核验">
126 证书核验
127 </a>
128 </li>
129 </ul>
130 </div> 98 </div>
99
131 <div class="c_one"> 100 <div class="c_one">
132 <div class="contentBox"> 101 <div class="contentBox">
133 <div class="news"> 102 <div class="news">
......
...@@ -7,70 +7,11 @@ ...@@ -7,70 +7,11 @@
7 margin: 0 auto; 7 margin: 0 auto;
8 padding-bottom: 40px; 8 padding-bottom: 40px;
9 } 9 }
10 div.banner, div.c_one, div.c_two, div.c_three, div.c_four, div.c_five, div.footer { 10 div.c_one, div.c_two, div.c_three, div.c_four, div.c_five, div.footer {
11 width: 100%; 11 width: 100%;
12 text-align: center; 12 text-align: center;
13 } 13 }
14 14
15 .homeindex {
16 min-height:calc(100vh - 207px);
17 }
18
19 div.banner {
20 position: relative;
21 }
22 #banner_swiper {
23 height: 445px!important;
24 }
25
26 .banner .swiper_img {
27 width: 100%;
28 height: 100%;
29 }
30
31 .banner .banner_title {
32 position: absolute;
33 left: 0;
34 right: 0;
35 bottom: 50px;
36 margin: auto;
37 }
38
39 div.banner .banner_title {
40 list-style: none;
41 width: 1240px;
42 display: inline-block;
43 margin-top: 350px;
44 }
45
46 div.banner .banner_title li {
47 width: 260px;
48 height: 100px;
49 background-color: #ffffff;
50 float: left;
51 margin: auto 25px;
52 border-radius: 8px;
53 line-height: 650%;
54 box-sizing: border-box;
55 }
56 div.banner .banner_title li a {
57 display: block;
58 line-height: 100px;
59 font-size: 20px;
60 }
61 div.banner .banner_title li a img {
62 width: 23px;
63 height: 24px;
64 position: relative;
65 top: 6px;
66 margin-right: 3px;
67 }
68
69 div.banner ul li a {
70 color: #4A4A4A;
71 cursor: pointer;
72 }
73
74 /* ---------------法律法规 start----------------------- */ 15 /* ---------------法律法规 start----------------------- */
75 .laws_regulations { 16 .laws_regulations {
76 width: 1220px; 17 width: 1220px;
...@@ -355,8 +296,6 @@ div.c_one div:first-child .notice { ...@@ -355,8 +296,6 @@ div.c_one div:first-child .notice {
355 width: 11%; 296 width: 11%;
356 margin-top: 8px; 297 margin-top: 8px;
357 } 298 }
358
359 /*<h2><a href=""><span>新闻动态</span><i>查看全部</i></a></h2>*/
360 div.c_one h2 { 299 div.c_one h2 {
361 float: left; 300 float: left;
362 width: 100%; 301 width: 100%;
...@@ -653,3 +592,24 @@ div.c_five ul li a { ...@@ -653,3 +592,24 @@ div.c_five ul li a {
653 div.c_five ul li a img { 592 div.c_five ul li a img {
654 height: 100%; 593 height: 100%;
655 } 594 }
595 /* 重构新闻模块 */
596 .news-module {
597 text-align: center;
598 }
599 .news-module .top-title {
600 text-align: center;
601 display: inline-block;
602 width: 960px;
603 height: 90px;
604 font-size: 32px;
605 font-weight: 700;
606 color: #4A4A4A;
607 line-height: 45px;
608 margin: 0 auto;
609 padding-top: 40px;
610 overflow: hidden;
611 text-overflow: ellipsis;
612 display: -webkit-box;
613 -webkit-line-clamp: 3;/*超出3行部分显示省略号，去掉该属性 显示全部*/
614 -webkit-box-orient: vertical;
615 }
...\ No newline at end of file ...\ No newline at end of file
......
1 layui.use('carousel', function () {
2 var carousel = layui.carousel;
3 //建造实例
4 carousel.render({
5 elem: '#banner_swiper'
6 , width: '100%' //设置容器宽度
7 , arrow: 'always' //始终显示箭头
8 , autoplay: true
9 , height: '500px'
10 });
11 });
12 //注意：导航 依赖 element 模块，否则无法进行功能性操作 1 //注意：导航 依赖 element 模块，否则无法进行功能性操作
13 layui.use('element', function () { 2 layui.use('element', function () {
14 var element = layui.element; 3 var element = layui.element;
15 }); 4 });
16 layui.use('util', function () {
17 var util = layui.util;
18 //执行
19 util.fixbar({
20 bar1: true,
21 bar2: true,
22 top: true
23 , click: function (type) {
24 if (type === 'bar1') {
25 alert('点击了bar1')
26 }
27 }
28 });
29 });
30
31 var recentlyDay; 5 var recentlyDay;
32 function getDate() { 6 function getDate() {
33 var date = new Date(); 7 var date = new Date();
...@@ -61,6 +35,12 @@ $(function () { ...@@ -61,6 +35,12 @@ $(function () {
61 policiesData(); 35 policiesData();
62 }); 36 });
63 function initData() { 37 function initData() {
38 // 在这里处理置顶的头部
39 let topTitle = $('.top-title').html();
40 if(strLength(topTitle)>7) {
41 let html = topTitle.slice(0, 7) + '<br/>' + topTitle.slice(7);
42 $('.top-title').html(html)
43 }
64 $('#appointment_inquiry').click(function () { 44 $('#appointment_inquiry').click(function () {
65 if (isLogin()) { 45 if (isLogin()) {
66 window.open('./staticViews/wdyy.html', '_self') 46 window.open('./staticViews/wdyy.html', '_self')
...@@ -72,6 +52,20 @@ function initData() { ...@@ -72,6 +52,20 @@ function initData() {
72 } 52 }
73 }) 53 })
74 } 54 }
55 // 获取汉字长度
56 function strLength(str) {
57 ///<summary>获得字符串实际长度，中文2，英文1</summary>
58 ///<param name="str">要获得长度的字符串</param>
59 var realLength = 0, len = str.length, charCode = -1;
60 for (var i = 0; i < len; i++) {
61 charCode = str.charCodeAt(i);
62 if (charCode >= 0 && charCode <= 128)
63 realLength += 1;
64 else
65 realLength += 2;
66 }
67 return realLength;
68 };
75 //加载新闻数据 69 //加载新闻数据
76 function NewsData() { 70 function NewsData() {
77 var ulNews = $("#ulNews"); 71 var ulNews = $("#ulNews");
......