Files
peko-h5/view/peko/activity/2023-christmas/css/index.css
2023-12-20 18:19:13 +08:00

2426 lines
46 KiB
CSS

@charset "UTF-8";
html,
body {
width: 100%;
background: #3D1919;
}
.rabbit {
z-index: 999;
}
.back {
position: fixed;
top: 0.93333rem;
left: 0.45333rem;
z-index: 99;
width: 0.82667rem;
height: 0.82667rem;
}
.back img {
width: 100%;
height: 100%;
}
.back p {
color: #fff;
font-size: 0.42667rem;
position: absolute;
width: 9rem;
left: 0;
top: 0;
height: 100%;
text-align: center;
line-height: 0.82667rem;
}
.layui-m-layershade {
background-color: rgba(0, 0, 0, 0.4) !important;
}
.header {
width: 10rem;
height: 14.28rem;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0;
position: relative;
}
.header .rule_incon {
width: 0.96rem;
height: 2.6rem;
position: absolute;
top: 6.64rem;
right: 0.10667rem;
}
.giftBox {
width: 9.36rem;
height: 7.70667rem;
display: block;
margin: -4.3rem auto 0;
position: relative;
}
.tab {
width: 9.33333rem;
height: 1.33333rem;
margin: 0.12rem auto 0.02667rem;
background: url(../images/tab.png) no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: space-between;
position: relative;
}
.tab div {
width: 3.37333rem;
height: 1.38667rem;
}
.tab .act1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
}
.tab .act2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
}
.tab .act3 {
background: url(../images/tab3.png) no-repeat;
background-size: 100% 100%;
}
.page1 {
width: 10rem;
height: 35.74667rem;
background: url(../images/pageBg1.png) no-repeat;
background-size: 100% 100%;
margin: -19.2rem auto 0rem;
overflow: hidden;
}
.page1 .content {
width: 9.68rem;
height: 15.65333rem;
margin: 19.13rem auto 0;
background: url(../images/pageContent1.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.page1 .content .envelopeTab {
width: 8.37333rem;
height: 2.10667rem;
margin: 1.1rem auto 0;
display: flex;
justify-content: space-between;
}
.page1 .content .envelopeTab .tab {
width: 1.46667rem;
height: 1.73333rem;
}
.page1 .content .envelopeTab .tab1 {
background: url(../images/envelopeTab1.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .envelopeTab .tab2 {
background: url(../images/envelopeTab2.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .envelopeTab .tab3 {
background: url(../images/envelopeTab3.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .envelopeTab .act1 {
background: url(../images/envelopeTabAct1.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .envelopeTab .act2 {
background: url(../images/envelopeTabAct2.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .envelopeTab .act3 {
background: url(../images/envelopeTabAct3.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .envelopeBox {
width: 9.01333rem;
height: 11.8rem;
overflow-y: scroll;
margin: 0.5rem auto 0;
}
.page1 .content .envelopeBox .envelope {
width: 9.01333rem;
height: 9.24rem;
margin: 0 auto 0rem;
position: relative;
}
.page1 .content .envelopeBox .envelope .to {
width: 5.33333rem;
height: 1.05333rem;
line-height: 1.05333rem;
font-size: 0.34667rem;
color: #333333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 0.86667rem;
top: 0.84rem;
font-weight: 500;
}
.page1 .content .envelopeBox .envelope .to span {
vertical-align: middle;
}
.page1 .content .envelopeBox .envelope .to img {
width: 1.05333rem;
height: 1.05333rem;
margin: 0 0.13333rem;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
background: #EA496D;
}
.page1 .content .envelopeBox .envelope .text {
border: 0;
outline: none;
width: 6.66667rem;
height: 1.5rem;
position: absolute;
top: 2.3rem;
left: 50%;
transform: translateX(-50%);
color: #333333;
font-size: 0.34667rem;
resize: none;
box-sizing: border-box;
padding: 0 0.1rem;
font-style: normal;
font-weight: 500;
background: none;
font-family: Source Han Sans CN;
}
.page1 .content .envelopeBox .envelope .form {
width: 5.33333rem;
height: 1.05333rem;
line-height: 1.05333rem;
font-size: 0.34667rem;
color: #333333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
right: 0.81333rem;
top: 4.17333rem;
font-weight: 500;
text-align: right;
}
.page1 .content .envelopeBox .envelope .form span {
vertical-align: middle;
}
.page1 .content .envelopeBox .envelope .form img {
width: 1.05333rem;
height: 1.05333rem;
margin: 0 0.13333rem;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
background: #EA496D;
}
.page1 .content .envelopeBox .envelope .time {
position: absolute;
top: 5.26667rem;
right: 0.81333rem;
color: #333333;
font-size: 0.24rem;
font-weight: 500;
}
.page1 .content .envelopeBox .c_envelope {
background: url(../images/c_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .envelopeBox .c_envelope .text,
.page1 .content .envelopeBox .c_envelope .form,
.page1 .content .envelopeBox .c_envelope .to,
.page1 .content .envelopeBox .c_envelope .time {
color: #EE642B;
}
.page1 .content .envelopeBox .f_envelope {
background: url(../images/f_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .envelopeBox .f_envelope .text,
.page1 .content .envelopeBox .f_envelope .form,
.page1 .content .envelopeBox .f_envelope .to,
.page1 .content .envelopeBox .f_envelope .time {
color: #EA496D;
}
.page1 .content .envelopeBox .f_envelope .to {
top: 1.4rem;
}
.page1 .content .envelopeBox .f_envelope .text {
top: 2.6rem;
}
.page1 .content .envelopeBox .h_envelope {
background: url(../images/h_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .envelopeBox .h_envelope .text,
.page1 .content .envelopeBox .h_envelope .form,
.page1 .content .envelopeBox .h_envelope .to,
.page1 .content .envelopeBox .h_envelope .time {
color: #333333;
}
.page1 .content .envelopeBox .h_envelope .to {
top: 1.4rem;
}
.page1 .content .envelopeBox .h_envelope .text {
top: 2.6rem;
}
.page1 .content .envelopeBox .l_envelope {
background: url(../images/l_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .envelopeBox .l_envelope .text,
.page1 .content .envelopeBox .l_envelope .form,
.page1 .content .envelopeBox .l_envelope .to,
.page1 .content .envelopeBox .l_envelope .time {
color: #495CEA;
}
.page1 .content .styleBox {
width: 8.88rem;
height: 12.2rem;
margin: 0.3rem auto 0;
}
.page1 .content .styleBox .style1 {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
transform: translateX(7px);
}
.page1 .content .styleBox .style1 .style1Rule_icon {
width: 0.89333rem;
height: 1.16rem;
position: absolute;
right: 0rem;
top: 0rem;
z-index: 2;
}
.page1 .content .styleBox .style1 .felxBox {
width: 8.12rem;
height: 8.66667rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0.34667rem auto 0;
transform: translateX(-2px);
}
.page1 .content .styleBox .style1 .felxBox div {
width: 3.93333rem;
height: 3.73333rem;
position: relative;
margin-bottom: 0.9rem;
box-sizing: border-box;
}
.page1 .content .styleBox .style1 .felxBox div .but {
width: 2.46667rem;
height: 0.49333rem;
text-align: center;
color: #fff;
font-size: 0.33333rem;
font-weight: bold;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -1.66667rem;
border-radius: 0.49333rem;
line-height: 0.42667rem;
border: 0.05333rem solid #fff;
box-sizing: border-box;
}
.page1 .content .styleBox .style1 .felxBox .div1 {
background: url(../images/style1.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .styleBox .style1 .felxBox .div1 .but {
background: #EA794A;
}
.page1 .content .styleBox .style1 .felxBox .div2 {
background: url(../images/style2.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .styleBox .style1 .felxBox .div2 .but {
background: #495CEA;
}
.page1 .content .styleBox .style1 .felxBox .div3 {
background: url(../images/style3.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .styleBox .style1 .felxBox .div3 .but {
background: #EA496D;
}
.page1 .content .styleBox .style1 .felxBox .div4 {
background: url(../images/style4.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .styleBox .style1 .felxBox .div4 .but {
background: #171818;
}
.page1 .content .styleBox .style1 .felxBox .act {
border: 0.05333rem solid #fff;
border-radius: 0.2rem;
box-sizing: border-box;
}
.page1 .content .styleBox .style1 .next1 {
width: 3.33333rem;
height: 1.01333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 9.98667rem;
}
.page1 .content .styleBox .style2 {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.page1 .content .styleBox .style2 .title {
width: 100%;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 0.42667rem;
position: absolute;
top: 0.54667rem;
left: 0;
}
.page1 .content .styleBox .style2 ul {
position: absolute;
width: 100%;
left: 0;
top: 1.5rem;
height: 8rem;
overflow-y: scroll;
}
.page1 .content .styleBox .style2 ul li {
width: 100%;
height: 1.54667rem;
background: #2D0F01;
margin-bottom: 0.10667rem;
}
.page1 .content .styleBox .style2 ul li .tx {
float: left;
display: block;
width: 1.36rem;
height: 1.36rem;
border-radius: 50%;
background: #fff;
margin-top: 0.08rem;
margin-left: 0.42667rem;
margin-right: 0.28rem;
}
.page1 .content .styleBox .style2 ul li .user {
width: 3rem;
float: left;
}
.page1 .content .styleBox .style2 ul li .user p {
width: 100%;
font-size: 0.44rem;
color: #fff;
font-weight: 500;
margin-bottom: 0.18667rem;
white-space: nowrap;
/* 防止换行 */
overflow: hidden;
/* 控制内容溢出部分不可见 */
text-overflow: ellipsis;
/* 添加省略号 */
margin-top: 0.33333rem;
}
.page1 .content .styleBox .style2 ul li .user b {
width: 100%;
font-size: 0.33333rem;
color: #fff;
font-weight: 500;
}
.page1 .content .styleBox .style2 ul li .right {
float: right;
margin-right: 0.53333rem;
margin-top: 0.56rem;
border-radius: 50%;
width: 0.36rem;
height: 0.36rem;
position: relative;
background: #fff;
}
.page1 .content .styleBox .style2 ul li .right .true {
position: absolute;
width: 0.25333rem;
height: 0.21333rem;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
}
.page1 .content .styleBox .style2 ul li .right .trueAct {
display: block;
}
.page1 .content .styleBox .style2 ul .notUser {
width: 100%;
height: 100%;
line-height: 8rem;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 0.32rem;
}
.page1 .content .styleBox .style2 .back2,
.page1 .content .styleBox .style2 .next2 {
position: absolute;
top: 9.98667rem;
width: 3.33333rem;
height: 1.01333rem;
}
.page1 .content .styleBox .style2 .back2 {
left: 0.78667rem;
}
.page1 .content .styleBox .style2 .next2 {
right: 0.78667rem;
}
.page1 .content .styleBox .style3 {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.page1 .content .styleBox .style3 .title {
width: 100%;
text-align: center;
color: #fff;
font-size: 0.42667rem;
font-weight: 500;
position: absolute;
left: 0;
top: 0.33333rem;
}
.page1 .content .styleBox .style3 .envelope {
width: 9.01333rem;
height: 9.24rem;
margin: 1rem auto 0rem;
position: relative;
}
.page1 .content .styleBox .style3 .envelope .to {
width: 5.33333rem;
height: 1.05333rem;
line-height: 1.05333rem;
font-size: 0.34667rem;
color: #333333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 0.86667rem;
top: 0.84rem;
font-weight: 500;
}
.page1 .content .styleBox .style3 .envelope .to span {
vertical-align: middle;
}
.page1 .content .styleBox .style3 .envelope .to img {
width: 1.05333rem;
height: 1.05333rem;
margin: 0 0.13333rem;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
background: #EA496D;
}
.page1 .content .styleBox .style3 .envelope .text {
border: 0;
outline: none;
width: 6.66667rem;
height: 1.7rem;
position: absolute;
top: 2.2rem;
left: 50%;
transform: translateX(-50%);
color: #333333;
font-size: 0.34667rem;
resize: none;
box-sizing: border-box;
padding: 0.1rem;
font-weight: 500;
background: rgba(255, 255, 255, 0.8);
border-radius: 0.13333rem;
font-family: Source Han Sans CN;
}
.page1 .content .styleBox .style3 .envelope .text::placeholder {
color: #9A9A9A;
font-weight: 400;
font-style: normal;
padding: 0 0.1rem;
}
.page1 .content .styleBox .style3 .envelope .textNum {
position: absolute;
color: #000;
font-size: 0.26667rem;
right: 1.13333rem;
top: 4.13333rem;
}
.page1 .content .styleBox .style3 .envelope .form {
width: 5.33333rem;
height: 1.05333rem;
line-height: 1.05333rem;
font-size: 0.34667rem;
color: #333333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
right: 0.81333rem;
top: 4.17333rem;
font-weight: 500;
text-align: right;
}
.page1 .content .styleBox .style3 .envelope .form span {
vertical-align: middle;
}
.page1 .content .styleBox .style3 .envelope .form img {
width: 1.05333rem;
height: 1.05333rem;
margin: 0 0.13333rem;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
background: #EA496D;
}
.page1 .content .styleBox .style3 .envelope .time {
position: absolute;
top: 5.26667rem;
right: 0.81333rem;
color: #333333;
font-size: 0.24rem;
font-weight: 500;
}
.page1 .content .styleBox .style3 .c_envelope {
background: url(../images/c_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .styleBox .style3 .c_envelope .text,
.page1 .content .styleBox .style3 .c_envelope .form,
.page1 .content .styleBox .style3 .c_envelope .to,
.page1 .content .styleBox .style3 .c_envelope .time,
.page1 .content .styleBox .style3 .c_envelope .textNum {
color: #EE642B;
}
.page1 .content .styleBox .style3 .f_envelope {
background: url(../images/f_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .styleBox .style3 .f_envelope .text,
.page1 .content .styleBox .style3 .f_envelope .form,
.page1 .content .styleBox .style3 .f_envelope .to,
.page1 .content .styleBox .style3 .f_envelope .time {
color: #EA496D;
}
.page1 .content .styleBox .style3 .f_envelope .to {
top: 1.4rem;
}
.page1 .content .styleBox .style3 .f_envelope .text {
top: 2.6rem;
}
.page1 .content .styleBox .style3 .f_envelope .form {
top: 4.4rem;
}
.page1 .content .styleBox .style3 .f_envelope .textNum {
top: 4.4rem;
}
.page1 .content .styleBox .style3 .h_envelope {
background: url(../images/h_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .styleBox .style3 .h_envelope .text,
.page1 .content .styleBox .style3 .h_envelope .form,
.page1 .content .styleBox .style3 .h_envelope .to,
.page1 .content .styleBox .style3 .h_envelope .time {
color: #333333;
}
.page1 .content .styleBox .style3 .h_envelope .to {
top: 1.4rem;
}
.page1 .content .styleBox .style3 .h_envelope .text {
top: 2.6rem;
}
.page1 .content .styleBox .style3 .h_envelope .form {
top: 4.4rem;
}
.page1 .content .styleBox .style3 .h_envelope .textNum {
top: 4.4rem;
}
.page1 .content .styleBox .style3 .l_envelope {
background: url(../images/l_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .styleBox .style3 .l_envelope .text,
.page1 .content .styleBox .style3 .l_envelope .form,
.page1 .content .styleBox .style3 .l_envelope .to,
.page1 .content .styleBox .style3 .l_envelope .time,
.page1 .content .styleBox .style3 .l_envelope .textNum {
color: #495CEA;
}
.page1 .content .styleBox .style3 .back3,
.page1 .content .styleBox .style3 .nowLove {
position: absolute;
top: 10.66667rem;
width: 3.33333rem;
height: 1.01333rem;
}
.page1 .content .styleBox .style3 .back3 {
left: 0.78667rem;
}
.page1 .content .styleBox .style3 .nowLove {
right: 0.78667rem;
}
.page1 .content .myEnvlop {
overflow: hidden;
}
.page1 .content .myEnvlop .myEnvlopTab {
width: 7.06667rem;
height: 1.01333rem;
margin: 0.6rem auto 0;
display: flex;
justify-content: space-between;
}
.page1 .content .myEnvlop .myEnvlopTab .myEnvlopTabs {
width: 3.33333rem;
}
.page1 .content .myEnvlop .myEnvlopTab .tab1 {
background: url(../images/myEnvlopTabs1.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .myEnvlop .myEnvlopTab .tab2 {
background: url(../images/myEnvlopTabs2.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .myEnvlop .myEnvlopTab .act1 {
background: url(../images/myEnvlopTabsAct1.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .myEnvlop .myEnvlopTab .act2 {
background: url(../images/myEnvlopTabsAct2.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .myEnvlop .myEnvelopeBox {
width: 9.01333rem;
height: 10.6rem;
overflow-y: scroll;
margin: 0 auto 0;
}
.page1 .content .myEnvlop .myEnvelopeBox .envelope {
width: 9.01333rem;
height: 9.24rem;
margin: 0 auto 0rem;
position: relative;
}
.page1 .content .myEnvlop .myEnvelopeBox .envelope .to {
width: 5.33333rem;
height: 1.05333rem;
line-height: 1.05333rem;
font-size: 0.34667rem;
color: #333333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 0.86667rem;
top: 0.84rem;
font-weight: 500;
}
.page1 .content .myEnvlop .myEnvelopeBox .envelope .to span {
vertical-align: middle;
}
.page1 .content .myEnvlop .myEnvelopeBox .envelope .to img {
width: 1.05333rem;
height: 1.05333rem;
margin: 0 0.13333rem;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
background: #EA496D;
}
.page1 .content .myEnvlop .myEnvelopeBox .envelope .text {
border: 0;
outline: none;
width: 6.66667rem;
height: 1.7rem;
position: absolute;
top: 2.2rem;
left: 50%;
transform: translateX(-50%);
color: #333333;
font-size: 0.34667rem;
resize: none;
box-sizing: border-box;
padding: 0 0.1rem;
font-weight: 500;
background: none;
font-family: Source Han Sans CN;
}
.page1 .content .myEnvlop .myEnvelopeBox .envelope .form {
width: 5.33333rem;
height: 1.05333rem;
line-height: 1.05333rem;
font-size: 0.34667rem;
color: #333333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
right: 0.81333rem;
top: 4.17333rem;
font-weight: 500;
text-align: right;
}
.page1 .content .myEnvlop .myEnvelopeBox .envelope .form span {
vertical-align: middle;
}
.page1 .content .myEnvlop .myEnvelopeBox .envelope .form img {
width: 1.05333rem;
height: 1.05333rem;
margin: 0 0.13333rem;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
background: #EA496D;
}
.page1 .content .myEnvlop .myEnvelopeBox .envelope .time {
position: absolute;
top: 5.26667rem;
right: 0.81333rem;
color: #333333;
font-size: 0.24rem;
font-weight: 500;
}
.page1 .content .myEnvlop .myEnvelopeBox .c_envelope {
background: url(../images/c_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .myEnvlop .myEnvelopeBox .c_envelope .text,
.page1 .content .myEnvlop .myEnvelopeBox .c_envelope .form,
.page1 .content .myEnvlop .myEnvelopeBox .c_envelope .to,
.page1 .content .myEnvlop .myEnvelopeBox .c_envelope .time {
color: #EE642B;
}
.page1 .content .myEnvlop .myEnvelopeBox .f_envelope {
background: url(../images/f_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .myEnvlop .myEnvelopeBox .f_envelope .text,
.page1 .content .myEnvlop .myEnvelopeBox .f_envelope .form,
.page1 .content .myEnvlop .myEnvelopeBox .f_envelope .to,
.page1 .content .myEnvlop .myEnvelopeBox .f_envelope .time {
color: #EA496D;
}
.page1 .content .myEnvlop .myEnvelopeBox .f_envelope .to {
top: 1.4rem;
}
.page1 .content .myEnvlop .myEnvelopeBox .f_envelope .text {
top: 2.6rem;
}
.page1 .content .myEnvlop .myEnvelopeBox .h_envelope {
background: url(../images/h_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .myEnvlop .myEnvelopeBox .h_envelope .text,
.page1 .content .myEnvlop .myEnvelopeBox .h_envelope .form,
.page1 .content .myEnvlop .myEnvelopeBox .h_envelope .to,
.page1 .content .myEnvlop .myEnvelopeBox .h_envelope .time {
color: #333333;
}
.page1 .content .myEnvlop .myEnvelopeBox .h_envelope .to {
top: 1.4rem;
}
.page1 .content .myEnvlop .myEnvelopeBox .h_envelope .text {
top: 2.6rem;
}
.page1 .content .myEnvlop .myEnvelopeBox .l_envelope {
background: url(../images/l_envelope.png) no-repeat;
background-size: 100% 100%;
}
.page1 .content .myEnvlop .myEnvelopeBox .l_envelope .text,
.page1 .content .myEnvlop .myEnvelopeBox .l_envelope .form,
.page1 .content .myEnvlop .myEnvelopeBox .l_envelope .to,
.page1 .content .myEnvlop .myEnvelopeBox .l_envelope .time {
color: #495CEA;
}
.page2 {
display: none;
width: 10rem;
margin: 0rem auto 0rem;
overflow: hidden;
}
.page2 .heartbeat {
width: 9.36rem;
height: 7.76rem;
background: url(../images/heartbeatGift.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0;
position: relative;
}
.page2 .heartbeat img {
width: 2.88rem;
height: 1rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 5.6rem;
display: none;
}
.page2 .heartbeat .heartbeatNot {
display: block;
}
.page2 .heartbeatTab {
width: 6.70667rem;
height: 1.4rem;
margin: 0 auto 0;
display: flex;
justify-content: space-between;
}
.page2 .heartbeatTab div {
width: 3.14667rem;
height: 100%;
}
.page2 .heartbeatTab .tab1 {
background: url(../images/heartbeatTab1.png) no-repeat;
background-size: 100% 100%;
}
.page2 .heartbeatTab .tab2 {
background: url(../images/heartbeatTab2.png) no-repeat;
background-size: 100% 100%;
}
.page2 .heartbeatTab .act1 {
background: url(../images/heartbeatTabAct1.png) no-repeat;
background-size: 100% 100%;
}
.page2 .heartbeatTab .act2 {
background: url(../images/heartbeatTabAct2.png) no-repeat;
background-size: 100% 100%;
}
.page2 .heartbeat1 {
width: 9.36rem;
height: 14.06667rem;
margin: 0 auto 0.21333rem;
position: relative;
background: url(../images/heartbeat1.png) no-repeat;
background-size: 100% 100%;
}
.page2 .heartbeat1 .butImg {
width: 1.26667rem;
height: 1.08rem;
position: absolute;
z-index: 2;
}
.page2 .heartbeat1 .left1 {
top: 1.78667rem;
left: 0.30667rem;
}
.page2 .heartbeat1 .right1 {
top: 1.78667rem;
right: 0.21333rem;
}
.page2 .heartbeat1 .left2 {
top: 8.36rem;
left: 0.36rem;
}
.page2 .heartbeat1 .right2 {
top: 8.36rem;
right: 0.36rem;
}
.page2 .heartbeat1 .tsleft {
width: 1.88rem;
height: 1.81333rem;
position: absolute;
left: 1.84rem;
top: 1.34667rem;
z-index: 2;
border-radius: 50%;
}
.page2 .heartbeat1 .tsright {
width: 1.8rem;
height: 1.88rem;
position: absolute;
right: 1.97333rem;
top: 1.34667rem;
z-index: 2;
border-radius: 50%;
}
.page2 .heartbeat1 .textTop {
width: 100%;
left: 0;
top: 3.28rem;
position: absolute;
color: #FFFFFF;
font-size: 0.32rem;
font-weight: bold;
text-align: center;
}
.page2 .heartbeat1 .titleB {
width: 100%;
left: 0;
top: 5.93333rem;
position: absolute;
color: #FFFFFF;
font-size: 0.34667rem;
font-weight: bold;
text-align: center;
}
.page2 .heartbeat1 .heartbeatGift {
width: 7.52rem;
height: 4.4rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 6.54667rem;
}
.page2 .heartbeat1 .img {
width: 2.88rem;
height: 1rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 11.25333rem;
display: none;
}
.page2 .heartbeat1 .heartbeatBNot {
display: block;
}
.page2 .heartbeat1 .txLeft {
width: 1.4rem;
height: 1.4rem;
position: absolute;
top: 1.61333rem;
left: 2.09333rem;
border-radius: 50%;
}
.page2 .heartbeat1 .txRight {
width: 1.4rem;
height: 1.4rem;
position: absolute;
top: 1.61333rem;
right: 2.22667rem;
border-radius: 50%;
}
.page2 .heartbeat1 .numPage {
width: 100%;
left: 0;
top: 12.4rem;
position: absolute;
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: bold;
text-align: center;
}
.page2 .heartbeat2 {
display: none;
width: 9.64rem;
height: 25.50667rem;
margin: 0 auto 0rem;
position: relative;
background: url(../images/heartbeat2.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.page2 .heartbeat2 .no1 {
width: 4.62667rem;
height: 4.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.2rem;
background: url(../images/heartbeatno1.png) no-repeat;
background-size: 100% 100%;
}
.page2 .heartbeat2 .no1 .ts {
width: 1.86667rem;
height: 1.86667rem;
position: absolute;
top: 0.64rem;
z-index: 2;
}
.page2 .heartbeat2 .no1 .tsLeft {
left: 0.42667rem;
}
.page2 .heartbeat2 .no1 .tsRight {
right: 0.56rem;
}
.page2 .heartbeat2 .no1 .txLeft,
.page2 .heartbeat2 .no1 .txRight {
border-radius: 50%;
height: 1.8rem;
width: 1.8rem;
position: absolute;
top: 0.66667rem;
}
.page2 .heartbeat2 .no1 .txLeft {
left: 0.49333rem;
}
.page2 .heartbeat2 .no1 .txRight {
right: 0.61333rem;
}
.page2 .heartbeat2 .no1 .leftName,
.page2 .heartbeat2 .no1 .rightName {
width: 1.6rem;
text-align: center;
color: #FFFFFF;
position: absolute;
top: 2.6rem;
font-size: 0.24rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .heartbeat2 .no1 .leftName {
left: 0.6rem;
}
.page2 .heartbeat2 .no1 .rightName {
right: 0.6rem;
}
.page2 .heartbeat2 .no1 p {
width: 100%;
text-align: center;
color: #fff;
font-size: 0.22667rem;
font-weight: 500;
text-align: center;
position: absolute;
left: -0.06667rem;
top: 3.06667rem;
}
.page2 .heartbeat2 .no1 span {
width: 100%;
text-align: center;
color: #fff;
font-size: 0.22667rem;
font-weight: 500;
text-align: center;
position: absolute;
left: -0.06667rem;
top: 3.36rem;
}
.page2 .heartbeat2 .no2 {
width: 3.28rem;
height: 2.92rem;
position: absolute;
left: 1.25333rem;
top: 7.94667rem;
background: url(../images/heartbeatno2.png) no-repeat;
background-size: 100% 100%;
}
.page2 .heartbeat2 .no2 .ts {
width: 1.30667rem;
height: 1.30667rem;
position: absolute;
top: 0.45333rem;
z-index: 2;
}
.page2 .heartbeat2 .no2 .tsLeft {
left: 0.33333rem;
}
.page2 .heartbeat2 .no2 .tsRight {
right: 0.4rem;
}
.page2 .heartbeat2 .no2 .txLeft,
.page2 .heartbeat2 .no2 .txRight {
border-radius: 50%;
height: 1.2rem;
width: 1.2rem;
position: absolute;
top: 0.50667rem;
}
.page2 .heartbeat2 .no2 .txLeft {
left: 0.4rem;
}
.page2 .heartbeat2 .no2 .txRight {
right: 0.46667rem;
}
.page2 .heartbeat2 .no2 .leftName,
.page2 .heartbeat2 .no2 .rightName {
width: 1.33333rem;
text-align: center;
color: #FFFFFF;
position: absolute;
top: 1.8rem;
font-size: 0.24rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .heartbeat2 .no2 .leftName {
left: 0.4rem;
}
.page2 .heartbeat2 .no2 .rightName {
right: 0.4rem;
}
.page2 .heartbeat2 .no2 p {
width: 100%;
text-align: center;
color: #fff;
font-size: 0.22667rem;
font-weight: 500;
text-align: center;
position: absolute;
left: -0.06667rem;
top: 2.13333rem;
}
.page2 .heartbeat2 .no2 span {
width: 100%;
text-align: center;
color: #fff;
font-size: 0.22667rem;
font-weight: 500;
text-align: center;
position: absolute;
left: -0.06667rem;
top: 2.4rem;
}
.page2 .heartbeat2 .no3 {
width: 3.28rem;
height: 2.92rem;
position: absolute;
right: 1.25333rem;
top: 7.94667rem;
background: url(../images/heartbeatno3.png) no-repeat;
background-size: 100% 100%;
}
.page2 .heartbeat2 .no3 .ts {
width: 1.30667rem;
height: 1.30667rem;
position: absolute;
top: 0.45333rem;
z-index: 2;
}
.page2 .heartbeat2 .no3 .tsLeft {
left: 0.33333rem;
}
.page2 .heartbeat2 .no3 .tsRight {
right: 0.4rem;
}
.page2 .heartbeat2 .no3 .txLeft,
.page2 .heartbeat2 .no3 .txRight {
border-radius: 50%;
height: 1.2rem;
width: 1.2rem;
position: absolute;
top: 0.50667rem;
}
.page2 .heartbeat2 .no3 .txLeft {
left: 0.4rem;
}
.page2 .heartbeat2 .no3 .txRight {
right: 0.46667rem;
}
.page2 .heartbeat2 .no3 .leftName,
.page2 .heartbeat2 .no3 .rightName {
width: 1.33333rem;
text-align: center;
color: #FFFFFF;
position: absolute;
top: 1.8rem;
font-size: 0.24rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .heartbeat2 .no3 .leftName {
left: 0.4rem;
}
.page2 .heartbeat2 .no3 .rightName {
right: 0.4rem;
}
.page2 .heartbeat2 .no3 p {
width: 100%;
text-align: center;
color: #fff;
font-size: 0.22667rem;
font-weight: 500;
text-align: center;
position: absolute;
left: -0.06667rem;
top: 2.13333rem;
}
.page2 .heartbeat2 .no3 span {
width: 100%;
text-align: center;
color: #fff;
font-size: 0.22667rem;
font-weight: 500;
text-align: center;
position: absolute;
left: -0.06667rem;
top: 2.4rem;
}
.page2 .heartbeat2 ul {
width: 7.68rem;
margin: 11.65333rem auto 0;
height: 11.3rem;
overflow-y: scroll;
}
.page2 .heartbeat2 ul li {
width: 100%;
height: 1.52rem;
background: url(../images/heartbeatLiBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin-bottom: 0.13333rem;
box-sizing: border-box;
padding: 0 0.22667rem;
box-sizing: border-box;
}
.page2 .heartbeat2 ul li .num {
width: 0.44rem;
height: 100%;
line-height: 1.52rem;
color: #9F590A;
font-size: 0.4rem;
font-weight: 500;
float: left;
margin-right: 2.6rem;
}
.page2 .heartbeat2 ul li .ts {
position: absolute;
width: 2.36rem;
height: 1.13333rem;
left: 0.73333rem;
top: 0.13333rem;
z-index: 2;
}
.page2 .heartbeat2 ul li .lefttx {
width: 0.77333rem;
height: 0.77333rem;
position: absolute;
top: 0.34rem;
left: 1.15rem;
border-radius: 50%;
}
.page2 .heartbeat2 ul li .righttx {
width: 0.77333rem;
height: 0.77333rem;
position: absolute;
top: 0.34rem;
left: 1.95rem;
border-radius: 50%;
}
.page2 .heartbeat2 ul li .box {
width: 2.13333rem;
float: left;
}
.page2 .heartbeat2 ul li .box p {
width: 100%;
color: #9F590A;
font-size: 0.28rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .heartbeat2 ul li .box .p {
margin-top: 0.46667rem;
margin-bottom: 0.09333rem;
}
.page2 .heartbeat2 ul li .score {
float: right;
height: 100%;
line-height: 1.52rem;
color: #9F590A;
font-size: 0.28rem;
font-weight: 500;
}
.page2 .heartbeat2 .my {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 0;
background: url(../images/heartbeatMyBg.png) no-repeat bottom;
background-size: 10.58667rem 2.33333rem;
width: 10.58667rem;
height: 3rem;
z-index: 3;
transition: all .3s;
}
.page2 .heartbeat2 .my .icon {
position: absolute;
width: 1.08rem;
height: 1.26667rem;
left: 50%;
transform: translateX(-50%);
top: 0;
transition: all .3s;
}
.page2 .heartbeat2 .my .uls {
width: 100%;
overflow-y: hidden;
height: 1.5rem;
margin-top: 1.1rem;
}
.page2 .heartbeat2 .my .uls .boxs {
width: 100%;
height: 1.6rem;
box-sizing: border-box;
padding: 0rem 0.69333rem 0 0;
position: relative;
}
.page2 .heartbeat2 .my .uls .boxs .ts {
position: absolute;
width: 2.81333rem;
height: 1.34667rem;
left: 1.09333rem;
top: 0rem;
z-index: 2;
}
.page2 .heartbeat2 .my .uls .boxs .lefttx {
width: 0.90667rem;
height: 0.90667rem;
position: absolute;
top: 0.27rem;
left: 1.55rem;
border-radius: 50%;
}
.page2 .heartbeat2 .my .uls .boxs .righttx {
width: 0.90667rem;
height: 0.90667rem;
position: absolute;
top: 0.27rem;
left: 2.55rem;
border-radius: 50%;
}
.page2 .heartbeat2 .my .uls .boxs .box {
width: 3rem;
float: left;
margin-left: 4.09333rem;
}
.page2 .heartbeat2 .my .uls .boxs .box p {
width: 100%;
color: #fff;
font-size: 0.37333rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .heartbeat2 .my .uls .boxs .box .p {
margin-top: 0.26667rem;
margin-bottom: 0.09333rem;
}
.page2 .heartbeat2 .my .uls .boxs .score {
float: right;
text-align: right;
}
.page2 .heartbeat2 .my .uls .boxs .score p {
width: 100%;
color: #fff;
font-size: 0.37333rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .heartbeat2 .my .uls .boxs .score .p {
margin-top: 0.26667rem;
margin-bottom: 0.09333rem;
}
.page2 .heartbeat2 .my .uls .notUser {
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-size: 0.37333rem;
line-height: 1.5rem;
}
.page3 {
width: 9.36rem;
height: 29.69333rem;
margin: 0 auto 0;
background: url(../images/page3.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
display: none;
}
.page3 .listTab {
width: 7.46667rem;
height: 1.61333rem;
margin: 0.44rem auto 0rem;
display: flex;
justify-content: space-between;
}
.page3 .listTab .tab {
width: 3.58667rem;
height: 1.61333rem;
}
.page3 .listTab .tab1 {
background: url(../images/listTab1.png) no-repeat;
background-size: 100% 100%;
}
.page3 .listTab .tab2 {
background: url(../images/listTab2.png) no-repeat;
background-size: 100% 100%;
}
.page3 .listTab .act1 {
background: url(../images/listTabAct1.png) no-repeat;
background-size: 100% 100%;
}
.page3 .listTab .act2 {
background: url(../images/listTabAct2.png) no-repeat;
background-size: 100% 100%;
}
.page3 .dayTab {
width: 4.8rem;
height: 0.94667rem;
margin: 0rem auto 0rem;
display: flex;
justify-content: space-between;
}
.page3 .dayTab .tab {
width: 2.22667rem;
height: 0.94667rem;
}
.page3 .dayTab .tab1 {
background: url(../images/dayTab1.png) no-repeat;
background-size: 100% 100%;
}
.page3 .dayTab .tab2 {
background: url(../images/dayTab2.png) no-repeat;
background-size: 100% 100%;
}
.page3 .dayTab .act1 {
background: url(../images/dayTabAct1.png) no-repeat;
background-size: 100% 100%;
}
.page3 .dayTab .act2 {
background: url(../images/dayTabAct2.png) no-repeat;
background-size: 100% 100%;
}
.page3 .text {
width: 7.22667rem;
margin: 0.13333rem auto 0.32rem;
color: #fff;
font-size: 0.34667rem;
font-weight: 500;
text-align: center;
}
.page3 .text p {
margin-bottom: 0.17333rem;
}
.page3 .timeTab {
width: 100%;
position: absolute;
height: 0.48rem;
left: 0;
top: 4.34667rem;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.73333rem;
}
.page3 .timeTab div {
width: 1.10667rem;
height: 0.48rem;
line-height: 0.48rem;
text-align: center;
background: url(../images/timeTab.png) no-repeat;
background-size: 100% 100%;
color: #322F2F;
font-size: 0.29333rem;
}
.page3 .timeTab .act {
background: url(../images/timeTabAct.png) no-repeat;
background-size: 100% 100%;
color: #461C1C;
}
.page3 .ListBox {
width: 8.57333rem;
height: 24.53333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 4.98667rem;
background: url(../images/listBg.png) no-repeat;
background-size: 100% 100%;
}
.page3 .ListBox .rule_icon {
width: 0.89333rem;
height: 1.16rem;
position: absolute;
right: 0.16rem;
top: 0.08rem;
z-index: 2;
}
.page3 .ListBox .top3 {
width: 7.57333rem;
height: 5rem;
background: url(../images/top3Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.6rem;
}
.page3 .ListBox .top3 .no1 {
width: 1.42667rem;
height: 1.42667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1rem;
}
.page3 .ListBox .top3 .no1 .ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0.5rem;
z-index: 2;
}
.page3 .ListBox .top3 .no1 .tx {
width: 1.06667rem;
height: 1.06667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.6rem;
border-radius: 50%;
}
.page3 .ListBox .top3 .no1 p {
width: 150%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #3F0E0E;
font-size: 0.26667rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.9rem;
font-weight: bold;
}
.page3 .ListBox .top3 .no1 span {
width: 150%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #3F0E0E;
font-size: 0.21333rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.25rem;
font-weight: bold;
}
.page3 .ListBox .top3 .no2 {
width: 1.42667rem;
height: 1.42667rem;
position: absolute;
left: 0.52rem;
top: 1.35rem;
}
.page3 .ListBox .top3 .no2 .ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0.5rem;
z-index: 2;
}
.page3 .ListBox .top3 .no2 .tx {
width: 1.06667rem;
height: 1.06667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.6rem;
border-radius: 50%;
}
.page3 .ListBox .top3 .no2 p {
width: 150%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #3F0E0E;
font-size: 0.26667rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.9rem;
font-weight: bold;
}
.page3 .ListBox .top3 .no2 span {
width: 150%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #3F0E0E;
font-size: 0.21333rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.25rem;
font-weight: bold;
}
.page3 .ListBox .top3 .no3 {
width: 1.42667rem;
height: 1.42667rem;
position: absolute;
right: 0.52rem;
top: 1.35rem;
}
.page3 .ListBox .top3 .no3 .ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0.5rem;
z-index: 2;
}
.page3 .ListBox .top3 .no3 .tx {
width: 1.06667rem;
height: 1.06667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.6rem;
border-radius: 50%;
}
.page3 .ListBox .top3 .no3 p {
width: 150%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #3F0E0E;
font-size: 0.26667rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.9rem;
font-weight: bold;
}
.page3 .ListBox .top3 .no3 span {
width: 150%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #3F0E0E;
font-size: 0.21333rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.25rem;
font-weight: bold;
}
.page3 .ListBox ul {
width: 8.58667rem;
height: 17.1rem;
position: absolute;
top: 5.64rem;
left: 50%;
transform: translateX(-50%);
overflow-y: scroll;
}
.page3 .ListBox ul li {
width: 100%;
height: 1.76rem;
position: relative;
margin-bottom: 0.13333rem;
background: url(../images/listLiBg.png) no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 0 0.33333rem;
}
.page3 .ListBox ul li .num {
width: 0.58667rem;
height: 0.73333rem;
line-height: 0.73333rem;
text-align: center;
color: #FFFFFF;
font-size: 0.26667rem;
font-weight: 400;
background: url(../images/numBg.png) no-repeat;
background-size: 100% 100%;
float: left;
margin-top: 0.52rem;
margin-right: 2.14667rem;
}
.page3 .ListBox ul li .ts {
position: absolute;
width: 1.32rem;
height: 1.32rem;
left: 1.30667rem;
top: 0.22667rem;
z-index: 2;
}
.page3 .ListBox ul li .tx {
position: absolute;
width: 1.22667rem;
height: 1.22667rem;
position: absolute;
left: 1.36rem;
top: 0.32rem;
border-radius: 50%;
z-index: 1;
}
.page3 .ListBox ul li .name {
width: 2.4rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
color: #F5CD81;
font-size: 0.37333rem;
font-weight: 400;
height: 100%;
line-height: 1.76rem;
}
.page3 .ListBox ul li .score {
float: left;
color: #F5CD81;
font-size: 0.37333rem;
font-weight: 400;
height: 100%;
line-height: 1.76rem;
text-align: right;
float: right;
}
.page3 .my {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 10rem;
height: 1.97333rem;
line-height: 1.97333rem;
background: url(../images/listMyBg.png) no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 0 0.69333rem;
}
.page3 .my .num {
width: 0.93333rem;
height: 100%;
text-align: center;
color: #F5CD81;
font-size: 0.26667rem;
font-weight: 400;
float: left;
margin-right: 2.14667rem;
}
.page3 .my .ts {
position: absolute;
width: 1.32rem;
height: 1.32rem;
left: 1.98667rem;
top: 0.37333rem;
z-index: 2;
}
.page3 .my .tx {
position: absolute;
width: 1.22667rem;
height: 1.22667rem;
position: absolute;
left: 2.02667rem;
top: 0.41333rem;
border-radius: 50%;
z-index: 1;
}
.page3 .my .name {
width: 3rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
color: #F5CD81;
font-size: 0.37333rem;
font-weight: 400;
height: 100%;
}
.page3 .my .score {
float: left;
color: #F5CD81;
font-size: 0.37333rem;
font-weight: 400;
height: 100%;
text-align: right;
float: right;
}
.rule {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
display: none;
}
.rule .rule_in {
width: 8.76rem;
height: 13.6rem;
background: url(../images/ruleBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.rule .rule_in div {
width: 7.8rem;
height: 11.8rem;
position: absolute;
top: 1.5rem;
left: 50%;
transform: translateX(-50%);
overflow-y: scroll;
}
.rule .rule_in div img {
width: 100%;
height: 32.04rem;
display: block;
}
.ruleEnvlop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
display: none;
}
.ruleEnvlop .rule_in {
width: 5.88rem;
height: 9.22667rem;
background: url(../images/ruleEnvlop_in.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.ruleEnvlop .rule_in .ruleEnvlop_inIKonw,
.ruleEnvlop .rule_in .goToGift {
width: 2.10667rem;
height: 0.85333rem;
position: absolute;
top: 7.65333rem;
}
.ruleEnvlop .rule_in .ruleEnvlop_inIKonw {
left: 0.82667rem;
}
.ruleEnvlop .rule_in .goToGift {
right: 0.82667rem;
}
.sureLove {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
display: none;
}
.sureLove .sureLove_in {
width: 5.88rem;
height: 7.01333rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url(../images/sureLove_in.png) no-repeat;
background-size: 100% 100%;
}
.sureLove .sureLove_in .no,
.sureLove .sureLove_in .ok {
position: absolute;
width: 2.10667rem;
height: 0.84rem;
top: 5.4rem;
}
.sureLove .sureLove_in .no {
left: 0.8rem;
}
.sureLove .sureLove_in .ok {
right: 0.8rem;
}
.sureLoveSuccer {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
display: none;
}
.sureLoveSuccer .sureLove_in {
width: 5.88rem;
height: 7.01333rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url(../images/sureLove_in2.png) no-repeat;
background-size: 100% 100%;
}
.sureLoveSuccer .sureLove_in .no,
.sureLoveSuccer .sureLove_in .ok {
position: absolute;
width: 2.10667rem;
height: 0.84rem;
top: 5.4rem;
}
.sureLoveSuccer .sureLove_in .no {
left: 0.8rem;
}
.sureLoveSuccer .sureLove_in .ok {
right: 0.8rem;
}
.listBg1 {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
display: none;
}
.listBg1 .box {
width: 8.76rem;
height: 12.41333rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url(../images/listRuleBg1.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.listBg1 .box .box_in {
width: 8.29333rem;
height: 10.4rem;
overflow-y: scroll;
margin: 1.85333rem auto 0;
}
.listBg1 .box .box_in img {
width: 100%;
height: 26.41333rem;
}
.listBg2 {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
display: none;
}
.listBg2 .box {
width: 8.76rem;
height: 12.41333rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url(../images/listRuleBg2.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.listBg2 .box .box_in {
width: 8.29333rem;
height: 10.4rem;
overflow-y: scroll;
margin: 1.85333rem auto 0;
}
.listBg2 .box .box_in img {
width: 100%;
height: 26.41333rem;
}
.lqPub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
display: none;
}
.lqPub .lqPub_in {
width: 7.36rem;
height: 8.09333rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url(../images/lvgiftBg.png) no-repeat;
background-size: 100% 100%;
}
.lqPub .lqPub_in img {
width: 5.78667rem;
height: 2.57333rem;
position: absolute;
top: 5.3rem;
left: 50%;
transform: translate(-50%, -50%);
}
.lqPub .lqPub_in .but {
width: 2.3rem;
height: 0.8rem;
position: absolute;
top: 7.2rem;
left: 50%;
transform: translate(-50%, -50%);
}
.actOut {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
display: none;
}
.actOut .actOut_in {
width: 5.88rem;
height: 7.01333rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url(../images/actOut.png) no-repeat;
background-size: 100% 100%;
}
.actOut .actOut_in .but {
width: 2.3rem;
height: 0.8rem;
position: absolute;
top: 5.55rem;
left: 50%;
transform: translate(-50%, -50%);
}
::-webkit-scrollbar {
display: none;
}