platform-b2c/src/main/webapp/resources/view/common/sidebar.html

<style>
	#sidebar {
		position: fixed;
		z-index: 1000;
		right: 0;
		top: 0;
		width: 36px;
		height: 100%;
	}
	#sidebar .sidebar-content {
		position: absolute;
		top: 60%;
		transform: translateY(-50%);
		list-style: none;
		padding: 0;
		width: 100%;
	}
	#sidebar .sidebar-content li {
		position: relative;
		width: 100%;
		text-align: center;
	}
	#sidebar .sidebar-content li a {
		position: relative;
		display: block;
		padding: 5px 0;
		line-height: 20px;
		width: 100%;
		background-color: #5078CB;
		text-decoration: none;
		-webkit-transition: background-color ease .5s;
		-moz-transition: background-color ease 0.5s;
		-ms-transition: background-color ease 0.5s;
		-o-transition: background-color ease 0.5s;
		transition: background-color ease 0.5s;
		z-index: 20;
	}
	#sidebar .sidebar-content li:hover a {
		background-color: #555555;
	}
	#sidebar .sidebar-content li .sidebar-menu {
		position: absolute;
		display: block;
		right: -100%;
		top: 0px;
		bottom: 0;
		width: 200px;
		line-height: 40px;
		background-color: #555555;
		color: #ffffff;
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transition: transform .5s;
		-moz-transition: transform .5s;
		-ms-transition: transform .5s;
		-o-transition: transform .5s;
		transition: transform .5s;
		z-index: 19;
	}
	#sidebar .sidebar-content li:hover .sidebar-menu {
		display: block;
		-webkit-transform: translateX(-72px);
		-moz-transform: translateX(-72px);
		-ms-transform: translateX(-72px);
		-o-transform: translateX(-72px);
		transform: translateX(-72px);
	}
	#sidebar .sidebar-content li .foot-record{
		/* display: none; */
		width: 210px !important;
		max-height: 230px;
		line-height: 25px;
		/*right: 200px;*/
		top: inherit;
		bottom: -100%;
		/*padding-bottom: 10px;*/
	}
	/*#sidebar .foot-content li{
		overflow: hidden;
	}
	#sidebar .foot-content li:hover{
		overflow: inherit;
	}*/
	#sidebar .sidebar-content .foot-record h3{
		line-height: 39px;
		border-bottom: #767575 1px solid;
		text-align: left;
		padding-left: 10px;
		width: 96%;
		display: inline-block;
		margin: 0 auto;
		font-size: 12px;
		height: 39px;
	}
	#sidebar .sidebar-content .foot-record h3:hover a{
		color: #fbb029;
	}
	#sidebar .sidebar-content .foot-record h3 a{
		color: #fff;
		background-color: inherit;
		line-height: 30px;
	}
	#sidebar .sidebar-content .foot-record dl{
		/*padding-top: 5px;*/
	}
	#sidebar .sidebar-content .foot-record dl,#sidebar .sidebar-content .foot-record dl dd{
		width: 100%;
		margin: 0 auto;
	}
	#sidebar .sidebar-content .foot-record dl dd{
		line-height: 22px;
		width: 100%;
		display: inline-block;
		float: left;
		height: 22px;
		position: relative;
	}
	#sidebar .sidebar-content .foot-record dl dd a{
		display: inline-block;
		height: 22px;
		padding: 0 10px;
		width: 100%;
		font-size: 12px;
		color: #fff;
		line-height: 22px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		background: none;
		text-align: left;
		padding-right: 44px;
	}
	#sidebar .foot-content li a:hover div.foot-record{
		display: inline-block !important;
	}
	#sidebar .sidebar-content .foot-record dl dd:hover{
		background: #fff;
	}
	#sidebar .sidebar-content .foot-record dl dd:hover a{
		color: #333;
	}
	#sidebar .sidebar-content .foot-record dl dd:hover div.hover-shows{
		display: inline-block;
	}
	#sidebar .sidebar-content .foot-record dl dd div.hover-shows{
		position: absolute;
		top: 0;
		right: 2px;
		max-width: 55px;
		line-height: 20px;
		padding-right: 0;
		z-index: 100;
		display: none;
	}
	#sidebar .sidebar-content .foot-record dl dd div.hover-shows span{
		display: inline-block;
		width: 30px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		background: #e04b38;
		color: #fff;
		border-radius: 5px;
		opacity: 0;
		margin-top: 1px;
	}
	#sidebar .sidebar-content .foot-record dl dd:first-child{
		margin-top: 5px;
	}
	#sidebar .sidebar-content .foot-record dl dd:last-child{
		margin-bottom: 10px;
	}
	#sidebar .sidebar-content .foot-record dl dd div.hover-shows a{
		font-size: 23px;
		float: right;
		width: 20px;
		padding: 0;
		text-align: center;
		color: #999;
		top: -2px;
	}
	#sidebar .sidebar-content .foot-record dl dd div.hover-shows a:hover{
		color: #fbb029;
	}
	#sidebar .sidebar-content .foot-record dl dd div.hover-shows em{
		display: inline-block;
		position: absolute;
		width: 0;
		height: 0;
		border-top: 8px solid transparent;
		border-left: 7px solid #fbb029;
		border-bottom: 8px solid transparent;
		left: -158px;
		top: 4px;
	}
	#sidebar .sidebar-content .foot-record dl dd div.hover-shows em.off{
		border-left: 8px solid #b2b0b0;
	}
	#sidebar .sidebar-content .foot-record dl dd div.hover-shows span.off{
		opacity: 1;
	}
	a[disabled] {
		cursor: not-allowed;
	}
	.hover-shows a:hover{
		cursor: pointer;
	}
	#sidebar .sidebar-content li .contact-us{
		/*right: 200px;*/
		height: 180px;
		padding-top: 10px;
		width: 210px;
		top: -76px;
	}
	#sidebar .sidebar-content li .contact-us p{
		line-height: 33px;
		text-align: left;
		padding-left: 10px;
		margin-bottom: 0;
		white-space: nowrap;
	}
	#sidebar .sidebar-content li .contact-us .contact-btn{
		width: 62px;
		height: 18px;
		line-height: 18px;
		background: #ef7f03;
		display: inline-block;
		text-align: center;
		color: #fff;
		font-size: 12px;
		border-radius: 5px;
		padding: 0;
	}
	#sidebar .sidebar-content li .sidebar-menu a{
		padding: 0;
		line-height: 40px;
		color: #fff;
	}
	.massage:hover{
		cursor: pointer;
	}
	/*#sidebar .sidebar-content li.contact-list{
		overflow: hidden;
	}
	#sidebar .sidebar-content li.contact-list:hover{
		overflow: inherit;
	}*/
	em{
		font-style: inherit;
	}
    /*查看大图*/
    #image-box .x-floating-wrap,.image-box .x-floating-wrap {
        position: fixed;
        z-index: 99998;
        background: #000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
    }
    #image-box,.image-box{
        display:table; overflow:hidden; margin-left:50px; _position:relative;  width: 1200px;height: 700px;
        position: fixed;
        top: 50%;
        margin-top: -350px;
        left: 50%;
        margin-left: -600px;
        z-index: 2000;
    }
    #image-box .x-floating,.image-box .x-floating {
        vertical-align:middle !important;
        display:table-cell;
        text-align:center;
        _position:absolute;
        _top:50%; _left:50%;
        top: inherit !important;
        left: inherit !important;
    }
    #image-box .x-floating img ,.image-box .x-floating img {
        margin: auto auto;
        max-width: 970px !important;
        max-height: 600px !important;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #image-box .x-floating-wrap,.image-box .x-floating-wrap{
        z-index: 1000000 !important;
    }
    #item-content{
        color:#fff; display:inline-block; _position:relative; _top:-50%; _left:-50%;
        position: relative;
        z-index: 10000000;
    }
    #item-content div.x-close-wrap{
        position: absolute;
        right: -15px;
        line-height: 30px;
        top: -13px;
        color: #fff;
        width: 35px;
        height: 35px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 100%;
        opacity: 1;
        margin: 0;
        z-index: 100000;
        min-height: initial;
        text-align: center;
    }
    #item-content div.x-close-wrap a{
        position: relative;
        left: 0;
        bottom: 0;
        font-size: 34px;
        color: #fff;
    }
    #item-content div.x-close-wrap a:hover{
        color: #fff !important;
    }
    #item-content div.x-close-wrap:hover{
        cursor: pointer;
        opacity: .9;
    }
    #item-content div.x-close-wrap img{
        width: 30px !important;
        height: 30px !important;
    }
    #item-content .img{
        position: relative;
        z-index: 10;
    }
	#sidebar .remind-point {
		width: 8px;
		height: 8px;
		display: block;
		border-radius: 100%;
		background: red;
		position: relative;
		top: -31px;
		right: -27px;
	}
</style>
<div id="sidebar">
	<ul class="sidebar-content">
		<li>
			<a href="user#/cart" target="_blank"><img src="static/img/icon/cart.png"/></a>
			<div class="sidebar-menu" style="width: 100px"><a href="user#/cart" title="我的购物车" target="_blank">我的购物车<em><span ng-if="userInfo">(<span ng-bind="countCart || 0 | number"></span>)</span></em></a></div>
		</li>
		<!--<li>
			<a href="javascript:void(0)"><img src="static/img/icon/phone.png"/></a>
			<div class="sidebar-menu">服务电话：400-830-1818</div>
		</li>
		<li>
			<a href="javascript:void(0)"><img src="static/img/icon/mail.png"/></a>
			<div class="sidebar-menu">服务邮箱：yrsc@usoftchina.com</div>
		</li>-->
		<li ng-controller="MessageBarCtrl">
			<a href="javascript:void(0)" ng-click="openMessagePanel()"><img src="static/img/icon/talk.png"/></a>
			<div class="massage sidebar-menu" style="width: 100px" ng-click="openMessagePanel()" title="留言板">留言板</div>
		</li>
		<li class="contact-list">
			<a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" target="_blank"><img src="static/img/icon/contact.png"/></a>
			<div class="contact-us sidebar-menu">
				<p>在线客服：<img src="static/img/common/songguo.png" /><a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" class="contact-btn" target="_blank">联系客服</a></p>
				<p>服务电话：400-830-1818</p>
				<p>服务邮箱：yrsc@usoftchina.com</p>
				<p>工作时间：</p>
				<p>周一至周五 9:00-18:00</p>
			</div>
		</li>
		<!-- TODO huxz IM暂时不放出 -->
		<li ng-controller="WebChatCtrl">
			<a href="javascript:void(0)" ng-click="goWebChat()" style="width: 36px; height: 38px; line-height: 30px;"><i class="fa fa-comments-o" aria-hidden="true" style="font-size: 18px;color: #FFFFFF;"></i><!--ng-class="{ 'fa-comments': countData > 0, 'fa-comments-o': countData <= 0 }"-->
				<i class="remind-point" ng-if="countData > 0"></i><!--<img src="static/img/icon/talk.png"/>-->
			</a>
			<div class="massage sidebar-menu" style="width: 100px;" title="优软客服">优软互联<em><span ng-if="userInfo">(<span ng-bind="countData || 0 | number"></span>)</span></em></div>
		</li>
		<!--<li ng-controller="ScrollToTopCtrl">-->
			<!--<a href="javascript:void(0)" ng-click="scrollToTop()"><img src="static/img/icon/top.png"/></a>-->
			<!--<div class="sidebar-menu" style="width: 100px">返回顶部</div>-->
		<!--</li>-->
	</ul>
</div>
<div id="sidebar" style="height: 76px;bottom: 10px;top: inherit;">
	<ul class="foot-content sidebar-content" ng-controller="ScrollToTopCtrl">
		<li>
			<a href="user#/browsingHistory"><img src="static/img/icon/foot.png"/></a>
			<div class="foot-record sidebar-menu" ng-show="history.length ==0" style="bottom: -1px;width: 100px !important;">
				<h3><a href="user#/browsingHistory">&nbsp;&nbsp;&nbsp;浏览历史</a></h3>
			</div>
			<div class="foot-record sidebar-menu" ng-show="!userInfo" style="bottom: -1px;width: 100px !important;">
				<h3><a href="user#/browsingHistory">&nbsp;&nbsp;&nbsp;浏览历史</a></h3>
			</div>
			<div class="foot-record sidebar-menu" ng-show="history.length != 0 && userInfo">
				<h3><a href="user#/browsingHistory">浏览历史</a></h3>
				<dl>
					<!--<dd>
						<a href="" title="DS5VCOEST15jDS5VCOEST15j">DS5VCOEST15jDS5VCOEST15j</a>
						<div class="hover-shows">
							<em class="off"></em>
							<span class="off">失效</span>
							<a href="#">&times;</a>
						</div>
					</dd>-->
					<dd ng-repeat="item in history | limitTo : 8">
						<a ng-show="item.status== 1" href="{{'store/productDetail/' + item.batchCode}}" target="_blank"><span title="{{item.code}}" ng-bind="item.code"></span></a>
						<a ng-show="item.status== 0" disabled="disabled"><span sytle="color:#999;" title="{{item.code}}" ng-bind="item.code"></span></a>
						<div class="hover-shows">
							<em ng-class="{ 'off' : item.status== 0}"></em>
							<span ng-class="{ 'off' : item.status == 0}">失效</span>
							<a ng-click="deleteHistory(item.id)">&times;</a>
						</div>
					</dd>
				</dl>
			</div>
		</li>
		<li>
			<a href="javascript:void(0)" ng-click="scrollToTop()"><img src="static/img/icon/top.png"/></a>
			<div class="massage sidebar-menu" style="width: 100px" title="返回顶部" ng-click="scrollToTop()">返回顶部</div>
		</li>
	</ul>
</div>
<div id="image-box" style="display: none">
	<div class="x-floating-wrap"></div>
	<div class="x-floating">
		<div id="item-content">
			<div class="x-close-wrap"><a href="javascript:void(0);">&times;</a></div>
			<div class="img"><img/></div>
		</div>
	</div>
</div>