优惠券页面

最新推荐文章于 2023-11-25 17:16:06 发布

林中明月间。

最新推荐文章于 2023-11-25 17:16:06 发布

阅读量767

点赞数

CC 4.0 BY-SA版权

分类专栏：插件和其他移动端、兼容性、响应式 Html+Css+Js

本文链接：https://blog.csdn.net/a772116804/article/details/89355640

Html+Css+Js 同时被 3 个专栏收录

51 篇文章

订阅专栏

插件和其他

46 篇文章

订阅专栏

移动端、兼容性、响应式

22 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/rem.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优惠券</title>
</head>
<style>
/* 优惠券 */
.or_wrap {
    width: 100%;
    margin: auto;
    height: auto;
}
.conpon{
    width: 100%;
    height: 2rem;
    margin: auto;
    background: #fff;

}
.conpon ul li{
    height: 2rem;
    float: left;
    margin: 0 1rem;
}
.conpon ul li a{
    font-size: 0.56rem;
    color: #999999;
    padding-bottom: 0.7rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.conpon ul li a.active{
    color: #ff610d;
    border-bottom: 3px solid #ff610d;
}
.conpon_list{
    width: 96%;
    height: 5.6rem;
    margin: 0.4rem auto;

    border-radius: 0.5rem;
}
.conpon_list li{
    background: url(../images/quanbg.png) no-repeat center;
    width: 100%;
    height: 4.9rem;
    background-size: 100%;
    margin: 0.4rem 0;
}
.conpon_list li .conpon_top{
    width: 100%;
    height: 3.3rem;
}
.conpon_list li .conpon_top .conpon_top_left{
    width: 3rem;
    height: 2.4rem;
    float: left;
    margin-left: 1rem;
    margin-top: 0.7rem;
}
.conpon_list li .conpon_top .conpon_top_left i{
    font-size: 0.36rem;
    color: #ff4545;
    border:2px solid #ff4545;
    display: block;
    width: 1.4rem;
    height: 0.6rem;
    text-align: center;
    line-height: 0.6rem;
    font-style: normal;
    margin-left: 0.2rem;
}
.conpon_list li .conpon_top .conpon_top_left p{
    font-size: 1.08rem;
    color:#ff4545;
    line-height: 1.5rem;

}
.conpon_list li .conpon_top .conpon_top_left p label{
    font-size: 0.44rem;
    color:#ff4545;
    padding-left: 0.3rem;
}
.conpon_list li .conpon_top .conpon_top_right{
    margin-left: 1.2rem;
    width: 8rem;
    height: 3rem;
    float: left;
}
.conpon_list li .conpon_top .conpon_top_right i{
    display: block;
    font-size: 0.64rem;
    color: #333333;
    font-style: normal;
    line-height: 1.5rem;
}
.conpon_list li .conpon_top .conpon_top_right p{
    color: #999999;
    font-size: 0.4rem;
    line-height: 0.8rem;
}
.conpon_list li .conpon_top .conpon_top_right .conpon_time{
    color: #999999;
    font-size: 0.4rem;
}
.conpon_list li .conpon_bottom{
    width: 100%;
    height: 1.4rem;
}
.conpon_list li .conpon_bottom p{
    font-size: 0.64rem;
    text-align: center;
    color: #ff610d;
    line-height: 1.7rem;
}

/* 已使用加active */
.conpon_list li.active .conpon_top .conpon_top_left i {
    color: #999999;
    border: 2px solid #999999;
}

.conpon_list li.active .conpon_top .conpon_top_left p{
    color: #999999;
}
.conpon_list li.active .conpon_top .conpon_top_left p label{
    color: #999999;
}
.conpon_list li.active .conpon_bottom p{
    color: #999999;
}

/* 优惠券over */
</style>
<body>
   <div class="or_wrap">
        <div class="conpon clearfloat">
            <ul class="clearfloat">
                <li>
                    <a href="" class="active" style="pad">全部</a>
                </li>
                <li>
                    <a href="">已使用</a>
                </li>
                <li>
                    <a href="">未使用</a>
                </li>
            </ul>
        </div>
        <div class="conpon_list clearfloat">
            <li>
                <div class="conpon_top">
                    <div class="conpon_top_left">
                        <i>优惠券</i>
                        <p>100<label>元</label></p>
                    </div>
                    <div class="conpon_top_right">
                        <i>活动</i>
                        <p>元旦节满30减5</p>
                        <div class="conpon_time"> 
                            <span id="start_time">2019-01-01</span> 
                            至 
                            <span id="end_time">2019-05-01</span>
                        </div>
                    </div>
                </div>
                <div class="conpon_bottom">
                    <p>未使用</p>
                </div>
            </li>
            <!-- 已使用 -->
            <li class="active">
                <div class="conpon_top">
                    <div class="conpon_top_left">
                        <i>优惠券</i>
                        <p>100<label>元</label></p>
                    </div>
                    <div class="conpon_top_right">
                        <i>活动</i>
                        <p>元旦节满30减5</p>
                        <div class="conpon_time"> 
                            <span id="start_time">2019-01-01</span> 
                            至 
                            <span id="end_time">2019-05-01</span>
                        </div>
                    </div>
                </div>
                <div class="conpon_bottom">
                    <p>已使用</p>
                </div>
            </li>
        </div>
   </div>
   <script>
       $('.conpon li a').each(function(i,v){
			$(v).click(function(){			
				$(v).addClass('active').siblings().removeClass('active');
			})
		})
   </script>
</body>
</html>