发展历程页面

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

@@ -146,8 +146,44 @@
 	color: #323232;
 	text-align: left;
 	margin: 32px 0;
+}
+	/*banner图*/
+#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;
 }
 </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">

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

@@ -145,57 +145,333 @@ $(document).ready(function() {
 	overflow: hidden;
 	opacity: 0;
 }
+
+	/*banner图*/
+	#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;
+	}
+	/*导航*/
+	.breadcrumb-ol li{
+	color: #1e1e1e;
+	height: 68px;
+	line-height: 68px;
+	}
+	.breadcrumb-ol li a{
+	color: #1e1e1e;
+	}
+
+	.main-content{
+	background: url("${CTPATH}/images/question/pic5.jpg") no-repeat;
+	padding: 88px 0;
+	height: 1000px;
+	color: #fff;
+	background-size:100% 100%;
+	}
+	.main-content .container{
+	position: relative;
+	width: 1190px;
+	height: auto;
+	}
+	.main-content .container .course{
+	position: absolute;
+	cursor: pointer;
+	}
+	.main-content .container .course .place{
+	text-align: center;
+	line-height: 40px;
+	width: 70px;
+	height: 100px;
+	}
+	.main-content .container .course .years{
+	font-size: 14px;
+	font-weight: bold;
+	color: #f0400a;
+	}
+	.main-content .container .course .img{
+	display:inline-block;
+	width: 18px;
+	height: 25px;
+	background: url("${CTPATH}/images/question/icon.png") no-repeat;
+	}
+	.main-content .container .course:hover .img{
+	background: url("${CTPATH}/images/question/icon2.png") no-repeat;
+	}
+	.main-content .container .course1 {
+	top: 585px;
+	left: 315px;
+	}
+	.main-content .container .course .pop{
+	position: absolute;
+	display: none;
+	width: 280px;
+	line-height: 0px;
+	background: #fff;
+	}
+	.main-content .container .course:hover .pop{
+	display: block;
+	}
+	.main-content .container .course .pop{
+	top: 0px;
+	left: 66px;
+	z-index: 10000;
+	}
+	.main-content .container .course10 .pop{
+	top: 0;
+	left: -305px;
+	}
+	.main-content .container .course .pop p{
+	padding: 3px 0 0 15px;
+	font-weight: bold;
+	font-size: 14px;
+	color: #2363c2;
+	height: 30px;
+	line-height: 30px;
+	width: 280px;
+	height: auto;
+	}
+	<!--.main-content .container .course .pop p:first-child{-->
+	<!--margin-top: 4px;-->
+	<!--}-->
+	<!--.main-content .container .course .pop p:last-child{-->
+	<!--margin-top: -7px;-->
+	<!--}-->
+	.main-content .container .course2 {
+	top: 465px;
+	left: 290px;
+	}
+	.main-content .container .course3 {
+	top: 365px;
+	left: 213px;
+	}
+	.main-content .container .course4 {
+	top: 330px;
+	left: 300px;
+	}
+	.main-content .container .course5 {
+	top: 320px;
+	left: 385px;
+	}
+	.main-content .container .course6 {
+	top: 235px;
+	left: 465px;
+	}
+	.main-content .container .course7 {
+	top: 195px;
+	left: 540px;
+	}
+	.main-content .container .course8 {
+	top: 167px;
+	left: 660px;
+	}
+	.main-content .container .course9 {
+	top: 105px;
+	left: 815px;
+	}
+	.main-content .container .course10 {
+	top: 85px;
+	left: 1012px;
+	}
+	.main-content .container .course7 {
+	top: 195px;
+	left: 540px;
+	}
+	.main-content .container .course7 .years{
+	font-size: 18px;
+	}
+	.main-content .container .course8 .years{
+	font-size: 22px;
+	}
+	.main-content .container .course9 .years{
+	font-size: 24px;
+	}
+	.main-content .container .course10 .years{
+	font-size: 30px;
+	}
 </#macro>
 <@layout>
+<section id="banner" class="banner">
+	<div class="container">
+		<h3>发展历程</h3>
+		<div class="news">DEVELOPMENT</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="about">关于我们</a></li>&nbsp;>&nbsp;
 				<li>发展历程</li>
 			</ol>
-			<h3>发展历程</h3>
-			<div class="content">
-				<div class="row">
-					<div class="col-md-12">
-						<div class="years-wrap">
-							<hr />
-							<@jp.taxonomys module="events">
-							<#list taxonomys as taxonomy>
-								<a class="year <#if REQUEST.requestURI == taxonomy.url>active</#if>" href="${taxonomy.url!}">
-									${taxonomy.title!}
-								</a>
-							</#list>
-						</@jp.taxonomys>
-					</div>
-				</div>
-			</div>
-			<div class="col-md-12">
-				<div class="events">
-					<div class="vertical-line"></div>
-					<@jp.contentPage orderBy="meta:date desc">
-					<#list page.getList() as content>
-						<div class="event">
-							<div class="row">
-								<div class="col-md-6 event-content">
-									<div class="thumbnail-events">
-										<#if content.thumbnail ??>
-										<img class="content-thumbnail" src="${content.thumbnail}" alt="缩略图" />
-										</#if>
-									</div>
-								</div>
-								<div class="col-md-6 event-content">
-									<h4 style="color: #d82128; font-weight: 600;">${content.getMetadataByKey("date")}</h4>
-									<p>${content.title}</p>
-								</div>
-							</div>
-						</div>
-					</#list>
-				</@jp.contentPage>
-			</div>
 		</div>
 	</div>
+</section>
+<section class="main-content">
+	<div class="container">
+		<div class="course course1">
+			<div class="place">
+				<p class="years">2007</p>
+				<span class="img"></span>
+			</div>
+			<div class="pop pop1">
+				<p> • 深圳市优软科技有限公司成立</p>
+				<p> • 推出基于B/S架构，支持多公司、多工厂业务的管理软件“United Application System”，简称：UAS</p>
+			</div>
+		</div>
+		<div class="course course2">
+			<div class="place">
+				<p class="years">2008</p>
+				<span class="img"></span>
+			</div>
+			<div class="pop pop2">
+				<p> • 迁址深圳科技园航天科技创新研究院，同期获得企业管理软件著作权</p>
+				<p> • 集团解决方案的实际应用取得了突破性的进展，商业领域的一些集团企业相继采用UAS</p>
+			</div>
+		</div>
+		<div class="course course3">
+			<div class="place">
+				<p class="years">2009</p>
+				<span class="img"></span>
+			</div>
+			<div class="pop pop3">
+				<p class="txt"> • 管理软件UAS的完善功能和良好的稳定性得到了有力的验证，部分客户终止ORACLE的应用，转而采用UAS</p>
+			</div>
+		</div>
+		<div class="course course4">
+			<div class="place">
+				<p class="years">2010</p>
+				<span class="img"></span>
+			</div>
+			<div class="pop pop4">
+				<p> • 迁址深圳科技园北大青鸟大楼（已更名为：英唐大厦），人数扩展到近100人</p>
+				<p> • 启动以ERPII为核心架构的组件式应用系统的开发</p>
+			</div>
+		</div>
+		<div class="course course5">
+			<div class="place">
+				<p class="years">2011</p>
+				<span class="img"></span>
+			</div>
+			<div class="pop pop5">
+				<p class="txt"> • 取得了工商行政管理总局签发的“UAS”商标注册证</p>
+			</div>
+		</div>
+		<div class="course course6">
+			<div class="place">
+				<p class="years">2012</p>
+				<span class="img"></span>
+			</div>
+			<div class="pop pop6">
+				<p class="txt"> • 规划新的开发框架</p>
+			</div>
+		</div>
+		<div class="course course7">
+			<div class="place">
+				<p class="years">2013</p>
+				<span class="img"></span>
+			</div>
+			<div class="pop pop7">
+				<p> • 发布联合应用系统 UAS 6.0</p>
+				<p> • 推出了B2B商务1.0版</p>
+			</div>
+		</div>
+		<div class="course course8">
+			<div class="place">
+				<p class="years">2014</p>
+				<span class="img"></span>
+			</div>
+			<div class="pop pop8">
+				<p> • 推出B2B商务2.0版</p>
+				<p> • 推出移动终端应用方案</p>
+			</div>
+		</div>
+		<div class="course course9">
+			<div class="place">
+				<p class="years">2015</p>
+				<span class="img"></span>
+			</div>
+			<div class="pop pop9">
+				<p> • 英唐智控增资控股优软科技，研发团队及实力进一步壮大</p>
+				<p> • 发布UAS标准版，获得6大企业管理软件著作权</p>
+			</div>
+		</div>
+		<div class="course course10">
+			<div class="place">
+				<p class="years">2016</p>
+				<span class="img"></span>
+			</div>
+			<div class="pop pop10">
+				<p> • PLM产品生命周期管理应用及优软科技UU互联APP 5.0发布</p>
+				<p> • 正式发布产业互联网综合服务平台“优软云”，次月企业用户量超7000家</p>
+			</div>
+		</div>
 	</div>
-	</div>
+		<!--<h3>发展历程</h3>-->
+		<!--<div class="content">-->
+			<!--<div class="row">-->
+				<!--<div class="col-md-12">-->
+					<!--<div class="years-wrap">-->
+						<!--<hr />-->
+						<!--<@jp.taxonomys module="events">-->
+						<!--<#list taxonomys as taxonomy>-->
+							<!--<a class="year <#if REQUEST.requestURI == taxonomy.url>active</#if>" href="${taxonomy.url!}">-->
+								<!--${taxonomy.title!}-->
+							<!--</a>-->
+						<!--</#list>-->
+					<!--</@jp.taxonomys>-->
+				<!--</div>-->
+			<!--</div>-->
+		<!--</div>-->
+		<!--<div class="col-md-12">-->
+			<!--<div class="events">-->
+				<!--<div class="vertical-line"></div>-->
+				<!--<@jp.contentPage orderBy="meta:date desc">-->
+				<!--<#list page.getList() as content>-->
+					<!--<div class="event">-->
+						<!--<div class="row">-->
+							<!--<div class="col-md-6 event-content">-->
+								<!--<div class="thumbnail-events">-->
+									<!--<#if content.thumbnail ??>-->
+									<!--<img class="content-thumbnail" src="${content.thumbnail}" alt="缩略图" />-->
+									<!--</#if>-->
+								<!--</div>-->
+							<!--</div>-->
+							<!--<div class="col-md-6 event-content">-->
+								<!--<h4 style="color: #d82128; font-weight: 600;">${content.getMetadataByKey("date")}</h4>-->
+								<!--<p>${content.title}</p>-->
+							<!--</div>-->
+						<!--</div>-->
+					<!--</div>-->
+				<!--</#list>-->
+			<!--</@jp.contentPage>-->
+		<!--</div>-->
+
 </section>
 </@layout>