SOURCE

$(function () {
	// 第一步  ajax 获取 购物车列表
		var shopItems = []; //
		//假设的ajax
		// $.ajax({
		//     url: '获取购物车的列表信息的接口',
		//     method: 'get',
		//     type: 'json',
		//     success: function (data) {
		//         shopItems = data.list
		//     }
		// })
		//
		shopItems = [{
		  id: 1,//商品id
		  price: 100,//商品价格
		  rebate: 1,//折扣
		  num: 1,//数量
		  guige:400,//规格
		  reduce: 0,// 单件减多少
		  max_num: 1,//最大数量
		  selected: true,//是否选中
		  img: 'http://img5.mtime.cn/mg/2016/09/22/094949.91079705.jpg',//商品图片
		  title: '肠内营养粉剂(TP)(安素)肠内营养粉剂(TP)(安素)肠内营养粉剂(TP)(安素)'//商品名称
		},
		{
		  id: 2,
		  price: 80,
		  rebate: 0.9,
		  num: 2,
		  guige:400,
		  max_num: 5,
		  reduce: 10,
		  selected: true,
		  img: 'http://img5.mtime.cn/mg/2016/09/22/094949.91079705.jpg',
		  title: '肠内营养粉剂(TP)(安素)肠内营养粉剂(TP)(安素)肠内营养粉剂(TP)(安素)'
		},
		{
		  id: 3,
		  price: 50,
		  rebate: 0.8,
		  num: 3,
		  guige:400,
		  max_num: 10,
		  selected: false,
		  reduce: 0,
		  img: 'http://img5.mtime.cn/mg/2016/09/22/094949.91079705.jpg',
		  title: '肠内营养粉剂(TP)(安素)肠内营养粉剂(TP)(安素)肠内营养粉剂(TP)(安素)'
		},
		]
		
		//渲染列表
		var str = '';
		shopItems.map(item=>{
			console.log(item)
			str +=[
				'<table class="item" aid="'+item.id+'">',
				    '<tr>',
				        '<td class="td01">',
				            '<div class="sel">',
				                '<input type="checkbox" class="select_box">',
				                '<div class="imgbox">',
				                    '<img src="'+item.img+'" alt="">',
				                '</div>',
				            '</div>',
				        '</td>',
				        '<td class="td02">',
				           '<div class="pic">',
				                '<a class="pic" href="" target="_blank">',
				                    '<p>'+item.title+'</p>',
				                    '<span>规格：'+item.guige+'g（安素）</span>',
				                '</a>',
				            '</div>',
				        '</td>',
				        '<td class="td03 price">￥'+item.price+'</td>',
				        '<td class="td04">',
				            '<div class="quantity">',
				                '<a class="less" href="javascript:void(0);">-</a>',
				                '<input name="" type="text" class="num_input" value="1">',
				                '<a class="more" href="javascript:void(0);">+</a>',
				            '</div>',
				            '<div class="stock">有货</div>',
				        '</td>',
				        '<td class="td05 total">499</td>',
				        '<td class="td06">',
				            '<a href="javascript:void(0);" class="delete">删除</a>',
				            '<a href="javascript:void(0);">移入收藏夹</a>',
				        '</td>',
				    '</tr>',
				'</table>',
			].join('')
		})
		$('.ml-list').html(str);
		$('.pt-list').html(str);
		
		//事件绑定+ =
		$('.cart_list_order').on('click','.more',function(){
			var parent = $(this).parents('.item');
			var input = parent.find('.num_input');
			var val = input.val();
			var aid = parent.attr('aid');
			// filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
			// 取数组点击时下标为id的对象，也是下标为0的第一个对象，[0]用来取对象而不是数组
			var item_obj = shopItems.filter(item=>item.id == aid)[0];
			console.log(item_obj)
			// console.log(val)
			// 如果输入框的值小于最大库存
			if(val*1<item_obj.max_num){
				item_obj.num++; 
				input.val(item_obj.num);
				calc_price(aid);
			}else{
				alert('抱歉，超过库存上限')
			}
		})
		
		$('.cart_list_order').on('click', '.less', function(){
		    var parent = $(this).parents('.item');
		    var input  = parent.find('.num_input');
		    var aid = parent.attr('aid');
		    var item_obj = shopItems.filter(item=>item.id == aid)[0];
		    if(item_obj.num > 0 ){
		        item_obj.num--;
		        input.val(item_obj.num);
		        calc_price(aid);
		    }else{
		        alert('抱歉，超过库存下限')
		    }
		})
		
		// 数量输入改变触发的change事件
		$('.cart_list_order').on('change', '.num_input', function(){
			var parent = $(this).parents('.item');
			var input  = parent.find('.num_input');
			var aid = parent.attr('aid');
			var val = $(this).val();
			var item_obj = shopItems.filter(item=>item.id == aid)[0];
			console.log(item_obj)
			if(val*1>item_obj.max_num){
				alert('超过库存上限')
				// 显示超过库存上限的数字
				input.val(item_obj.max_num)
				item_obj.num = item_obj.max_num
			}else{
				item_obj.num = val*1;
			}
			calc_price(aid);
		})
		// 每个选中，全选
		/* $('.cart_list_order').on('change', '.select_box', function(){
			// 选择当前选框对应属于哪个对象的的id
		    var parent = $(this).parents('.item');
		    var aid = parent.attr('aid');
			
		    var item_obj = shopItems.filter(item=>item.id == aid)[0];
			// 当前对象下的 是否选中 赋值为true
		    item_obj.selected = $(this).prop('checked')
			// 如果取消，存在有不为true时
		    if(!item_obj.selected){
				// 所有为false，取消
		        $('.all').prop('checked', false)
		    }
		    var all_flag = true;
		    shopItems.forEach(item=>{
				// item.selected中true的反是false false的反是true
				// 表示逻辑与（and），当运算符两边的表达式的结果都为true时，整个运算结果才为true，否则，只要有一方为false，则结果为false
		        //前者执行为true后者才执行，前后为true结果为true，前为true后为false就为false
				//满足前true后false，即满足有没选中的才执行所有没选中
				if(all_flag && !item.selected){
		            all_flag = false;
		        }
		    })
		    if(all_flag){
				// 所有选中
		       $('.all').prop('checked', all_flag)
		    }
		    calc_price(aid)
		}) */
			
			
			// 每个选中，全选
			$('.cart_list_order').on('change', '.select_box', function(){
			    var parent = $(this).parents('.item');
			    var aid = parent.attr('aid');
			    shopItems.forEach(item=>{
					// console.log(item)
			        if(item.id == aid){
			            item.selected = $(this).prop('checked')
			        }
			    });
				// every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
				// 所有元素：如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
				// 如果所有元素都满足条件，则返回 true
			    var all_flag = shopItems.every(item=>item.selected);
			    $('.all').prop('checked', all_flag)
				// 调用计算
			    calc_price(aid)
			})

			
			
			
			
			// $('.ml .self-support').on('change', '.select_box', function(){
			// 	var parent = $(this).parents('.item');
			// 	var aid = parent.attr('aid');
				
			// 	var item_obj = shopItems.filter(item=>item.id == aid)[0];
			// 	// 当前对象下的 是否选中 赋值为true
			// 	item_obj.selected = $(this).prop('checked')
			// 	// 如果取消，存在有不为true时
			// 	if(!item_obj.selected){
			// 		// 所有为false，取消
			// 	    $('.ml .self-support').prop('checked', false)
			// 	}
			// 	var all_flag = true;
			// 	shopItems.forEach(item=>{
			// 		// item.selected中true的反是false false的反是true
			// 		// 表示逻辑与（and），当运算符两边的表达式的结果都为true时，整个运算结果才为true，否则，只要有一方为false，则结果为false
			// 	    //前者执行为true后者才执行，前后为true结果为true，前为true后为false就为false
			// 		//满足前true后false，即满足有没选中的才执行所有没选中
			// 		if(all_flag && !item.selected){
			// 	        all_flag = false;
			// 	    }
			// 	})
			// 	if(all_flag){
			// 		// 所有选中
			// 	   $('.ml .self-support').prop('checked', true)
			// 	}
			// })
			
		// 所有选框选中 每个选中
		$('.all').change(function(){
		    var status = $(this).prop('checked');
		    $('.select_box').prop('checked',status);
		
		    shopItems.forEach(item=>{
		        item.selected = status;
		        calc_price(item.id)
		    })
		})
		
		// 删除
		$('cart_list_order').on('click','delete',function(){
			var parent = $(this).parents('.item')
			var aid = parent.attr('aid');
			parent.remove();
			//选择对象的id与标签的id没有不匹配的（即选择匹配的），得到一个新数组
			var arr = shopItems.filter(item=> item.id != aid);
			// 把新数组赋值给arr
			shopItems= arr;
			// 循环新数组
			shopItems.forEach(item=>{
				// 新数组计算价格
			    calc_price(item.id)
			})
		})
		
		// 价格计算(点击+-的时候得到相应所点击那个item的aid)
		function calc_price(aid){
			// 小计总和
			var total = 0;
			// 减少具体价格
			var reduce_num = 0;
			shopItems.forEach(item=>{
				  // 减扣后的临时小计=（单价-单件少的钱）*数量*折扣
				  var tmp = (item.price - item.reduce)*item.num* item.rebate;
				  // 小计总减扣 = （单价*数量）-减扣后的临时售总价
				  var tem_reduce = item.price*item.num-tmp;
				  if(item.id == aid){
					  var item_dom = $('.item[aid="'+aid+'"]');
					  item_dom.find('.total').html('￥'+tmp);
				  }
				  
				  if(item.selected){
					 // 小计总和
					  total +=tmp;
					  // 减少的总价格
					  reduce_num = tem_reduce;
				  }
			})
			$('#totalPrice').html('￥'+total);
			$('.total_save').html('￥'+reduce_num);
		}
		
		//全局计算一次价格
		shopItems.forEach(item=>{
			calc_price(item.id);
			// 若为true
		    if(item.selected){
		        $('.item[aid="'+item.id+'"]').find('.select_box').attr('checked', true)
		    }
		})
	})

<!-- 最外层 -->
<div class="wrap index-page">
    <!-- 头部 -->
    <div class="header">
        <div class="header_content">
            <div class="container">
                <div class="login">
                    <span>欢迎来到蛮龙网上药店!</span>
                    <a href="">登录</a>
                    <a href="">注册</a>
                </div>
                <div class="shop">
                    <ul class="basic">
                        <li>
                            <a href="">我的订单</a>
                            <img src="../../imgs/index/u38.png" alt="">
                        </li>
                        <li>
                            <a href="">会员中心</a>
                            <img src="../../imgs/index/u38.png" alt="">
                        </li>
                        <li>
                            <img src="../../imgs/index/u40.png" alt="">
                            <a href="">购物车<span>0</span>件</a>
                            <img src="../../imgs/index/u38.png" alt="">
                        </li>
                        <li>
                            <img src="../../imgs/index/u42.png" alt="">
                            <a href="">手机版</a>
                            <img src="../../imgs/index/u38.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="header_introduce">
            <div class="header_logo">
                <img src="../../imgs/index/u51.png" alt="">
            </div>
            <div class="needList">需求清单</div>
            <div class="progress">
                <div class="step step1">
                    <div class="shape">
                        <div class="circle circle--active">1</div>
                        <div class="retangle retangle1 retangle--active"></div>
                    </div>
                    <p>我的购物车</p>
                </div>
                <div class="step step2">
                    <div class="shape">
                        <div class="retangle retangle2 retangle--active"></div>
                        <div class="circle">2</div>
                        <div class="retangle retangle3"></div>
                    </div>
                    <p>填写核对订单信息</p>
                </div>
                <div class="step step3">
                    <div class="shape">
                        <div class="retangle retangle4"></div>
                        <div class="circle">3</div>
                    </div>
                    <p>成功提交订单</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 头部结束 -->
    <!-- 主体内容开始 -->
    <div class="main">
        <div class="needLogin">
            <img src="../../imgs/shoppingCart/shopCart/u2137.png" alt="">
            <span>您还没有登录！登录后购物车的商品将保存到您账号中！</span>
            <button>立即登录</button>
        </div>
        <div class="column">
            <div class="select">购物车</div>
            <div>需求订单</div>
        </div>
        <div class="cart_list">
            <div class="cart_list_head">
                <table>
                    <tr>
                        <th class="td01"><input class="all" id="all" type="checkbox">全选</th>
                        <th class="td02">商品</th>
                        <th class="td03">单价</th>
                        <th class="td04">数量</th>
                        <th class="td05">小计</th>
                        <th class="td06">操作</th>
                    </tr>
                </table>
            </div>
            <div class="cart_list_order">
                <div class="ml">
					<div class="support">
					    <input type="checkbox" class="select_box self-support">
					    <span class="self">蛮龙自营</span>
					</div>
					<div class="ml-list">
						<table class="store">
							<tr>
								<td class="td01">
									<div class="sel">
										<input type="checkbox" class="ipt" name="selectOne">
										<div class="imgbox">
											<img src="../../imgs/shoppingCart/shopCart/u2230.png" alt="">
										</div>
									</div>
								</td>
								<td class="td02">
									<div class="pic">
										<a class="pic" href="" target="_blank">
											<p>肠内营养粉剂(TP)(安素)肠内营养粉剂(TP)(安素)肠内营养粉剂(TP)(安素)</p>
											<span>规格：400g（安素）</span>
										</a>
									</div>
								</td>
								<td class="td03 price">499</td>
								<td class="td04">
									<div class="quantity">
										<!-- javascript:void(0);用来阻止点击时a链接跳转 -->
										<a class="less" href="javascript:void(0);">-</a>
										<input name="" type="text" class="num_input" value="1">
										<!-- 传整个对象good，拿进去就有goodNum了 -->
										<a class="more" href="javascript:void(0);">+</a>
									</div>
									<div class="stock">有货</div>
								</td>
								<td class="td05 subtotal">499</td>
								<td class="td06">
									<a href="javascript:void(0);" class="delete">删除</a>
									<a href="javascript:void(0);">移入收藏夹</a>
								</td>
							</tr>
						</table>
					</div>
				</div>
					<!-- 第二条 -->
				
                <!-- 普通商家 -->
				<div class="pt">
					<div class="support">
					    <input type="checkbox" class="select_box business-support" >
					    <span class="business">xxxx商家</span>
					</div>
					<div class="pt-list" id="list">
						<table class="store">
							<tr>
								<td class="td01">
									<div class="sel">
										<input type="checkbox" class="ipt" name="selectOne">
										<div class="imgbox">
											<img src="../../imgs/shoppingCart/shopCart/u2230.png" alt="">
										</div>
									</div>
								</td>
								<td class="td02">
									<div class="pic">
										<a class="pic" href="" target="_blank">
											<p>肠内营养粉剂(TP)(安素)肠内营养粉剂(TP)(安素)肠内营养粉剂(TP)(安素)</p>
											<span>规格：400g（安素）</span>
										</a>
									</div>
								</td>
								<td class="td03 price">499</td>
								<td class="td04">
									<div class="quantity">
										<!-- javascript:void(0);用来阻止点击时a链接跳转 -->
										<a class="less" href="javascript:void(0);">-</a>
										<input name="" type="text" class="num_input" value="1">
										<!-- 传整个对象good，拿进去就有goodNum了 -->
										<a class="more" href="javascript:void(0);">+</a>
									</div>
									<div class="stock">有货</div>
								</td>
								<td class="td05 subtotal">499</td>
								<td class="td06">
									<a href="javascript:void(0);" class="delete" id='d'>删除</a>
									<a href="javascript:void(0);">移入收藏夹</a>
								</td>
							</tr>
						</table>
					</div>
				</div>

                <!-- 购物车尾部 -->
                <div class="cart_list__bottom">
                    <div class="cart_list__bottom-left">
                        <ul>
                            <li class="left__bottom-item1">
                                <input type="checkbox" class="all" >
                                <span>全选</span>
                            </li>
                            <li><a href="javascript:void(0);">删除选中商品</a></li>
                            <li><a href="javascript:void(0);">移到我的收藏夹</a></li>
                            <li><a href="javascript:void(0);">清除下柜商品</a></li>
                        </ul>
                    </div>
                    <!-- <div class="error-msg">
                           <p class="ui-dialog cart-alert"></p>
                           <span class="treatment-icon"><i></i></span>
                    </div> -->
                    <div class="cart_list__bottom-right">
                        <ul>
                            <li>
                                <p class="goods_num">已选择<i id="isSelectNum" class="totalCount ">0</i>件商品
                                <p>(不含运费)</p>
                            </li>
                            <li class="total">
                                <p>总价:<span class="totalsum" id="totalPrice">&yen;0.00</span></p>
                                <p>促销:<span class="total_save">-<em>100.00</em></span></p>
                            </li>
                            <li class="btn">
                                <a href="javascript:;" onclick="" title="提交需求" class="submit">去结算</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 猜测顾客喜欢的产品 -->
        <div class="guess">
            <div class="guess_top">
                <a href="">猜你喜欢</a>
            </div>
            <div class="guess_detail">
                <ul class="proInfoBox">
                    <li>
                        <div class="innerBox">
                            <div class="proImg">
                                <a href=""> <img src="../../imgs/gateway/details-prescription/u1097.png"
                                                 alt="九芝堂 六味地黄丸360粒 浓缩丸"> </a>
                            </div>
                            <div class="inrBox clearfix">
                                <strong class="price">¥25</strong>
                                <p class="proName">
                                    <a href="">九芝堂 六味地黄丸360粒 浓缩丸</a>
                                </p>
                                <p class="count">
                                    <span>销售量 14546</span>
                                    <span>评价 35</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="innerBox">
                            <div class="proImg">
                                <a href=""> <img src="../../imgs/gateway/details-prescription/u1105.png"
                                                 alt="九芝堂 六味地黄丸360粒 浓缩丸"> </a>
                            </div>
                            <div class="inrBox clearfix">
                                <strong class="price">¥25</strong>
                                <p class="proName">
                                    <a href="">九芝堂 六味地黄丸360粒 浓缩丸</a>
                                </p>
                                <p class="count">
                                    <span>销售量 14546</span>
                                    <span>评价 35</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="innerBox">
                            <div class="proImg">
                                <a href=""> <img src="../../imgs/gateway/details-prescription/u1105.png"
                                                 alt="九芝堂 六味地黄丸360粒 浓缩丸"> </a>
                            </div>
                            <div class="inrBox clearfix">
                                <strong class="price">¥25</strong>
                                <p class="proName">
                                    <a href="">九芝堂 六味地黄丸360粒 浓缩丸</a>
                                </p>
                                <p class="count">
                                    <span>销售量 14546</span>
                                    <span>评价 35</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="innerBox">
                            <div class="proImg">
                                <a href=""> <img src="../../imgs/gateway/details-prescription/u1124.png"
                                                 alt="九芝堂 六味地黄丸360粒 浓缩丸"> </a>
                            </div>
                            <div class="inrBox clearfix">
                                <strong class="price">¥25</strong>
                                <p class="proName">
                                    <a href="">九芝堂 六味地黄丸360粒 浓缩丸</a>
                                </p>
                                <p class="count">
                                    <span>销售量 14546</span>
                                    <span>评价 35</span>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 主体内容开结束-->
	</div>
	<!-- 尾部开始-->
    <div class="footer">
        <div class="container">
            <div class="footer_slogan">
                <ul class="wrap">
                    <li>
                        <a href="javascript:void(0);" style="cursor: default;"><img src="../../imgs/index/slogan1.png"></a>
                        <b>正品保障</b>
                        <span>国家认证 正规合法</span>
                    </li>
                    <li>
                        <a href="javascript:void(0);" style="cursor: default;"><img src="../../imgs/index/slogan2.png"></a>
                        <b>专业药师</b>
                        <span>用药全程指导</span>
                    </li>
                    <li>
                        <a href="javascript:void(0);" style="cursor: default;"><img src="../../imgs/index/slogan3.png"></a>
                        <b>厂家授权</b>
                        <span>厂家授权 正规渠道</span>
                    </li>
                    <li>
                        <a href="javascript:void(0);" style="cursor: default;"><img src="../../imgs/index/slogan4.png"></a>
                        <b>隐私配送</b>
                        <span>安全放心 隐私配送</span>
                    </li>
                </ul>
            </div>

            <div class="footer_guide">
                <div class="footer_guide-sweep">
                    <img src="../../imgs/index/code1.jpg" alt="">
                    <h4>扫码关注抽大奖</h4>
                </div>
                <div class="footer_guide-consult">
                    <ul>
                        <li><b>关于我们</b></li>
                        <li><a href="">蛮龙大药</a></li>
                        <li><a href="">房名字来</a></li>
                        <li><a href="">源云龙制药</a></li>
                        <li><a href="">资质证书</a></li>
                        <li><a href="">联系我们</a></li>
                    </ul>
                    <ul>
                        <li><b>蛮龙液</b></li>
                        <li><a href="">蛮龙药理</a></li>
                        <li><a href="">正品资质</a></li>
                    </ul>
                    <ul>
                        <li><b>售后服务</b></li>
                        <li><a href="">用药指导</a></li>
                        <li><a href="">退换货政策</a></li>
                        <li><a href="">退换货流程</a></li>
                    </ul>
                    <ul>
                        <li><b>帮助中心</b></li>
                        <li><a href="">购物指南</a></li>
                        <li><a href="">用户协议</a></li>
                        <li><a href="">支付方式</a></li>
                        <li><a href="">配送方式</a></li>
                        <li><a href="">意见反馈</a></li>
                        <li><a href="">防诈骗提醒</a></li>
                    </ul>
                </div>
                <div class="footer_guide-tel">
                    <div class="order">
                        <p>蛮龙订购热线</p>
                        <b>40-0781-199</b><br>
                        <span>服务时间:9:00-23:00</span>
                    </div>
                    <div class="afterSale">
                        <p>蛮龙售后专场</p>
                        <b>40-0781-199</b><br>
                        <span>服务时间:9:00-23:00</span>
                    </div>
                </div>
            </div>
            <div class="footer_friendlink">
                <a href="">蛮龙大药房</a>
                <a href="">网上药店</a>
                <a href="">云龙制药</a>
                <a href="">蛮龙大药房</a>
                <a href="">网上药店</a>
                <a href="">云龙制药</a>
            </div>
            <br>
            <ul class="footer_aboutUs">
                <li>
                    <a href="">蛮龙大药房</a>
                    <span>	|  </span>
                </li>
                <li>
                    <a href="">荣誉资质</a>
                    <span>	|  </span>
                </li>
                <li>
                    <a href="">加入我们</a>
                    <span>	|  </span>
                </li>
                <li>
                    <a href="">帮助中心</a>
                    <span>	|  </span>
                </li>
                <li>
                    <a href="">友情链接</a>
                    <span>	|  </span>
                </li>
                <li>
                    <a href="">品牌</a>
                    <span>	|  </span>
                </li>
                <li>
                    <a href="">关于我们</a>
                    <span>	|  </span>
                </li>
                <li>
                    <a href="">联系我们</a>
                </li>

            </ul>
            <div class="footer_certificate">
                <a href="" target="_blank" title="互联网药品交易服务资格证书" rel="nofollow">互联网药品交易服务资格证书</a>
                <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <a href="" target="_blank" title="企业营业执照" rel="nofollow">互联网药品信息服务资格证书</a>
                <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <a href="" target="_blank" title="互联网药品信息服务资格证书" rel="nofollow">执业药师证I药品经营许可证</a>
                <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <a href="" target="_blank" title="互联网药品信息服务资格证书" rel="nofollow">食品经营许可证</a>
                <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <a href="" target="_blank" title="互联网药品信息服务资格证书" rel="nofollow">公司营业执照</a>
                <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <a href="" target="_blank" title="互联网药品信息服务资格证书" rel="nofollow">GSP认证证书</a>
            </div>
            <div class="footer_certificate">
                <a href="//www.jianke.com/help/jiaoyi.html" target="_blank" title="互联网药品交易服务资格证书" rel="nofollow">互联网药品交易服务资格证书</a>
                <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <a href="//www.jianke.com/help/yingye.html" target="_blank" title="企业营业执照" rel="nofollow">企业营业执照</a>
                <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <a href="//www.jianke.com/help/xinxi.html" target="_blank" title="互联网药品信息服务资格证书" rel="nofollow">互联网药品信息服务资格证书</a>
            </div>
            <p class="footer_copyright">◎2019-2020重庆市蛮龙大药房连锁有限公司版权所有,并保留所有权利</p>
        </div>
    </div>
</div>

/* 主体内容样式 */
* {
    box-sizing: border-box;
}

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

.needLogin {
    height: 50px;
    background: #fffdee;
    border: 1px solid #f5d061;
}

.needLogin img {
    width: 21px;
    height: 21px;
    float: left;
    margin-top: 14.5px;
    margin-left: 15px;
}

.needLogin span {
    color: red;
    float: left;
    margin-top: 14.5px;
    padding-left: 10px;
}

.needLogin button {
    width: 100px;
    height: 40px;
    background: #ed1a22;
    border: none;
    border-radius: 5%;
    color: white;
    float: left;
    margin-top: 5px;
    margin-left: 30px;
}

.column {
    width: 300px;
    margin-top: 20px;
    border-top: 1px solid #e9e9e9;
    display: flex;
}

.column div {
    width: 150px;
    height: 50px;
    border: 1px solid #e9e9e9;
    line-height: 50px;
    text-align: center;
    /* float: left; */
    border-top: 3px solid transparent;
}

.column div.select {
    border-top: 3px solid red;
}

/* 购物车里面的内容 */
.cart_list .cart_list_head {
    height: 50px;
    background: #f2f2f2;
    padding: 0px 15px;
    line-height: 50px;
    font-size: 14px;
    color: #333;
}

.cart_list .cart_list_head table tr th {
    color: #333;
    font-size: 14px;
    font-weight: 400;
}

.cart_list .cart_list_head table tr .td03 {
    padding-left: 20px;
}

.cart_list .cart_list_head table tr .td04 {
    padding-left: 30px;
}

.cart_list .cart_list_head table tr .td05 {
    padding-left: 10px;
}

.cart_list .td01 {
    /* width:20%; */
    text-align: left;
    width: 150px;
}

.cart_list .all {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.cart_list .td02 {
    /* width:30%; */
    text-align: left;
    width: 530px;
}

.cart_list .td03 {
    /* width:10%; */
    text-align: left;
    width: 120px;
}

.cart_list .td04 {
    /* width:20%; */
    text-align: left;
    width: 170px;
}

.cart_list .td05 {
    /* width:10%; */
    text-align: left;
    width: 90px;
}

.cart_list .td06 {
    /* width:10%; */
    text-align: left;
    width: 110px;
}

.cart_list_order .support {
    display: flex;
    align-items: center;
    height: 50px;
}

.cart_list_order .self-support {
    width: 16px;
    height: 16px;
    margin: 0px 8px 0px 15px;
}

.cart_list_order .self {
    background: #e23a3a;
    color: white;
    font-size: 14px;
    padding: 1px 4px;
}

.cart_list_order table {
    padding: 20px 15px;
    background: #fff9f9;
    color: #666;
    font-size: 14px;
    border: 1px solid #e9e9e9;
    border-bottom: none;
}

.cart_list_order table .td01 .sel {
    display: flex;
}

.cart_list_order table .sel input {
    width: 16px;
    height: 16px;
}

.cart_list_order table .imgbox {
    width: 100px;
    height: 100px;
    border: 1px solid #e9e9e9;
    margin-left: 10px;
    position: relative;
    /* 	display: table-cell;
        vertical-align: middle; */
}

.cart_list_order table .imgbox img {
    /* 	display:block;
        vertical-align:middle; */
	width: 100px;
	height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cart_list_order table .td02 .pic {
    display: flex;
    color: #333;
    font-size: 14px;
}

.cart_list_order table .td02 .pic p {
    width: 300px;
    margin-right: 15px;
}

.cart_list_order table .td04 .quantity {
    display: flex;
}

.cart_list_order table .td04 .quantity a {
    width: 20px;
    height: 26px;
    text-align: center;
    border: 1px solid #cccccc;
    color: #999;
    font-size: 14px;
}

.cart_list_order table .td04 .quantity .num_input {
    width: 60px;
    border: none;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    text-align: center;
}

.cart_list_order table .td04 .stock {
    margin-left: 40px;
}

.cart_list_order table .td06 a {
    display: block;
    color: #666;
    font-size: 14px;
}

.cart_list_order .support {
    display: flex;
    align-items: center;
    height: 50px;
}

.cart_list_order .business-support {
    width: 16px;
    height: 16px;
    margin: 0px 8px 0px 15px;
}

.cart_list_order .business {
    color: #333;
    font-size: 14px;
    padding: 1px 4px;
}

.cart_list_order .store {
    border-bottom: 1px solid #e9e9e9;
    background: white;
}

/* 底部结算 */
.cart_list__bottom {
    height: 65px;
    display: flex;
    justify-content: space-between;
    border: 1px solid #e9e9e9;
    margin-top: 30px;
}

.cart_list__bottom-left ul {
    display: flex;
    align-items: center;
    padding: 20px;
}

.cart_list__bottom-left ul li {
    /* 	width:120px; */
    margin-right: 20px;
}

.left__bottom-item1 input {
    width: 16px;
    height: 16px;
}

.cart_list__bottom-left ul li a {
    display: inline-block;
    color: #666;
    font-size: 14px;
}

.cart_list__bottom-right ul {
    display: flex;
    align-items: center;
}

.cart_list__bottom-right ul li {
    margin-left: 30px;
    width: 130px;
}

.cart_list__bottom-right ul li p:nth-of-type(1) {
    text-align: right;
    color: #666;
    font-size: 14px;
}

.cart_list__bottom-right ul li p:nth-of-type(2) {
    text-align: right;
    color: #666;
    font-size: 12px;
}

.goods_num i {
    font-size: 14px;
    color: #ff0000;
    font-weight: 700;
}

.total .totalsum {
    font-size: 18px;
    color: #ff0000;
    font-weight: 700;
}

.cart_list__bottom-right .btn {
    /* width:123px; */
}

.cart_list__bottom-right .btn a {
    display: block;
    width: 130px;
    height: 65px;
    line-height: 65px;
    text-align: center;
    background: #e23a3a;
    color: white;
    font-size: 20px;
    font-weight: 700;
}

em, i, s {
    font-style: normal;
}

/* 猜测顾客喜欢的产品 */
.guess {
    margin: 15px 0px 50px;
}

.guess_top {
    background: #f2f2f2;
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
}

.guess_top a {
    font-size: 14px;
    color: #333;
}

.guess_detail .proInfoBox {
    display: flex;
    justify-content: space-between;
    padding: 20px 0px;
}

.guess_detail .proInfoBox li {
    width: 275px;
    height: 362px;
    border: 1px solid #e9e9e9;
    position: relative;
}

.guess_detail .proInfoBox .innerBox a img {
    display: table-cell;
    margin: 0 auto;
}

.inrBox {
    line-height: 25px;
    padding: 0px 10px;
    position: absolute;
    bottom: 0;
}

.inrBox .price {
    font-size: 20px;
    color: #ED1B23;
}

.inrBox .proName a {
    font-size: 14px;
    color: #333;
}

.inrBox .proName a:hover {
    font-size: 14px;
    color: #ff5555;
}

.inrBox .count {
    font-size: 12px;
    color: #999;
}

/* 主体内容样式结束 */