* {
margin:0;
padding:0;
}
.mature-progress {
margin-top:15px;
}
.mature-progress .mature-progress-top {
position:relative;
padding-left:15px;
font-size:18px;
height:40px;
line-height:40px;
}
.mature-progress .mature-progress-top:before {
content:'';
display:block;
position:absolute;
width:8px;
height:20px;
left:0;
top:10px;
background:#e10482;
border-radius:5px;
}
.mature-progress .mature-progress-bottom {
border-radius:5px;
border:#f2f2f2 solid 1px;
padding:15px;
position:relative;
height:125px;
width:720px;
}
.mature-progress .mature-progress-bottom p > span {
color:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box {
height:105px;
padding:10px 0 0 10px;
position:absolute;
top:60px;
}
.mature-progress .mature-progress-bottom .mature-progress-box.bgtwos {
z-index:1;
top:55px;
}
.mature-progress .mature-progress-bottom .mature-progress-box.bgtwos dl dt {
border:#f2f2f2 solid 5px;
}
.mature-progress .mature-progress-bottom .mature-progress-box.v0 dl:nth-of-type(1) dt {
background:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box.v1 dl:nth-of-type(2) dt {
background:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box.v2 dl:nth-of-type(3) dt {
background:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box.v3 dl:nth-of-type(4) dt {
background:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box.v4 dl:nth-of-type(5) dt {
background:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box dl {
width:70px;
text-align:center;
float:left;
margin-right:65px;
}
.mature-progress .mature-progress-bottom .mature-progress-box dl dt {
width:40px;
height:40px;
background:#999999;
color:#fff;
text-align:center;
line-height:44px;
border-radius:50%;
margin:0 auto;
overflow:hidden;
position:relative;
z-index:3;
}
.mature-progress .mature-progress-bottom .mature-progress-box dl dd {
padding-top:5px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box {
position:absolute;
width:676px;
height:15px;
border-radius:10px;
border:#f2f2f2 solid 5px;
background:#fff;
z-index:2;
top:20px;
left:22px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i {
position:absolute;
height:15px;
background:#e10482;
left:36px;
top:0;
width:0;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i.progress-box-2 {
left:171px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i.progress-box-3 {
left:305px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i.progress-box-4 {
left:440px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i.progress-box-5 {
left:576px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i span {
position:absolute;
display:inline-block;
*zoom:1;
*display:inline;
background:#fff;
border-radius:5px;
height:30px;
line-height:30px;
font-weight:normal;
font-size:12px;
font-style:normal;
border:#cccccc solid 1px;
right:-80px;
top:-50px;
padding:0 10px;
width:135px;
text-align:center;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i span:before {
content:'';
display:block;
position:absolute;
border-width:10px;
border-style:solid;
border-color:#ccc transparent transparent transparent;
bottom:-20px;
left:50%;
margin-left:-10px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i span:after {
content:'';
display:block;
position:absolute;
border-width:10px;
border-style:solid;
border-color:#fff transparent transparent transparent;
bottom:-19px;
left:50%;
margin-left:-10px;
}
现在各个商城或者电商针对不同的会员采用了不用的优惠政策。会员等级的设立已经是个趋势。更加能够吸引客户的消费欲望!