product_detail.html 11.2 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> -->
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" name="viewport" />
    <title>订单流程-商品详情</title>
    <link rel="stylesheet" href="../css/style/common.css">
    <link rel="stylesheet" type="text/css" href="../css/style/idangerous.swiper.css">
    <link rel="stylesheet" href="../css/style/product_detail.css">

    <!-- base seajs -->
    <script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/sea.js"></script>
    <!-- base jquery -->
    <script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/jquery-2.1.3.min.js"></script>

</head>

<body class="productDetail">
    <div class="m-page">
        <header class="m-header header-light">
            <div class="head">
                <a href="#" class="lt-bar m-icon icon-back">返回</a>
                <h1>商品详情</h1>
                <a href="#" class="rt-bar m-icon icon-more">更多</a>
            </div>
        </header>
        <section class="m-content">
            <div id="slider" class="swiper-container slider">
                <div class="swiper-wrapper clearfix">
                    <div class="swiper-slide" style="background:url(http://img3.nong12.com/images/cms/99/60/ZGlsaTIvTTAwLzAwLzVCL3dLZ2NLRlIwZFZlQUw5bXpBQVNYanBzMGRvNDc5OQ==.png) center center no-repeat; background-size:cover;"></div>
                    <div class="swiper-slide" style="background:url(http://img3.nong12.com/images/cms/99/60/ZGlsaTIvTTAwLzAwLzVCL3dLZ2NLRlIwZFZlQUw5bXpBQVNYanBzMGRvNDc5OQ==.png) center center no-repeat; background-size:cover;"></div>
                    <div class="swiper-slide" style="background:url(http://img3.nong12.com/images/cms/99/60/ZGlsaTIvTTAwLzAwLzVCL3dLZ2NLRlIwZFZlQUw5bXpBQVNYanBzMGRvNDc5OQ==.png) center center no-repeat; background-size:cover;"></div>
                    <div class="swiper-slide" style="background:url(http://img3.nong12.com/images/cms/99/60/ZGlsaTIvTTAwLzAwLzVCL3dLZ2NLRlIwZFZlQUw5bXpBQVNYanBzMGRvNDc5OQ==.png) center center no-repeat; background-size:cover;"></div>
                    <div class="swiper-slide" style="background:url(http://img3.nong12.com/images/cms/99/60/ZGlsaTIvTTAwLzAwLzVCL3dLZ2NLRlIwZFZlQUw5bXpBQVNYanBzMGRvNDc5OQ==.png) center center no-repeat; background-size:cover;"></div>
                </div>

                <div class="page-contrl">
                    <span class="page">1/5</span>
                    <span class="m-icon icon-fav">收藏</span>
                    <span class="m-icon icon-scan">扫描</span>
                </div>
            </div>
            <div class="summary">
                <h3>山东白萝卜,物美价廉,产地山东寿光产品批发市场</h3>
                <em>0.8元/斤</em>
            </div>
            <div class="step-price">
                <ul class="m-step">
                    <li>
                        <span class="text">2.4元/斤</span>
                        <span class="desc">100斤起</span>
                    </li>
                    <li>
                        <span class="text">1.2元/斤</span>
                        <span class="desc">500斤起</span>
                    </li>
                    <li>
                        <span class="text">0.8元/斤</span>
                        <span class="desc">1000斤起</span>
                    </li>
                </ul>
            </div>
            <ul class="position">
                <li><span class="title">产地:</span><span class="text">中国山东青州市</span>
                </li>
                <li><span class="title">所在地:</span><span class="text">山东寿光市</span>
                </li>
            </ul>
            <div class="shop">
                <a href="shop_detail.html">
                    <img src="../temp/pic_hlb.jpg" alt="" class="cover">
                    <h3>寿光小溪蔬菜批发</h3>
                    <p>主营:蔬菜</p>
                    <div class="medal">
                        <span class="real-name"><i></i>实名认证</span>
                    </div>
                </a>
            </div>
            <div class="tabs">
                <ul class="m-segment">
                    <li class="on"><a href="#" class="text">商品详情</a>
                    </li>
                    <li><a href="#" class="text">商品评论</a>
                    </li>
                </ul>
            </div>
            <div class="targets">
                <div class="detail">
                    <table class="m-table">
                        <tbody>
                            <tr>
                                <th>商品编号</th>
                                <td>1029201111</td>
                            </tr>
                            <tr>
                                <th>上架时间</th>
                                <td>2014-12-25 22:09:20</td>
                            </tr>
                            <tr>
                                <th>形状</th>
                                <td>段圆形状</td>
                            </tr>
                            <tr>
                                <th>颜色</th>
                                <td>红色</td>
                            </tr>
                        </tbody>
                    </table>
                    <p class="m-separate"><span>继续拖动,查看图文详情</span>
                    </p>
                    <div class="desc">
                        萝卜,十字花科、萝卜属二年或一年生草本,直根肉质,长圆形、球形或圆锥形,外皮绿色、白色或红色;
                        <img src="../temp/pic_hlb.jpg" alt="萝卜">
                    </div>
                </div>
                <div class="comment m-hide">
                    <div class="m-stat">
                        <span class="rate"><em>98%</em><br>好评度</span>
                        <ul>
                            <li><span class="text">满意</span> <span class="progress"><span style="width:98%;"></span></span> <span class="percent">98%</span>
                            </li>
                            <li><span class="text">一般</span> <span class="progress"><span style="width:2%;"></span></span> <span class="percent">2%</span>
                            </li>
                            <li><span class="text">不满意</span> <span class="progress"><span style="width:0%;"></span></span> <span class="percent">0%</span>
                            </li>
                        </ul>
                    </div>

                    <ul class="m-list-text">
                        <li>
                            <span class="m-star"><span style="width:80%;"></span></span>
                            <span class="author">张三 2014-10-3</span>
                            <p>不错,物美价廉,萝卜相当新鲜!</p>
                        </li>
                        <li>
                            <span class="m-star"><span style="width:60%;"></span></span>
                            <span class="author">张三 2014-10-3</span>
                            <p>山东白萝卜,物美价廉!</p>
                        </li>
                        <li>
                            <span class="m-star"><span style="width:100%;"></span></span>
                            <span class="author">张三 2014-10-3</span>
                            <p>不错,物美价廉,萝卜相当新鲜!不错,物美价廉,萝卜相当新鲜!不错,物美价廉,萝卜相当新鲜!不错,物美价廉,萝卜相当新鲜!不错,物美价廉,萝卜相当新鲜!不错,物美价廉,萝卜相当新鲜!</p>
                        </li>
                        <li>
                            <span class="m-star"><span style="width:40%;"></span></span>
                            <span class="author">张三 2014-10-3</span>
                            <p>山东白萝卜,物美价廉!</p>
                        </li>
                    </ul>
                    <a href="comment_list.html" class="m-more">查看更多评论</a>
                </div>
            </div>
        </section>
        <footer class="m-footer">
            <a href="shopping_list.html" class="m-icon icon-board shop-num"><i class="m-badge">2</i></a>
            <a href="#product-buy" data-popup class="m-btn btn-warning">立即购买</a>
            <a href="#product-buy" data-popup class="m-btn btn-success">加入采购单</a>
        </footer>
    </div>
    <div class="product-buy-popup" id="product-buy">
        <div class="head clearfix">
            <a href="#product-buy" class="close" data-dismiss></a>
            <ul class="m-table-view-old">
                <li>
                    <img src="../temp/pic_hlb.jpg" alt="" class="pic">
                    <h3>0.8元/斤-2.4元/斤</h3>
                    <p>库存量:1000斤</p>
                    <p>最低采购量:100斤</p>
                </li>
            </ul>
        </div>
        <div class="content">
            <p class="field">品种:</p>
            <div class="area">
                <span class="m-btn on">白萝卜</span>
                <span class="m-btn">胡萝卜</span>
                <span class="m-btn">青萝卜</span>
                <span class="m-btn">紫萝卜</span>
                <span class="m-btn disable">紫萝卜</span>
            </div>

            <!-- <p class="field">提货点:</p>
                <div class="area">
                    <span class="m-btn on">山东寿光农产品物流园</span>
                    <span class="m-btn">四川聚合农产品</span>
                </div> -->

            <p class="field">采购数量:</p>
            <div class="area">
                <span class="m-input-number">
                                                <span class="reduce"></span>
                <input type="number" step="1" min="1" value="1">
                <span class="add"></span>
                </span>
            </div>
            <!--  <p class="field">为您推荐地利官方服务(可多选):</p>
                <div class="area">
                    <span class="m-btn on">保险预冷</span>
                    <span class="m-btn">理货包装</span>
                    <span class="m-btn">物流配送</span>
                </div> -->
        </div>

        <div class="bottom"><a href="order_confirm.html" class="m-btn">确定</a>
        </div>
    </div>
    <script type="text/javascript" src="../js/javascript/common/config.js"></script>
    <script src="../js/javascript/common/swipe.js"></script>
    <script>
    seajs.use(['../js/javascript/common/popup', '../js/javascript/product/detail']);
    </script>
</body>

</html>