<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="font-awesome/css/font-awesome.css"/>
<!-- takeout.html 外卖 codeOrder.html 扫码 toQueue.html 排队 -->
<style>
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
border-bottom-color:#dddddd;
border-right-color: #FFFFFF;
border-left: 3px solid #367DB9;
}
.nav-tabs>li>a{margin-right: 0;}
.nav>li>a{padding: 10px 10px;}
.wapper{ position: relative; /*重要!保证footer是相对于wapper位置绝对*/
height: 100%; /* 保证页面能撑开浏览器高度时显示正常*/
min-height: 100% /* IE6不支持,IE6要单独配置*/ }
.dishes1_info.active{display: block;}
.dishes1_info{font-size: 14px;border-top:2px solid #367DB9 ;}
/*.dishes_head{}*/
.dishes_body{float: left;width: 100%; padding-bottom:50px;}
.dishes_footer{float: left;width: 100%;height:50px;position:fixed;bottom:0px;left:0px;z-index: 9999;background-color: white;}
/*#sCart{position: fixed;bottom:50px;width:100%;background-color: #FFFFFF;z-index:9999;color: black;}*/
#sCart li{width:100%;padding: 10px;border-bottom: 1px solid #E4E4E4;float: left;}
.li2{border-bottom: 1px solid #E4E4E4;padding: 5px;}
.li2 a{float: right;padding: 10px;}
.li2 i{cursor: pointer;color: #0f0f0f;}
/*.mask{ width:100%; height:0px;display:none;background-color:gray; overflow:hidden; position:fixed; left:0; bottom:0; font-size:12px; color:#fff;opacity: 0.9;}*/
.dishesnum1{display:inline-block;margin-top: 10px;float: right;}
.dishesnum1 i{width: 30px;height: 30px;text-align: center;border: 1px solid #dddddd;border-radius: 50%;line-height: 30px;font-size: 16px;cursor: pointer;}
.dishesnum1>span{display: inline-block;}
/*.pull-left img{display: inline-block;height:8%;width:8%;}*/
.mask{ width:100%; height:0px;display:none;background-color:gray; overflow:hidden; position:fixed; left:0; bottom:0; font-size:12px; color:#fff;opacity: 0.9;}
.list-box{
width: 100%;
max-height: 80vh;
/*min-height: 30vh;*/
background-color: white;
position: fixed;
bottom: 0;
}
.selected-list{
max-height: 60vh;
overflow-y: scroll;
margin-bottom: 50px;
}
.selected-list li{
color: #666;
}
</style>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/plugins/bootstrap.min.js"></script>
<div class="dishes_head row m-t">
<div class="col-lg-12 col-xs-12">
<div class="dishes_all col-lg-2 col-xs-3" style="padding-left: 15px;">全部商品</div>
<div class="dishes_search col-lg-8 col-xs-7 text-right"><i class="fa fa-search"></i></div>
<div class="dishes_user col-lg-2 col-xs-2 text-right" style="padding-right: 25px;"><i class="fa fa-user"></i></div>
</div>
</div>
<div class="wapper">
<div class="dishes_body ">
<div id="TypeMenu" class="dishes1_info col-xs-3 col-lg-3" >
</div>
<div id="CaList" class="col-xs-9 col-lg-9 tab-content1" style="padding-left: 5px;padding-right: 5px;overflow-y: scroll;height: 550px;">
<!--<div class='wale'>快餐</div>-->
</div>
</div>
<div class="dishes_footer">
<div class="remark3 col-xs-12 col-md-12 m-t"><div style="display: inline-block;"><i class="fa fa-shopping-cart shopcar" style="font-size: 30px;padding-right: 15px;"></i><span class="num" id="dish_num">0</span></div><span class="dish_price">0</span><a href="" class="btn btn-info sub" id="submit">我选好了<small>去下单</small></a></div>
</div>
</div>
<div class="mask" >
<div class="list-box">
<div class="li2"><i class="fa fa-shopping-cart shopcar" style="font-size: 30px;"></i><span class="num" id="dish_num2">0</span><a href="javascript:void(0);">清空购物车</a></div>
<ul class="selected-list" id="sCart">
</ul>
</div>
</div>
js
$(function(){//购物车伸长缩短
$(".remark3 i").click(function(){
$(".mask").show();
$(".mask .list-box").show();
$(".remark3>div").hide();
$(".mask").animate({height:"100%"});
});
$(".li2 i").click(function(){
$(".remark3>div").show();
$(".mask .list-box").hide();
$(".mask ").animate({height:"0"});
})
});