coupon.html 8.3 KB
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_782635_cvxdd8r2ec.css"/>
    <link rel="stylesheet" href="css/coupon.css"/>
    <script src="js/base.js"></script>
    <title>优惠券</title>
</head>
<body>
<div class="sharesecond" style="display:none"></div>
<div class="sharefirst">
    <p class="firststep">第一步,勾选需要分享的优惠券</p>
    <p class="nextstep">下一步</p>
</div>
<div class="container">
    <div class="head">
        <p class="unuse active">未使用</p>
        <p class="used">已使用</p>
        <p class="dated">已过期</p>
    </div>
    <div class="line"></div>
    <!--优惠券未使用-->
    <div class="couponlist">
        <div class="coupon_list_line">
            <div class="couponhead">
                <div class="couponmoney">
                    <p class="sign_coupon"></p>
                    <p class="coupon_money">50</p>
                    <p class="voucher">代金券</p>
                </div>
                <div class="use">
                    <p class="rightuse">立即使用</p>
                    <P class="iconfont icon-arrow"></P>
                </div>
            </div>
            <div class="date">
                <p>有效期截止</p>
                <p>5月9日</p>
            </div>
            <div class="share">
                <p class="iconfont sharecoupon"></p>
                <p class="sharefriend">分享优惠券给好友</p>
            </div>
        </div>
        <div class="coupon_list_line">
            <div class="couponhead">
                <div class="couponmoney">
                    <p class="sign_coupon"></p>
                    <p class="coupon_money">50</p>
                    <p class="voucher">代金券</p>
                </div>
                <div class="use">
                    <p class="rightuse">立即使用</p>
                    <P class="iconfont icon-arrow"></P>
                </div>
            </div>
            <div class="date">
                <p>有效期截止</p>
                <p>5月9日</p>
            </div>
            <div class="share">
                <p class="iconfont sharecoupon"></p>
                <p class="sharefriend">分享优惠券给好友</p>
            </div>
        </div>
        <div class="coupon_list_line">
            <div class="couponhead">
                <div class="couponmoney">
                    <p class="sign_coupon"></p>
                    <p class="coupon_money">50</p>
                    <p class="voucher">代金券</p>
                </div>
                <div class="use">
                    <p class="rightuse">立即使用</p>
                    <P class="iconfont icon-arrow"></P>
                </div>
            </div>
            <div class="date">
                <p>有效期截止</p>
                <p>5月9日</p>
            </div>
            <div class="share">
                <p class="iconfont sharecoupon"></p>
                <p class="sharefriend">分享优惠券给好友</p>
            </div>
        </div>
        <div class="coupon_list_line">
            <div class="couponhead">
                <div class="couponmoney">
                    <p class="sign_coupon"></p>
                    <p class="coupon_money">50</p>
                    <p class="voucher">代金券</p>
                </div>
                <div class="use">
                    <p class="rightuse">立即使用</p>
                    <P class="iconfont icon-arrow"></P>
                </div>
            </div>
            <div class="date">
                <p>有效期截止</p>
                <p>5月9日</p>
            </div>
            <div class="share">
                <p class="iconfont sharecoupon"></p>
                <p class="sharefriend">分享优惠券给好友</p>
            </div>
        </div>
    </div>

    <!--优惠券已使用-->
    <div class="uncoupon" style="display:none">
        <div class="uncoupon_list_line">
            <div class="uncouponhead">
                <div class="uncouponmoney">
                    <p class="unsign_coupon"></p>
                    <p class="uncoupon_money">50</p>
                    <p class="unvoucher">代金券</p>
                </div>

                <p class="alreadydate">已使用</p>


            </div>
            <div class="date">
                <p>有效期截止</p>
                <p>5月9日</p>
            </div>
            <div class="share">
                <p class="iconfont unsharecoupon"></p>
                <p class="sharefriend">分享优惠券给好友</p>
            </div>
        </div>
        <div class="uncoupon_list_line">
            <div class="uncouponhead">
                <div class="uncouponmoney">
                    <p class="unsign_coupon"></p>
                    <p class="uncoupon_money">50</p>
                    <p class="unvoucher">代金券</p>
                </div>

                <p class="alreadydate">已使用</p>


            </div>
            <div class="date">
                <p>有效期截止</p>
                <p>5月9日</p>
            </div>
            <div class="share">
                <p class="iconfont unsharecoupon"></p>
                <p class="sharefriend">分享优惠券给好友</p>
            </div>
        </div>
    </div>

    <!--优惠券已过期-->
    <div class="alreadycoupon" style="display:none">
        <div class="uncoupon_list_line">
            <div class="uncouponhead">
                <div class="uncouponmoney">
                    <p class="unsign_coupon"></p>
                    <p class="uncoupon_money">50</p>
                    <p class="unvoucher">代金券</p>
                </div>

                <p class="alreadydate">已过期</p>


            </div>
            <div class="date">
                <p>有效期截止</p>
                <p>5月9日</p>
            </div>
            <div class="share">
                <p class="iconfont unsharecoupon"></p>
                <p class="sharefriend">分享优惠券给好友</p>
            </div>
        </div>
        <div class="uncoupon_list_line">
            <div class="uncouponhead">
                <div class="uncouponmoney">
                    <p class="unsign_coupon"></p>
                    <p class="uncoupon_money">50</p>
                    <p class="unvoucher">代金券</p>
                </div>

                <p class="alreadydate">已过期</p>


            </div>
            <div class="date">
                <p>有效期截止</p>
                <p>5月9日</p>
            </div>
            <div class="share">
                <p class="iconfont unsharecoupon"></p>
                <p class="sharefriend">分享优惠券给好友</p>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(".head p").click(function(){
        $(this).addClass("active");
        $(this).siblings("p").removeClass("active")
    })
    /*选择优惠券*/
    $(".sharecoupon").click(function(){
        $(this).addClass("icon-duigou");
        $(this).parents(".coupon_list_line").siblings(".coupon_list_line").children(".share").children(".sharecoupon").removeClass("icon-duigou")
        $(".sharesecond").css("display","block");
        $("body").css("overflow","hidden");
    })
    //点击下一步
    $(".nextstep").click(function(){
        $(this).parents(".sharefirst").css("display","none");
        $("body").css("overflow","scroll");
    })
    $(".sharefirst").click(function(){
        $(this).css("display","none");
        $("body").css("overflow","scroll");
    })
    $(".sharesecond").click(function(){
        $(this).css("display","none");
        $("body").css("overflow","scroll");
    })
    $(".unuse").click(function(){
        $(".couponlist").css("display","block");
        $(".uncoupon").css("display","none");
        $(".alreadycoupon").css("display","none")
    })
    $(".used").click(function(){
        $(".couponlist").css("display","none");
        $(".uncoupon").css("display","block");
        $(".alreadycoupon").css("display","none")
    });
    $(".dated").click(function(){
        $(".couponlist").css("display","none");
        $(".uncoupon").css("display","none");
        $(".alreadycoupon").css("display","block")
    });
</script>
</html>