新闻中心页面

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/_hot_news.html

@@ -1,18 +1,18 @@
 <div class="hot-news">
-    <h4><span class="label label-danger">热</span> &nbsp;&nbsp;热门文章</h4>
+    <div class="news-item"><em></em><span>热点新闻</span></div>
     <div>
         <@jp.contents module="news" orderBy="view_count">
         <ol class="list-unstyled">
             <#list contents as content>
                 <li>
                     <h5>
-                        <span class="list-order">${content_index+1}</span> <a href="${content.url!}">${content.title!}</a>
+                        <a href="${content.url!}">${content.title!}</a>
                     </h5>
-                    <div>
-                        <span class="text-num" style="font-size: 12px;">${(content.created?string("yyyy-MM-dd"))!''}</span>
-                        <span class="pull-right text-num" style="font-size: 12px;"><i class="fa fa-eye" style="margin-left: 15px;"></i> ${content.view_count!'0'}</span>
+                    <div class="info">
+                        <span class="pull-right text-num">${(content.created?string("yyyy-MM-dd"))!''}</span>
+                        <span class="pull-left text-num"><img src="${CTPATH}/images/question/read.png" style="margin-left: 15px;"/> ${content.view_count!'0'}</span>
                     </div>
-                    <p class="text-muted" style="font-size: 12px;line-height: 20px;height: 40px;overflow: hidden;">${content.summary!}</p>
+                    <!--<p class="text-muted" style="font-size: 12px;line-height: 20px;height: 40px;overflow: hidden;">${content.summary!}</p>-->
                 </li>
             </#list>
         </ol>

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/assets/css/main.css

@@ -448,19 +448,35 @@ footer .txt2{
 }
 
 /* hot news */
+.hot-news .news-item{
+	position: relative;
+}
+.hot-news .news-item em{
+	display: inline-block;
+	width: 6px;
+	height: 30px;
+	font-style: normal;
+	background: #ff0000;
+}
+.hot-news .news-item span{
+	margin-left: 20px;
+	font-size: 24px;
+	font-style: normal;
+	color: #1e1e1e;
+	position: absolute;
+	top: -2px;
+	left: 6px;
+}
 .hot-news h4{
 	margin-top: 10px;
 }
 .hot-news {
-	border: 1px solid #ccc;
-	padding: 0 10px;
+	/*padding: 0 10px;*/
 }
 .hot-news ol {
 }
 .hot-news li h5{
-	margin-top: 20px;
 	margin-bottom: 0;
-	padding: 5px 0;
 	width: 100%;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -470,6 +486,35 @@ footer .txt2{
 	line-height: 20px;
 	font-weight: 600;
 }
+.hot-news li{
+	margin-top: 14px;
+	width: 300px;
+	height: 56px;
+	border-bottom: 1px solid #d2d2d2;
+}
+.hot-news li:last-child{
+	border-bottom: none;
+}
+.hot-news li div.info{
+	margin-top: 5px;
+	font-size: 12px;
+	overflow: hidden;
+	margin-left: -15px;
+}
+.hot-news li div.info .text-num{
+	font-size: 12px;
+	text-align: left;
+}
+.hot-news li a{
+	color: #323232;
+	font-size: 16px;
+	font-weight: bold;
+	margin: 12px 0 14px 0;
+}
+.hot-news li span{
+	color: #a0a0a0;
+	font-size: 12px;
+}
 .hot-news li .list-order {
 	display: inline-block;
 	width: 20px;
@@ -492,7 +537,7 @@ footer .txt2{
 	border-radius: 4px;
 }
 .breadcrumb-ol>li {
-	display: inline-block;
+	display: inline-block
 }
 /*解决方案*/
 .solution .section-2 {

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/taxonomy_news.html

@@ -22,6 +22,36 @@ $(document).ready(function() {
 </#macro>
 <@layout>
 <style>
+	#banner {
+		background: url("${CTPATH}/images/question/banner.jpg") no-repeat;
+		padding: 88px 0;
+		color: #fff;
+		background-size:100% 100%;
+		margin-top: -1px;
+	}
+	.banner .container{
+		text-align: center;
+		width: 1190px;
+		margin: 0 auto;
+	}
+	.banner h3 {
+		font-size: 60px;
+		color: #fff;
+		font-weight: bold;
+	}
+	.banner .news {
+		width: 250px;
+		height: 50px;
+		font-size: 18px;
+		color: #fff;
+		font-weight: normal;
+		line-height: 50px;
+		border: 1px solid #fff;
+		text-align: center;
+		margin: auto;
+		margin-top: 40px;
+	}
+
 .section-item{
 	width: 1190px;
 }
@@ -70,59 +100,277 @@ $(document).ready(function() {
 	opacity: 0;
 	overflow: hidden;
 }
+	.breadcrumb-ol li{
+		color: #1e1e1e;
+		height: 68px;
+		line-height: 68px;
+	}
+	.breadcrumb-ol li a{
+		color: #1e1e1e;
+	}
+
+	/*公司动态行业新闻*/
+	.hots_news{
+		float: left;
+		margin-top: -30px;
+	}
+	.trade-news{
+		float: left;
+		margin-left: 100px;
+		margin-top: -18px;
+	}
+	.trade-news .tradeNews .news-time {
+		position: relative;
+	}
+	p.years{
+		font-size: 36px;
+		color: #626262;
+		font-weight: bold;
+		margin: 80px 0 22px 0;
+	}
+	.tradeNews{
+		overflow: hidden;
+		margin-top: 40px;
+	}
+	.trade-news .news-item{
+		position: relative;
+	}
+	.trade-news div.news-item em{
+		display: inline-block;
+		width: 6px;
+		height: 30px;
+		font-style: normal;
+		background: #dcdcdc;
+	}
+	.trade-news div.active em{
+		background: #408eff;
+	}
+	.trade-news div.news-item span{
+		margin-left: 20px;
+		font-size: 24px;
+		font-style: normal;
+		color: #787878;
+		position: absolute;
+		top: -2px;
+		left: 6px;
+	}
+	.trade-news div.active span{
+		color: #1e1e1e;
+	}
+	.trade-news .news-time{
+		float: left;
+		width: 90px;
+		height: 100px;
+		background: #626262;
+	}
+	.trade-news .news-time>div{
+		position: absolute;
+		top: 15px;
+		left: 25px;
+		color: #fff;
+		font-weight: bold;
+	}
+	.trade-news .news-time h3{
+		font-size: 30px;
+	}
+	.trade-news .news-time h4{
+		font-size: 20px;
+		margin-top: 10px;
+	}
+	.trade-news .thumbnail-img{
+		float: left;
+		margin-right: 40px;
+		line-height: 23px;
+		width: 200px;
+		height: 160px;
+	}
+	.trade-news .news-detail{
+		width: 460px;
+		float: left;
+	}
+	.trade-news .news-detail h3{
+		width: 460px;
+		height: 45px;
+		overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: pre-line;
+        line-height: 23px;
+		font-size: 18px;
+		font-weight: bold;
+		color: #323232;
+	}
+    .trade-news .news-detail p{
+        width: 460px;
+        height: 45px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: pre-line;
+        line-height: 23px;
+        font-size: 14px;
+        color: #787878;
+        margin: 20px 0 30px 0;
+    }
+    .trade-news .news-detail .text-num{
+        margin-left: -13px;
+    }
+	.tradeNews:hover{
+		cursor: pointer;
+	}
+	.tradeNews:hover .news-time{
+		background: #408eff;
+	}
+	.tradeNews:hover .news-detail h3{
+		color: #2867c2;
+	}
+	/*分页*/
+	.page{
+		margin-top: 48px;
+		float:right;
+	}
+	.page ul{
+		display: inline-block;
+	}
+	.page ul li{
+		width: 35px;
+		height: 35px;
+		text-align: center;
+		line-height: 35px;
+		border: 1px solid #d2d2d2;
+		margin-right: 15px;
+		border-radius: 3px;
+		float: left;
+		list-style: none;
+	}
+	.page ul li.omit{
+		border: none;
+	}
+	.page ul li a{
+		color: #000;
+	}
 </style>
+<section id="banner" class="banner">
+	<div class="container">
+		<h3>新闻中心</h3>
+		<div class="news">NEWS INFORMATION</div>
+	</div>
+</section>
 <section id="main">
 	<div class="container" style="background: #fff;">
 		<div class="section-item">
 			<ol class="breadcrumb-ol" disabled="breadcrumb">
+				<li>当前位置:</li>
 				<li><a href="${CPATH}/">首页</a></li>&nbsp;>&nbsp;
+				<li><a href="">关于我们</a></li>&nbsp;>&nbsp;
 				<li>新闻中心</li>
 			</ol>
-			<h3>新闻中心</h3>
+			<!--<h3>新闻中心</h3>-->
 			<div class="content" style="padding: 15px 0 50px;">
 				<div class="row">
-					<div class="col-md-3">
+					<div class="hots_news">
 						<#include "_hot_news.html"/>
 					</div>
-					<@jp.contentPage>
-					<div class="col-md-9">
-						<h4><span class="label label-primary">新</span> 新闻资讯</h4>
-						<hr />
-						<div class="news">
-							<#list page.getList() as content>
-							<div class="new">
-								<div style="width: 120px;">
-									<div class="thumbnail-news">
-										<img class="content-thumbnail" src="${content.thumbnail!(CTPATH+'/images/artitle_img_no.jpg')}" alt="新闻缩略图"/>
-									</div>
+					<div class="trade-news">
+						<!--<div class="news-item"><em></em><span>公司动态</span></div>-->
+						<!--<div class="news-item active"><em></em><span>行业新闻</span></div>-->
+						<div class="tradeNews">
+							<div class="news-time">
+								<div>
+									<h3>14</h3>
+									<h4>Aug</h4>
 								</div>
+							</div>
+							<div class="thumbnail-img">
+								<img class="content-thumbnail" src="${CTPATH}/images/question/read.png" alt="">
+							</div>
+							<div class="news-detail">
+								<h3>从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到</h3>
+								<p>从电报到5G从电报到5G从电报从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报</p>
+								<span class="pull-left text-num"><img src="${CTPATH}/images/question/read.png" style="margin-left: 15px;"/>200</span>
+							</div>
+						</div>
+						<div class="tradeNews">
+							<div class="news-time">
 								<div>
-									<h5><a href="${content.url!}">${content.title!}</a></h5>
-									<p>${content.summary!}</p>
-									<div class="text-muted">
-										<span class="pull-left">${(content.created?string("yyyy-MM-dd HH:mm"))!''} </span>
-										<span class="pull-right text-num">
-											<i class="fa fa-eye" style="margin-left: 15px;"></i> ${content.view_count!'0'}
-											<!-- <i class="fa fa-thumbs-o-up" style="margin-left: 15px;"></i> ${content.vote_up!'0'}
-											<i class="fa fa-commenting-o" style="margin-left: 15px;"></i> ${content.comment_count!'0'} -->
-										</span>
-									</div>
+									<h3>14</h3>
+									<h4>Aug</h4>
 								</div>
 							</div>
-							</#list>
+							<div class="thumbnail-img">
+								<img class="content-thumbnail" src="${CTPATH}/images/question/read.png" alt="">
+							</div>
+							<div class="news-detail">
+								<h3>从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到</h3>
+								<p>从电报到5G从电报到5G从电报从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报</p>
+								<span class="pull-left text-num"><img src="${CTPATH}/images/question/read.png" style="margin-left: 15px;"/>200</span>
+							</div>
 						</div>
-						<div style="padding: 15px;">
-							<span class="pull-left" style="line-height: 30px;">共 <span class="text-mun">${page.totalRow!'0'}</span> 条</span>
-							<div class="btn-group btn-group-sm pull-right" style="display: inline-block;">
-								<a type="button" <#if page.isFirstPage()> disabled="disabled"</#if> class="btn btn-default" href="${CPATH}/news"><i class="fa fa-angle-double-left"></i> 首页</a>
-								<a type="button" <#if page.isFirstPage()> disabled="disabled"</#if> class="btn btn-default" href="${CPATH}/news-${page.pageNumber - 1}">&lt; 上一页</a>
-								<a type="button" disabled="disabled" class="btn btn-default">第 <span class="text-mun">${page.pageNumber!'0'}</span> 页</a>
-								<a type="button" <#if page.isLastPage()> disabled="disabled"</#if> class="btn btn-default" href="${CPATH}/news-${page.pageNumber + 1}">下一页 &gt;</a>
-								<a type="button" <#if page.isLastPage()> disabled="disabled"</#if> class="btn btn-default" href="${CPATH}/news-${page.totalPage!'0'}">尾页 <i class="fa fa-angle-double-right"></i></a>
+						<!--年份分割线-->
+						<p class="years">2016年</p>
+						<div class="tradeNews">
+							<div class="news-time">
+								<div>
+									<h3>14</h3>
+									<h4>Aug</h4>
+								</div>
+							</div>
+							<div class="thumbnail-img">
+								<img class="content-thumbnail" src="${CTPATH}/images/question/read.png" alt="">
+							</div>
+							<div class="news-detail">
+								<h3>从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到</h3>
+								<p>从电报到5G从电报到5G从电报从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报到从电报到5G从电报</p>
+								<span class="pull-left text-num"><img src="${CTPATH}/images/question/read.png" style="margin-left: 15px;"/>200</span>
 							</div>
 						</div>
+						<!--<div class="page">-->
+							<!--<ul>-->
+								<!--<li><a href="">1</a></li>-->
+								<!--<li><a href="">2</a></li>-->
+								<!--<li><a href="">3</a></li>-->
+								<!--<li><a href="">4</a></li>-->
+								<!--<li><a href="">5</a></li>-->
+								<!--<li class="omit"><a href="">...</a></li>-->
+								<!--<li><a href="">7</a></li>-->
+							<!--</ul>-->
+						<!--</div>-->
 					</div>
-					</@jp.contentPage >
+					<!--<@jp.contentPage>-->
+					<!--<div class="col-md-9">-->
+						<!--<div class="news">-->
+							<!--<#list page.getList() as content>-->
+							<!--<div class="new">-->
+								<!--<div style="width: 120px;">-->
+									<!--<div class="thumbnail-news">-->
+										<!--<img class="content-thumbnail" src="${content.thumbnail!(CTPATH+'/images/artitle_img_no.jpg')}" alt="新闻缩略图"/>-->
+									<!--</div>-->
+								<!--</div>-->
+								<!--<div>-->
+									<!--<h5><a href="${content.url!}">${content.title!}</a></h5>-->
+									<!--<p>${content.summary!}</p>-->
+									<!--<div class="text-muted">-->
+										<!--<span class="pull-left">${(content.created?string("yyyy-MM-dd HH:mm"))!''} </span>-->
+										<!--<span class="pull-right text-num">-->
+											<!--<i class="fa fa-eye" style="margin-left: 15px;"></i> ${content.view_count!'0'}-->
+											<!--&lt;!&ndash; <i class="fa fa-thumbs-o-up" style="margin-left: 15px;"></i> ${content.vote_up!'0'}-->
+											<!--<i class="fa fa-commenting-o" style="margin-left: 15px;"></i> ${content.comment_count!'0'} &ndash;&gt;-->
+										<!--</span>-->
+									<!--</div>-->
+								<!--</div>-->
+							<!--</div>-->
+							<!--</#list>-->
+						<!--</div>-->
+						<!--<div style="padding: 15px;">-->
+							<!--<span class="pull-left" style="line-height: 30px;">共 <span class="text-mun">${page.totalRow!'0'}</span> 条</span>-->
+							<!--<div class="btn-group btn-group-sm pull-right" style="display: inline-block;">-->
+								<!--<a type="button" <#if page.isFirstPage()> disabled="disabled"</#if> class="btn btn-default" href="${CPATH}/news"><i class="fa fa-angle-double-left"></i> 首页</a>-->
+								<!--<a type="button" <#if page.isFirstPage()> disabled="disabled"</#if> class="btn btn-default" href="${CPATH}/news-${page.pageNumber - 1}">&lt; 上一页</a>-->
+								<!--<a type="button" disabled="disabled" class="btn btn-default">第 <span class="text-mun">${page.pageNumber!'0'}</span> 页</a>-->
+								<!--<a type="button" <#if page.isLastPage()> disabled="disabled"</#if> class="btn btn-default" href="${CPATH}/news-${page.pageNumber + 1}">下一页 &gt;</a>-->
+								<!--<a type="button" <#if page.isLastPage()> disabled="disabled"</#if> class="btn btn-default" href="${CPATH}/news-${page.totalPage!'0'}">尾页 <i class="fa fa-angle-double-right"></i></a>-->
+							<!--</div>-->
+						<!--</div>-->
+					<!--</div>-->
+					<!--</@jp.contentPage >-->
 				</div>
 			</div>
 		</div>