老师帮我看下为什么我的购物车下拉层会被轮播图挡住，应该如何修改

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慕淘网</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>

<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="fl dropdown menu" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘 <i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="fl dropdown menu" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹 <i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="fl dropdown menu" data-active="menu" data-load="json/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心 <i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>






</ul>
</li>
<li class="nav-site-service fl dropdown menu" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服 <i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>

<div class="header">
<div class="container">
<h1 class="fl"><a href="./index.html" class="header-logo text-hidden">慕淘网</a></h1>
<div class="search fl" id="header-search">
<form action="https://s.taobao.com/search" class="search-form">
<input type="text" class="search-inputbox fl" name="q" placeholder="请输入要搜索的词" autocomplete="off">
<input type="submit" class="search-btn fl">
</form>
<ul class="search-layer">



</ul>
</div>
<div class="cart fr dropdown" data-active="cart" data-load="json/cart.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">
<i class="dropdown-cart icon"></i>
购物车
<span class="cart-line">|</span>
<span class="cart-count-total">0</span>
<i class="dropdown-arrow icon"></i>
</a>
<div class="dropdown-layer dropdown-right">
<div class="dropdown-loading"></div>
</div>
</div>
</div>
</div>

<div class="nav-main">
<div class="container">
<a href="###" target="_blank" class="link">数码城</a
><a href="###" target="_blank" class="link">天黑黑</a
><a href="###" target="_blank" class="link">团购</a
><a href="###" target="_blank" class="link">发现</a
><a href="###" target="_blank" class="link">二手特价</a
><a href="###" target="_blank" class="link">名品汇</a>
</div>
</div>

<div class="focus">
<div class="container">

<div class="category fl" id="focus-category">
<a href="###" class="category-title" target="_blank"><i class="icon"></i>商品分类</a>
<ul class="category-list">
<li class="dropdown" data-active="category" data-load="json/category-detail-1.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">家用电器</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-2.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">手机</a
>、<a href="###" target="_blank" class="dropdown-link">运营商</a
>、<a href="###" target="_blank" class="dropdown-link">数码</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-3.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">电脑</a
>、<a href="###" target="_blank" class="dropdown-link">办公</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-4.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">家居</a
>、<a href="###" target="_blank" class="dropdown-link">家具</a
>、<a href="###" target="_blank" class="dropdown-link">家装</a
>、<a href="###" target="_blank" class="dropdown-link">厨具</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-5.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">男装</a
>、<a href="###" target="_blank" class="dropdown-link">女装</a
>、<a href="###" target="_blank" class="dropdown-link">童装</a
>、<a href="###" target="_blank" class="dropdown-link">内衣</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-6.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">化妆</a
>、<a href="###" target="_blank" class="dropdown-link">清洁</a
>、<a href="###" target="_blank" class="dropdown-link">宠物</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-7.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">运动户外</a
>、<a href="###" target="_blank" class="dropdown-link">钟表</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-8.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">汽车</a
>、<a href="###" target="_blank" class="dropdown-link">汽车用品</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-9.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">母婴</a
>、<a href="###" target="_blank" class="dropdown-link">玩具乐器</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-10.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">食品</a
>、<a href="###" target="_blank" class="dropdown-link">酒类</a
>、<a href="###" target="_blank" class="dropdown-link">生鲜</a
>、<a href="###" target="_blank" class="dropdown-link">特产</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-11.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">医药保健</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-12.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">图书</a
>、<a href="###" target="_blank" class="dropdown-link">音像</a
>、<a href="###" target="_blank" class="dropdown-link">电子书</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-13.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">彩票</a
>、<a href="###" target="_blank" class="dropdown-link">旅行</a
>、<a href="###" target="_blank" class="dropdown-link">充值</a
>、<a href="###" target="_blank" class="dropdown-link">票务</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="json/category-detail-14.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">理财</a
>、<a href="###" target="_blank" class="dropdown-link">众筹</a
>、<a href="###" target="_blank" class="dropdown-link">白条</a
>、<a href="###" target="_blank" class="dropdown-link">保险</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
</ul>
</div>

<div class="slider fl" id="focus-slider">
<div class=" slider-container">
<div class="slider-item">
<a href="###" target="_blank">
<img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/focus-slider/1.png" alt="">
</a>
</div>
<div class="slider-item">
<a href="###" target="_blank">
<img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/focus-slider/2.png" alt="">
</a>
</div>
<div class="slider-item">
<a href="###" target="_blank">
<img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/focus-slider/3.png" alt="">
</a>
</div>
<div class="slider-item">
<a href="###" target="_blank">
<img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/focus-slider/4.png" alt="">
</a>
</div>
</div>
<ol class="slider-indicator-wrap cf">
<li class="slider-indicator fl text-hidden slider-indicator-active">1</li>
<li class="slider-indicator fl text-hidden">2</li>
<li class="slider-indicator fl text-hidden">3</li>
<li class="slider-indicator fl text-hidden">4</li>
</ol>
<a href="javascript:void (0);" class="slider-control slider-control-lf"><</a>
<a href="javascript:void (0);" class="slider-control slider-control-rt">></a>
</div>

<div class="focus-sidebar fr">
<div class="focus-sidebar-news">
<div class="focus-sidebar-news-hd">
<div class="focus-sidebar-news-hd-title fl">慕快报</div>
<a href="###" target="_blank" class="link fr">更多></a>
</div>
<div class="focus-sidebar-news-bd">
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书没满100减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书没满100减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书没满100减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书没满100减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书没满100减50</a>
</p>

</div>
</div>
<div class="focus-sidebar-serves cf">
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">机票</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">电影票</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">游戏</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">彩票</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text ">加油卡</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">酒店</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">火车票</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">众筹</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">理财</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">礼品卡</span>
</a>
<a href="###" target="_blank" class="focus-sidebar-serves-item fl">
<i class="focus-sidebar-serves-icon icon"></i>
<span class="focus-sidebar-serves-text">白条</span>
</a>
</div>
<div class="focus-sidebar-ad"></div>
</div>
</div>
</div>

<div class="todays">
<div class="container">
<div class="slider " id="todays-slider">
<div class=" slider-container cf">
<div class="slider-item">
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/1.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/2.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/5.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/11.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/10.png" alt=""></a>
</div>
<div class="slider-item">
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/3.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/4.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/6.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/9.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/6.png" alt=""></a>
</div>
<div class="slider-item">
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/5.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/6.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/9.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/7.png" alt=""></a>
<a href="###" target="_blank" class="fl"><img src="img/focus-slider/loading.gif" class="slider-img" data-src="img/todays-slider/8.png" alt=""></a>
</div>
</div>
<a href="javascript:void (0);" class="slider-control slider-control-lf"><</a>
<a href="javascript:void (0);" class="slider-control slider-control-rt">></a>
</div>
</div>
</div>
<div style="height: 100px"></div>
</body>
<script>
window.jQuery || document.write('<script src="plug/jQ/jQuery3.5.1.js"><\/script>');
</script>

<script src="js/transition.js"></script>
<script src="js/showHide.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/search.js"></script>
<script src="js/move.js"></script>
<script src="js/slider.js"></script>
<script src="js/index.js"></script>
</html>

common.css

/*公共样式*/

.container {
width: 1200px;
margin: 0 auto;
}

.link {
color: #4d555d;
}

.link:hover {
color: #f01414!important;
}

.transition {
transition: all .2s;
}

.dropdown-loading {
width: 32px;
height: 32px;
background: url(../img/loading.gif) no-repeat;
margin: 20px auto;
}

.text-hidden {
text-indent: -999px;
overflow: hidden;
}
/*文字溢出省略*/
.text-ellipsis {
text-overflow: ellipsis; /*文字溢出隐藏*/
white-space: nowrap; /*不换行*/
overflow: hidden;
}

/*icon*/

@font-face {
font-family: "iconfont";
src: url('../font/iconfont.eot?t=1477124206');
/* IE9*/
src: url('../font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */ url('../font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../font/iconfont.svg?t=1477124206#iconfont') format('svg');
/* iOS 4.1- */
}

.icon {

font-family: "iconfont" !important;
font-size: 10px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
}

/*showHide*/

.fadeOut {
visibility: hidden !important; /*占位，但隐藏时不会触发绑定事件*/
opacity: 0 !important;
}

.slidUpDownCollapse {
height: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
padding-top: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
padding-bottom: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
}

.slideLeftRightCollapse {
width: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
padding-left: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
padding-right: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
}

/*dropdown*/
/*dropdown*/
.dropdown {
position: relative;
}

.dropdown-toggle {
position: relative;
z-index: 2;
}

.dropdown-arrow {
display: inline-block;
background-repeat: no-repeat;
vertical-align: middle;
}

.dropdown-layer {
display: none;
position: absolute;
z-index: 1;
}

.dropdown-left {
left: 0;
right: auto;

}

.dropdown-right {
right: 0;
left: auto;
}

/*menu dropdown*/

.menu .dropdown-toggle {
display: block;
height: 44px; /*此处不可以设置高度为100% 否则底部边框不显示*/
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7; /*需要设置边框，但是跟背景颜色一样，否则hover的时候布局会变动*/
border-right: 1px solid #f3f5f7;
}
.menu-active .dropdown-arrow{ /*属性包含-active元素*/
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.menu .dropdown-arrow {
margin-left: 8px;
}

.menu .dropdown-layer {
top: 43px;
background-color: #fff;
border: 1px solid #cdd0d4;
min-width: 95px;
}

.menu-item {
display: block;
color: #4d555d;
padding: 0 12px;
height: 30px;
line-height: 30px;
}

.menu-item:hover {
background-color: #f3f5f7;
}

.menu-active .dropdown-toggle {
border-color: #cdd0d4;
background-color: #fff;
}

/* cart dropdown*/
.cart-active .dropdown-arrow{ /*属性包含-active元素*/
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
i.dropdown-cart{
margin-right: 14px;
border-bottom: none;
}
.cart i:nth-child(2){
margin-left: 14px;
}
.cart .dropdown-layer{
padding-left: 12px;
font-size: 14px;
border: 1px solid #d9dde1;
min-width: 278px;
top: 41px;
box-shadow: 0 0 3px rgba(0, 0, 0,.1);
background-color: #fff;
/*overflow: auto;*/
/*z-index: 4;*/
}

.cart-bd{
height: 52px;
line-height: 52px;
color: #000;
border-bottom: 1px solid #d9dde1;
text-indent: 12px;
margin-right: 30px;
}
.cart .dropdown-layer .cart-item{
height: 44px;
padding: 10px;
border-bottom: 1px solid #d9dde1;
}

.cart-item .cart-detail{
max-width: 145px;
margin-left: 15px;
cursor: pointer;
}
.cart-item .cart-detail-title{
width: 145px;
color: #4d555d;
margin-top: 6px;
font-size: 12px;
}
.cart-content{
max-height: 335px;
overflow: auto;
padding-right: 10px;
}
.word-nowrap{
overflow: hidden;
white-space: nowrap;
}
.cart-item .cart-delete{
margin-top: 5px;
}
.cart-detail-price{
margin-top: 10px;
color: #4d555d;
font-weight: 700;
}
.cart-ft{
padding-left: 12px;
height: 68px;
line-height: 68px;
color: #000;
font-size: 12px;
}
.cart-ft-price{
font-size: 8px;
}
.cart-ft-price::before{
content: " ￥";
display: inline-block;
font-size: 8px;
}
.cart-ft-linkCart{
display: inline-block;
width: 80px;
height: 35px;
border-radius: 3px;
background-color: #f01410;
line-height: 35px;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 15px;
margin-right: 20px;
}
.cart-empty{
height: 40px;
margin: 40px 0 46px 48px;
}
.cart-empty div:nth-child(1){
font-size: 30px;
height: 40px;
line-height: 40px;
color: #d9dde1;
}
.cart-empty div:nth-child(2){
margin-left: 15px;
height: 20px;
line-height: 20px;
color: #93999f;
}
/*search*/

.search {
position: relative;
border: 1px solid #cfd2d5;
}

.search-inputbox {
width: 585px;
height: 40px;
line-height: 40px;
padding: 0 10px;
background-color: #fff;
}

.search-btn {
width: 73px;
height: 40px;
background-color: #07111b;
color: #fff;
font-size: 14px;
line-height: 40px;
text-align: center;
cursor: pointer;
}

.search-layer {
display: none;
position: absolute;
top: 100%;
left: -1px;
width: 100%;
background-color: #fff;
border: 1px solid #cfd2d5;
z-index: 2;
}

.search-layer-item {
height: 24px;
line-height: 24px;
padding: 0 10px;
cursor: pointer;
}

.search-layer-item:hover {
background-color: #f3f5f7;
}

/*category*/

.category{
width: 208px;
position: relative;
margin-top: -62px;
font-size: 14px;
}
.category-title{
display: block;
height: 54px;
line-height: 54px;
padding: 0 20px;
background-color: #c81414;
color: #fff;
}
.category-title .icon{
font-size: 16px;
margin-right: 10px;
}
.category-list{
height: 512px;
background-color: #f01414;
}
.category .dropdown{
position: static;
}
.category-list .dropdown-toggle{
height: 36px;
line-height: 36px;
text-indent: 16px;
color: #fff;
}
.category-list .dropdown-link{
color: #fff;
}
.category-list .dropdown-arrow{
position: absolute;
right: 12px;
font-weight: bold;
font-family: simsun;/*宋体*/
}
.category-list-active .dropdown-toggle{
background-color: #fff;
}
.category-list-active .dropdown-toggle,
.category-list-active .dropdown-link {
color: #f01414;
}
.category .dropdown-layer{
/*display: block;*/
left: 100%;
top: 54px;
display: none;
width: 744px;
padding: 8px 0 31px;
box-shadow: 0 0 5px rgba(0,0,0,.2);
background-color: #fff;
min-height: 473px;
}
.category-detail{
width: 744px;
margin-top: 24px;
line-height: 20px;
}
.category-detail-title{
width: 84px;
text-align: right;
padding-right: 16px;
border-right: 1px solid #d9dde1;
}
.category-detail-title-link{
font-weight: bold;
color: #07111b;
}
.category-detail-item{
padding-left: 15px;
width: 592px;

}
.category-detail-item .link{
display: inline-block;
padding-right: 16px;
}
.category .dropdown-loading{
margin: 220px auto;
}

/*slider*/

.slider {
width: 728px;
height: 504px;
position: relative;
overflow: hidden;
}

.slider-indicator-wrap {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
}

.slider-indicator {
width: 8px;
height: 8px;
background-color: #313a43;
border-radius: 50%;
margin-right: 12px;
cursor: pointer;
border: 2px solid #e5e9eb;
}

.slider-indicator-active {
background-color: #f7f8f9;
border-color: #858b92;
}

.slider-control {
display: none;
width: 28px;
height: 62px;
line-height: 62px;
background-color: #000;
opacity: .8;
filter: alpha(opacity=80); /*兼容ie*/
color: #fff;
font-size: 22px;
font-family: simsun;
text-align: center;
position: absolute;
top: 50%;
margin-top: -31px;
}

.slider-control-lf {
left: 0;
}

.slider-control-rt {
right: 0;
}

.slider-fade .slider-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}

.slider-slide .slider-item {
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}

index.css

/*nav-site*/
.nav-site{
width: 100%;
background-color: #f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{
color: #f01414;
margin-left: 15px;
}
.nav-site-signup,
.nav-site-mobile{
margin-left: 10px;
}
.nav-site-category{
margin: 0 10px;
}
.nav-site-service{
margin-right: 15px;
}
/*header*/
.header{
width: 100%;
background-color: #f3f5f7;
height: 124px;
}
.header .search,
.header-logo,
.header .cart{
margin-top: 36px;
}
.header-logo{
display: block;
width: 136px;
height: 48px;
margin-left: 15px;
background: url(../img/header-logo.png) no-repeat;
}
.header .search{
margin-left: 145px;
}
.header .cart{
margin-right: 15px;
}
/*cart*/
.cart{
background-color: #fff;
z-index: 0;
}
.cart>a{
display: block;
color: #fff;
width: 158px;
background-color: #f01414;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
border: 1px solid #f01414;
}
.cart:hover>a{
color: #f01414;
background-color: #fff;
border-color: #e9e9e9;
box-shadow: 0 0 3px rgba(0, 0, 0,.1);
}
.cart-line{
margin: 0 15px 0 13px;
}
.cart:hover .dropdown-toggle:after{
content: "";
display: block;
width: 158px;
height: 4px;
background-color: #fff;
position: absolute;
bottom: -4px;
transition: all .2s;
}
/*nav-main*/
.nav-main{
width: 100%;
height: 48px;
background-color: #07111b;
line-height: 48px;
margin-bottom: 8px;
text-indent: 182px;
}
.nav-main .link{
margin-left: 50px;
font-size: 14px;
color: #fff;
}
/*focus*/
.focus{
background-color: #fff;
margin-bottom: 9px;
height: 504px;
}
.category-title{
display: block;
height: 54px;
line-height: 54px;
padding: 0 20px;
background-color: #c81414;
color: #fff;
}
.category-title .icon{
font-size: 16px;
margin-right: 10px;
}
.focus-sidebar{
width: 249px;
}
.focus-sidebar-news{
padding: 7px 20px 12px;
background-color: #fff;
border: 1px solid #d9dde1;
border-bottom: none;
}
.focus-sidebar-news-hd{
height: 38px;
line-height: 38px;
}
.focus-sidebar-news-hd-title{
color: #f01414;
font-size: 16px;
}
.focus-sidebar-news-bd{
line-height: 28px;
}
.focus-sidebar-serves{
background-color: #fff;
border-left: 1px solid #d9dde1;
}
.focus-sidebar-serves-item{
width: 61px;
height: 71px;
border-top: 1px solid #d9dde1;
border-right: 1px solid #d9dde1;
text-align: center;
}
.focus-sidebar-serves-icon,
.focus-sidebar-serves-text{
display: inline-block;
width: 100%;
}
.focus-sidebar-serves-icon{
margin-top: 17px;
color: #f67272;
font-size: 22px;
}
.focus-sidebar-serves-text{
margin-top: 6px;
color: #4d555d;
}
.focus-sidebar-ad{
width: 100%;
height: 90px;
background: url(../img/focus-ad.png);
}
.focus .slider{
margin-left: 8px;
}
/*todays*/

.todays .slider{
width: 100%;
height: 158px;

}
.todays .slider-img{
width: 240px;

}

base.css

/*css reset*/
/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
/*重置默认样式*/
body, button, input, select, textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
em, i {
font-style: normal;
}

a {
text-decoration: none;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
vertical-align: top;
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
input {
border: none;
}
/*常用公共样式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;

}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
index.js

// $(".dropdown").hover(function () {
// console.log(1);
// $(this).addClass("dropdown-active");
// },function () {
// $(this).removeClass("dropdown-active");
// })
(function () {
var dropdown = {}
//menu
$(".menu").on("dropdown-show", function (e) {
dropdown.loadOnce($(this), dropdown.bulidMenuItem);
})
.dropdown({
css3: true,
js: false,
delay: 0,
})
dropdown.bulidMenuItem = function ($elem, data) {
var html = "";
if (data.length === 0) return;
for (var i = 0; i < data.length; i++) {
html += '<li><a href="' + data[i].url + '" target="_blank" class="menu-item">' + data[i].name + '</a></li>'
}
$elem.find(".dropdown-layer").html(html);
};

//cart
$(".cart").on("dropdown-show", function (e) {
dropdown.loadOnce($(this), dropdown.bulidCartItem);
})
.dropdown({
css3: true,
js: false,
delay: 0,
})
dropdown.bulidCartItem = function ($elem, data) {
var $cartCountTotal = $elem.find(".cart-count-total"),
total = 0,
html = "";
if (data.length !== 0) {
setTimeout(function () {
var dataLength = data.length;
for (var i = 0; i < dataLength; i++) {
total += data[i]['count'] * data[i]['price'];
html += '<li class="cart-item">' +
'<div class="cart-img fl">' +
'<a href="###" target="_blank">' +
'<img src="' + data[i].url + '" alt="' + data[i].detail + '">' +
'</a>' +
'</div>' +
'<div class="cart-detail fl">' +
'<div class="cart-detail-title word-nowrap fl">' + data[i].detail + '</div>' +
'<div class="cart-detail-price fl">￥' +
'<strong class="price">' + data[i]['price'] + '</strong> x' +
'<strong class="cart-detail-count">' + data[i]['count'] + '</strong>' +
'</div>' +
'</div>' +
'<div class="cart-delete fr">' + '<i class="icon">' + '' + '</i></div>' +
'</li>'
}
total = keepTwoDecimalFull(total);
$elem.find(".dropdown-layer").html('<div class="cart-bd">' + '<strong>' + '最新加入的宝贝' + '</strong></div>' +
'<ul class="cart-content">' + html + '</ul>' + '<div class="cart-ft ">' + '共 ' + '<strong>' + dataLength + '</strong>' + ' 件商品' + '  共计<strong class="cart-ft-price">' + total + '</strong>' + ' <a href="###"' + 'class="cart-ft-linkCart fr">' + '去购物车' + '</a>' + ' </div>');
$cartCountTotal.text(dataLength)
}, 1000)
} else {
html = '<div class="cart-empty">' +
'<div class="icon fl"> </div>' +
'<div class="fl">' + '<i> 购物车还没有商品<br/>赶紧去选购吧！</i>' + '</div>' +
'</div>'
$elem.find(".dropdown-layer").html(html);
}
};
dropdown.loadOnce = function ($elem, success) {
var dataLoad = $elem.data("load");
if (!dataLoad) return;
if (!$elem.data("loaded")) {
$elem.data('loaded', true);
//确保异步请求只调用一次，以免重复渲染页面
$.getJSON(dataLoad).done(function (data) {
if (typeof success === "function") success($elem, data);
}).fail(function () {
$elem.data('loaded', false);
});
}
};

//search
var search = {};
search.$headerSearch = $("#header-search");
search.$headerSearch.html = "";
search.$headerSearch.maxNum = 10;
search.$headerSearch.on("search-getData", function (e, data) {
var $this = $(this);
// console.log(e.type)
// console.log(data);
search.$headerSearch.html = search.$headerSearch.creatHeaderSearchLayer(data, search.$headerSearch.maxNum);
//渲染页面
$this.search("appendLayer", search.$headerSearch.html)
// $layer.html(html);
if (search.$headerSearch.html) {
$this.search("showLayer")
} else {
$this.search("hideLayer")
}
}).on("search-noData", function (e) {
//先隐藏再清空
$(this).search("hideLayer").search("appendLayer", "");
}).on("click", ".search-layer-item", function () {
search.$headerSearch.search("setInputVal", $(this).html());
search.$headerSearch.search("submit");
})
search.$headerSearch.search({
// url:"",
autocomplete: true,
css3: false,
js: false,
animation: "fade",
getDataInterval: 0
})
search.$headerSearch.creatHeaderSearchLayer = function (data, maxNum) {
var dataNum = data["result"].length,
html = "";
if (dataNum === 0) {
return "";
} else {
for (var i = 0; i < dataNum; i++) {
if (i > maxNum) break;
html += '<li class="search-layer-item text-ellipsis">' + data["result"][i][0] + '</li>';
}
return html;
}
};

// category
$("#focus-category").find(".dropdown").on("dropdown-show", function (e) {
dropdown.loadOnce($(this), dropdown.bulidCategoryDetails);
})
.dropdown({
css3: true,
js: true,
animation: "fadeSlideLeftRight"
})
dropdown.bulidCategoryDetails = function ($elem, data) {
var html = "";
if (data.length === 0) return;
for (var i = 0; i < data.length; i++) {
html += '<dl class="category-detail cf">' + '<dt class="category-detail-title fl">' +
'<a href="##"' + 'target="_blank" ' + 'class="category-detail-title-link">' + data[i]['title'] + '</a>' +
' </dt>' + '<dd class="category-detail-item fl">';
for (var j = 0; j < data[i]['items'].length; j++) {
html += '<a href="###"' + 'target="_blank"' + 'class="link">' + data[i]['items'][j] + '</a>';

}
html = html + '</dd></dl>';
}
$elem.find(".dropdown-layer").html(html);
};

//focus-slider
var slider = {};

slider.loadImg = function (url, imgLoaded, imgFailed) {
var image = new Image();
image.onerror = function () {
if (typeof imgFailed === "function") imgFailed(url)
}
image.onload = function () {
if (typeof imgLoaded === "function") imgLoaded(url)
}
image.src = url;
// setTimeout(function () {
// image.src = url;
// }, 1000)
}
slider.lazyLoad = function ($elem) {
//用于标记加载过与否
$elem.items = [];
//用于标记加载次数
$elem.loadedItemNum = 0;
//待加载总数量
$elem.totalItemNum = $elem.find(".slider-img").length;
$elem.on("slider-show", $elem.loadItem = function (e, index, elem) {
console.log(1)
if ($elem.items[index] !== 'loaded') {
$elem.trigger('slider-loadItem', [index, elem]);
}
})
$elem.on('slider-loadItem', function (e, index, elem) {
//按需加载
var $imgs = $(elem).find(".slider-img");
//由于默认只加载一次所以需要循环一下
//_ 表明该参数不用，只是为了引出下一个参数；
$imgs.each(function (_, el) {
var $img = $(el);
slider.loadImg($img.data('src'), function (url) {
$img.attr('src', url);
$elem.items[index] = 'loaded';
$elem.loadedItemNum++;
console.log(index + ":loaded");
if ($elem.loadedItemNum === $elem.totalItemNum) {
//清除事件
$elem.trigger('slider-itemsLoaded');
//
}
}, function (url) {
console.log("从" + url + '加载图片失败');
//多加载一次
//显示备用图片
$img.attr('src', '../img/focus-slider/placeholder.png')
})
})
})
$elem.on('slider-itemsLoaded', function (e) {
console.log('itemsLoaded');
//清除事件
$elem.off("slider-show", $elem.loadItem);
})
}

slider.$focusSlider = $('#focus-slider');

slider.lazyLoad(slider.$focusSlider)
slider.$focusSlider.slider({
css3: true,
js: false,
animation: 'fade', //slide
activeIndex: 0,
Interval: 0//自动播放间隔
})
//today-slider
slider.$todaysSlider = $('#todays-slider');
slider.lazyLoad(slider.$todaysSlider)
slider.$todaysSlider.slider({
css3: true,
js: false,
animation: 'slide', //slide
activeIndex: 0,
Interval: 0//自动播放间隔
})

//四舍五入保留2位小数（不够位数，则用0替补）
function keepTwoDecimalFull(num) {
var result = parseFloat(num);
if (isNaN(result)) {
alert('传递参数错误，请检查！');
return false;
}
result = Math.round(num * 100) / 100;
var s_x = result.toString();
var pos_decimal = s_x.indexOf('.');
if (pos_decimal < 0) {
pos_decimal = s_x.length;
s_x += '.';
}
while (s_x.length <= pos_decimal + 2) {
s_x += '0';
}
return s_x;
}

})(jQuery)