git-svn-id: svn+ssh://10.10.101.21/source/platform/platform-b2b@900 f3bf4e98-0cf0-11e4-a00c-a99a8b9d557d

src/main/webapp/resources/css/serve.css

@@ -18,6 +18,10 @@ a {
 	text-decoration: none;
 }
 
+a.none:hover {
+	text-decoration: none;
+}
+
 .block {
 	background-color: #fff;
 	width: 100%;
@@ -44,6 +48,10 @@ a {
 	border-right: 1px solid #e6e6e6;
 }
 
+.bs-r {
+	border-right: 1px dashed #e6e6e6;
+}
+
 .br-l {
 	border-left: 1px solid #e6e6e6;
 }
@@ -138,6 +146,14 @@ a {
 	border-color: #dcdcdc;
 }
 
+.btn-line {
+	border-color: #fff;
+}
+
+.btn-circle {
+	border-radius: 50%;
+}
+
 .btn-info.btn-line {
 	background-color: #fff;
 	color: #56a022;
@@ -600,7 +616,7 @@ a {
 	border-top-color: #9ea9c0;
 }
 
-.help-container,.contact-container {
+.help-container,.contact-container,.new-container {
 	padding: 15px 10px;
 	font-size: 12px;
 	min-height: 600px;
@@ -626,6 +642,17 @@ a {
 	color: #fff;
 	background-color: #56a022;
 	cursor: pointer;
+	-webkit-transition: all 0.2s ease-in-out;
+	-moz-transition: all 0.2s ease-in-out;
+	transition: all 0.2s ease-in-out;
+}
+
+.icon-circle.icon-lg {
+	width: 120px;
+	height: 120px;
+	line-height: 120px;
+	font-size: 64px;
+	margin: 15px 20%;
 }
 
 .headerline {
@@ -661,18 +688,22 @@ a {
 }
 
 .headerdiv {
+	height: 45px;
+  	line-height: 45px;
+  	margin: 15px 0;
+  	clear: both;
+  	zoom: 1;
+  	border-bottom: 1px solid #eee;
+  	position: relative;
+}
+
+.headerdiv .title {
 	font-size: 16px;
   	font-family: Microsoft YaHei,SimHei,Verdana;
   	font-weight: 600;
   	text-transform: uppercase;
 	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
-  	line-height: 22px;
-  	padding: 15px;
-  	margin-bottom: 15px;
-  	clear: both;
-  	zoom: 1;
-  	border-bottom: 1px solid #eee;
-  	position: relative;
+	display: inline-block;
 }
 
 .simple-list {
@@ -813,6 +844,22 @@ a {
 	box-shadow: 0 0 7px 0 rgba(119, 119, 119, 0.2);
 	border-bottom: 1px solid #d9d9d9;
 }
+
+.new-link {
+	position: relative;
+}
+
+.new-link .title {
+	position: absolute;
+	top: 5px;
+	right: 15px;
+	width: 20px;
+	font-size: 18px;
+	font-weight: 600;
+	font-family: "KaiTi";
+  	text-transform: uppercase;
+  	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+}
 /*slide*/
 .slide {
 	width: 930px;
@@ -964,4 +1011,225 @@ a {
 	{
 	border: none;
 	cursor: pointer;
-}
+}
+/*hover items*/
+.flip-item, .flip-item * {
+  	-webkit-box-sizing: border-box;
+  	-moz-box-sizing: border-box;
+  	box-sizing: border-box;
+}
+
+.flip-item.square {
+  	position: relative;
+  	width: 278px;
+  	height: 216px;
+  	margin: 0 auto;
+  	border: 8px solid #fff;
+  	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+  	overflow: hidden;
+  	-webkit-perspective: 900px;
+  	-moz-perspective: 900px;
+  	perspective: 900px;
+}
+
+.flip-item.square .display {
+  	position: absolute;
+  	top: 0;
+  	bottom: 0;
+  	left: 0;
+  	right: 0;
+  	text-align: center;
+  	background: #888;
+  	-webkit-transition: all 0.4s ease-in-out;
+  	-moz-transition: all 0.4s ease-in-out;
+  	transition: all 0.4s ease-in-out;
+  	opacity: 1;
+}
+
+.flip-item.square.left_to_right .display {
+  	-webkit-transform: rotateY(0);
+  	-moz-transform: rotateY(0);
+  	-ms-transform: rotateY(0);
+  	-o-transform: rotateY(0);
+  	transform: rotateY(0);
+  	-webkit-transform-origin: 100% 50%;
+  	-moz-transform-origin: 100% 50%;
+  	-ms-transform-origin: 100% 50%;
+  	-o-transform-origin: 100% 50%;
+  	transform-origin: 100% 50%;
+}
+
+.flip-item.square .info {
+  	position: absolute;
+  	top: 0;
+  	bottom: 0;
+  	left: 0;
+  	right: 0;
+  	text-align: center;
+  	-webkit-backface-visibility: hidden;
+  	backface-visibility: hidden;
+  	background: #1f7cd0;
+  	opacity: 0;
+  	-webkit-transition: all 0.35s ease-in-out 0.3s;
+  	-moz-transition: all 0.35s ease-in-out 0.3s;
+  	transition: all 0.35s ease-in-out 0.3s;
+}
+
+.flip-item.square.left_to_right .info {
+  	-webkit-transform: rotateY(90deg);
+  	-moz-transform: rotateY(90deg);
+  	-ms-transform: rotateY(90deg);
+  	-o-transform: rotateY(90deg);
+  	transform: rotateY(90deg);
+  	-webkit-transform-origin: 0% 50%;
+  	-moz-transform-origin: 0% 50%;
+  	-ms-transform-origin: 0% 50%;
+  	-o-transform-origin: 0% 50%;
+  	transform-origin: 0% 50%;
+}
+
+.flip-item.square .display h3 {
+	position: absolute;
+	bottom: 10px;
+	left: 0;
+	width: 100%;
+	font-family: "KaiTi";
+	color: #fff;
+}
+
+.flip-item.square .display .btn-circle {
+	width: 120px;
+	height: 120px;
+	color: #fff;
+	font-size: 68px;
+	margin-top: 20px;
+}
+
+.flip-item.square .info h3 {
+  	text-transform: uppercase;
+  	color: #fff;
+  	text-align: center;
+  	font-size: 17px;
+  	padding: 10px;
+  	background: #666;
+  	margin: 30px 0 0 0;
+}
+
+.flip-item.square .info p {
+  	font-size: 12px;
+  	padding: 15px;
+}
+
+.flip-item.square .info a {
+	color: #eee;
+	margin-top: 15px;
+}
+
+.flip-item.square .info a:hover {
+	color: #f73;
+}
+
+.flip-item.square:hover .display {
+	opacity: 0;
+}
+
+.flip-item.square:hover .info {
+	opacity: .9;
+}
+
+.flip-item.square.left_to_right:hover .display {
+  	-webkit-transform: rotateY(-90deg);
+  	-moz-transform: rotateY(-90deg);
+  	-ms-transform: rotateY(-90deg);
+  	-o-transform: rotateY(-90deg);
+  	transform: rotateY(-90deg);
+}
+
+.flip-item.square.left_to_right:hover .info {
+  	-webkit-transform: rotateY(0);
+  	-moz-transform: rotateY(0);
+  	-ms-transform: rotateY(0);
+  	-o-transform: rotateY(0);
+  	transform: rotateY(0);
+}
+
+.flip-item.square.right_to_left .display {
+  	-webkit-transform: rotateY(0);
+  	-moz-transform: rotateY(0);
+  	-ms-transform: rotateY(0);
+ 	-o-transform: rotateY(0);
+  	transform: rotateY(0);
+  	-webkit-transform-origin: 0% 50%;
+  	-moz-transform-origin: 0% 50%;
+  	-ms-transform-origin: 0% 50%;
+  	-o-transform-origin: 0% 50%;
+  	transform-origin: 0% 50%;
+}
+
+.flip-item.square.right_to_left .info {
+  	-webkit-transform: rotateY(-90deg);
+  	-moz-transform: rotateY(-90deg);
+  	-ms-transform: rotateY(-90deg);
+  	-o-transform: rotateY(-90deg);
+  	transform: rotateY(-90deg);
+  	-webkit-transform-origin: 100% 50%;
+  	-moz-transform-origin: 100% 50%;
+  	-ms-transform-origin: 100% 50%;
+  	-o-transform-origin: 100% 50%;
+  	transform-origin: 100% 50%;
+}
+
+.flip-item.square.right_to_left:hover .display {
+  	-webkit-transform: rotateY(90deg);
+  	-moz-transform: rotateY(90deg);
+  	-ms-transform: rotateY(90deg);
+  	-o-transform: rotateY(90deg);
+  	transform: rotateY(90deg);
+}
+
+.flip-item.square.right_to_left:hover .info {
+  	-webkit-transform: rotateY(0);
+  	-moz-transform: rotateY(0);
+  	-ms-transform: rotateY(0);
+  	-o-transform: rotateY(0);
+  	transform: rotateY(0);
+}
+
+.flip-item.square.top_to_bottom .display {
+  	-webkit-transform: rotateX(0);
+  	-moz-transform: rotateX(0);
+  	-ms-transform: rotateX(0);
+  	-o-transform: rotateX(0);
+  	transform: rotateX(0);
+  	-webkit-transform-origin: 50% 100%;
+  	-moz-transform-origin: 50% 100%;
+  	-ms-transform-origin: 50% 100%;
+  	-o-transform-origin: 50% 100%;
+  	transform-origin: 50% 100%;
+}
+.flip-item.square.top_to_bottom .info {
+  	-webkit-transform: rotateX(-90deg);
+  	-moz-transform: rotateX(-90deg);
+  	-ms-transform: rotateX(-90deg);
+  	-o-transform: rotateX(-90deg);
+  	transform: rotateX(-90deg);
+  	-webkit-transform-origin: 50% 0;
+  	-moz-transform-origin: 50% 0;
+  	-ms-transform-origin: 50% 0;
+  	-o-transform-origin: 50% 0;
+  	transform-origin: 50% 0;
+}
+.flip-item.square.top_to_bottom:hover .display {
+  	-webkit-transform: rotateX(90deg);
+  	-moz-transform: rotateX(90deg);
+  	-ms-transform: rotateX(90deg);
+  	-o-transform: rotateX(90deg);
+  	transform: rotateX(90deg);
+}
+.flip-item.square.top_to_bottom:hover .info {
+  	-webkit-transform: rotateX(0);
+  	-moz-transform: rotateX(0);
+  	-ms-transform: rotateX(0);
+  	-o-transform: rotateX(0);
+  	transform: rotateX(0);
+}

src/main/webapp/resources/tpl/serve/new_index.html

@@ -1,8 +1,97 @@
 <div class="new-container">
 	<div class="headerdiv text-simple">
-		<div class="content"><i class="fa fa-child fa-fw fa-2x icon-left"></i>欢迎加入优软大家庭</div>
+		<div class="title">
+			<i class="fa fa-child fa-fw fa-2x icon-left"></i>欢迎加入优软商务大家庭
+		</div>
+		<div class="pull-right">
+			<a href="" class="text-default none">更多优软商务的成长数据<i
+				class="fa fa-fw fa-angle-double-right"></i></a>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-xs-4 bs-r">
+			<span class="icon-circle icon-lg"><i class="fa fa-fw fa-user"></i></span>
+		</div>
+		<div class="col-xs-4 bs-r">
+			<span class="icon-circle icon-lg"><i
+				class="fa fa-fw fa-shopping-cart"></i></span>
+		</div>
+		<div class="col-xs-4">
+			<span class="icon-circle icon-lg"><i
+				class="fa fa-fw fa-shopping-cart"></i></span>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-xs-4 bs-r">
+			<span class="icon-circle icon-lg"><i class="fa fa-fw fa-user"></i></span>
+		</div>
+		<div class="col-xs-4 bs-r">
+			<span class="icon-circle icon-lg"><i
+				class="fa fa-fw fa-shopping-cart"></i></span>
+		</div>
+		<div class="col-xs-4">
+			<span class="icon-circle icon-lg"><i
+				class="fa fa-fw fa-shopping-cart"></i></span>
+		</div>
 	</div>
 	<div class="headerdiv text-simple">
-		<div class="content"><i class="fa fa-plane fa-fw fa-2x icon-left"></i>开启财富之路</div>
+		<div class="title">
+			<i class="fa fa-plane fa-fw fa-2x icon-left"></i>开启财富之路
+		</div>
+		<div class="pull-right text-muted">选择您的身份，开始学习吧！</div>
+	</div>
+	<div class="row">
+		<div class="col-xs-4">
+			<div class="flip-item square left_to_right">
+				<div class="display">
+					<h3>我是未注册企业</h3>
+					<a class="btn btn-line btn-circle"><i
+						class="fa fa-fw fa-street-view"></i></a>
+				</div>
+				<div class="info">
+					<h3>我是未注册企业</h3>
+					<p>
+						<a class="btn btn-line btn-block" ng-click="">学习注册流程<i
+							class="fa fa-fw fa-arrow-circle-o-right fa-lg pull-right"></i></a><a
+							class="btn btn-line btn-block" ng-click=""><i
+							class="fa fa-fw fa-arrow-circle-o-right fa-lg pull-right"></i>快速注册</a>
+					</p>
+				</div>
+			</div>
+		</div>
+		<div class="col-xs-4">
+			<div class="flip-item square top_to_bottom">
+				<div class="display">
+					<h3>我是新注册卖家</h3>
+					<a class="btn btn-line btn-circle"><i class="fa fa-fw fa-child"></i></a>
+				</div>
+				<div class="info">
+					<h3>我是新注册卖家</h3>
+					<p>
+						<a class="btn btn-line btn-block" ng-click="">卖家问题专区<i
+							class="fa fa-fw fa-arrow-circle-o-right fa-lg pull-right"></i></a><a
+							class="btn btn-line btn-block" ng-click=""><i
+							class="fa fa-fw fa-arrow-circle-o-right fa-lg pull-right"></i>销售管理</a>
+					</p>
+				</div>
+			</div>
+		</div>
+		<div class="col-xs-4">
+			<div class="flip-item square right_to_left">
+				<div class="display">
+					<h3>我是新注册卖家</h3>
+					<a class="btn btn-line btn-circle"><i class="fa fa-fw fa-child"></i></a>
+				</div>
+				<div class="info">
+					<h3>我是新注册卖家</h3>
+					<p>
+						<a class="btn btn-line btn-block" ng-click="">卖家问题专区<i
+							class="fa fa-fw fa-arrow-circle-o-right fa-lg pull-right"></i></a><a
+							class="btn btn-line btn-block" ng-click=""><i
+							class="fa fa-fw fa-arrow-circle-o-right fa-lg pull-right"></i>销售管理</a>
+					</p>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>