右侧导航

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

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

@@ -11,6 +11,11 @@
 	z-index: 2;
 	background-color: #969595;
 }
+@media screen and (max-width: 1400px){
+	.rbar{
+		top: 25%;
+	}
+}
 .rbar a:hover {
 	color: #fff;
 }
@@ -20,7 +25,6 @@
 }
 
 .rbar .item-wrap {
-	padding-top: 15px;
 	position: relative;
 	cursor: pointer;
 	text-align: center;
@@ -35,15 +39,21 @@
 	width: 30px;
 	display: block;
 	color: #ffffff;
+	height: 140px;
+}
+.bar-center .item-inner{
+	padding-top: 12px;
+}
+.bar-center .item-inner .text-inverse{
+	margin-top: 5px;
 }
-
 .rbar .item-wrap:hover {
 	background-color: #6f6f6f;
 	color: #fff;
 }
 
 .rbar .inner-text {
-	padding: 10px 0 5px 0;
+	width: 10px;
 	margin: auto;
 	text-align: center;
 	display: block;
@@ -69,7 +79,7 @@
 	right: -100px;
 	top: 0;
 	width: 100px;
-	height: 100%;
+	height: 118px;
 	background-color: #494949;
 	border-radius: 2px 0 0 2px;
 	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
@@ -87,7 +97,7 @@
 .item-wrap .tip:after {
 	position: absolute;
 	content: '';
-	top: 20%;
+	top: 30%;
 	right: -10px;
 	width: 0;
 	height: 0;
@@ -97,8 +107,8 @@
 }
 
 .item-wrap:hover .tip {
-	opacity: 1;
-	right: 80px;
+	opacity: 0.5;
+	right: 30px;
 }
 
 .item-wrap .tip>ul {
@@ -139,14 +149,24 @@
 	float: left;
 	width: 30%;
 }
+.text-inverse{
+	width: 26px;
+	height: 16px;
+	line-height: 16px;
+	font-size: 12px;
+	background: #fff;
+	border-radius: 100%;
+	display: inline-block;
+}
 </style>
 <!-- right static-bar Start -->
 <div class="rbar">
 	<div class="bar-center" ng-controller="TodoCtrl">
 		<div class="item-wrap">
 			<a class="item-inner" ui-sref="fa.arCheck"> <span
-				class="inner-text">应付对账单</span> （<span class="text-inverse"
-				ng-bind="todo.arCheckToConfirm"></span>）
+				class="inner-text">应付对账单</span>
+				<span class="text-inverse" ng-bind="todo.arCheckToConfirm">
+				</span>
 			</a>
 		</div>
 	</div>

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

@@ -4,157 +4,174 @@
 	opacity: 1;
 	width: 30px;
 	position: fixed;
-	top: 50%;
+	top: 35%;
 	right: 0;
 	color: #555;
 	zoom: 1;
 	z-index: 2;
 	background-color: #969595;
 }
-.rbar a:hover {
-	color: #fff;
-}
-
-.rbar a:hover,.rbar a:focus,.rbar a:active {
-	text-decoration: none;
-}
-
-.rbar .item-wrap {
-	padding-top: 15px;
-	position: relative;
-	cursor: pointer;
-	text-align: center;
-	font-family: "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei", STHeiti;
-	-webkit-transition: all 0.15s ease-in-out;
-	-moz-transition: all 0.15s ease-in-out;
-	transition: all 0.15s ease-in-out;
-}
-
-.rbar .item-inner {
-	border-bottom: 1px solid #ffffff;
-	width: 30px;
-	display: block;
-	color: #ffffff;
-}
-
-.rbar .item-wrap:hover {
-	background-color: #6f6f6f;
-	color: #fff;
-}
-
-.rbar .inner-text {
-	padding: 10px 0 5px 0;
-	margin: auto;
-	text-align: center;
-	display: block;
-}
-
-.item-inner .badge {
-	padding: 3px 5px;
-	margin-bottom: 5px;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.item-wrap:hover .badge {
-	background-color: #fff;
-	color: #56a022;
-}
-
-.item-wrap .tip {
-	position: absolute;
-	opacity: 0;
-	zoom: 1;
-	right: -100px;
-	top: 0;
-	width: 100px;
-	height: 100%;
-	background-color: #494949;
-	border-radius: 2px 0 0 2px;
-	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
-	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
-	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
-	font-size: 12px;
-	text-align: center;
-	color: #fff;
-	-webkit-transition: all 0.35s ease-in-out;
-	-moz-transition: all 0.35s ease-in-out;
-	transition: all 0.35s ease-in-out;
-	z-index: 0;
-}
-
-.item-wrap .tip:after {
-	position: absolute;
-	content: '';
-	top: 30%;
-	right: -10px;
-	width: 0;
-	height: 0;
-	font-size: 0;
-	border: solid 5px;
-	border-color: transparent transparent transparent #494949;
-}
-
-.item-wrap:hover .tip {
-	opacity: 1;
-	right: 32px;
-}
-
-.item-wrap .tip>ul {
-	margin: 0;
-	padding: 0;
-}
-
-.item-wrap .tip>ul>li {
-	color: #fff;
-	padding: 10px;
-	border-bottom: 1px solid #f6f6f6;
-	-webkit-transition: all 0.15s ease-in-out;
-	-moz-transition: all 0.15s ease-in-out;
-	transition: all 0.15s ease-in-out;
-}
-
-.item-wrap .tip>ul>li>a {
-	color: #fff;
-}
-
-.item-wrap .tip>ul>li:hover {
-	background-color: #56a022;
-}
-
-.rbar .bar-bottom {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	border-top: 1px solid #e3e3e3;
-}
-
-.bar-bottom .item-wrap:first-child .item-inner {
-	border-top: 1px solid #f9f9f9;
-}
-
-.rbar .icon-left {
-	margin: 8px 10px 0 0;
-	float: left;
-	width: 30%;
-}
+@media screen and (max-width: 1400px){
+	.rbar{
+		top: 20%;
+	}
+}
+	.rbar a:hover {
+		color: #fff;
+	}
+
+	.rbar a:hover,.rbar a:focus,.rbar a:active {
+		text-decoration: none;
+	}
+
+	.rbar .item-wrap {
+		position: relative;
+		cursor: pointer;
+		text-align: center;
+		font-family: "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei", STHeiti;
+		-webkit-transition: all 0.15s ease-in-out;
+		-moz-transition: all 0.15s ease-in-out;
+		transition: all 0.15s ease-in-out;
+	}
+
+	.rbar .item-inner {
+		border-bottom: 1px solid #ffffff;
+		width: 30px;
+		display: block;
+		color: #ffffff;
+		height: 100px;
+	}
+	.bar-center .item-inner{
+		padding-top: 12px;
+	}
+	.bar-center .item-inner .text-inverse{
+		margin-top: 5px;
+	}
+	.rbar .item-wrap:hover {
+		background-color: #6f6f6f;
+		color: #fff;
+	}
+
+	.rbar .inner-text {
+		width: 10px;
+		margin: auto;
+		text-align: center;
+		display: block;
+	}
+
+	.item-inner .badge {
+		padding: 3px 5px;
+		margin-bottom: 5px;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.item-wrap:hover .badge {
+		background-color: #fff;
+		color: #56a022;
+	}
+
+	.item-wrap .tip {
+		position: absolute;
+		opacity: 0;
+		zoom: 1;
+		right: -100px;
+		top: 0;
+		width: 100px;
+		height: 118px;
+		background-color: #494949;
+		border-radius: 2px 0 0 2px;
+		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
+		-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
+		box-shadow: 0 0 5px rgba(0, 0, 0, .2);
+		font-size: 12px;
+		text-align: center;
+		color: #fff;
+		-webkit-transition: all 0.35s ease-in-out;
+		-moz-transition: all 0.35s ease-in-out;
+		transition: all 0.35s ease-in-out;
+		z-index: 0;
+	}
+
+	.item-wrap .tip:after {
+		position: absolute;
+		content: '';
+		top: 30%;
+		right: -10px;
+		width: 0;
+		height: 0;
+		font-size: 0;
+		border: solid 5px;
+		border-color: transparent transparent transparent #494949;
+	}
+
+	.item-wrap:hover .tip {
+		opacity: 0.5;
+		right: 30px;
+	}
+
+	.item-wrap .tip>ul {
+		margin: 0;
+		padding: 0;
+	}
+
+	.item-wrap .tip>ul>li {
+		color: #fff;
+		padding: 10px;
+		border-bottom: 1px solid #f6f6f6;
+		-webkit-transition: all 0.15s ease-in-out;
+		-moz-transition: all 0.15s ease-in-out;
+		transition: all 0.15s ease-in-out;
+	}
+
+	.item-wrap .tip>ul>li>a {
+		color: #fff;
+	}
+
+	.item-wrap .tip>ul>li:hover {
+		background-color: #6f6f6f;
+	}
+
+	.rbar .bar-bottom {
+		position: relative;
+		bottom: 0;
+		left: 0;
+		border-top: 1px solid #e3e3e3;
+	}
+
+	.bar-bottom .item-wrap:first-child .item-inner {
+		border-top: 1px solid #f9f9f9;
+	}
+
+	.rbar .icon-left {
+		margin: 8px 10px 0 0;
+		float: left;
+		width: 30%;
+	}
+	.text-inverse{
+		width: 26px;
+		height: 16px;
+		line-height: 16px;
+		font-size: 12px;
+		background: #fff;
+		border-radius: 100%;
+		display: inline-block;
+	}
 </style>
 <!-- right static-bar Start -->
 <div class="rbar">
 	<div class="bar-center" ng-controller="TodoCtrl">
 		<div class="item-wrap">
-			<a class="item-inner" ui-sref="purc.order"> 
-				<i class="fa fa-file-text-o fa-2x"></i>
-				<span class="inner-text">待回复（<span class="text-inverse"
-				ng-bind="todo.purcTodo"></span>）</span> 
+			<a class="item-inner" ui-sref="purc.order">
+				<span class="inner-text">待回复</span>
+				<span class="text-inverse" ng-bind="todo.purcTodo"></span>
 			</a>
 		</div>
 		<div class="item-wrap">
-			<a class="item-inner" ui-sref="purc.cart"> 
-				<i class="fa fa-shopping-cart fa-2x"></i>
-				<span class="inner-text">购物车 （<span class="text-inverse"
-				ng-bind="todo.cartTodo"></span>）</span> 
+			<a class="item-inner" ui-sref="purc.cart">
+				<span class="inner-text">购物车</span>
+				<span class="text-inverse" ng-bind="todo.cartTodo"></span>
 			</a>
 		</div>
 	</div>

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

@@ -11,6 +11,11 @@
 	z-index: 2;
 	background-color: #969595;
 }
+@media screen and (max-width: 1400px){
+	.rbar{
+		top: 15%;
+	}
+}
 .rbar a:hover {
 	color: #fff;
 }