search

zhengwei1949 / myblog

个人博客
10 stars 6 forks source link

乐淘详情页模板 #133

Open zhengwei1949 opened 6 years ago

zhengwei1949 commented 6 years ago 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="assets/fontAwesome/css/font-awesome.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/detail.css">
    <script src="assets/mui/js/mui.min.js"></script>
</head>

<body>
    <header class="mui-bar mui-bar-nav my-header">
        <a class="mui-icon mui-icon-search mui-pull-right"></a>
        <h1 class="mui-title">商品详情</h1>
    </header>
    <nav class="mui-bar mui-bar-tab footer my-footer">
        <a class="mui-tab-item mui-active" href="index.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="category.html">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item" href="cart.html">
            <span class="mui-icon iconfont fa fa-shopping-cart"></span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item" href="user.html">
            <span class="mui-icon mui-icon-person"></span>
            <span class="mui-tab-label">会员中心</span>
        </a>
    </nav>
    <div class="mui-content">
        <div class="wrapper">
            <!--轮播开始-->
            <div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <!-- 第一张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="./images/banner1.png">
                        </a>
                    </div>
                    <!-- 第二张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="./images/banner2.png">
                        </a>
                    </div>
                    <!-- 第三张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="./images/banner3.png">
                        </a>
                    </div>
                    <!-- 第四张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="./images/banner4.png">
                        </a>
                    </div>
                </div>
                <div class="mui-slider-indicator">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
        </div>
        <!--轮播结束-->
        <!--商品标题开始-->
        <div class="detail-title">
            【莹恋】MIZUNO美津浓V1GA159002乒乓球鞋男鞋女鞋室内综合训练鞋
        </div>
        <!--商品标题结束-->
        <!--价格区域开始-->
        <div class="detail-price">
            价格：
            <span class="new">¥112</span>
            <span class="old">¥342</span>
        </div>
        <!--价格区域结束-->
        <!--尺码开始-->
        <div class="detail-size">
            尺码：
            <span>35</span>
            <span>36</span>
            <span>37</span>
            <span>38</span>
            <span>39</span>
            <span>40</span>
        </div>
        <!--尺码结束-->
        <!--数量开始-->
        <div class="detail-num">
            数量：
            <span class="reduce">-</span>
            <input type="text" class="num" value="1">
            <span class="plus">+</span>
            剩余：
            <i>10</i>件
        </div>
        <!--数量结束-->
        <!--数量开始-->
        <div class="detail-num">
            数量：
            <!--这里的data-numbox-max='100'取决于商品库存值-->
            <div class="mui-numbox" data-numbox-min="1" data-numbox-max='10'>
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                <input class="mui-input-numbox" type="number" />
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
            </div>
            剩余：
            <i>10</i>件
        </div>
        <!--数量结束-->
        <!--查看购物车、加入购物车开始-->
        <div class="detail-buttons"><a href="#">查看购物车</a><span id="addCart">加入购物车</span></div>
        <!--查看购物车、加入购物车结束-->
        </div>
    </div>
    <script>
        mui('.mui-content').scroll({
            indicators: false, //是否显示滚动条
        });
    </script>
</body>

</html>