# Django框架之前台购物车界面
# index.html
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>魅族官网商城-提供魅族手机 PRO系列、MX系列、魅蓝（Note）系列的预约和购买</title>
<meta name="description" content="魅族在线商城是魅族面向全国服务的官方电商平台，提供魅族PRO系列、MX系列、魅蓝（Note）系列的手机、配件和智能硬件的预约和购买。官方正品，全场包邮。">
<meta name="Keywords" content="魅族手机官网商城、魅族官方在线商店、魅族在线商城、魅族官网在线商店、魅族商城">
<link href="/static/myweb/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="/static/myweb/public/img/favicon.ico" rel="icon" type="image/x-icon">
<!-- Bootstrap -->
<link href="/static/myweb/public/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/static/myweb/public/js/jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/myweb/public/js/bootstrap.min.js"></script>
<!-- 兼任ie9以下 -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 自定义 -->
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/global.css">
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/app.css">
{% block 'css' %}
{% endblock %}
<script type="text/javascript" src="/static/myweb/public/js/rem.js"></script>
<script type="text/javascript" src="/static/myweb/public/js/topNav.js"></script>
</head>
<body>
<!-- 导航 -->
<div class="layout-header" id="scroll-wrap">
<nav class="navbar navbar-default navbar-fixed-top header hidden-xs hidden-sm">
<div class="container clearfix">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="layout-header-logo navbar-left">
<a target="_blank" href="./index.html" class="layout-header-logo-link" alt="魅族科技">
<img src="/static/myweb/public/img/logo.png">
</a>
</div>
<ul class="nav navbar-nav navbar-right layout-header-service clearfix">
<li class="layout-header-service-item" id="layoutHeaderUser">
<a class="layout-header-service-link g-user" href="#">
<i class="glyphicon glyphicon-user"></i>
{{ request.session.VipUser.uname }}
</a>
<div class="layout-user-downmenu">
<ul class="layout-user-downmenu-list">
{% if not request.session.VipUser.uid %}
<li class="layout-user-downmenu-item">
<a href="{% url 'login' %}" class="layout-user-downmenu-link">立即登录</a>
</li>
<li class="layout-user-downmenu-item">
<a href="{% url 'register' %}" target="_blank" class="layout-user-downmenu-link" data-mtype="wmz_public_grzx_register">立即注册</a>
</li>
{% endif %}
<li class="layout-user-downmenu-item">
<a href="{% url 'myorder' %}" class="layout-user-downmenu-link" data-mtype="wmz_public_grzx_myorder">我的订单</a>
</li>
<li class="layout-user-downmenu-item">
<a href="#" class="layout-user-downmenu-link" data-mtype="wmz_public_grzx_mformy">M码通道</a>
</li>
</ul>
</div>
</li>
<li class="layout-header-service-item layout-header-service-cart" id="layoutHeaderCart">
<a class="layout-header-service-link" href="{% url 'cartshow' %}" data-mtype="wmz_public_yt_cart">
<i class="glyphicon glyphicon-shopping-cart"></i>
<span class="layout-header-service-cart-num">0</span>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right layout-header-nav clearfix">
<li class="layout-header-nav-item">
<a href="{% url 'index' %}" class="layout-header-nav-link">首页 </a><p class="line-top hidden-xs"></p>
</li>
{% for v in types %}
<li class="layout-header-nav-item">
<a href="{% url 'list' v.id %}" class="layout-header-nav-link">{{ v.name }}</a>
</li>
{% endfor %}
<li class="layout-header-nav-item"><a href="#" class="layout-header-nav-link">社区</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- 移动端结构 -->
<div class="scroll-view">
<header id="header" class="header">
<div class="logo">
<a href="./index.html">
<img src="/static/myweb/public/img/app/mlogo1.jpg">
</a>
</div>
<div class="qtool">
<a id="btn-search"><i class="glyphicon glyphicon-search"></i></a>
<a href="#"><i class="glyphicon glyphicon-shopping-cart"></i></a>
<a id="user-name" href="#"><i class="glyphicon glyphicon-user"></i></a>
</div>
</header>
</div>
</div><!-- 导航 E-->
{% block 'body' %}
<!-- 主内容区域 -->
<div class="mainbody app">
<!-- banner 轮播 -->
<div class="headBanner">
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner app-banner" role="listbox">
<div class="item active">
<img src="/static/myweb/public/img/banner1.jpg" alt="" class="pcb-img">
<img src="/static/myweb/public/img/app/m1.jpg" alt="" class="appb-img">
</div>
<div class="item">
<img src="/static/myweb/public/img/banner2.jpg" alt="" class="pcb-img">
<img src="/static/myweb/public/img/app/m2.jpg" alt="" class="appb-img">
</div>
<div class="item">
<img src="/static/myweb/public/img/banner3.jpg" alt="" class="pcb-img">
<img src="/static/myweb/public/img/app/m3.jpg" alt="" class="appb-img">
</div>
<div class="item">
<img src="/static/myweb/public/img/banner4.jpg" alt="" class="pcb-img">
<img src="/static/myweb/public/img/app/m4.jpg" alt="" class="appb-img">
</div>
</div>
<!-- Controls -->
<div class="hb-control hidden-xs hidden-sm">
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div><!-- banner 轮播 E-->
<!-- 移动端 分类导航 -->
<div class="channel">
<div class="row orient-h clearfix">
<div class="item">
<a href="#">
<span style="background-image: url(./public/img/app/mi01.png);" class="icon"></span>
<span class="name">品牌日</span>
</a>
</div>
<div class="item">
<a href="#">
<span style="background-image: url(./public/img/app/mi02.png);" class="icon"></span>
<span class="name">分期免息购</span>
</a>
</div>
<div class="item">
<a href="#">
<span style="background-image: url(./public/img/app/mi03.png);" class="icon"></span>
<span class="name">我的订单</span>
</a>
</div>
<div class="item">
<a href="./list.html">
<span style="background-image: url(./public/img/app/mi04.png);" class="icon"></span>
<span class="name">分类</span>
</a>
</div>
</div>
</div>
<!-- 移动端 分类导航 E-->
<!-- 移动端广告和推荐 -->
<div class="act-bar">
<a href="#"><img src="/static/myweb/public/img/app/mad1.jpg"></a>
</div>
<div class="hipost card">
<div class="grids">
<div class="row orient-h tricol">
<div class="cell">
<a href="./meilanx.html">
<img class="" src="/static/myweb/public/img/app/mtj1.jpg">
</a>
</div>
<div class="cell">
<a href="./meilanx.html">
<img class="" src="/static/myweb/public/img/app/mtj2.jpg">
</a>
</div>
<div class="cell">
<a href="./meilanx.html">
<img class="" src="/static/myweb/public/img/app/mtj3.jpg">
</a>
</div>
</div>
</div>
</div>
<!-- 移动端广告和推荐 -->
<!-- 头部 侧导航 -->
<ul class="home-category hidden-xs hidden-sm" id="homeCategory">
{% for v in types %}
<li class="home-category-item">
<a href="{% url 'list' v.id %}" class="home-category-link">
{{ v.name }}
</a>
<div class="home-category-child clearfix">
<div class="home-category-child-list clearfix">
{% for vv in v.sub %}
<a href="javascript:void(0)" class="home-category-child-item title" title="魅族手机">
{{ vv.name }}
{% for vvv in vv.glist %}
<a class="home-category-child-item" href="{% url 'ginfo' vvv.id %}" target="_blank" >
<img class="home-category-child-img" src="/static/goods/{{ vvv.picname }}" height="100" width="100">
<div class="home-category-child-text">{{ vvv.title }}</div>
</a>
{% endfor %}
</a>
{% endfor %}
</div>
</div>
</li>
{% endfor %}
</ul><!-- 头部 侧导航 E-->
<!-- 头部 豆腐块 -->
<div class="headDoufu hidden-xs hidden-sm">
<div class="container">
<ul class="clearfix home-server">
<li class="home-server-item home-server-icons clearfix">
<a class="home-server-icon" href="#">
<i class="glyphicon glyphicon-road"></i> M码通道
</a>
<a class="home-server-icon" href="#">
<i class="glyphicon glyphicon-retweet"></i> 以旧换新
</a>
<a class="home-server-icon" href="#">
<i class="glyphicon glyphicon-heart-empty"></i> 魅族意外保
</a>
<a class="home-server-icon" href="#">
<i class="glyphicon glyphicon-list-alt"></i> 回购单查询
</a>
</li>
<li>
<a href="" class="ml8">
<img src="/static/myweb/public/img/doufu1.jpg" alt="">
</a>
</li>
<li>
<a href="" class="ml8">
<img src="/static/myweb/public/img/doufu2.jpg" alt="">
</a>
</li>
<li>
<a href="" class="ml8">
<img src="/static/myweb/public/img/doufu3.png" alt="">
</a>
</li>
<li>
<a href="" class="ml8">
<img src="/static/myweb/public/img/doufu4.png" alt="">
</a>
</li>
</ul>
</div>
</div>
<!-- 头部 豆腐块 E-->
<!-- 热卖推荐 -->
<div class="home-hot">
<div class="container">
<div id="carousel-example-generic2" class="carousel slide headhot-cont" data-ride="carousel">
<div class="home-hot-header clearfix">
<div class="hhh-title">热品推荐</div>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner home-hot-content" role="listbox">
<ul class="item active clearfix home-hot-list">
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/hot1.jpg" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅蓝 Note5</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">899
<span class="home-product-start-tag">起</span>
</span>
<span class="home-product-price origin">999</span>
</p>
<div class="home-product-sign" style="background-color: #f59646;">冠军</div>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/hot2.jpg" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅蓝 Note5</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">899
<span class="home-product-start-tag">起</span>
</span>
<span class="home-product-price origin">999</span>
</p>
<div class="home-product-sign" style="background-color: #f59646;">亚军</div>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/hot3.jpg" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅蓝 Note5</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">899
<span class="home-product-start-tag">起</span>
</span>
<span class="home-product-price origin">999</span>
</p>
<div class="home-product-sign" style="background-color: #f59646;">季军</div>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/hot4.jpg" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅蓝 Note5</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">899
<span class="home-product-start-tag">起</span>
</span>
<span class="home-product-price origin">999</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/hot5.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅蓝 Note5</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">899
<span class="home-product-start-tag">起</span>
</span>
<span class="home-product-price origin">999</span>
</p>
</div>
</div>
</li>
</ul>
<div class="item clearfix">
<ul class="item active clearfix">
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/hot6.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅蓝 Note5</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">899
<span class="home-product-start-tag">起</span>
</span>
<span class="home-product-price origin">999</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/hot7.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅蓝 Note5</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">899
<span class="home-product-start-tag">起</span>
</span>
<span class="home-product-price origin">999</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/hot8.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅蓝 Note5</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">899
<span class="home-product-start-tag">起</span>
</span>
<span class="home-product-price origin">999</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/hot9.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅蓝 Note5</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">899
<span class="home-product-start-tag">起</span>
</span>
<span class="home-product-price origin">999</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/hot10.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅蓝 Note5</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">899
<span class="home-product-start-tag">起</span>
</span>
<span class="home-product-price origin">999</span>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- 移动端结构 -->
<div class="card recommend">
<div class="hd">
<div class="tit">热品推荐</div>
</div>
<div class="grids clearfix">
<div class="bloc">
<a href="./meilanx.html">
<div class="info">
<div class="intro">
<h3>魅蓝 5</h3>
<p class="comment">标配版限量出售</p>
</div>
<div class="price">
<span class="p-sale">¥699</span>
</div>
</div>
<div class="pic">
<img class="" src="/static/myweb/public/img/app/mhot1.png">
</div>
</a>
</div>
<div class="bloc">
<a href="#">
<div class="info">
<div class="intro">
<h3>乐心ziva plus</h3>
<p class="sale-tag"><i>领券</i>新品有礼</p>
</div>
<div class="price">
<span class="p-sale">¥499</span>
</div>
</div>
<div class="pic">
<img class="" src="/static/myweb/public/img/app/mhot2.jpg">
</div>
</a>
</div>
<div class="bloc">
<a href="#">
<div class="info">
<div class="intro">
<h3>魅族手环</h3>
<p class="comment">心率专家</p>
</div>
<div class="price">
<span class="p-sale">¥229</span>
</div>
</div>
<div class="pic">
<img class="" src="/static/myweb/public/img/app/mhot3.jpg">
</div>
</a>
</div>
<div class="bloc">
<a href="#">
<div class="info">
<div class="intro">
<h3>魅蓝 A5</h3>
<p class="comment">享3期免息</p>
</div>
<div class="price">
<span class="p-sale">¥699</span>
</div>
</div>
<div class="pic">
<img class="" src="/static/myweb/public/img/app/mhot4.jpg">
</div>
</a>
</div>
<div class="bloc">
<a href="#">
<div class="info">
<div class="intro">
<h3>电源适配器</h3>
<p class="comment">快速充电 安全无忧</p>
</div>
<div class="price">
<span class="p-sale">¥89</span>
</div>
</div>
<div class="pic">
<img class="" src="/static/myweb/public/img/app/mhot5.jpg">
</div>
</a>
</div>
</div>
</div><!-- 移动端结构 E-->
<!-- 热卖推荐 E-->
<!-- 广告位1 -->
<div class="headAd hidden-xs hidden-sm">
<div class="container">
<a href="">
<img src="/static/myweb/public/img/mbad.jpg" alt="">
</a>
</div>
</div><!-- 广告位1 E-->
<!-- 楼层板块 -->
<div class="home-floor">
<div class="container">
<!-- 手机楼层 -->
<div class="home-floor-content phone card ">
<div class="hd">
<h2 class="mbf-title tit">手机</h2>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs mbf-nav hidden-xs hidden-sm" role="tablist">
<li role="presentation" class="active">
<a href="#phone1" aria-controls="phone1" role="tab" data-toggle="tab">热销机型</a>
</li>
</ul>
<a class="mbf-more" href="#" target="_blank">更多></a>
<!-- Tab panes -->
<div class="tab-content home-floor-product">
<div role="tabpanel" class="tab-pane active" id="phone1">
<ul class="item active clearfix">
<li class="home-product first mmr10">
<div class="">
<img src="/static/myweb/public/img/phone2.jpg">
</div>
</li>
<li class="home-product ">
<div class="">
<img src="/static/myweb/public/img/phone1.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">2880
<span class="home-product-start-tag">起</span>
</span>
</p>
</div>
</div>
</li>
<li class="home-product mmr10">
<div class="">
<img src="/static/myweb/public/img/phone3.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product ">
<div class="">
<img src="/static/myweb/public/img/phone4.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">2880
<span class="home-product-start-tag">起</span>
</span>
</p>
</div>
</div>
</li>
<li class="home-product mmr10">
<div class="">
<img src="/static/myweb/public/img/phone5.jpg" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">2880
<span class="home-product-start-tag">起</span>
</span>
</p>
</div>
</div>
</li>
<li class="home-product ">
<div class="">
<img src="/static/myweb/public/img/phone5.jpg" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">2880
<span class="home-product-start-tag">起</span>
</span>
</p>
</div>
</div>
</li>
<li class="home-product mmr10">
<div class="">
<img src="/static/myweb/public/img/phone5.jpg" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">2880
<span class="home-product-start-tag">起</span>
</span>
</p>
</div>
</div>
</li>
<li class="home-product ">
<div class="">
<img src="/static/myweb/public/img/phone5.jpg" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product mmr10">
<div class="">
<img src="/static/myweb/public/img/phone5.jpg" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">2880
<span class="home-product-start-tag">起</span>
</span>
</p>
</div>
</div>
</li>
<li class="home-product ">
<div class="">
<img src="/static/myweb/public/img/phone5.jpg" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="home-floor-ad">
<a href="">
<img src="/static/myweb/public/img/ad2.jpg" alt="" class="pc-floor-ad">
<img src="/static/myweb/public/img/app/mad2.jpg" alt="" class="app-floor-ad">
</a>
</div>
</div> <!-- 手机楼层 E-->
<!-- 数码配件 楼层 -->
<div class="home-floor-content peijian">
<h2 class="mbf-title">数码配件</h2>
<!-- Nav tabs -->
<ul class="nav nav-tabs mbf-nav clearfix hidden-xs hidden-sm" role="tablist-2">
<li role="presentation" class="active">
<a href="#pejian1" aria-controls="pejian1" role="tab" data-toggle="tab">超值推荐</a>
</li>
<li role="presentation">
<a href="#pejian2" aria-controls="pejian2" role="tab" data-toggle="tab">耳机/音箱 </a>
</li>
<li role="presentation">
<a href="#pejian3" aria-controls="pejian3" role="tab" data-toggle="tab">智能设备 </a>
</li>
<li role="presentation">
<a href="#pejian4" aria-controls="pejian4" role="tab" data-toggle="tab">键盘鼠标</a>
</li>
</ul>
<a class="mbf-more" href="#" target="_blank">更多></a>
<!-- Tab panes -->
<div class="tab-content home-floor-product">
<div role="tabpanel" class="tab-pane active clearfix" id="pejian1">
<ul class="item active clearfix">
<li class="home-product first mmr10">
<div class="">
<img src="/static/myweb/public/img/peijian1.jpg">
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product mmr10">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product mmr10">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product mmr10">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product mmr10">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane clearfix hidden-xs hidden-sm" id="pejian2">
<ul class="item clearfix">
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane clearfix hidden-xs hidden-sm" id="pejian3">
<ul class="item clearfix">
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane clearfix hidden-xs hidden-sm" id="pejian4">
<ul class="item clearfix">
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
<li class="home-product">
<div class="">
<img src="/static/myweb/public/img/peijian.png" class="home-product-img">
<div class="caption">
<h4 class="home-product-title">魅族 PRO 7</h4>
<h6 class="home-product-subtitle red">
<span class="mb-hh-red">月销</span>
累计超18000台
</h6>
<p class="home-product-bottom">
<span class="home-product-price">999
</span>
<span class="home-product-price origin">1099</span>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="home-floor-ad">
<a href="">
<img src="/static/myweb/public/img/ad2.jpg" alt="" class="pc-floor-ad">
<img src="/static/myweb/public/img/app/mad3.jpg" alt="" class="app-floor-ad">
</a>
</div>
</div> <!-- 数码配件 E-->
</div>
</div>
<!-- 楼层板块 E-->
</div>
{% endblock %}
<!-- 主内容区域 E-->
<!-- 底部区域 -->
<footer class="layout-footer hidden-xs hidden-sm">
<div class="container">
<div class="layout-footer-top clearfix">
<ul class="layout-footer-services clearfix">
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank" >
<span class="layout-footer-service-wrap"><i class="glyphicon glyphicon-sd-video"></i></span>
<span class="layout-footer-services-text">顺丰包邮</span>
</a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap"><i class="glyphicon glyphicon-flash"></i></span>
<span class="layout-footer-services-text">100+ 城市次日送达</span>
</a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank" >
<span class="layout-footer-service-wrap"><i class="glyphicon glyphicon-repeat"></i></span>
<span class="layout-footer-services-text">7 天无理由退货</span>
</a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank" >
<span class="layout-footer-service-wrap"><i class="glyphicon glyphicon-refresh"></i></span>
<span class="layout-footer-services-text">15 天换货保障</span>
</a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap"><i class="glyphicon glyphicon-wrench"></i></span>
<span class="layout-footer-services-text">1 年免费保修</span>
</a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap"><i class="glyphicon glyphicon-map-marker"></i></span>
<span class="layout-footer-services-text">2300+ 线下体验店</span>
</a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap"><i class="glyphicon glyphicon-sort"></i></span>
<span class="layout-footer-services-text">远程支持服务</span>
</a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank" data-mtype="wmz_public_foot_homerepair">
<span class="layout-footer-service-wrap"><i class="glyphicon glyphicon-home"></i></span>
<span class="layout-footer-services-text">上门快修</span>
</a>
</li>
</ul>
<div class="layout-footer-contact">
<p class="layout-footer-contact-desc">24小时全国服务热线</p>
<a href="tel:400-788-3333" class="layout-footer-contact-tel">400-788-3333</a>
<p>
<a href="javascript:void(0);" class="layout-footer-contact-online">
<i class="layout-font layout-font-talk1"></i><span class="text">在线客服</span>
</a>
</p>
</div>
</div>
<div class="layout-footer-bottom clearfix">
<ul class="layout-footer-interlock clearfix">
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">了解魅族</a>
</li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link" >加入我们</a>
</li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link" >联系我们</a>
</li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link" >Flyme</a>
</li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">魅族社区</a>
</li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">天猫旗舰店</a>
</li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link" >问题反馈</a>
</li>
<li class="layout-footer-interlock-item">
<a href="//www.meizu.com/authorization.html" target="_blank" class="layout-footer-interlock-link" >线上销售授权名单公示</a>
</li>
</ul>
<div class="layout-footer-copyright clearfix">
<span class="layout-footer-copyright-left">
<a class="layout-footer-copyright-link copyright-text">©2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">粤ICP备13003602号-2</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">合字B2-20170010</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">营业执照</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="3" target="_blank">法律声明</a>
<a class="layout-footer-copyright-link">粤公网安备 44049102496009 号</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
<i class="layout-icon layout-icon-license"></i>
</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
<i class="layout-icon layout-icon-wel"></i>
</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
<i class="layout-icon layout-icon-trust"></i>
</a>
</span>
<ul class="layout-footer-media clearfix">
<li class="layout-footer-media-item">
<a href="http://weibo.com/meizumobile" class="layout-footer-media-link">
<i class="layout-font layout-font-weibo"></i>
</a>
</li>
<li class="layout-footer-media-item">
<a href="javascript:void(0);" class="layout-footer-media-link wechat">
<i class="layout-font layout-font-wechat"></i>
<div class="layout-footer-media-wechat-qrcode">
<img class="layout-footer-media-wechat-img" src="" alt="微信二维码">
</div>
</a>
</li>
<li class="layout-footer-media-item">
<a href="#" class="layout-footer-media-link">
<i class="layout-font layout-font-qzone"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer><!-- 底部区域 E -->
<!-- 返回顶部 -->
<div class="layout-magnet layout-magnet-show">
<div class="layout-magnet-item layout-magnet-item-top">
<a href="javascript:void(0);" class="layout-magnet-link" data-mtype="wmz_public_cbxf_top">
<div class="layout-magnet-icon">
<i class="glyphicon glyphicon-menu-up"></i>
</div>
</a>
</div>
</div><!-- 返回顶部 E-->
<script type="text/javascript">
//回顶部
backTop();
//顶部导航鼠标经过出现内容
topNav();
//登录图片鼠标经过
topLogin();
//
leftNav();
</script>
{% block 'js' %}
{% endblock %}
</body>
</html># cart.html
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>购物车-我的购物车</title>
<meta name="description" content="购物车，我的购物车">
<meta name="Keywords" content="魅族手机官网商城、魅族官方在线商店、魅族在线商城、魅族官网在线商店、魅族商城、魅蓝商城">
<link href="/static/myweb/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/static/myweb/public/img/favicon.ico" rel="icon" type="image/x-icon">
<!-- Bootstrap -->
<link href="/static/myweb/public/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/static/myweb/public/js/jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/myweb/public/js/bootstrap.min.js"></script>
<!-- 兼任ie9以下 -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 自定义 -->
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/global.css">
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/app.css">
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/myweb/public/css/cart-app.css">
<script type="text/javascript" src="/static/myweb/public/js/rem.js"></script>
<script type="text/javascript" src="/static/myweb/public/js/topNav.js"></script>
</head>
<body class="cart-app">
<!-- 导航 -->
<div class="layout-header" id="scroll-wrap">
<nav class="navbar navbar-default header hidden-xs hidden-sm">
<div class="container clearfix">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="layout-header-logo navbar-left">
<a target="_blank" href="./index.html" class="layout-header-logo-link" alt="魅族科技">
<img src="/static/myweb/public/img/logo.png">
</a>
</div>
<div class="navbar-left">
<ol class="breadcrumb">
<li class="active">购物车</li>
<li>确认订单</li>
<li>在线支付</li>
<li>完成 </li>
</ol>
</div>
</div>
</div>
</nav>
<!-- 移动端结构 -->
<div class="scroll-view">
<header id="header" class="header">
<div class="logo">
<a href="./index.html">
<img src="/static/myweb/public/img/app/mlogo1.jpg">
</a>
</div>
<div class="qtool">
<a id="btn-search">
<i class="glyphicon glyphicon-search"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-shopping-cart"></i>
</a>
<a id="user-name" href="#">
<i class="glyphicon glyphicon-user"></i>
</a>
</div>
</header>
</div>
</div>
<!-- 导航 E-->
<!-- 主内容区域 -->
<div class="mainbody cart">
<div class="container">
<!-- 购物车详情头 -->
<table class="cart-header">
<tbody>
<tr>
<td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
<div class="cart-select-all JSelectAll">
<div class="mz-checkbox"></div>
<span class="cart-select-title">全选</span>
</div>
</td>
<td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
<td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
<td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
<td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
<td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">操作</td>
</tr>
</tbody>
</table><!-- 购物车详情头 E-->
<!-- 购物清单信息列表 -->
<div class="cart-merchant-list">
<div class="cart-merchant">
<table class="cart-merchant-body">
<tbody>
{% for v in request.session.cart.values %}
<tr class="cart-product" id="pro5">
<td class="cart-col-select col-md-3 col-xs-4 col-sm-4">
<div class="mz-checkbox" gid="{{ v.gid }}"></div>
<a href="meilanx.html" class="cart-product-link" target="_blank">
<img src="/static/goods/{{ v.picname }}" class="cart-product-img" alt="魅蓝 X">
</a>
</td>
<td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
<a href="{% url 'ginfo' v.gid %}" class="cart-product-link" target="_blank">
<p>{{ v.title }}</p>
</a>
</td>
<td class="cart-col-price col-md-2 hidden-xs hidden-sm">
<p>
<span class="cart-product-price">{{v.price }}</span>
</p>
</td>
<td class="cart-col-number col-md-2 hidden-xs hidden-sm">
<div class="cart-product-number-adder">
<p class="cart-product-number-max show"></p>
<div class="mz-adder">
<button class="mz-adder-subtract" onclick="location.href='/cartedit?gid={{ v.gid }}&num={{ v.num|add:-1 }}'"></button>
<div class="mz-adder-num"><input class="mz-adder-input" value="{{ v.num }}" type="text"></div>
<button class="mz-adder-add" onclick="location.href='/cartedit?gid={{ v.gid }}&num={{ v.num|add:1 }}'"></button>
</div>
</div>
</td>
<td class="cart-col-total col-md-1 hidden-xs hidden-sm">
<span class="cart-product-price total">{% widthratio v.num 1 v.price %}</span>
</td>
<td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">
<div class="cart-product-remove" onclick="location.href='/cartdel?gid={{v.gid}}'">
<span class="glyphicon glyphicon-remove"></span>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div><!-- 购物清单信息列表 E-->
</div>
<!-- 结算详情 -->
<div class="cart-footer" id="cartFooter">
<div class="container">
<div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
<div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all">
<div class="mz-checkbox"></div>
<span class="cart-select-title">全选</span>
</div>
<!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
<span class="cart-footer-count">
共
<span class="cart-footer-num" id="totalCount"></span>
件商品
</span>
<a href="{% url 'cartclear' %}" class="mz-btn error" style="background: #f39;color:#fff">清空</a>
</div>
<form action="{% url 'orderadd' %}" method="post" onsubmit="loadTotal();">
<div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
<span class="cart-footer-sum">
<span class="cart-footer-text">已优惠</span>
<span class="cart-footer-num red" id="totalDiscount">0.00</span>
<span class="cart-footer-text">元， 合计(不含运费)：</span>
<span class="cart-footer-total" id="totalPrice"></span>
</span>
{% csrf_token %}
<input type="hidden" name="ids" value="">
<button class="mz-btn success" id="cartSubmit">去结算</button>
</div>
</form>
</div>
</div><!-- 结算详情 E-->
</div>
<!-- 主内容区域 E-->
<!-- 底部区域 -->
<footer class="layout-footer hidden-xs hidden-sm">
<div class="container">
<div class="layout-footer-top clearfix">
<ul class="layout-footer-services clearfix">
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-sd-video"></i>
</span>
<span class="layout-footer-services-text">顺丰包邮</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-flash"></i>
</span>
<span class="layout-footer-services-text">100+ 城市次日送达</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-repeat"></i>
</span>
<span class="layout-footer-services-text">7 天无理由退货</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-refresh"></i>
</span>
<span class="layout-footer-services-text">15 天换货保障</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-wrench"></i>
</span>
<span class="layout-footer-services-text">1 年免费保修</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<span class="layout-footer-services-text">2300+ 线下体验店</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-sort"></i>
</span>
<span class="layout-footer-services-text">远程支持服务</span></a>
</li>
<li class="layout-footer-services-item">
<a href="#" class="layout-footer-services-link" target="_blank" data-mtype="wmz_public_foot_homerepair">
<span class="layout-footer-service-wrap">
<i class="glyphicon glyphicon-home"></i>
</span>
<span class="layout-footer-services-text">上门快修</span></a>
</li>
</ul>
<div class="layout-footer-contact">
<p class="layout-footer-contact-desc">24小时全国服务热线</p>
<a href="tel:400-788-3333" class="layout-footer-contact-tel">400-788-3333</a>
<p>
<a href="javascript:void(0);" class="layout-footer-contact-online">
<i class="layout-font layout-font-talk1"></i>
<span class="text">在线客服</span>
</a>
</p>
</div>
</div>
<div class="layout-footer-bottom clearfix">
<ul class="layout-footer-interlock clearfix">
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">了解魅族</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">加入我们</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">联系我们</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">Flyme</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">魅族社区</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">天猫旗舰店</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">问题反馈</a></li>
<li class="layout-footer-interlock-item">
<a href="#" target="_blank" class="layout-footer-interlock-link">线上销售授权名单公示</a>
</li>
</ul>
<div class="layout-footer-copyright clearfix">
<span class="layout-footer-copyright-left">
<a class="layout-footer-copyright-link copyright-text">©2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">粤ICP备13003602号-2</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">合字B2-20170010</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">营业执照</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="3" target="_blank">法律声明</a>
<a class="layout-footer-copyright-link">粤公网安备 44049102496009 号</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
<i class="layout-icon layout-icon-license"></i>
</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
<i class="layout-icon layout-icon-wel"></i>
</a>
<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
<i class="layout-icon layout-icon-trust"></i>
</a>
</span>
<ul class="layout-footer-media clearfix">
<li class="layout-footer-media-item">
<a href="http://weibo.com/meizumobile" class="layout-footer-media-link">
<i class="layout-font layout-font-weibo"></i>
</a>
</li>
<li class="layout-footer-media-item">
<a href="javascript:void(0);" class="layout-footer-media-link wechat">
<i class="layout-font layout-font-wechat"></i>
<div class="layout-footer-media-wechat-qrcode">
<img class="layout-footer-media-wechat-img" src="" alt="微信二维码">
</div>
</a>
</li>
<li class="layout-footer-media-item">
<a href="#" class="layout-footer-media-link">
<i class="layout-font layout-font-qzone"></i>
</a>
</li>
</ul>
</div>
</div>
</footer>
<!-- 底部区域 E -->
<!-- 返回顶部 -->
<div class="layout-magnet layout-magnet-show">
<div class="layout-magnet-item layout-magnet-item-top">
<a href="javascript:void(0);" class="layout-magnet-link" data-mtype="wmz_public_cbxf_top">
<div class="layout-magnet-icon">
<i class="glyphicon glyphicon-menu-up"></i>
</div>
</a>
</div>
</div>
<!-- 返回顶部 E-->
<script type="text/javascript">
//回顶部
backTop();
//全选
allSelect();
//商品数量加减
cartAddMin();
function loadTotal(){
var ids = []
// 获取已经选中的商品
list = $('.cart-merchant-body tr .cart-col-select .checked');
for (var i = 0; i < list.length; i++) {
// 在所有选中的商品中获取商品id
ids.push($(list[i]).attr('gid'))
// list[i].getAttribute('gid') 原生js
// $(list[i]).attr('gid') jquery
// list[i].attr('gid') X list[i]原生js .attr()jquery
}
// [1,2,3] == 1,2,3
idstr = ids.join(',')
$('form input[type=hidden][name=ids]').val(idstr)
// return false;
}
</script>
</body>
</html>
兄弟连学python
Python学习交流、资源共享群：563626388 QQ
扫一扫
2942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
