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

src/main/webapp/resources/css/index.css

@@ -248,14 +248,27 @@ a.none:hover {
 }
 /*chart*/
 [ac-chart] {
-	width: 98%;
-	margin: 1%;
+	width: 100%;
+}
+
+.pie-charts>ul>li {
+	height: 250px;
+	position: relative;
 }
 
 .pie-charts [ac-chart] {
 	height: 200px;
 }
 
+.pie-charts>ul>li .empty {
+	position: absolute;
+	top: 80px;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	text-align: center;
+}
+
 .line-charts {
 	padding-bottom: 10px;
 }
@@ -264,16 +277,28 @@ a.none:hover {
 	height: 300px;
 }
 
+.pie-charts .chart {
+	padding-right: 0;
+}
+
 .ac-title {
 	height: 39px;
 	line-height: 39px;
 	padding: 0 15px;
 	color: #333;
 	font-weight: 500 !important;
+	border-bottom: 1px solid #e8e8e8;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+  	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+}
+
+.ac-chart {
+	margin-top: 30px;
 }
 
 .ac-legend {
 	color: #666;
+	margin-top: 30px;
 }
 
 .ac-legend tr>td {
@@ -309,6 +334,90 @@ a.none:hover {
 	font-weight: bold;
 	color: #999;
 }
+
+.throughline {
+  	position: relative;
+}
+
+.throughline .line {
+	position: absolute;
+ 	border-top: 1px dashed #e5e2e2;
+ 	left: 15px;
+ 	right: 15px;
+  	top: 10px;
+  	z-index: 0;
+}
+
+.throughline .content {
+	position: relative;
+	color: #56a022;
+	padding: 0 10px;
+  	margin: 3px 0;
+  	background: #fff;
+  	display: inline-block;
+}
+
+.stepline {
+	position: relative;
+  	height: 40px;
+  	line-height: 40px;
+  	margin: 40px 0 0;
+}
+
+.stepline:after, .stepline:before {
+  	background-color: #ddd;
+  	content: "";
+  	height: 2px;
+  	position: absolute;
+  	top: 19px;
+  	width: 50%;
+}
+
+.stepline:before {
+  	background-image: -webkit-gradient(linear, right top, left top, from(#ddd), to(#fff));
+  	background-image: -webkit-linear-gradient(right, #ddd, #fff);
+  	background-image: -moz-linear-gradient(right, #ddd, #fff);
+  	background-image: -ms-linear-gradient(right, #ddd, #fff);
+  	background-image: -o-linear-gradient(right, #ddd, #fff);
+  	background-image: linear-gradient(right, #ddd, #fff);
+  	left: 0;
+}
+
+.stepline:after {
+  	background-image: -webkit-gradient(linear, left top, right top, from(#ddd), to(#fff));
+  	background-image: -webkit-linear-gradient(left, #ddd, #fff);
+  	background-image: -moz-linear-gradient(left, #ddd, #fff);
+  	background-image: -ms-linear-gradient(left, #ddd, #fff);
+  	background-image: -o-linear-gradient(left, #ddd, #fff);
+  	background-image: linear-gradient(left, #ddd, #fff);
+  	left: 50%;
+}
+
+.stepline .item {
+  	position: relative;
+}
+
+.stepline .item span {
+  	position: absolute;
+  	left: 50%;
+  	height: 40px;
+  	width: 40px;
+  	margin-left: -20px;
+  	text-align: center;
+  	background-color: #fff;
+  	border: 2px solid #777;
+  	border-radius: 500px;
+  	color: #777;
+  	font-size: 18px;
+  	font-weight: bold;
+  	z-index: 4;
+}
+
+.stepline .item .title {
+  	margin-top: 35px;
+  	text-align: center;
+}
+
 /* top css stylesheet*/
 #top {
 	background-color: #f5f5f5;
@@ -876,10 +985,6 @@ a.none:hover {
 	margin-top: 12px;
 }
 
-.chart:not(:first-child) {
-	border-top: 1px dashed #e8e8e8;
-}
-
 .right .feed-wrap {
 	float: right;
 	width: 230px;

src/main/webapp/resources/tpl/index/home/right.html

@@ -1,7 +1,7 @@
 <style>
 .data-wrap .todo {
-  height: 140px;
-  margin-bottom: 15px;
+	height: 140px;
+	margin-bottom: 15px;
 }
 </style>
 
@@ -73,21 +73,143 @@
 	<!-- 待处理统计 End -->
 	<!-- 交易额统计 Start -->
 	<div class="pie-charts block" ng-controller="PersonalSaleStatCtrl">
-		<ul class="list-unstyled list-inline">
-			<li id="custchart-month-amount" class="chart"
-				ac-chart="custCharts.month.chartType"
-				ac-data="custCharts.month.datas" ac-config="custCharts.month.config" ng-if="custCharts"></li>
-			<li id="custchart-year-amount" class="chart"
-				ac-chart="custCharts.year.chartType" ac-data="custCharts.year.datas"
-				ac-config="custCharts.year.config" ng-if="custCharts"></li>
-			<li id="sellerchart-month-amount" class="chart"
-				ac-chart="sellerCharts.month.chartType"
-				ac-data="sellerCharts.month.datas"
-				ac-config="sellerCharts.month.config" ng-if="sellerCharts"></li>
-			<li id="sellerchart-year-amount" class="chart"
-				ac-chart="sellerCharts.year.chartType"
-				ac-data="sellerCharts.year.datas"
-				ac-config="sellerCharts.year.config" ng-if="sellerCharts"></li>
+		<ul class="list-unstyled">
+			<li id="custchart-month-amount" class="br-b">
+				<div class="chart" ac-chart="custCharts.month.chartType"
+					ac-data="custCharts.month.datas"
+					ac-config="custCharts.month.config" ng-if="custCharts"></div>
+				<div class="empty"
+					ng-if="custCharts && custCharts.month.datas.data.length == 0">
+					<div class="throughline">
+						<div class="line"></div>
+						<div class="content">
+							<i class="fa fa-fw fa-info-circle"></i>还没有收到您的订单哦，赶紧告诉客户怎么发起采购吧
+						</div>
+					</div>
+					<div class="stepline row">
+						<div class="item col-xs-4">
+							<span><i class="fa fa-binoculars"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">查看我的企业UU</a>
+							</div>
+						</div>
+						<div class="item col-xs-4">
+							<span><i class="fa fa-pencil-square-o"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">客户将您的UU号写到供应商资料</a>
+							</div>
+						</div>
+						<div class="item col-xs-4">
+							<span><i class="fa fa-shopping-cart"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">客户发起采购单</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</li>
+			<li id="custchart-year-amount" class="br-b">
+				<div class="chart" ac-chart="custCharts.year.chartType"
+					ac-data="custCharts.year.datas" ac-config="custCharts.year.config"
+					ng-if="custCharts"></div>
+				<div class="empty"
+					ng-if="custCharts && custCharts.year.datas.data.length == 0">
+					<div class="throughline">
+						<div class="line"></div>
+						<div class="content">
+							<i class="fa fa-fw fa-info-circle"></i>还没有收到您的订单哦，赶紧告诉客户怎么发起采购吧
+						</div>
+					</div>
+					<div class="stepline row">
+						<div class="item col-xs-4">
+							<span><i class="fa fa-binoculars"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">查看我的企业UU</a>
+							</div>
+						</div>
+						<div class="item col-xs-4">
+							<span><i class="fa fa-pencil-square-o"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">客户将您的UU号写到供应商资料</a>
+							</div>
+						</div>
+						<div class="item col-xs-4">
+							<span><i class="fa fa-shopping-cart"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">客户发起采购单</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</li>
+			<li id="sellerchart-month-amount" class="br-b">
+				<div class="chart" ac-chart="sellerCharts.month.chartType"
+					ac-data="sellerCharts.month.datas"
+					ac-config="sellerCharts.month.config" ng-if="sellerCharts"></div>
+				<div class="empty"
+					ng-if="sellerCharts && sellerCharts.month.datas.data.length == 0">
+					<div class="throughline">
+						<div class="line"></div>
+						<div class="content">
+							<i class="fa fa-fw fa-info-circle"></i>还没有收到您的订单哦，赶紧告诉客户怎么发起采购吧
+						</div>
+					</div>
+					<div class="stepline row">
+						<div class="item col-xs-4">
+							<span><i class="fa fa-binoculars"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">查看我的企业UU</a>
+							</div>
+						</div>
+						<div class="item col-xs-4">
+							<span><i class="fa fa-pencil-square-o"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">客户将您的UU号写到供应商资料</a>
+							</div>
+						</div>
+						<div class="item col-xs-4">
+							<span><i class="fa fa-shopping-cart"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">客户发起采购单</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</li>
+			<li id="sellerchart-year-amount">
+				<div class="chart" ac-chart="sellerCharts.year.chartType"
+					ac-data="sellerCharts.year.datas"
+					ac-config="sellerCharts.year.config" ng-if="sellerCharts"></div>
+				<div class="empty"
+					ng-if="sellerCharts && sellerCharts.year.datas.data.length == 0">
+					<div class="throughline">
+						<div class="line"></div>
+						<div class="content">
+							<i class="fa fa-fw fa-info-circle"></i>还没有收到您的订单哦，赶紧告诉客户怎么发起采购吧
+						</div>
+					</div>
+					<div class="stepline row">
+						<div class="item col-xs-4">
+							<span><i class="fa fa-binoculars"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">查看我的企业UU</a>
+							</div>
+						</div>
+						<div class="item col-xs-4">
+							<span><i class="fa fa-pencil-square-o"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">客户将您的UU号写到供应商资料</a>
+							</div>
+						</div>
+						<div class="item col-xs-4">
+							<span><i class="fa fa-shopping-cart"></i></span>
+							<div class="title">
+								<a href="" class="text-simple none">客户发起采购单</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</li>
 		</ul>
 	</div>
 	<!-- 交易额统计 End -->