You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
206 lines
8.3 KiB
CSS
206 lines
8.3 KiB
CSS
2 years ago
|
/**
|
||
|
|
* 礼包样式
|
||
|
|
* @author 鹿文学
|
||
|
|
*/
|
||
|
|
/* */
|
||
|
|
/*body {background:#FFF;}*/
|
||
|
|
.za_icongift {
|
||
|
|
position: relative;
|
||
|
|
float:left;
|
||
|
|
height: 6rem;
|
||
|
|
width: 6rem;
|
||
|
|
border-radius: 12px;
|
||
|
|
background-color: #e2e2e2;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.searchbox {background:#E5E9EC;padding:1rem 0;border-bottom:1px solid #DCDDE0;}
|
||
|
|
.searchbox .search {margin:0 6rem;display:block;position:relative;text-align:center;}
|
||
|
|
.searchbox .search .text {box-sizing:border-box;-webkit-sizing:border-box;width:100%;font-size:1.8rem;border:none;background:#FFF;border-radius:4rem;padding:.5rem 1.5rem .5rem 4rem;height:3.2rem;}
|
||
|
|
.searchbox .search .btn {position:absolute;top:0.6rem;left:1.1rem;}
|
||
|
|
.searchbox .search .btn .iconfont {font-size:2.4rem;color:#bbb;}
|
||
|
|
|
||
|
|
|
||
|
|
.list-detail {padding:0 1rem;}
|
||
|
|
.list-detail li {padding:2rem 0;overflow:hidden;clear:both;position:relative;}
|
||
|
|
.list-detail li~li {border-top:1px solid #EEEEEE;}
|
||
|
|
.list-detail .icon {float:left;width:6rem;height:6rem;border-radius:20%;
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.list-detail .btnbox {width:8rem;float:right;}
|
||
|
|
.list-detail .btnbox p {color:#FFC700;text-align:center;margin-top:0;}
|
||
|
|
.list-detail .btnbox .btn {
|
||
|
|
background: #18B1EA;
|
||
|
|
color: #FFF;
|
||
|
|
border: 1px solid #18B1EA;
|
||
|
|
display: block;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
text-align: center;
|
||
|
|
width: 90%;
|
||
|
|
height: 3rem;
|
||
|
|
border-radius: 3rem;
|
||
|
|
font-size: 1.6rem;
|
||
|
|
line-height: 3rem;
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;padding-left:0;
|
||
|
|
}
|
||
|
|
.list-detail .btnbox .btn.disabled {border-color:#CCC;color:#999;background:transparent;}
|
||
|
|
.list-detail .text {margin:0 8rem 0 7rem;}
|
||
|
|
|
||
|
|
.list-detail .text .name {font-size:1.6rem;margin-right:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width: 8rem;width:auto;max-width:60%;display: inline-block;}
|
||
|
|
.list-detail .text .starbox {}
|
||
|
|
.list-detail .text .iconfont {color:#FFC600;margin:2px 1px 0;}
|
||
|
|
.list-detail .text .info {color:#999;padding-top:.2rem;}
|
||
|
|
.list-detail .text .info span {display:inline-block;margin-right:2rem;position:relative;}
|
||
|
|
.list-detail .text .info span:after{content:'';width:.1rem;height:1.1rem;background:#999999;position:absolute;top:.3rem;right:-1rem;}
|
||
|
|
.list-detail .text .info .dlnumber {margin:0;}
|
||
|
|
.list-detail .text .info .dlnumber:after {width:0;}
|
||
|
|
|
||
|
|
.list-detail .text .description {margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:#999;font-size:1.2rem;}
|
||
|
|
|
||
|
|
.detail .base {background:url(../images/giftdetail_bg.png) center 0 no-repeat;background-size:100% 100%;text-align:center;color:#FFF;padding-top:1rem;}
|
||
|
|
.detail .base .wrap a.za_giftdetical {
|
||
|
|
width:7rem;
|
||
|
|
height:7rem;
|
||
|
|
border-radius:100%;
|
||
|
|
border:.4rem solid #5EC9F0;
|
||
|
|
display:block;
|
||
|
|
margin:0 auto 1.5rem;
|
||
|
|
position:relative;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
.detail .base .wrap a.za_giftdetical img {
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
border-radius:100%;
|
||
|
|
border:.4rem solid #5EC9F0;
|
||
|
|
z-index:2;
|
||
|
|
}
|
||
|
|
.detail .base .wrap span.surplus {font-size:1.8rem;padding:.5rem 2rem;background:#47C9FA;background-image:linear-gradient(to bottom,#73D5F9,#4BCBFC,#16B9F7);border-radius:2rem;letter-spacing:.1rem;}
|
||
|
|
.detail .base .wrap p {font-size:1.6rem;padding-bottom:1rem;margin-bottom:0;
|
||
|
|
margin-top:1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail .other {padding:1rem 1.5rem;}
|
||
|
|
.detail .other .detail-item-title {margin:1rem 0;color:#18B1EA;font-size:2rem;position:relative;padding-left:1rem;font-weight:normal;}
|
||
|
|
.detail .other .detail-item-title:before {content:'';width:.5rem;height:.5rem;background:#18B1EA;border-radius:100%;display:block;position:absolute;top:1rem;left:0;}
|
||
|
|
.detail .other p {font-size:1.6rem;color:#999;margin:0;line-height:2.8rem;}
|
||
|
|
.detail .other .qq {color:#F6A825;}
|
||
|
|
.detail .other .btnbox {padding:3rem;text-align:center;}
|
||
|
|
.detail .other .btnbox .btn {color:#FFF;background:#18B1EA;font-size:2.6rem;display:inline-block;width:100%;height:4rem;line-height:4rem;border-radius:4rem;}
|
||
|
|
.detail .other .btnbox .btn.disabled {background:#CCC;}
|
||
|
|
|
||
|
|
|
||
|
|
@media screen and (max-width:450px) {
|
||
|
|
.list-detail .btnbox .btn,.game-list .btnbox .btn {border-width:1px;}
|
||
|
|
.list-detail .text .name,.game-list .text .name{max-width:54%;margin-right:0;}
|
||
|
|
.game-list .text .name{ max-width:9.4rem;}
|
||
|
|
.game-list .text .description{ width: 13rem;}
|
||
|
|
}
|
||
|
|
@media screen and (max-width:400px) {
|
||
|
|
.list-detail li,.game-list li{padding:1.5rem 0;}
|
||
|
|
.list-detail .icon,.game-list .icon {width:5.5rem;height:5.5rem;}
|
||
|
|
.za_icongift,.game-list .za_icongift{width:5.5rem;height:5.5rem;}
|
||
|
|
.list-detail .btnbox,.game-list .btnbox{width:6rem;}
|
||
|
|
.list-detail .btnbox p,.game-list .btnbox p {font-size:1.2rem;}
|
||
|
|
.list-detail .text{margin:0 7rem 0 6rem;}
|
||
|
|
.game-list .text .description{width:6rem;}
|
||
|
|
.list-detail .btnbox .btn,.game-list .btnbox .btn {font-size:1.4rem;height:2.5rem;line-height:2.5rem;}
|
||
|
|
.list-detail.bot li {margin-left:3rem;}
|
||
|
|
.game-list.bot li {margin-left:0;}
|
||
|
|
.list-detail.bot li .sorticon,.game-list.bot li .sorticon {top:3.5rem;left:-2.5rem;width:1.7rem;height:1.7rem;}
|
||
|
|
|
||
|
|
.detail .base .wrap a.gift_detical {
|
||
|
|
width:5rem;height:5rem;margin-bottom:1.2rem;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
.gift_detical img{
|
||
|
|
position:relative;
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
z-index:2;
|
||
|
|
}
|
||
|
|
/* .detail .base .wrap img {width:5rem;height:5rem;margin-bottom:1.2rem;} */
|
||
|
|
.detail .base .wrap span {font-size:1.5rem;padding:.4rem 1.5rem;}
|
||
|
|
.detail .base .wrap p {font-size:1.4rem;}
|
||
|
|
|
||
|
|
.detail .other .detail-item-title {font-size:1.8rem;}
|
||
|
|
.detail .other .detail-item-title:before {top:.9rem;}
|
||
|
|
.detail .other p {font-size:1.4rem;line-height:2.4rem;}
|
||
|
|
.detail .other .btnbox .btn {font-size:2.2rem;height:3.5rem;line-height:3.5rem;}
|
||
|
|
|
||
|
|
.list-detail .text .name, .game-list .text .name{font-size:1.3rem;max-width:50%;margin-right:0;}
|
||
|
|
.game-list .text .name{max-width: 10rem;}
|
||
|
|
.list-detail .text .stars,.game-list .text .stars{width:56px;background-size:56px;margin-top:-.65rem;}
|
||
|
|
.list-detail .text .stars i,.game-list .text .stars i {width:56px;background-size:56px;}
|
||
|
|
.list-detail .text .info,.game-list .text .info {padding-top:0;font-size:1.2rem;}
|
||
|
|
.list-detail .text .info span,.game-list .text .info span {margin-right:.6rem;}
|
||
|
|
.list-detail .text .info span:after,.game-list .text .info span:after {right:-.5rem;}
|
||
|
|
|
||
|
|
.discount_type_item {font-size:1rem;}
|
||
|
|
|
||
|
|
}
|
||
|
|
@media screen and (max-width:375px){
|
||
|
|
.za_icongift {
|
||
|
|
width: 5.5rem;
|
||
|
|
height: 5.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width:350px) {
|
||
|
|
.list-detail li,.game-list li {padding:1rem 0;}
|
||
|
|
.list-detail .icon,.game-list .icon {width:5rem;height:5rem;}
|
||
|
|
.za_icongift,.game-list .za_icongift{width:5rem;height:5rem;}
|
||
|
|
.list-detail .btnbox,.game-list .btnbox{width:6rem;}
|
||
|
|
.list-detail .text {margin:0 6rem 0 5.5rem;}
|
||
|
|
.list-detail .btnbox .btn,.game-list .btnbox .btn {font-size:1.3rem;height:2rem;line-height:2rem;border-width:1px;}
|
||
|
|
.list-detail .text .iconfont,.game-list .text .iconfont {font-size:1rem;}
|
||
|
|
.list-detail .text,.game-list .text {font-size:1.2rem;}
|
||
|
|
.game-list .text {padding: 0 0.6rem;}
|
||
|
|
.game-list .text .description{width:5rem;}
|
||
|
|
.list-detail .text .name,.game-list .text .name {font-size:1.2rem;}
|
||
|
|
.game-list .text .name {max-width: 6rem;}
|
||
|
|
.list-detail .text .info span,.game-list .text .info span {margin-right:1rem;}
|
||
|
|
.list-detail .text .info span:after,.game-list .text .info span:after {right:-.5rem;height:.9rem;}
|
||
|
|
.list-detail.bot li,.game-list .bot li {margin-left:2.5rem;}
|
||
|
|
.list-detail.bot li .sorticon,.game-list .bot li .sorticon{top:3rem;left:-2rem;width:1.5rem;height:1.5rem;}
|
||
|
|
|
||
|
|
.searchbox .search .text {font-size:1.5rem;}
|
||
|
|
|
||
|
|
.list-detail .btnbox p,.game-list .btnbox p{font-size:1.2rem;}
|
||
|
|
|
||
|
|
.detail .base .wrap a.za_giftdetical {width:4rem;height:4rem;margin-bottom:1rem;}
|
||
|
|
/* .detail .base .wrap img {width:4rem;height:4rem;margin-bottom:1rem;} */
|
||
|
|
.detail .base .wrap span {font-size:1.3rem;padding:.2rem 1rem;}
|
||
|
|
.detail .base .wrap p {font-size:1.2rem;}
|
||
|
|
|
||
|
|
.detail .other .detail-item-title {font-size:1.6rem;}
|
||
|
|
.detail .other .detail-item-title:before {top:.7rem;}
|
||
|
|
.detail .other p {font-size:1.2rem;line-height:2rem;}
|
||
|
|
|
||
|
|
.detail .other .btnbox .btn {font-size:1.8rem;height:3rem;line-height:3rem;}
|
||
|
|
|
||
|
|
/*.list-detail .btnbox .btn {border-width:1px;}*/
|
||
|
|
|
||
|
|
}
|
||
|
|
.za_icon2 {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
height: 5.5rem;
|
||
|
|
width: 5.5rem;
|
||
|
|
border-radius: 12px;
|
||
|
|
background-color: #e2e2e2;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width:769px){
|
||
|
|
.list-detail .text .name,.game-list .text .name{
|
||
|
|
display:inline;
|
||
|
|
}
|
||
|
|
.game-list .text .description{
|
||
|
|
width: 32rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|