platform-b2b/src/main/webapp/resources/tpl/index/common/header.html

<style>
	#fixed-header {
		height: 120px;
	}
	#header.fix-header{
		position: fixed;
		/* padding: 10px 0; */
		width: 100%;
		height: 113px;
		background: #fff;
		z-index: 1001;
		top: 0;
		padding: 10px 0;
		-webkit-box-shadow: 0 2px 0 0 #ccc;
		box-shadow: 0 2px 0 0 #ccc;
	}
	#header .header-main {
		height: 100px;
		width: 1190px;
		margin: auto;
	}
	#header .header-main > li {
		display: inline-block;
		margin: 0 !important;
		vertical-align: middle;
		text-align: center;
	}
	#header .header-main >li:first-child {
		height: 100%;
		width: 111px; /*inline元素的宽度会受到别的元素的影响，如果不设置宽度，则会被ghost-center设置的伪元素挤到下方*/
		/*margin-left: -5.5em;*/
	}
    #header .header-main > li.header-guid {
        float: right;
    }
    #header .header-main > li.header-guid a{
        display: inline-block;
        float: left;
        cursor: pointer;
    }
    #header .header-main > li.header-guid .guid a.enter:hover img{
        transform: scale(1.06) ;
    }
    #header .mall-logo {
		line-height: 100px;
	}
	#header .header-main .mall-slogan {
		width: 250px;
	}
	#header .header-main .mall-slogan p{
		font-size: 14px;
		line-height: 20px;
		font-weight: bold;
		padding-top: 4px;
		text-align: left;
		color: #5078cb;
		border-left: #5078cb 1px solid;
		padding-left: 12px;
		margin-left: 10px;
		padding-top: 0;
	}
	#header .header-main .mall-search {
		width: 470px;
		height: 40px;
		font-size: 12px;
		margin-bottom: 10px;
	}
	#header .header-main .mall-search input.form-control, #header .header-main .mall-search button.btn-default {
		width: 440px;
		height: 40px;
		border: 2px solid #5078cb;
		border-radius: 0;
	}
	#header .header-main .mall-search button.btn-default {
		background-color: #5078cb;
		color: rgb(255, 255, 255);
		font-size: 16px;
		width: 78px;
	}
	#header .header-main .mall-search .active-search {
		text-align: left;
		margin-top: 4px;
	}
	#header .header-main .mall-search .active-search .active-search-body .active-search-item {
		line-height: 20px;
		color: #ff0101;
		font-size: 12px;
		display: inline-block;
		margin-right: 1em;
	}
	#header .header-main .mall-search .active-search .active-search-body .active-search-item a{
		color: #838383;
	}
	#header .header-main .mall-search .active-search .active-search-body .active-search-item a:hover{
		color: #ff0101;
	}
	#header .header-main .mall-search .association {
		position: absolute;
		left: 0;
		top: 100%;
		right: 61px;
		list-style: none;
		-webkit-padding-start: 0;
		background: #ffffff;
		border: 1px solid #dddddd;
		z-index: 21;
		width: 392px;
	}
	#header .header-main .mall-search .association li {
		padding: 0 15px;
		line-height: 30px;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#header .mall-cart{
		width:140px;
		height: 30px;
		line-height: 28px;
		display: inline-block;
		border: #bfbfbf 1px solid;
		border-radius: 5px;
		font-size: 14px;
		color: #5078cb;
		position: relative;
	}
	#header .mall-cart em{
		width: 22px;
		height: 22px;
		display: inline-block;
		background: #ff0000;
		border-radius: 100%;
		text-align: center;
		color: #fff;
		line-height: 22px;
		position: absolute;
		right: -5px;
		top: -12px;
		font-style: inherit;
		font-size: 12px;
	}
	#header .visitor-count{
		color: #787878;
		font-weight: bold;
	}
	#header .mall-cart:hover{
		border: #5078cb 1px solid;
	}
	#header .header-main .mall-search .association li.active, #header .header-main .mall-search .association li.active:hover {
		background: #dddddd;
	}
	#header .header-main .mall-search .association li:hover {
		background: #EEEEEE;
		cursor: pointer;
	}

	#header .nav-main {
		list-style: none;
	}
	#header .header-main .mall-search .type{
		position: absolute;
		top: -21px;
	}
	#header .header-main .mall-search .type .type-item{
		padding: 4px 12px;
		color: #5078cb;
		font-size: 14px;
		cursor: pointer;
	}
	#header .header-main .mall-search .type .type-item:hover,#header .header-main .mall-search .type .type-item.active{
		background: #4071c6;
		color: #fff;
	}
</style>

<div ng-controller="SearchCtrl">
    <div id="fixed-header">
        <header id="header" role="banner" ng-class="{'fix-header': isFixed}">
            <div class="container">
                <ul class="header-main list-unstyled">
                    <li class="ghost-center">
                        <div class="mall-logo">
                            <a ng-click="b2cLink('/')" target="_self" >
                                <img src="static/img/all/uas_mall.png" alt="返回首页"/>
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="mall-slogan"><p>For the World<br/>为世界电子产业创造价值</p></div>
                    </li>
                    <li>
                        <div class="mall-search">
                            <div class="input-group">
                                <div class="type">
                                    <span class="type-item" ng-class="{'active': searchType === 'component'}" ng-click="setTypeClick('component')">型号</span>
                                    <span class="type-item" ng-class="{'active': searchType === 'kind'}" ng-click="setTypeClick('kind')">物料名称</span>
                                    <span class="type-item" ng-class="{'active': searchType === 'store'}" ng-click="setTypeClick('store')">卖家</span>
                                    <span class="type-item" ng-class="{'active': searchType === 'brand'}" ng-click="setTypeClick('brand')">品牌</span>
                                </div>
                                <input ng-model="keyword" ng-change="onChange()" type="text" class="form-control"
                                       placeholder="{{placeholderSearch}}" ng-search="search()" ng-focus="onFocus()"
                                       ng-blur="onBlur()" ng-keyup="onKeyup()"/>
                                <span class="input-group-btn" ng-click="search()">
					<button class="btn btn-default" type="button">搜索</button>
				</span>
                                <ul class="association" ng-show="keyword && (associate || associateEnter)" ng-mouseenter="onAssociateEnter()"
                                    ng-mouseleave="onAssociateLeave()">
                                    <li ng-repeat="as in associates" ng-bind="as.code" ng-class="{'active': $index==selectIndex}"
                                        ng-click="onAssociateClick(as.code)"></li>
                                    <li ng-repeat="as in associates" ng-bind="as.nameCn" ng-class="{'active': $index==selectIndex}"
                                        ng-click="onAssociateClick(as.nameCn)"></li>
                                    <li ng-repeat="as in associates" ng-bind="as.name" ng-class="{'active': $index==selectIndex}"
                                        ng-click="onAssociateClick(as.name)"></li>
                                </ul>
                            </div>
                            <div class="active-search">
                                <ul class="list-untyled active-search-body" style="padding: 0;">
                                    <li class="active-search-item">热门搜索</li>
                                    <li class="active-search-item" ng-repeat="hw in hotwords"><a ng-href="{{hw.url}}" ng-bind="hw.name"></a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="header-guid">
                        <div class="guid">
                            <!--新手指南-->
                            <a class="enter" ng-click="b2cLink('/help/home')" target="_blank">
                                <img src="static/img/all/newPointer.jpg"/>
                            </a>
                            <!--立即入驻-->
                            <a class="enter" ng-click="b2cLink('/vendor#/store/maintain')">
                                <img src="static/img/all/goInto.png"/>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </header>
    </div>

    <!--nav   导航-->
    <nav role="navigation" class="nav-main">
        <ul class="container">
            <li><a class="more-title" ng-click="b2cLink('/product/kind/home')">器件选型</a></li>
            <li>
                <a ng-click="b2cLink('/')">&nbsp;&nbsp;首页</a>
            </li>
            <li>
                <a ng-click="b2cLink('/applyPurchase')">询价求购</a>
                <img class="new-animate" src="static/img/all/bussiness.png" alt="">
            </li>
            <li>
                <a ui-sref="home" class="active">B2B商务</a>
                <img class="new-animate" src="static/img/all/hot.png" alt="">
            </li>
            <li>
                <a ng-click="b2cLink('/eCommerce/home/factory')">电商</a>
            </li>
            <li>
                <a ng-click="b2cLink('/pcb')">PCB专区</a>
            </li>
            <li>
                <a href="https://zb.usoftchina.com/" target="_blank">U创网</a>
            </li>
            <li>
                <a href="https://bbs.usoftchina.com/" target="_blank">U客论坛</a>
            </li>
            <li>
                <a ng-click="b2cLink('/news')">优软快讯</a>
            </li>
        </ul>
    </nav>
</div>
<script language="javascript" type="text/javascript">
	$(function () {
		var targetChildrem_Height = $('.scroll-data dl').height();
		setInterval(function () {
			var target = $('.scroll-data')
			target.append(target.children(':first').clone(true));
			target.animate({
				scrollTop:targetChildrem_Height
			},function () {
				target.scrollTop(0);
				target.children(':first').remove();
			})

		},6000)
	})
</script>