Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

乐淘详情页模板 #133

Open
zhengwei1949 opened this issue May 9, 2018 · 0 comments
Open

乐淘详情页模板 #133

zhengwei1949 opened this issue May 9, 2018 · 0 comments

Comments

@zhengwei1949
Copy link
Owner 

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@zhengwei1949