* { font-family: 'PingFang SC','Microsoft YaHei',SourceHanSansCN-Normal,HiraginoSansGB,HiraginoSans-W3,"Helvetica Neue",Helvetica,STHeiTi,sans-serif; } body{ width: 100%;min-height: 100vh;background: #f4f4f4; } .all { display: none; } .loading { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100vh; z-index: 99; } .loading img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 0.3rem; height: 0.3rem; } .alert-info { position: fixed; top: 1.74rem; right: 0; left: 0; bottom: 0; text-align: center; z-index: 2; } .alert-info p { display: inline-block; height: 0.38rem; color: #fff; font-size: 0.14rem; line-height: 0.38rem; padding: 0 0.10rem; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; } .tab{ width: 100%; display: flex; align-items: center; background: #ffffff; padding-bottom: 0.05rem; position: fixed; top: 0; border-bottom: 0.01rem solid #f4f4f4; z-index: 2; } .tab li{ width: 33.3%; text-align: center; color: #333333; line-height: 0.2rem; font-size: 0.16rem; padding: 0.15rem; } .tab .tabActive{ color: #FA2C37; position: relative; } .tab .tabActive::after{ content: ''; display: block; width: 0.17rem; height: 0.02rem; background: #FA2C37; position: absolute; top: 0.45rem; left: 0; right: 0; margin: auto; border-radius: 0.01rem; } /* 红包列表 */ .dismantle,.dismantling { position: relative; } .totalRedEnvelopes,.account{ padding-top: 0.55rem; padding-bottom: 0.15rem; box-sizing: border-box; } .totalRedEnvelopes li{ margin: auto; margin-top: 0.15rem; width: 3.45rem; height: 1.44rem; background: #ffffff; border-radius: 0.11rem; position: relative; } .redEnvelopesItem{ background: url("https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/H5-liedou/newRedEnvelopes/redEvenlopesBg01.png") no-repeat; background-size:100%; height: 1.16rem; padding-left: 1.04rem; } .totalRedEnvelopes .redEnvelopesItem .redEnvelopesItemOne{ display: flex; align-items: center; justify-content: space-between; padding-top: 0.24rem; } .totalRedEnvelopes .redEnvelopesItem .redEnvelopesItemOne p{ font-size: 0.17rem; line-height: 0.24rem; color: #ffffff; } .totalRedEnvelopes .redEnvelopesItem .redEnvelopesItemOne span{ font-size: 0.23rem; line-height: 0.32rem; color: #FFF48D; padding-right: 0.2rem; } .totalRedEnvelopes .redEnvelopesItem .redEnvelopesItemTwo{ color: #FFFBFB; font-size: 0.12rem; line-height: 0.17rem; display: flex; align-items: center; justify-content: space-between; margin-top: 0.06rem; } .totalRedEnvelopes .redEnvelopesItem .redEnvelopesItemTwo span{ color: #FFF47B; font-size: 0.14rem; line-height: 0.17rem; } .totalRedEnvelopes .redEnvelopesItem .redEnvelopesItemTwo div{ width: 0.54rem; height: 0.16rem; line-height: 0.16rem; border: 0.01rem solid #FFF48D; color: #FFF48D; border-radius: 0.04rem; font-size: 0.11rem; text-align: center; margin-right: 0.13rem; } .totalRedEnvelopes li .timeInfo{ display: flex; align-items: center; justify-content: space-between; font-size: 0.12rem; line-height: 0.17rem; padding: 0.05rem 0.12rem; color: #9B9B9B; } .totalRedEnvelopes li .timeInfo .left{ display: flex; align-items: center; } .totalRedEnvelopes li .timeInfo .left img{ width: 0.12rem; height: 0.12rem; margin-left: 0.03rem; vertical-align: sub; } .totalRedEnvelopes .dismantling .timeInfo .right span,.totalRedEnvelopes .startDismantling .timeInfo .right span{ display: inline-block; background: #FD4B29; width: 0.16rem; height: 0.16rem; border-radius: 0.04rem; font-size: 0.12rem; line-height: 0.17rem; color: #FFF48D; text-align: center; margin: 0 0.02rem; } .totalRedEnvelopes .novice .redEnvelopesItem{ background: url("https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/H5-liedou/newRedEnvelopes/newRed.png") no-repeat; background-size:100%; } .totalRedEnvelopes .invalid .redEnvelopesItem{ background: url(../img/redEvenlopesBg03.png) no-repeat; background-size:100%; } /* 红包账单 */ .account{ display: none; } .account .toBePresent .balances{ width: 100%; height: 0.94rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background:linear-gradient(248deg,rgba(250,42,55,1) 0%,rgba(252,113,35,1) 100%); color: #fff; font-size: 0.16rem; line-height: 0.22rem; position: relative; } .account .toBePresent .balances .toBePresentRule{ position: absolute; bottom: 0.1rem; right: 0.2rem; font-size: 0.12rem; color: #fff; line-height: 0.2rem; } .account .toBePresent .balances .balances_info{ margin-left: -0.32rem; } .account .toBePresent .balances span{ padding-left: 0.07rem; font-size: 0.48rem; line-height: 0.67rem; } .account .toBePresent .common_demolition{ width: 100%; height: 0.35rem; color: #999999; font-size: 0.12rem; line-height: 0.35rem; padding: 0 0.15rem; box-sizing: border-box; } .account .accountList li{ display: flex; align-items: center; justify-content: space-between; padding: 0 0.15rem; box-sizing: border-box; width: 100%; height: 0.8rem; border-bottom: 0.01rem solid #E5E5E5; background: #ffffff; } .account .accountList li .left{ display: flex; align-items: center; } .account .accountList li .left img{ width: 0.42rem; height: 0.42rem; border-radius: 50%; margin-right: 0.13rem; } .account .accountList li .left .leftInfo p{ color: #353535; font-size: 0.16rem; line-height: 0.22rem; padding-bottom: 0.04rem; } .account .accountList li .left .leftInfo span{ font-size: 0.12rem; line-height: 0.17rem; color: #999999; } .account .accountList li .right{ color: #343434; font-size: 0.18rem; line-height: 0.25rem; } .account .accountList li .rightActive{ color: #FA2C37; } /* 奖励订单 */ .awardOrder{ display: none; padding-top: 0.55rem; width: 100%; } .awardOrder ul{ background: #ffffff; } .awardOrder li { width: 100%; height: 1.1rem; padding: 0 0.1rem; display: flex; align-items: center; border-bottom:0.01rem solid #f4f4f4; box-sizing: border-box; } .awardOrder li img{ width: 0.9rem; height: 0.9rem; margin-right: 0.09rem; } .awardOrder li .orderInfo p{ width: 2.56rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #333333; font-size: 0.15rem; line-height: 0.21rem; } .awardOrder li .orderInfo .time{ margin-top: 0.02rem; margin-bottom: 0.02rem; font-size: 0.1rem; line-height: 0.15rem; color: #999999; } .awardOrder li .orderInfo .time span{ display: block; } .awardOrder li .orderInfo .time span:nth-of-type(1),.awardOrder li .orderInfo .priceInfo span:nth-of-type(1){ display: inline-block; width: 1.43rem; } .awardOrder li .orderInfo .priceInfo { font-size: 0.12rem; line-height: 0.17rem; } .awardOrder li .orderInfo .priceInfo .payment_amount{ color: #4A4A4A; } .awardOrder li .orderInfo .priceInfo .reward_amount{ color: #FA2C36; } .error { text-align: center; display: none; position: absolute; top: 1.57rem; left: 0; right: 0; } .error img { display: block; width: .65rem; height: .72rem; margin: auto; } .error span { margin: auto; margin-top: .23rem; line-height: .2rem; display: block; color: #858383; text-align: center; font-size: .14rem; /* width: 2.13rem; */ } .error .a { margin-top: .29rem; display: inline-block; width: 1.58rem; height: .35rem; line-height: .35rem; text-align: center; font-size: .15rem; background: #FA2C37; color: #fff; border-radius: .18rem; } .error .a img { width: .08rem; height: .08rem; vertical-align: middle; display: inline-block; margin-left: .02rem; } .account .rule,.awardOrder .rule{ font-size: 0.14rem; text-align: center; color: #999999; padding: 0.2rem 0; } /* 新人红包弹窗 */ .new_people_mask{ width: 100%; height: 100vh; position: fixed; left: 0; top: 0; background: rgba(0,0,0,0.5); overflow: hidden; display: none; z-index: 1; } .new_people_mask .new_people_con{ width: 160%; height: 7rem; background: url(../img/new_people_bg.png) no-repeat; background-size:100%; margin-left: -27%; padding-right: 0.3rem; box-sizing: border-box; margin-top: 0.2rem; } .new_people_mask .new_people_con .price{ width: 1.47rem; height: 0.54rem; display: flex; align-items: flex-start; justify-content: center; margin: auto; padding-top: 1.8rem; /* box-sizing: border-box; */ } .new_people_mask .new_people_con .price img{ height: 0.54rem; margin-left: 0.25rem; } .new_people_mask .new_people_con .price span{ color: #FD4E3C; font-size: 0.35rem; line-height: 0.28rem; margin-right: -0.5rem; margin-top: -0.04rem; } .new_people_mask .new_people_con p{ font-size: 0.13rem; line-height: 0.18rem; color: #EA2A2F; text-align: center; margin-top: 0.1rem; } .new_people_mask .new_people_con button{ width: 1.25rem; height: 0.28rem; background: #FAEA44; border-radius: 0.14rem; color: #FA4F4A; font-size: 0.14rem; line-height: 0.28rem; border: none; display: block; margin: auto; margin-top: 0.72rem; } .beOverdue { position: relative; justify-content: center; } .pict { width: .79rem; height: .79rem; border-radius: 50%; position: absolute; left: .13rem; top: .14rem; } .newUser { box-sizing: border-box; background: url(https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/H5-liedou/newRedEnvelopes/newRed.png) no-repeat; border-radius: .11rem; background-size: 100%; height: 1.16rem; padding-left: 1.04rem; margin: auto; margin-top: 0.15rem; width: 3.45rem; } .newUser .redEnvelopesItemOne { display: flex; align-items: center; justify-content: space-between; padding-top: 0.24rem; } .newUser .redEnvelopesItemOne p { font-size: 0.17rem; line-height: 0.24rem; color: #ffffff; } .newUser .redEnvelopesItemOne span { font-size: 0.23rem; line-height: 0.32rem; color: #FFF48D; padding-right: 0.2rem; } .newUser .redEnvelopesItemTwo { color: #FFFBFB; font-size: 0.12rem; line-height: 0.17rem; display: flex; align-items: center; justify-content: space-between; margin-top: 0.06rem; } .newUser .redEnvelopesItemTwo p { color: #FFF48D; } .newUser .redEnvelopesItemTwo div { width: 0.54rem; height: 0.16rem; line-height: 0.16rem; border: 0.01rem solid #FFF48D; color: #FFF48D; border-radius: 0.04rem; font-size: 0.11rem; text-align: center; margin-right: 0.13rem; } .newUser .redEnvelopesItemTwo .doing { background: #FFF48D; color: #E81A0F; } .mask { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 2; background: rgba(0,0,0,.6); display: none; } .money,.newer { width: 3.11rem; height: 2.26rem; background: #fff; border-radius: .11rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3; text-align: center; display: none; } .main { display: flex; justify-content: space-around; } h6 { color: #333; font-size: .15rem; margin-top: .25rem; margin-bottom: .28rem; text-align: center; } .text { font-size: .13rem; color: #9C9C9C; margin-top: .24rem; display: block; } .active { color: #333; } .money .active .squera { background: #FF6434; border: .02rem solid #FFD0C0; } .squera { display: inline-block; width: .09rem; height: .09rem; background: #E3E3E3; border-radius: 50%; border: .02rem solid #fff; } .step { min-width: .53rem; } .step-two .squera { position: relative; } .money .step-two .squera::before { content: ""; width: .82rem; height: .01rem; background: #E5E5E5; position: absolute; left: 50%; top: 50%; margin-left: .1rem; transform: translate(0,-50%); } .money .step-two .squera::after { content: ""; width: .82rem; height: .01rem; background: #E5E5E5; position: absolute; right: 50%; top: 50%; margin-right: .1rem; transform: translate(0,-50%); } button { width: 2.7rem; height: .45rem; border-radius: .06rem; background: linear-gradient(90deg,#FF6531,#ED1702); border: 0; font-size: .16rem; color: #fff; margin-top: .35rem; } .exit { width: .26rem; height: .37rem; position: absolute; right: .2rem; top: -.37rem; } .exit .img { width: .26rem; height: .26rem; background-image: url("../img/exit.png"); background-size: 100% 100%; } .exit span { width: .01rem; height: .11rem; display: block; background: #fff; margin: auto; } .newer .squera { width: .18rem; height: .18rem; line-height: .18rem; border: .03rem solid #fff; background: #E3E3E3; font-size: .1rem; color: #fff; } .newer .squera.active { background: #FF6434; border: .03rem solid #FFD0C0; } .two { position: relative; } .before { width: .62rem; height: .01rem; background: #E5E5E5; position: absolute; left: 50%; top: 50%; margin-left: .2rem; transform: translate(0,-50%); } .after { width: .62rem; height: .01rem; background: #E5E5E5; position: absolute; right: 50%; top: 50%; margin-right: .2rem; transform: translate(0,-50%); } .noLogin { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-color: #da0014; z-index: 100; } .speical { width: 100%; height: 110vh; position: absolute; top: 0; left: 0; background-color: #fff; z-index: 100; display: none; } .back { width: 100%; } .login { width: 2.02rem; position: absolute; top: 3.2rem; left: 50%; transform: translate(-50%,0); } .otherLink { width: 3.415rem; height: 1.38rem; position: absolute; left: 50%; top: 4.1rem; transform: translate(-50%,0); background-image: url("../img/guide.png"); background-size: 100% 100%; } .h6 { color: #333; line-height: .21rem; font-size: .15rem; margin-top: .15rem; margin-bottom: .12rem; text-align: center; } .imgList { width: 3.2rem; height: 2.28rem; border-radius: .13rem; background: #F4F4F4; margin: auto; text-align: center; padding: .04rem 0; box-sizing: border-box; } .firstGrade,.secondGrade { display: flex; align-items: center; justify-content: space-between; width: 3.1rem; height: 1.05rem; padding-left: 0.94rem; padding-right: .2rem; margin: auto; margin-bottom: .1rem; border-radius: .13rem; box-sizing: border-box; background-image: url("../img/other_1.png"); background-size: 100%; text-align: left; } .imgList .secondGrade { background-image: url("https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/H5-liedou/newRedEnvelopes/newRed.png"); } .rightText { font-size: 0.23rem; line-height: 0.32rem; color: #FFF48D; } .imgList p { font-size: 0.17rem; line-height: 0.24rem; color: #ffffff; } .imgList span { color: #FFF48D; font-size: 0.12rem; line-height: 0.17rem; } .noLogin { display: none; } .noLoginList { width: 3.2rem; height: 1.59rem; background: #FA4325; border-radius: .13rem; margin: auto; margin-top: .15rem; border: .01rem solid #fff; overflow: hidden; } .noLoginList .h6 { margin-bottom: .06rem; } #swipering { height: 1.2rem; overflow: hidden; } .swiper-wrapper { display: inline-block; } .info { display: flex; align-items: center; padding: 0 .09rem; box-sizing: border-box; height: auto; margin-bottom: .09rem; } .avatar { width: .31rem; height: .31rem; border-radius: 50%; } .nick,.descr,.much { text-align: center; flex: 1; font-size: .14rem; color: #fff; } .nick { padding-left: .08rem; text-align: left; } .much { text-align: right; flex: 1.5; } .much span { color: #FFF47B; font-size: .16rem; font-weight: bold; } .noLoginList .h6 { font-size: .15rem; color: #fff; margin-top: .13rem; } .button { width: 3.23rem; height: .41rem; background: #FF0000; border-radius: .21rem; margin: auto; margin-top: .21rem; line-height: .41rem; text-align: center; color: #fff; margin-bottom: .2rem; }