b30f1599 by 任超

style:头部新闻

1 parent 66121dac
......@@ -90,44 +90,13 @@
<li id='evaluate' class='layui-nav-item'><a href='/staticViews/evaluate.html'>好差评</a></li>
</ul>
</div>
<!-- 轮播 -->
<div class="homeindex">
<div class="banner">
<div class="layui-carousel" id="banner_swiper">
<div carousel-item>
<div class="swiper_item">
<img class="swiper_img" alt="背景图" src="./staticImages/bg.png" />
</div>
</div>
</div>
<ul class="banner_title">
<li>
<a class="cardItem" href="./staticViews/convenienceService/fileQuery.html" title="查询档案">
<img src="./staticImages/dacx.png" alt="查询档案">
查询档案
</a>
</li>
<li>
<a class="cardItem" href="./staticViews/convenienceService/progressInquiry.html" title="进度查询">
<img src="./staticImages/jdcx.png" alt="进度查询">
进度查询
</a>
</li>
<li>
<a class="cardItem" id="onlineBooking" title="在线预约">
<img src="./staticImages/zxyy.png" alt="在线预约">
在线预约
</a>
</li>
<li>
<a class="cardItem" href="./staticViews/convenienceService/certificateVerification.html"
title="证书核验">
<img src="./staticImages/zshy.png" alt="证书核验">
证书核验
</a>
</li>
</ul>
<!-- 新闻模块 -->
<div class="news-module">
<a class="top-title">党的十八大以来 双拥工将生产能力烈士来作综述:为实现中国梦强军梦凝聚强大力量</a>
</div>
<div class="c_one">
<div class="contentBox">
<div class="news">
......
......@@ -7,70 +7,11 @@
margin: 0 auto;
padding-bottom: 40px;
}
div.banner, div.c_one, div.c_two, div.c_three, div.c_four, div.c_five, div.footer {
div.c_one, div.c_two, div.c_three, div.c_four, div.c_five, div.footer {
width: 100%;
text-align: center;
}
.homeindex {
min-height:calc(100vh - 207px);
}
div.banner {
position: relative;
}
#banner_swiper {
height: 445px!important;
}
.banner .swiper_img {
width: 100%;
height: 100%;
}
.banner .banner_title {
position: absolute;
left: 0;
right: 0;
bottom: 50px;
margin: auto;
}
div.banner .banner_title {
list-style: none;
width: 1240px;
display: inline-block;
margin-top: 350px;
}
div.banner .banner_title li {
width: 260px;
height: 100px;
background-color: #ffffff;
float: left;
margin: auto 25px;
border-radius: 8px;
line-height: 650%;
box-sizing: border-box;
}
div.banner .banner_title li a {
display: block;
line-height: 100px;
font-size: 20px;
}
div.banner .banner_title li a img {
width: 23px;
height: 24px;
position: relative;
top: 6px;
margin-right: 3px;
}
div.banner ul li a {
color: #4A4A4A;
cursor: pointer;
}
/* ---------------法律法规 start----------------------- */
.laws_regulations {
width: 1220px;
......@@ -355,8 +296,6 @@ div.c_one div:first-child .notice {
width: 11%;
margin-top: 8px;
}
/*<h2><a href=""><span>新闻动态</span><i>查看全部</i></a></h2>*/
div.c_one h2 {
float: left;
width: 100%;
......@@ -653,3 +592,24 @@ div.c_five ul li a {
div.c_five ul li a img {
height: 100%;
}
/* 重构新闻模块 */
.news-module {
text-align: center;
}
.news-module .top-title {
text-align: center;
display: inline-block;
width: 960px;
height: 90px;
font-size: 32px;
font-weight: 700;
color: #4A4A4A;
line-height: 45px;
margin: 0 auto;
padding-top: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;/*超出3行部分显示省略号,去掉该属性 显示全部*/
-webkit-box-orient: vertical;
}
\ No newline at end of file
......
layui.use('carousel', function () {
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#banner_swiper'
, width: '100%' //设置容器宽度
, arrow: 'always' //始终显示箭头
, autoplay: true
, height: '500px'
});
});
//注意:导航 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function () {
var element = layui.element;
});
layui.use('util', function () {
var util = layui.util;
//执行
util.fixbar({
bar1: true,
bar2: true,
top: true
, click: function (type) {
if (type === 'bar1') {
alert('点击了bar1')
}
}
});
});
var recentlyDay;
function getDate() {
var date = new Date();
......@@ -61,6 +35,12 @@ $(function () {
policiesData();
});
function initData() {
// 在这里处理置顶的头部
let topTitle = $('.top-title').html();
if(strLength(topTitle)>7) {
let html = topTitle.slice(0, 7) + '<br/>' + topTitle.slice(7);
$('.top-title').html(html)
}
$('#appointment_inquiry').click(function () {
if (isLogin()) {
window.open('./staticViews/wdyy.html', '_self')
......@@ -72,6 +52,20 @@ function initData() {
}
})
}
// 获取汉字长度
function strLength(str) {
///<summary>获得字符串实际长度,中文2,英文1</summary>
///<param name="str">要获得长度的字符串</param>
var realLength = 0, len = str.length, charCode = -1;
for (var i = 0; i < len; i++) {
charCode = str.charCodeAt(i);
if (charCode >= 0 && charCode <= 128)
realLength += 1;
else
realLength += 2;
}
return realLength;
};
//加载新闻数据
function NewsData() {
var ulNews = $("#ulNews");
......