专题引导页目录更改

admin

2019-09-02 74196388f0abd3d902e2fe79253c8a016d17a334

专题引导页目录更改

 AppInside/special_guide/fenXiangBaoKuan/css/page.css

New file
@@ -0,0 +1,179 @@
body {
    margin: 0;
    padding: 0;
    background: #FC6562;
    font-family: 微软雅黑;
    height: auto;
    -webkit-overflow-scrolling: touch;
}


.item {
    background: #FFFFFF;
    border-radius: 0.5rem;
    display: block;
    margin: 0.5rem;
}

.item .title {
    padding: 1rem;
    text-align: left;
    word-wrap: break-word;
    font-weight: bold;
    color: #333333;
    line-height: 1rem;
}

.item .content {
    border-top: #EEEEEE;
    border-top-style: solid;
    border-top-width: 0.05rem;
    padding: 0.5rem;
    word-wrap: break-word;
    font-size: 0
}

.top {
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    display: block;
}

.top>img {
    width: 100%;

}

.floatInfo1 {
    position: absolute;
    width: 100%;
    height: 2rem;
    text-align: center;
    bottom: 1.2rem;
    color: #FFFFFF;
    font-size: 1.3rem;
}

.floatInfo2 {
    position: absolute;
    width: 100%;
    height: auto;
    line-height: 1rem;
    text-align: center;
    bottom: 4.7rem;
    color: #FFD4CD;
    font-size: 0.9rem;
}

.floatInfo1>div>img {
    width: 0.8rem;
}

.goodsList {
    background: #D8222C;
    width: auto;
    margin-top: -0.3rem;
    overflow: scroll;
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.goods {
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: 0.3rem;
    height: 10rem;
    width: 5.9rem;
    display: inline-block;
    margin-left: 0.02rem;
}

.goods .title {
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 0.1rem;
    white-space: normal;
    font-size: 0.67rem !important;
}

.goods .price {
    color: #E5005C;
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
}

.goods>img {
    width: 100%;
    display: block;
    border-radius: 0.3rem;
}

.more {
    height: 10rem;
    line-height: 10rem;
    padding: 0.3rem;
    position: absolute;
    right: 0;
    width: 1.8rem;
    background: #FFFFFF;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    text-align: center;
    box-shadow: -2px 0px 5px #D8222C;
}

.more>img {
    height: 1.5rem;
}

.content-item {
    display: inline-block;
    margin: 0;
    text-align: center;
    color: #333333;

}

.content-item>img {
    width: 100%;
}

.content-item .title {
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.2rem;
    padding: 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: normal;
    font-weight: normal;
}

.text2line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.text3line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.noleftrightPadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

 AppInside/special_guide/fenXiangBaoKuan/img/array_right.png

 AppInside/special_guide/fenXiangBaoKuan/img/btn_hongbao.png

 AppInside/special_guide/fenXiangBaoKuan/img/draw_left.png

 AppInside/special_guide/fenXiangBaoKuan/img/draw_right.png

 AppInside/special_guide/fenXiangBaoKuan/img/dubble_array_right.png

 AppInside/special_guide/fenXiangBaoKuan/img/from_1.png

 AppInside/special_guide/fenXiangBaoKuan/img/from_2.png

 AppInside/special_guide/fenXiangBaoKuan/img/from_3.png

 AppInside/special_guide/fenXiangBaoKuan/img/from_4.png

 AppInside/special_guide/fenXiangBaoKuan/img/how_1.png

 AppInside/special_guide/fenXiangBaoKuan/img/how_2.png

 AppInside/special_guide/fenXiangBaoKuan/img/how_3.png

 AppInside/special_guide/fenXiangBaoKuan/img/icon_more.png

 AppInside/special_guide/fenXiangBaoKuan/img/top.png

 AppInside/special_guide/fenXiangBaoKuan/img/youshi_1.png

 AppInside/special_guide/fenXiangBaoKuan/img/youshi_2.png

 AppInside/special_guide/fenXiangBaoKuan/img/youshi_3.png

 AppInside/special_guide/fenXiangBaoKuan/img/youshi_4.png

 AppInside/special_guide/fenXiangBaoKuan/index.html

New file
@@ -0,0 +1,241 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>分享爆款</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link type="text/css" href="css/page.css" rel="stylesheet" />
        <style>

        </style>
    </head>
    <body>
        <div>
            <div class="top">
                <div class="floatInfo1" style="font-size:0 ;">
                    <div style="height: 100%;position: relative;display: inline-block;">
                        <img src="img/draw_left.png" style="position: absolute;bottom: -0.1rem;"> </div>
                    <span style="font-size: 1.3rem;margin-left:1.2rem;margin-right: 0.5rem;">分享爆款商品</span>
                    <div style="height: 100%;position: relative;display: inline-block">
                        <img src="img/draw_right.png" style="position: absolute;bottom: -0.1rem;"> </div>
                </div>

                <div class="floatInfo2">
                    <img src="img/btn_hongbao.png" style="width: 42%;" />
                </div>
                <img src="img/top.png" />

            </div>

            <div class="goodsList">

                <div class="more">
                    <img src="img/array_right.png" />
                </div>

                <div class="goods" style="margin-left: 0.5rem;">
                    <img src="https://img.alicdn.com/bao/uploaded/O1CN01FAh3Vp2Dna5UcRL3k_!!2-item_pic.png_220x220" />
                    <div class="title">美乐（JoanMiro）儿童qweqwe可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>

                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>

                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>
                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>
                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>
                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>

                <div class="goods" style="background: #D8222C;width: 2rem;margin-top: -1rem;">
                </div>

            </div>
            <div class="item">
                <div class="title">分享爆款商品的优势？</div>
                <div class="content">
                    <div style="display: flex;">
                        <div class="content-item" style="width: 25%;">
                            <img src="img/youshi_1.png" />
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <img src="img/youshi_2.png" />
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <img src="img/youshi_3.png" />
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <img src="img/youshi_4.png" />
                        </div>
                    </div>

                    <div style="display: flex;">
                        <div class="content-item" style="width: 25%;">
                            <div class="title text2line">
                                每日精选<br>
                                商品
                            </div>
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <div class="title text2line">
                                好友免费<br>
                                领券
                            </div>
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <div class="title text2line">
                                领取淘礼<br>
                                金红包
                            </div>
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <div class="title text2line">
                                成单率提<br>
                                高40%
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="item">
                <div class="title" style="display:flex;align-items:center;justify-content: space-between;" >
                    <span> 怎么分享爆款商品？</span>
                    <img src="img/icon_more.png" style="width: 1.68rem;" />
                </div>
                <div class="content" style="padding:1.2rem 1.6rem;font-size: 0.8rem;">
                    <div style="display: flex;align-items: center;">
                        <div class="content-item item4" style="width: 28%;padding:0rem 1.4rem;">
                            <img src="img/how_1.png" />
                        </div>
                        <div class="content-item item4" style="width: 8%;">
                            <img src="img/dubble_array_right.png" />
                        </div>
                        <div class="content-item item4" style="width: 28%;padding:0rem 1.4rem;">
                            <img src="img/how_2.png" />
                        </div>
                        <div class="content-item item4" style="width: 8%;">
                            <img src="img/dubble_array_right.png" />
                        </div>
                        <div class="content-item item4" style="width: 28%;padding:0rem 1.4rem;">
                            <img src="img/how_3.png" />
                        </div>
                    </div>
                    <div style="display: flex;padding-top: 0.5rem;">
                        <div class="content-item item4" style="width: 28%;">
                            <div class="text3line">
                                <span style="color:#F33E3A;">第1步</span><br>
                                选择爆款商品
                            </div>
                        </div>
                        <div class="content-item item4" style="width: 8%;">
                        </div>
                        <div class="content-item item4" style="width: 28%;">
                            <div class="text3line">
                                <span style="color:#F33E3A;">第2步</span><br>
                                设置分享数量
                            </div>
                        </div>
                        <div class="content-item item4" style="width: 8%;">
                        </div>
                        <div class="content-item item4" style="width: 28%;">
                            <div class="text3line">
                                <span style="color:#F33E3A;">第3步</span><br>
                                创建分享给好友
                            </div>
                        </div>
                    </div>

                </div>
            </div>


            <div class="item">
                <div class="title">推广红包来源？</div>
                <div class="content">
                    <div style="display: flex;">
                        <div class="content-item" style="width: 25%;">
                            <img src="img/from_1.png" />
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <img src="img/from_2.png" />
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <img src="img/from_3.png" />
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <img src="img/from_4.png" />
                        </div>
                    </div>

                    <div style="display: flex;">
                        <div class="content-item" style="width: 25%;">
                            <div class="title text2line">
                                账户等级<br>
                                奖励
                            </div>
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <div class="title text2line">
                                邀请队员<br>
                                奖励
                            </div>
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <div class="title text2line">
                                金币兑换<br>
                                获得
                            </div>
                        </div>
                        <div class="content-item" style="width: 25%;">
                            <div class="title text2line">
                                好友赠送<br>
                                获得
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="title">分享爆款商品更新？</div>
                <div class="content">
                    <div class="content-item" style="width: 50%;">
                        <div style="font-size: 1.3rem; background: #ECF9FF; color: #1D97FE;padding:1rem 0.3rem;margin: 0.6rem;">
                            每天00:00<br>更新
                        </div>
                    </div>
                    <div class="content-item" style="width: 50%;">
                        <div style="font-size: 1.3rem; background: #FFF1E1; color: #FF9B2B;padding:1rem 0.3rem;margin: 0.6rem;">
                            每天精选<br>10款商品
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 3rem;"></div>
    </body>
    <script>
    </script>

</html>

 AppInside/special_guide/fenXiangBaoKuan/test.html

New file
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自购立减</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
        <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <style>
        </style>
    </head>
    <body>
        <div class="content">
            <div class="content-padded grid-demo">
                <div class="row">
                    <div class="col-50 center">50%</div>
                    <div class="col-50">50%</div>
                </div>
                <div class="row">
                    <div class="col-33">33%</div>
                    <div class="col-33">33%</div>
                    <div class="col-33">33%</div>
                </div>
                <div class="row">
                    <div class="col-20">20%</div>
                    <div class="col-80">80%</div>
                </div>
                <h2>无间距</h2>
                <div class="row no-gutter">
                    <div class="col-20">20%</div>
                    <div class="col-80">80%</div>
                </div>
            </div>
        </div>
    </body>
    <script>
    </script>

</html>

 AppInside/special_guide/jiangLiQuan/1.0/css/page.css

New file
@@ -0,0 +1,162 @@
body {
        margin: 0;
        padding: 0;
        background: #F42176;
        font-family: 微软雅黑;
        /* 不允许复制 */
        -moz-user-select: none;
        /* Firefox私有属性 */
        -webkit-user-select: none;
        /* WebKit内核私有属性 */
        -ms-user-select: none;
        /* IE私有属性(IE10及以后) */
        -khtml-user-select: none;
        /* KHTML内核私有属性 */
        -o-user-select: none;
        /* Opera私有属性 */
        user-select: none;
        /* CSS3属性 */
    }

    .item {
        background: #FFFFFF;
        border-radius: 0.5rem;
        display: block;
        margin: 0.5rem;
    }

    .item .title {
        padding: 1rem;
        text-align: left;
        word-wrap: break-word;
        font-weight: bold;
        color: #333333;
        line-height: 1rem;
    }

    .item .content {
        border-top: #EEEEEE;
        border-top-style: solid;
        border-top-width: 0.05rem;
        padding: 0.5rem;
        word-wrap: break-word;
        font-size: 0
    }

    .top {
        width: 100%;
        position: relative;
        padding: 0;
        margin: 0;
        display: block;
    }

    .top>img {
        width: 100%;

    }


    .floatInfo2 {
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 0.9rem;
    }

    .floatInfo2>img {
        height: 2.4rem;
    }

    .floatInfo1>div>img {
        width: 0.8rem;
    }

    .floatInfo3 {
        display: flex;
        position: absolute;
        width: 100%;
        height: 2rem;
        text-align: center;
        top: 0.5rem;
        font-size: 0.6rem;
        line-height: 2rem;
        justify-content: center;

    }

    .floatInfo3>div {
        width: 88%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        background:#F7649F;
        border-radius: 1rem;
        color: #FFFFFF;
        font-size: 0.8rem;
        line-height: 2rem;
    }

    .more {
        height: 10rem;
        line-height: 10rem;
        padding: 0.3rem;
        position: absolute;
        right: 0;
        width: 1.8rem;
        background: #FFFFFF;
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        text-align: center;
        box-shadow: -2px 0px 5px #832EEB;
    }

    .more>img {
        height: 1.5rem;
    }

    .content-item {
        display: inline-block;
        margin: 0;
        text-align: center;
        color: #333333;
    }

    .content-item>img {
        width: 100%;
    }

    .content-item .title {
        text-align: center;
        font-size: 0.7rem;
        line-height: 1.2rem;
        padding: 0.5rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        white-space: normal;
        font-weight: normal;
    }

    .text1line {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .text2line {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .text3line {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .noleftrightPadding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

 AppInside/special_guide/jiangLiQuan/1.0/img/btn_fuli.png

 AppInside/special_guide/jiangLiQuan/1.0/img/condition.png

 AppInside/special_guide/jiangLiQuan/1.0/img/dubble_array_right.png

 AppInside/special_guide/jiangLiQuan/1.0/img/fail_1.png

 AppInside/special_guide/jiangLiQuan/1.0/img/fail_2.png

 AppInside/special_guide/jiangLiQuan/1.0/img/fail_3.png

 AppInside/special_guide/jiangLiQuan/1.0/img/from_1.png

 AppInside/special_guide/jiangLiQuan/1.0/img/from_2.png

 AppInside/special_guide/jiangLiQuan/1.0/img/haochu_1.png

 AppInside/special_guide/jiangLiQuan/1.0/img/haochu_2.png

 AppInside/special_guide/jiangLiQuan/1.0/img/haochu_3.png

 AppInside/special_guide/jiangLiQuan/1.0/img/icon_more.png

 AppInside/special_guide/jiangLiQuan/1.0/img/limit_1.png

 AppInside/special_guide/jiangLiQuan/1.0/img/limit_2.png

 AppInside/special_guide/jiangLiQuan/1.0/img/limit_3.png

 AppInside/special_guide/jiangLiQuan/1.0/img/limit_4.png

 AppInside/special_guide/jiangLiQuan/1.0/img/limit_5.png

 AppInside/special_guide/jiangLiQuan/1.0/img/limit_6.png

 AppInside/special_guide/jiangLiQuan/1.0/img/limit_7.png

 AppInside/special_guide/jiangLiQuan/1.0/img/quanyi_1.png

 AppInside/special_guide/jiangLiQuan/1.0/img/quanyi_2.png

 AppInside/special_guide/jiangLiQuan/1.0/img/quanyi_3.png

 AppInside/special_guide/jiangLiQuan/1.0/img/quanyi_4.png

 AppInside/special_guide/jiangLiQuan/1.0/img/step_1.png

 AppInside/special_guide/jiangLiQuan/1.0/img/step_2.png

 AppInside/special_guide/jiangLiQuan/1.0/img/step_3.png

 AppInside/special_guide/jiangLiQuan/1.0/img/step_4.png

 AppInside/special_guide/jiangLiQuan/1.0/img/top.png

 AppInside/special_guide/jiangLiQuan/1.0/index.html

New file
@@ -0,0 +1,236 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>返利奖励券</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="css/page.css" />
        <style>

        </style>
    </head>
    <body>
        <div>
            <div class="top">
                <div class="floatInfo2">
                    <img src="img/btn_fuli.png" />
                </div>

                <div class="floatInfo3">
                    <div style="font-size: 0;">
                        <div style="white-space: nowrap;display: flex;align-items: center;font-size: 0.8rem;">
                            <img src="http://5b0988e595225.cdn.sohucs.com/images/20181230/d5646a7e573c4dc286e24a03b6d3503e.jpeg" style="display: inline-block;border:0.1rem solid white;width:1.4rem;height: 1.4rem;border-radius: 1.2rem;margin-left: 0.2rem;" />
                            <span class="text1line" style="margin-left: 0.3rem;width:8rem;overflow:hidden;text-overflow:ellipsis;text-align: left;">小辉小辉</span>
                        </div>
                        <div style="text-align: right;padding-right: 1rem;display: flex;align-items: center;font-size: 0.8rem;">
                            <span>可用返利奖励券：</span>
                            <span style="color:#FFF600 ;">300张</span>
                        </div>
                    </div>
                </div>
                <img src="img/top.png" />

            </div>


            <div class="item">
                <div class="title">如何获得返利奖励券？</div>
                <div class="content" style="padding:1rem 0rem">
                    <div style="display: flex;align-items: center;">
                        <div class="content-item item4" style="width: 50%;padding:0rem 2rem;">
                            <img src="img/from_1.png" />
                        </div>

                        <div class="content-item item4" style="width: 50%;padding:0rem 2rem;">
                            <img src="img/from_2.png" />
                        </div>
                    </div>

                    <!-- 文字 -->
                    <div style="display: flex;font-size:0.8rem;margin-top: 1rem;color: #333333;font-weight:bold;">
                        <div class="content-item item4 text1line" style="width: 50%;padding:0rem 0.5rem;">
                            金币兑换
                        </div>
                        <div class="content-item item4 text1line" style="width: 50%;padding:0rem 0.5rem;">
                            好友赠送
                        </div>
                    </div>
                </div>
            </div>


            <div class="item">
                <div class="title">返利奖励券的使用条件？</div>
                <div class="content" style="padding:1.5rem 1.5rem">
                    <img src="img/condition.png" style="width: 100%;" />
                </div>
            </div>





            <div class="item">
                <div class="title" style="display:flex;align-items:center;justify-content: space-between;" >
                    <span>如何使用返利奖励券？</span>
                    <img src="img/icon_more.png" style="width: 1.68rem;" />
                </div>
                <div class="content" style="padding:1rem 1.5rem">
                    <!--图片 -->
                    <div style="display: flex;">
                        <div class="content-item item2" style="width: 43%;">
                            <img src="img/step_1.png" />
                        </div>

                        <div class="content-item" style="width: 14%;margin: auto 0;">
                            <img src="img/dubble_array_right.png" style="width:1rem" />
                        </div>
                        <div class="content-item item2" style="width: 43%;">
                            <img src="img/step_2.png" />
                        </div>
                    </div>
                    <!-- 文字 -->
                    <div style="display: flex;">
                        <div class="content-item item2" style="width: 43%;">
                            <div class="title text3line" style="padding: 1rem 0;font-size: 0.72rem;">
                                <span style="color:#E5005C ;"> 第1步</span><br> “福利中心”确认是否有 返利奖励券，点击“使用”<br>
                            </div>
                        </div>

                        <div class="content-item" style="width: 14%;">

                            <div class="title" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">
                                <br>
                                <br>
                            </div>
                        </div>

                        <div class="content-item" style="width: 43%;">
                            <div class="title" style="padding: 1rem 0;font-size: 0.72rem;">
                                <span style="color:#E5005C ;">第2步</span><br>订单中， 点击“返利奖励”
                            </div>
                        </div>
                    </div>
                    <!--图片 -->
                    <div style="display: flex;margin-top: 0.5rem;">
                        <div class="content-item" style="width: 43%;">
                            <img src="img/step_3.png" />
                        </div>

                        <div class="content-item" style="width: 14%;margin: auto 0;">
                            <img src="img/dubble_array_right.png" style="width:1rem" />
                        </div>
                        <div class="content-item" style="width: 43%;">
                            <img src="img/step_4.png" />
                        </div>
                    </div>
                    <!-- 文字 -->
                    <div style="display: flex;">
                        <div class="content-item" style="width: 43%;">
                            <div class="title" style="padding: 1rem 0;font-size: 0.72rem;">
                                <span style="color:#E5005C ;"> 第3步</span><br> 选择可用“返利 奖励券”
                            </div>
                        </div>

                        <div class="content-item" style="width: 14%;">

                            <div class="title" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">
                                <br>
                                <br>
                            </div>
                        </div>

                        <div class="content-item" style="width: 43%;">
                            <div class="title" style="padding: 1rem 0;font-size: 0.72rem;">
                                <span style="color:#E5005C ;">第4步</span><br>确认使用奖励返利券 现金直接进入余额
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="title" style="position: relative;">
                    <span>返利奖励券有哪些权益？</span>

                </div>
                <div class="content" style="padding:1rem 0rem">
                    <div style="display: flex;align-items: center;">
                        <div class="content-item item4" style="width: 33.33%;padding:0rem 1.2rem;">
                            <img src="img/quanyi_1.png" />
                        </div>
                        <div class="content-item item4" style="width: 33.33%;padding:0rem 1.2rem;">
                            <img src="img/quanyi_2.png" />
                        </div>
                        <div class="content-item item4" style="width: 33.33%;padding:0rem 1.2rem;">
                            <img src="img/quanyi_3.png" />
                        </div>
                    </div>

                    <!-- 文字 -->
                    <div style="display: flex;font-size:0.8rem;margin-top: 0.5rem;color: #333333;">
                        <div class="content-item item4 text2line" style="width: 33.33%;padding:0rem 0.5rem;">
                            再返35%
                        </div>
                        <div class="content-item item4 text2line" style="width: 33.33%;padding:0rem 0.5rem;">
                            赠送好友
                        </div>
                        <div class="content-item item4 text2line" style="width: 33.33%;padding:0rem 0.5rem;">
                            快捷邀请
                        </div>
                    </div>

                    <div style="padding: 1rem 1.2rem;">
                        <img src="img/quanyi_4.png" style="width: 100%;" />
                    </div>

                    <div style="align-items: center;padding: 0rem 0;color:#333333;font-size: 0.8rem;text-align: center;">
                        多平台“返利订单”可使用
                    </div>

                </div>
            </div>


            <div class="item">
                <div class="title">获得返利奖励券有限制？
                </div>
                <div class="content" style="padding:1rem 0rem;display: inline-block;font-size: 0;">
                    <div class="content-item" style="width: 25%;text-align: center;margin-top: 0.5rem;">
                        <img src="img/limit_1.png" style="width: 50%;" />
                        <div class="title text2line">没有VIP</br>限制</div>
                    </div>
                    <div class="content-item" style="width: 25%;text-align: center;margin-top: 0.5rem;">
                        <img src="img/limit_2.png" style="width: 50%;" />
                        <div class="title text2line">没有总监会</br>员限制</div>
                    </div>
                    <div class="content-item" style="width: 25%;text-align: center;margin-top: 0.5rem;">
                        <img src="img/limit_3.png" style="width: 50%;" />
                        <div class="title text2line">没有购买</br>特权限制</div>
                    </div>
                    <div class="content-item" style="width: 25%;text-align: center;margin-top: 0.5rem;">
                        <img src="img/limit_4.png" style="width: 50%;" />
                        <div class="title text2line">没有邀请</br>考核限制</div>
                    </div>

                    <div class="content-item" style="width: 25%;text-align: center;margin-top: 0.5rem;">
                        <img src="img/limit_5.png" style="width: 50%;" />
                        <div class="title text2line">没有次数</br>限制</div>
                    </div>
                    <div class="content-item" style="width: 25%;text-align: center;margin-top: 0.5rem;">
                        <img src="img/limit_6.png" style="width: 50%;" />
                        <div class="title text2line">再返金额<br>不限</div>
                    </div>
                    <div class="content-item" style="width: 25%;text-align: center;margin-top: 0.5rem;">
                        <img src="img/limit_7.png" style="width: 50%;" />
                        <div class="title text2line">使用渠道<br>不限</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 3rem;"></div>
    </body>
    <script>
    </script>

</html>

 AppInside/special_guide/jiangLiQuan/1.0/test.html

New file
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自购立减</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
        <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <style>
        </style>
    </head>
    <body>
        <div class="content">
            <div class="content-padded grid-demo">
                <div class="row">
                    <div class="col-50 center">50%</div>
                    <div class="col-50">50%</div>
                </div>
                <div class="row">
                    <div class="col-33">33%</div>
                    <div class="col-33">33%</div>
                    <div class="col-33">33%</div>
                </div>
                <div class="row">
                    <div class="col-20">20%</div>
                    <div class="col-80">80%</div>
                </div>
                <h2>无间距</h2>
                <div class="row no-gutter">
                    <div class="col-20">20%</div>
                    <div class="col-80">80%</div>
                </div>
            </div>
        </div>
    </body>
    <script>
    </script>

</html>

 AppInside/special_guide/mianDan/1.0/css/page.css

New file
@@ -0,0 +1,220 @@
body {
    margin: 0;
    padding: 0;
    background: #782BD9;
    font-family: 微软雅黑;
    /* 不允许复制 */
    -moz-user-select: none;
    /* Firefox私有属性 */
    -webkit-user-select: none;
    /* WebKit内核私有属性 */
    -ms-user-select: none;
    /* IE私有属性(IE10及以后) */
    -khtml-user-select: none;
    /* KHTML内核私有属性 */
    -o-user-select: none;
    /* Opera私有属性 */
    user-select: none;
    /* CSS3属性 */
	
}

.item {
    background: #FFFFFF;
    border-radius: 0.5rem;
    display: block;
    margin: 0.5rem;
}

.item .title {
    padding: 1rem;
    text-align: left;
    word-wrap: break-word;
    font-weight: bold;
    color: #333333;
    line-height: 1rem;
}

.item .content {
    border-top: #EEEEEE;
    border-top-style: solid;
    border-top-width: 0.05rem;
    padding: 0.5rem;
    word-wrap: break-word;
    font-size: 0
}

.top {
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    display: block;
}

.top>img {
    width: 100%;

}

.floatInfo1 {
    position: absolute;
    width: 100%;
    height: 2rem;
    text-align: center;
    bottom: 1.4rem;
    color: #FFFFFF;
    font-size: 1.3rem;
}

.floatInfo2 {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 5.4rem;
}

.floatInfo2>img {
    height: 2.4rem;
}

.floatInfo1>div>img {
    width: 0.8rem;
}

.floatInfo3 {
    display: flex;
    position: absolute;
    width: 100%;
    height: 2rem;
    text-align: center;
    top: 0.7rem;
    font-size: 0.6rem;
    line-height: 2rem;
    justify-content: center;

}

.floatInfo3>div {
    width: 88%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    background: rgba(157, 103, 225, 1);
    border-radius: 1rem;
    color: #FFFFFF;
    font-size: 0.8rem;
    line-height: 2rem;
}

.goodsList {
    background: #832EEB;
    width: auto;
    margin-top: -0.3rem;
    overflow: scroll;
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}


.goods {
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: 0.3rem;
    height: 10rem;
    width: 5.9rem;
    display: inline-block;
    margin-left: 0.02rem;
}

.goods .title {
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 0.1rem;
    white-space: normal;
    font-size: 0.67rem !important;
}

.goods .price {
    color: #E5005C;
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
}

.goods>img {
    width: 100%;
    display: block;
    border-radius: 0.3rem;
}

.more {
    height: 10rem;
    line-height: 10rem;
    padding: 0.3rem;
    position: absolute;
    right: 0;
    width: 1.8rem;
    background: #FFFFFF;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    text-align: center;
    box-shadow: -2px 0px 5px #832EEB;
}

.more>img {
    height: 1.5rem;
}

.content-item {
    display: inline-block;
    margin: 0;
    text-align: center;
    color: #333333;
}

.content-item>img {
    width: 100%;
}

.content-item .title {
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.2rem;
    padding: 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: normal;
    font-weight: normal;
}

.text1line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.text2line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.text3line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.noleftrightPadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

 AppInside/special_guide/mianDan/1.0/img/array_right.png

 AppInside/special_guide/mianDan/1.0/img/btn_exchange.png

 AppInside/special_guide/mianDan/1.0/img/draw_left.png

 AppInside/special_guide/mianDan/1.0/img/draw_right.png

 AppInside/special_guide/mianDan/1.0/img/dubble_array_right.png

 AppInside/special_guide/mianDan/1.0/img/fail_1.png

 AppInside/special_guide/mianDan/1.0/img/fail_2.png

 AppInside/special_guide/mianDan/1.0/img/fail_3.png

 AppInside/special_guide/mianDan/1.0/img/from_1.png

 AppInside/special_guide/mianDan/1.0/img/from_2.png

 AppInside/special_guide/mianDan/1.0/img/haochu_1.png

 AppInside/special_guide/mianDan/1.0/img/haochu_2.png

 AppInside/special_guide/mianDan/1.0/img/haochu_3.png

 AppInside/special_guide/mianDan/1.0/img/icon_more.png

 AppInside/special_guide/mianDan/1.0/img/miandan_1.png

 AppInside/special_guide/mianDan/1.0/img/miandan_2.png

 AppInside/special_guide/mianDan/1.0/img/miandan_3.png

 AppInside/special_guide/mianDan/1.0/img/top.png

 AppInside/special_guide/mianDan/1.0/index.html

New file
@@ -0,0 +1,235 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>免单</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="css/page.css" />
        <style>

        </style>
    </head>
    <body>
        <div>
            <div class="top">
                <div class="floatInfo1" style="font-size:0 ;">
                    <div style="height: 100%;position: relative;display: inline-block;">
                        <img src="img/draw_left.png" style="position: absolute;bottom: -0.1rem;"> </div>
                    <span style="font-size: 1.3rem;margin-left:1.2rem;margin-right: 0.5rem;">选择免单商品</span>
                    <div style="height: 100%;position: relative;display: inline-block">
                        <img src="img/draw_right.png" style="position: absolute;bottom: -0.1rem;"> </div>
                </div>

                <div class="floatInfo2">
                    <img src="img/btn_exchange.png" />
                </div>

                <div class="floatInfo3">
                    <div style="font-size: 0;">
                        <div style="white-space: nowrap;display: flex;align-items: center;font-size: 0.8rem;">
                            <img src="http://5b0988e595225.cdn.sohucs.com/images/20181230/d5646a7e573c4dc286e24a03b6d3503e.jpeg" style="display: inline-block;border:0.1rem solid white;width:1.4rem;height: 1.4rem;border-radius: 1.2rem;margin-left: 0.2rem;" />
                            <span class="text1line" style="margin-left: 0.3rem;width:8rem;overflow:hidden;text-overflow:ellipsis;text-align: left;">小辉小辉</span>
                        </div>
                        <div style="text-align: right;padding-right: 1rem;display: flex;align-items: center;font-size: 0.8rem;">
                            <span>可用免单券：</span>
                            <span style="color:#FFF600 ;">300张</span>
                        </div>
                    </div>
                </div>
                <img src="img/top.png" />

            </div>

            <div class="goodsList">

                <div class="more">
                    <img src="img/array_right.png" />
                </div>


                <div class="goods" style="margin-left: 0.5rem;">
                    <img src="https://img.alicdn.com/bao/uploaded/O1CN01FAh3Vp2Dna5UcRL3k_!!2-item_pic.png_220x220" />
                    <div class="title">美乐（JoanMiro）儿童qweqwe可水洗蜡笔丝滑</div>
                    <div class="price">￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>

                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>

                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>
                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>
                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>
                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>


                <div class="goods" style="background: #832EEB;width: 2rem;margin-top: -1rem;">
                </div>

            </div>


            <div class="item">
                <div class="title">怎么完成免单？</div>
                <div class="content" style="padding:1.2rem 1.6rem;font-size: 0.8rem;">
                    <div style="display: flex;align-items: center;">
                        <div class="content-item item4" style="width: 28%;padding:0rem 1.4rem;">
                            <img src="img/miandan_1.png" />
                        </div>
                        <div class="content-item item4" style="width: 8%;">
                            <img src="img/dubble_array_right.png" />
                        </div>
                        <div class="content-item item4" style="width: 28%;padding:0rem 1.4rem;">
                            <img src="img/miandan_2.png" />
                        </div>
                        <div class="content-item item4" style="width: 8%;">
                            <img src="img/dubble_array_right.png" />
                        </div>
                        <div class="content-item item4" style="width: 28%;padding:0rem 1.4rem;">
                            <img src="img/miandan_3.png" />
                        </div>
                    </div>
                    <div style="display: flex;padding-top: 0.5rem;">
                        <div class="content-item item4" style="width: 28%;">
                            <div class="text3line">
                                <span style="color:#9448F2;">第1步</span><br>
                                选择免单商品
                            </div>
                        </div>
                        <div class="content-item item4" style="width: 8%;">
                        </div>
                        <div class="content-item item4" style="width: 28%;">
                            <div class="text3line">
                                <span style="color:#9448F2;">第2步</span><br>
                                使用免单券下单
                            </div>
                        </div>
                        <div class="content-item item4" style="width: 8%;">
                        </div>
                        <div class="content-item item4" style="width: 28%;">
                            <div class="text3line">
                                <span style="color:#9448F2;">第3步</span><br>
                                全额返利实付0元
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="item">
                <div class="title" style="display:flex;align-items:center;justify-content: space-between;">
                    <span>免单券好处？</span>
                    <img src="img/icon_more.png" style="width: 1.68rem;height: 0.4rem;" />
                </div>
                <div class="content" style="padding:1rem 0rem">
                    <div style="display: flex;align-items: center;">
                        <div class="content-item item4" style="width: 33.33%;padding:0rem 1.2rem;">
                            <img src="img/haochu_1.png" />
                        </div>
                        <div class="content-item item4" style="width: 33.33%;padding:0rem 1.2rem;">
                            <img src="img/haochu_2.png" />
                        </div>
                        <div class="content-item item4" style="width: 33.33%;padding:0rem 1.2rem;">
                            <img src="img/haochu_3.png" />
                        </div>
                    </div>

                    <!-- 文字 -->
                    <div style="display: flex;font-size:0.8rem;margin-top: 0.5rem;">
                        <div class="content-item item4 text2line" style="width: 33.33%;padding:0rem 0.5rem;color: #E86D00;">
                            全额返<br>实付0元
                        </div>
                        <div class="content-item item4 text2line" style="width: 33.33%;padding:0rem 0.5rem;color: #761DE5;">
                            赠送好友<br>分享免单
                        </div>
                        <div class="content-item item4 text2line" style="width: 33.33%;padding:0rem 0.5rem;color: #09DBCF;">
                            快捷绑定<br>邀请关系
                        </div>
                    </div>

                </div>
            </div>

            <div class="item">
                <div class="title">免单券哪里来？</div>
                <div class="content" style="padding:1rem 0rem">
                    <div style="display: flex;align-items: center;">
                        <div class="content-item item4" style="width: 50%;padding:0rem 2rem;">
                            <img src="img/from_1.png" />
                        </div>

                        <div class="content-item item4" style="width: 50%;padding:0rem 2rem;">
                            <img src="img/from_2.png" />
                        </div>
                    </div>

                    <!-- 文字 -->
                    <div style="display: flex;font-size:0.8rem;margin-top: 1rem;">
                        <div class="content-item item4 text1line" style="width: 50%;padding:0rem 0.5rem;color: #DA8A00;">
                            金币兑换
                        </div>
                        <div class="content-item item4 text1line" style="width: 50%;padding:0rem 0.5rem;color: #761DE5;">
                            好友赠送
                        </div>
                    </div>
                </div>
            </div>

            <div class="item">

                <div class="title" style="display:flex;align-items:center;justify-content: space-between;">免单不成功？
                    <img src="img/icon_more.png" style="width: 1.68rem;height: 0.4rem;" />
                </div>
                <div class="content" style="padding:1rem 0rem">
                    <div style="display: flex;align-items: center;">
                        <div class="content-item item4" style="width: 33.33%;padding:0rem 1.4rem;">
                            <img src="img/fail_1.png" />
                        </div>
                        <div class="content-item item4" style="width: 33.33%;padding:0rem 1.4rem;">
                            <img src="img/fail_2.png" />
                        </div>
                        <div class="content-item item4" style="width: 33.33%;padding:0rem 1.4rem;">
                            <img src="img/fail_3.png" />
                        </div>
                    </div>

                    <!-- 文字 -->
                    <div style="display: flex;font-size:0.8rem;margin-top: 1rem;">
                        <div class="content-item item4 text1line" style="width: 33.33%;padding:0rem 0.5rem;color: #333333;">
                            将会免单失败
                        </div>
                        <div class="content-item item4 text1line" style="width: 33.33%;padding:0rem 0.5rem;color: #333333;">
                            将退回免单券
                        </div>
                        <div class="content-item item4 text1line" style="width: 33.33%;padding:0rem 0.5rem;color: #333333;">
                            将退回免单券
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 3rem;"></div>
    </body>
    <script>
    </script>

</html>

 AppInside/special_guide/mianDan/1.0/test.html

New file
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自购立减</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
        <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <style>
        </style>
    </head>
    <body>
        <div class="content">
            <div class="content-padded grid-demo">
                <div class="row">
                    <div class="col-50 center">50%</div>
                    <div class="col-50">50%</div>
                </div>
                <div class="row">
                    <div class="col-33">33%</div>
                    <div class="col-33">33%</div>
                    <div class="col-33">33%</div>
                </div>
                <div class="row">
                    <div class="col-20">20%</div>
                    <div class="col-80">80%</div>
                </div>
                <h2>无间距</h2>
                <div class="row no-gutter">
                    <div class="col-20">20%</div>
                    <div class="col-80">80%</div>
                </div>
            </div>
        </div>
    </body>
    <script>
    </script>

</html>

 AppInside/special_guide/ziGouLiJian/img/array_right.png

 AppInside/special_guide/ziGouLiJian/img/draw_left.png

 AppInside/special_guide/ziGouLiJian/img/draw_right.png

 AppInside/special_guide/ziGouLiJian/img/dubble_array_right.png

 AppInside/special_guide/ziGouLiJian/img/icon_more.png

 AppInside/special_guide/ziGouLiJian/img/img_fanli.png

 AppInside/special_guide/ziGouLiJian/img/img_jinxuan.png

 AppInside/special_guide/ziGouLiJian/img/img_quan.png

 AppInside/special_guide/ziGouLiJian/img/img_tlj.png

 AppInside/special_guide/ziGouLiJian/img/lijian_1.png

 AppInside/special_guide/ziGouLiJian/img/lijian_2.png

 AppInside/special_guide/ziGouLiJian/img/lijian_3.png

 AppInside/special_guide/ziGouLiJian/img/lijian_4.png

 AppInside/special_guide/ziGouLiJian/img/tedian_1.png

 AppInside/special_guide/ziGouLiJian/img/tedian_2.png

 AppInside/special_guide/ziGouLiJian/img/tedian_3.png

 AppInside/special_guide/ziGouLiJian/img/tedian_4.png

 AppInside/special_guide/ziGouLiJian/img/tedian_5.png

 AppInside/special_guide/ziGouLiJian/img/top.png

 AppInside/special_guide/ziGouLiJian/index.html

New file
@@ -0,0 +1,479 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自购立减</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style>
            body {
                margin: 0;
                padding: 0;
                background: #F55E45;
                font-family: 微软雅黑;
                /* 不允许复制 */
                -moz-user-select: none;
                /* Firefox私有属性 */
                -webkit-user-select: none;
                /* WebKit内核私有属性 */
                -ms-user-select: none;
                /* IE私有属性(IE10及以后) */
                -khtml-user-select: none;
                /* KHTML内核私有属性 */
                -o-user-select: none;
                /* Opera私有属性 */
                user-select: none;
                /* CSS3属性 */
            }

            .item {
                background: #FFFFFF;
                border-radius: 0.5rem;
                display: block;
                margin: 0.5rem;
            }

            .item .title {
                padding: 1rem;
                text-align: left;
                word-wrap: break-word;
                font-weight: bold;
                color: #333333;
                line-height: 1rem;
            }

            .item .content {
                border-top: #EEEEEE;
                border-top-style: solid;
                border-top-width: 0.05rem;
                padding: 0.5rem;
                word-wrap: break-word;
                font-size: 0
            }

            .top {
                width: 100%;
                position: relative;
                padding: 0;
                margin: 0;
                display: block;
            }

            .top>img {
                width: 100%;

            }

            .floatInfo1 {
                position: absolute;
                width: 100%;
                height: 2rem;
                text-align: center;
                bottom: 2.8rem;
                color: #FFFFFF;
                font-size: 1.3rem;
            }

            .floatInfo2 {
                position: absolute;
                width: 100%;
                height: 2rem;
                line-height: 2rem;
                text-align: center;
                bottom: 0.5rem;
                color: #FFD4CD;
                font-size: 0.9rem;
            }

            .floatInfo1>div>img {
                width: 0.8rem;
            }

            .goodsList {
                background: #EA4428;
                width: auto;
                margin-top: -0.3rem;
                overflow: scroll;
                padding-top: 1rem;
                padding-bottom: 1rem;
                overflow-x: scroll;
                overflow-y: hidden;
                white-space: nowrap;
            }

            .goods {
                background: #FFFFFF;
                border-radius: 0.5rem;
                padding: 0.3rem;
                height: 10rem;
                width: 5.9rem;
                display: inline-block;
                margin-left: 0.02rem;
            }

            .goods .title {
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                margin-top: 0.1rem;
                white-space: normal;
                font-size: 0.67rem !important;
            }

            .goods .price {
                color: #E5005C;
                display: block;
                margin-top: 0.4rem;
                font-size: 0.8rem;
            }

            .goods>img {
                width: 100%;
                display: block;
                border-radius: 0.3rem;
            }

            .more {
                height: 10rem;
                line-height: 10rem;
                padding: 0.3rem;
                position: absolute;
                right: 0;
                width: 1.8rem;
                background: #FFFFFF;
                border-top-left-radius: 0.5rem;
                border-bottom-left-radius: 0.5rem;
                text-align: center;
                box-shadow: -2px 0px 5px #EA4428;
            }

            .more>img {
                height: 1.5rem;
            }

            .content-item {
                display: inline-block;
                margin: 0;
                text-align: center;
                color: #333333;

            }

            .content-item>img {
                width: 100%;
            }

            .content-item .title {
                text-align: center;
                font-size: 0.7rem;
                line-height: 1.2rem;
                padding: 0.5rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                white-space: normal;
                font-weight: normal;
            }

            .text2line {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .text3line {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
            }

            .item4 {
                width: 25%;
            }

            .item2 {
                width: 40%;
            }

            .item5 {
                width: 20%;
            }

            .item5>img {
                width: 50%;
            }

            .noleftrightPadding {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="top">
                <div class="floatInfo1" style="font-size:0 ;">
                    <div style="height: 100%;position: relative;display: inline-block;">
                        <img src="img/draw_left.png" style="position: absolute;bottom: -0.1rem;"> </div>
                    <span style="font-size: 1.3rem;margin-left:1.2rem;margin-right: 0.5rem;">自购立减商品</span>
                    <div style="height: 100%;position: relative;display: inline-block">
                        <img src="img/draw_right.png" style="position: absolute;bottom: -0.1rem;"> </div>
                </div>

                <div class="floatInfo2">
                    今日共有100个商品
                </div>
                <img src="img/top.png" />

            </div>

            <div class="goodsList">

                <div class="more">
                    <img src="img/array_right.png" />
                </div>

                <div class="goods" style="margin-left: 0.5rem;">
                    <img src="https://img.alicdn.com/bao/uploaded/O1CN01FAh3Vp2Dna5UcRL3k_!!2-item_pic.png_220x220" />
                    <div class="title">美乐（JoanMiro）儿童qweqwe可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>

                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>

                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>
                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>
                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>
                <div class="goods">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2204972046320/O1CN01q0KIbO1wYbgtrY8Jx_!!0-item_pic.jpg_220x220" />
                    <div class="title">美乐（JoanMiro）儿童可水洗蜡笔丝滑</div>
                    <div class="price">福利价￥<span style="font-size: 1.2rem;">6<span>.<span style="font-size: 0.8rem;">9</span></div>
                </div>


                <div class="goods" style="background: #EA4428;width: 2rem;margin-top: -1rem;">
                </div>

            </div>


            <div class="item">


                <div class="title">自购立减商品优势？</div>
                <div class="content">
                    <div style="display: flex;">
                        <div class="content-item item4">
                            <img src="img/img_quan.png" />
                        </div>
                        <div class="content-item item4">
                            <img src="img/img_tlj.png" />
                        </div>
                        <div class="content-item item4">
                            <img src="img/img_fanli.png" />
                        </div>
                        <div class="content-item item4">
                            <img src="img/img_jinxuan.png" />
                        </div>
                    </div>

                    <div style="display: flex;">
                        <div class="content-item item4">
                            <div class="title text2line">
                                免费领取<br>优惠券
                            </div>
                        </div>
                        <div class="content-item item4">
                            <div class="title text2line">
                                领付款立减<br>红包
                            </div>
                        </div>
                        <div class="content-item item4">
                            <div class="title text2line">
                                无需等待<br>返利
                            </div>
                        </div>
                        <div class="content-item item4">
                            <div class="title text2line">
                                每日精选<br>商品
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="title" style="display:flex;align-items:center;justify-content: space-between;">
                    <span>如何自购立减？</span>
                    <img src="img/icon_more.png" style="width: 1.68rem;height: 0.4rem;" />
                </div>
                <div class="content" style="padding:1rem 1.5rem">
                    <!--图片 -->
                    <div style="display: flex;">
                        <div class="content-item item2" style="width: 43%;">
                            <img src="img/lijian_1.png" />
                        </div>

                        <div class="content-item" style="width: 14%;margin: auto 0;">
                            <img src="img/dubble_array_right.png" style="width:1rem" />
                        </div>
                        <div class="content-item item2" style="width: 43%;">
                            <img src="img/lijian_2.png" />
                        </div>
                    </div>
                    <!-- 文字 -->
                    <div style="display: flex;">
                        <div class="content-item item2" style="width: 43%;">
                            <div class="title">
                                <span style="color:#F34225 ;"> 第1步</span><br> 选择自购立减商品<br>
                            </div>
                        </div>

                        <div class="content-item" style="width: 14%;">

                            <div class="title" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">
                                <br>
                                <br>
                            </div>
                        </div>

                        <div class="content-item item2" style="width: 43%;">
                            <div class="title">
                                <span style="color:#F34225 ;">第2步</span><br> 确认立减红包，点击购买
                            </div>
                        </div>
                    </div>
                    <!--图片 -->
                    <div style="display: flex;margin-top: 0.5rem;">
                        <div class="content-item item2" style="width: 43%;">
                            <img src="img/lijian_3.png" />
                        </div>

                        <div class="content-item" style="width: 14%;margin: auto 0;">
                            <img src="img/dubble_array_right.png" style="width:1rem" />
                        </div>
                        <div class="content-item item2" style="width: 43%;">
                            <img src="img/lijian_4.png" />
                        </div>
                    </div>
                    <!-- 文字 -->
                    <div style="display: flex;">
                        <div class="content-item item2" style="width: 43%;">
                            <div class="title">
                                <span style="color:#F34225 ;"> 第3步</span><br> 跳转至淘宝领券、领红包
                            </div>
                        </div>

                        <div class="content-item" style="width: 14%;">

                            <div class="title" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">
                                <br>
                                <br>
                            </div>
                        </div>

                        <div class="content-item item2" style="width: 43%;">
                            <div class="title">
                                <span style="color:#F34225 ;">第4步</span><br> 选好规格，下单自动抵现
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="title">自购商品特点？</div>
                <div class="content">
                    <div style="display: flex;margin-top: 1rem;">

                        <div class="content-item item5">
                            <img src="img/tedian_1.png" />
                        </div>
                        <div class="content-item item5">
                            <img src="img/tedian_2.png" />
                        </div>
                        <div class="content-item item5">
                            <img src="img/tedian_3.png" />
                        </div>
                        <div class="content-item item5">
                            <img src="img/tedian_4.png" />
                        </div>
                        <div class="content-item item5">
                            <img src="img/tedian_5.png" />
                        </div>
                    </div>

                    <div style="display: flex;">
                        <div class="content-item item5">
                            <div class="title noleftrightPadding">
                                返利前置
                            </div>
                        </div>
                        <div class="content-item item5">

                            <div class="title noleftrightPadding">
                                直接抵现
                            </div>
                        </div>
                        <div class="content-item item5">
                            <div class="title noleftrightPadding">
                                不能分享
                            </div>
                        </div>
                        <div class="content-item item5">
                            <div class="title noleftrightPadding">
                                无邀请奖金
                            </div>
                        </div>
                        <div class="content-item item5">
                            <div class="title noleftrightPadding">
                                热卖商品
                            </div>
                        </div>

                    </div>

                </div>
            </div>


            <div class="item">
                <div class="title">自购立减商品更新？</div>
                <div class="content">
                    <div class="content-item" style="width: 50%;">
                        <div style="font-size: 1.3rem; background: #ECF9FF; color: #1D97FE;padding:1rem 0.3rem;margin: 0.6rem;">
                            每天06:00<br>更新
                        </div>
                    </div>
                    <div class="content-item" style="width: 50%;">
                        <div style="font-size: 1.3rem; background: #FFF1E1; color: #FF9B2B;padding:1rem 0.3rem;margin: 0.6rem;">
                            每天精选不低于50款商品
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 3rem;"></div>
    </body>
    <script>
    </script>

</html>

 AppInside/special_guide/ziGouLiJian/test.html

New file
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自购立减</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
        <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <style>
        </style>
    </head>
    <body>
        <div class="content">
            <div class="content-padded grid-demo">
                <div class="row">
                    <div class="col-50 center">50%</div>
                    <div class="col-50">50%</div>
                </div>
                <div class="row">
                    <div class="col-33">33%</div>
                    <div class="col-33">33%</div>
                    <div class="col-33">33%</div>
                </div>
                <div class="row">
                    <div class="col-20">20%</div>
                    <div class="col-80">80%</div>
                </div>
                <h2>无间距</h2>
                <div class="row no-gutter">
                    <div class="col-20">20%</div>
                    <div class="col-80">80%</div>
                </div>
            </div>
        </div>
    </body>
    <script>
    </script>

</html>