Files
peko-h5/view/peko/activity/2024-lover/css/index.css
2024-02-06 17:12:09 +08:00

2025 lines
36 KiB
CSS

html,
body {
width: 100%;
background: #A89AFF;
}
.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;
}
.header {
width: 10rem;
height: 10rem;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto 0rem;
}
.header .rule_icon {
width: 0.82667rem;
height: 2.34667rem;
position: absolute;
top: 2.4rem;
right: 0;
}
.tab {
width: 9.6rem;
height: 1.49333rem;
margin: 0 auto 0rem;
display: flex;
justify-content: space-between;
}
.tab div {
width: 3.2rem;
height: 1.38667rem;
line-height: 1.46667rem;
text-align: center;
color: #521C98;
font-size: 0.42667rem;
font-weight: 500;
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
}
.tab .act {
height: 1.49333rem;
line-height: 1.49333rem;
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
color: #663803;
}
.page1 .bg1 {
width: 10rem;
height: 15.14667rem;
background: url(../images/page1_bg1.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0;
position: relative;
}
.page1 .bg1 .title {
width: 3.73333rem;
height: 0.66667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.38667rem;
}
.page1 .bg1 .loveBox {
width: 3.38667rem;
height: 3.33333rem;
left: 50%;
transform: translateX(-50%);
top: 5.86rem;
position: absolute;
}
.page1 .bg1 .mp {
width: 1.93333rem;
height: 0.53333rem;
position: absolute;
left: 50%;
transform: translateX(-58%);
top: 7.09333rem;
}
.page1 .bg1 p {
position: absolute;
width: 100%;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 0.32rem;
font-weight: 500;
color: #521C98;
}
.page1 .bg1 .p1 {
top: 2.37333rem;
}
.page1 .bg1 .p2 {
top: 2.8rem;
}
.page1 .bg1 .p3 {
top: 8.74667rem;
}
.page1 .bg1 .p4 {
width: 6.61333rem;
top: 13.44rem;
color: #fff;
font-size: 0.32rem;
font-weight: 500;
line-height: 0.45rem;
}
.page1 .bg1 .giftList {
width: 2.08rem;
height: 2.08rem;
position: absolute;
}
.page1 .bg1 .giftList .qp {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0;
top: 0;
background: url(../images/qp.png) no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.page1 .bg1 .giftList .gift {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.24rem;
}
.page1 .bg1 .giftList .giftName {
width: 100%;
height: 0.45333rem;
line-height: 0.45333rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.65333rem;
color: #fff;
font-size: 0.32rem;
font-weight: 500;
background: url(../images/giftNameBg.png) no-repeat;
background-size: 100% 100%;
z-index: 3;
}
.page1 .bg1 .giftList .giftVAlue {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.45rem;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
}
.page1 .bg1 .filter {
filter: grayscale(100%);
}
.page1 .bg1 .filter .giftName {
color: #E2E2E2;
}
.page1 .bg1 .filter .giftVAlue {
color: #99999A;
}
.page1 .bg1 .giftList1 {
left: 2.32rem;
top: 3.78667rem;
}
.page1 .bg1 .giftList2 {
left: 6.41333rem;
top: 3.78667rem;
}
.page1 .bg1 .giftList3 {
left: 6.82667rem;
top: 6.69333rem;
}
.page1 .bg1 .giftList4 {
left: 5.57333rem;
top: 9.6rem;
}
.page1 .bg1 .giftList5 {
left: 2.34667rem;
top: 9.6rem;
}
.page1 .bg1 .giftList6 {
left: 1.09333rem;
top: 6.8rem;
}
.page1 .bg2 {
width: 10rem;
height: 13.86667rem;
background: url(../images/page1_bg2.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto 0.48rem;
}
.page1 .bg2 .title {
width: 3.73333rem;
height: 0.66667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.44rem;
}
.page1 .bg2 ul {
width: 9.14667rem;
height: 9.5rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.2rem;
overflow-y: scroll;
}
.page1 .bg2 ul::-webkit-scrollbar {
width: 0;
display: none;
}
.page1 .bg2 ul li {
width: 100%;
height: 0.96rem;
line-height: 0.94667rem;
display: flex;
justify-content: space-between;
}
.page1 .bg2 ul li div {
width: 50%;
text-align: center;
color: #521C98;
font-weight: 400;
}
.page1 .bg2 ul li .left {
line-height: normal;
}
.page1 .bg2 ul li .left p {
color: #521C98;
font-size: 0.32rem;
margin-bottom: 0.02667rem;
}
.page1 .bg2 ul li .left span {
font-size: 0.26667rem;
}
.page1 .bg2 ul .liTitle div {
font-size: 0.37333rem;
font-weight: 500;
color: #521C98;
}
.page1 .bg2 ul .null {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 0.37333rem;
font-weight: 500;
color: #521C98;
text-align: center;
width: 100%;
}
.page1 .bg2 ul .null div {
width: 100%;
}
.page2 {
display: none;
}
.page2 .box {
width: 10rem;
height: 13.14667rem;
margin: 0 auto 1.06667rem;
background: url(../images/page2Bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.page2 .box .title {
width: 7.84rem;
height: 0.66667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.49333rem;
}
.page2 .box .page2Buy_icon {
width: 2.10667rem;
height: 0.96rem;
position: absolute;
right: 0;
top: 3.89333rem;
z-index: 2;
}
.page2 .box i {
font-style: normal;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.page2 .box .i1 {
height: 0.56rem;
line-height: 0.56rem;
border-radius: 0.56rem;
text-align: center;
color: #EAE7FB;
font-size: 0.32rem;
top: 2.53333rem;
background: #9789E9;
padding: 0 0.26667rem;
}
.page2 .box .i2 {
width: 6.61333rem;
height: 0.90667rem;
text-align: center;
color: #521C98;
font-size: 0.32rem;
line-height: 0.37507rem;
top: 3.33333rem;
font-weight: 500;
}
.page2 .box .i3 {
width: 100%;
text-align: center;
color: #A78CD2;
font-size: 0.32rem;
top: 4.26667rem;
font-weight: 500;
}
.page2 .box .tasks {
width: 8.72rem;
height: 3.36rem;
position: absolute;
top: 5.25333rem;
left: 50%;
transform: translateX(-50%);
background: #F1F1FF;
border-radius: 0.21333rem;
}
.page2 .box .tasks .giftBox {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0.37333rem;
top: 0.32rem;
}
.page2 .box .tasks .giftBox .qp {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0;
top: 0;
background: url(../images/qp.png) no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.page2 .box .tasks .giftBox .gift {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.24rem;
}
.page2 .box .tasks .giftBox .giftName {
width: 100%;
height: 0.45333rem;
line-height: 0.45333rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.65333rem;
color: #fff;
font-size: 0.32rem;
font-weight: 500;
background: url(../images/giftNameBg.png) no-repeat;
background-size: 100% 100%;
z-index: 3;
}
.page2 .box .tasks .giftBox .giftVAlue {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.45rem;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
}
.page2 .box .tasks p {
position: absolute;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
left: 2.82667rem;
}
.page2 .box .tasks .p1 {
top: 0.45333rem;
}
.page2 .box .tasks .p2 {
top: 1.22667rem;
color: #7347AD;
}
.page2 .box .tasks .p3 {
top: 2.34667rem;
}
.page2 .box .tasks .line {
width: 4.42667rem;
height: 0.32rem;
line-height: 0.32rem;
border-radius: 0.32rem;
position: absolute;
left: 4rem;
top: 1.2rem;
background: #7466c4;
}
.page2 .box .tasks .line span {
width: 10%;
height: 0.26667rem;
border-radius: 0.26667rem;
position: absolute;
left: 0.02667rem;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%);
}
.page2 .box .tasks .line .i {
color: #c4a8a8;
z-index: 2;
position: absolute;
right: -1.8rem;
height: 100%;
line-height: 0.32rem;
width: auto;
text-align: right;
}
.page2 .box .tasks .buy {
width: 3.06667rem;
height: 0.74667rem;
line-height: 0.74667rem;
vertical-align: middle;
text-align: center;
color: #663803;
font-size: 0.37333rem;
font-weight: 500;
position: absolute;
top: 2.18667rem;
left: 5.46667rem;
background: url(../images/page2But.png) no-repeat;
background-size: 100% 100%;
}
.page2 .box .tasks .buy img {
display: inline-block;
width: 0.64rem;
height: 0.64rem;
}
.page2 .box .tasks2 {
width: 8.72rem;
height: 3.36rem;
position: absolute;
top: 8.93333rem;
left: 50%;
transform: translateX(-50%);
background: #F1F1FF;
border-radius: 0.21333rem;
}
.page2 .box .tasks2 .giftBox {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0.37333rem;
top: 0.32rem;
}
.page2 .box .tasks2 .giftBox .qp {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0;
top: 0;
background: url(../images/qp.png) no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.page2 .box .tasks2 .giftBox .gift {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.24rem;
}
.page2 .box .tasks2 .giftBox .giftName {
width: 100%;
height: 0.45333rem;
line-height: 0.45333rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.65333rem;
color: #fff;
font-size: 0.32rem;
font-weight: 500;
background: url(../images/giftNameBg.png) no-repeat;
background-size: 100% 100%;
z-index: 3;
}
.page2 .box .tasks2 .giftBox .giftVAlue {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.45rem;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
}
.page2 .box .tasks2 p {
position: absolute;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
left: 2.82667rem;
}
.page2 .box .tasks2 .p1 {
top: 0.45333rem;
}
.page2 .box .tasks2 .p2 {
top: 1.22667rem;
color: #7347AD;
}
.page2 .box .tasks2 .p3 {
top: 2.34667rem;
}
.page2 .box .tasks2 .line {
width: 4.42667rem;
height: 0.32rem;
line-height: 0.32rem;
border-radius: 0.32rem;
position: absolute;
left: 4rem;
top: 1.2rem;
background: #7466c4;
}
.page2 .box .tasks2 .line span {
width: 98.8%;
height: 0.26667rem;
border-radius: 0.26667rem;
position: absolute;
left: 0.02667rem;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%);
}
.page2 .box .tasks2 .line .i {
color: #c4a8a8;
z-index: 2;
position: absolute;
right: -1.8rem;
height: 100%;
line-height: 0.32rem;
width: auto;
text-align: right;
}
.page2 .box .tasks2 .buy {
width: 3.06667rem;
height: 0.74667rem;
line-height: 0.74667rem;
vertical-align: middle;
text-align: center;
color: #663803;
font-size: 0.37333rem;
font-weight: 500;
position: absolute;
top: 2.18667rem;
left: 5.46667rem;
background: url(../images/page2But.png) no-repeat;
background-size: 100% 100%;
}
.page2 .box .tasks2 .buy img {
display: inline-block;
width: 0.64rem;
height: 0.64rem;
}
.page3 {
display: none;
}
.page3 .box {
width: 10rem;
height: 10.66667rem;
margin: 0 auto 0rem;
background: url(../images/page3boxBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.page3 .box .page2Buy_icon {
width: 2.10667rem;
height: 0.96rem;
position: absolute;
right: 0;
top: 3.89333rem;
z-index: 2;
}
.page3 .box i {
font-style: normal;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.page3 .box .i2 {
width: 6.61333rem;
height: 0.90667rem;
text-align: center;
color: #521C98;
font-size: 0.32rem;
line-height: 0.46667rem;
top: 1.26667rem;
font-weight: 500;
}
.page3 .box .tasks {
width: 8.72rem;
height: 3.36rem;
position: absolute;
top: 2.77333rem;
left: 50%;
transform: translateX(-50%);
background: #F1F1FF;
border-radius: 0.21333rem;
}
.page3 .box .tasks .giftBox {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0.37333rem;
top: 0.32rem;
}
.page3 .box .tasks .giftBox .qp {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0;
top: 0;
background: url(../images/page3ts.png) no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.page3 .box .tasks .giftBox .gift {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.24rem;
}
.page3 .box .tasks .giftBox .giftName {
width: 100%;
height: 0.45333rem;
line-height: 0.45333rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.65333rem;
color: #fff;
font-size: 0.32rem;
font-weight: 500;
background: url(../images/giftNameBg.png) no-repeat;
background-size: 100% 100%;
z-index: 3;
}
.page3 .box .tasks .giftBox .giftVAlue {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.45rem;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
}
.page3 .box .tasks p {
position: absolute;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
left: 2.82667rem;
}
.page3 .box .tasks .p1 {
top: 0.45333rem;
}
.page3 .box .tasks .p2 {
top: 1.22667rem;
color: #7347AD;
}
.page3 .box .tasks .p3 {
top: 2.34667rem;
}
.page3 .box .tasks .line {
width: 4.42667rem;
height: 0.32rem;
line-height: 0.32rem;
border-radius: 0.32rem;
position: absolute;
left: 4rem;
top: 1.2rem;
background: #7466c4;
}
.page3 .box .tasks .line span {
width: 10%;
height: 0.26667rem;
border-radius: 0.26667rem;
position: absolute;
left: 0.02667rem;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%);
}
.page3 .box .tasks .line .i {
color: #c4a8a8;
z-index: 2;
position: absolute;
right: -1.8rem;
height: 100%;
line-height: 0.32rem;
width: auto;
text-align: right;
}
.page3 .box .tasks .buy {
width: 2.13333rem;
height: 0.74667rem;
line-height: 0.74667rem;
vertical-align: middle;
text-align: center;
color: #663803;
font-size: 0.37333rem;
font-weight: 500;
position: absolute;
top: 2.18667rem;
left: 6.26667rem;
background: url(../images/page2But.png) no-repeat;
background-size: 100% 100%;
}
.page3 .box .tasks .buy img {
display: inline-block;
width: 0.64rem;
height: 0.64rem;
}
.page3 .box .tasks .act {
background: url(../images/buy_z.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
.page3 .box .tasks2 {
width: 8.72rem;
height: 3.36rem;
position: absolute;
top: 6.45333rem;
left: 50%;
transform: translateX(-50%);
background: #F1F1FF;
border-radius: 0.21333rem;
}
.page3 .box .tasks2 .giftBox {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0.37333rem;
top: 0.32rem;
}
.page3 .box .tasks2 .giftBox .qp {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0;
top: 0;
background: url(../images/page3qp.png) no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.page3 .box .tasks2 .giftBox .gift {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.24rem;
}
.page3 .box .tasks2 .giftBox .giftName {
width: 100%;
height: 0.45333rem;
line-height: 0.45333rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.65333rem;
color: #fff;
font-size: 0.32rem;
font-weight: 500;
background: url(../images/giftNameBg.png) no-repeat;
background-size: 100% 100%;
z-index: 3;
}
.page3 .box .tasks2 .giftBox .giftVAlue {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.45rem;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
}
.page3 .box .tasks2 p {
position: absolute;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
left: 2.82667rem;
}
.page3 .box .tasks2 .p1 {
top: 0.45333rem;
}
.page3 .box .tasks2 .p2 {
top: 1.22667rem;
color: #7347AD;
}
.page3 .box .tasks2 .p3 {
top: 2.34667rem;
}
.page3 .box .tasks2 .line {
width: 4.42667rem;
height: 0.32rem;
line-height: 0.32rem;
border-radius: 0.32rem;
position: absolute;
left: 4rem;
top: 1.2rem;
background: #7466c4;
}
.page3 .box .tasks2 .line span {
width: 10%;
height: 0.26667rem;
border-radius: 0.26667rem;
position: absolute;
left: 0.02667rem;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%);
}
.page3 .box .tasks2 .line .i {
color: #c4a8a8;
z-index: 2;
position: absolute;
right: -1.8rem;
height: 100%;
line-height: 0.32rem;
width: auto;
text-align: right;
}
.page3 .box .tasks2 .buy {
width: 2.13333rem;
height: 0.74667rem;
line-height: 0.74667rem;
vertical-align: middle;
text-align: center;
color: #663803;
font-size: 0.37333rem;
font-weight: 500;
position: absolute;
top: 2.18667rem;
left: 6.26667rem;
background: url(../images/page2But.png) no-repeat;
background-size: 100% 100%;
}
.page3 .box .tasks2 .buy img {
display: inline-block;
width: 0.64rem;
height: 0.64rem;
}
.page3 .box .tasks2 .act {
background: url(../images/buy_z.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
.page3 .top3 {
width: 10rem;
height: 10.45333rem;
margin: 0 auto 0.21333rem;
position: relative;
background: url(../images/pageTop3.png) no-repeat;
background-size: 100% 100%;
}
.page3 .top3 .title {
width: 100%;
text-align: center;
font-family: Source Han Serif CN, Source Han Serif CN;
text-shadow: 0.02667rem 0.05333rem 0.10667rem rgba(93, 67, 196, 0.8);
color: #fff;
font-size: 0.58667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.46667rem;
}
.page3 .top3 .rule_icon {
width: 2.10667rem;
height: 0.96rem;
position: absolute;
right: 0;
top: 1.57333rem;
z-index: 3;
}
.page3 .top3 .no1 {
width: 8.93333rem;
height: 3.09333rem;
position: absolute;
top: 2.02667rem;
left: 50%;
transform: translateX(-50%);
}
.page3 .top3 .no1 .ts {
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
left: 0;
top: 0;
}
.page3 .top3 .no1 .leftlogo {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
position: absolute;
top: 1.04rem;
left: 2.77333rem;
}
.page3 .top3 .no1 .rightlogo {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
position: absolute;
top: 1.04rem;
right: 2.77333rem;
}
.page3 .top3 .no1 .name {
width: 4.53333rem;
position: absolute;
bottom: -0.45333rem;
left: 50%;
transform: translateX(-50%);
color: #521C98;
font-weight: 400;
font-family: PingFang SC, PingFang SC;
font-size: 0.29333rem;
text-align: center;
}
.page3 .top3 .no1 .name i {
color: #9E82CB;
font-style: normal;
}
.page3 .top3 .no1 .score {
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 500;
background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%);
width: 2.8rem;
height: 0.45333rem;
white-space: nowrap;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -1.01333rem;
text-align: center;
line-height: 0.45333rem;
}
.page3 .top3 .no2 {
width: 4.16rem;
height: 1.92rem;
position: absolute;
top: 6.45333rem;
left: 0.74667rem;
}
.page3 .top3 .no2 .ts {
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
left: 0;
top: 0;
}
.page3 .top3 .no2 .leftlogo {
width: 1.28rem;
height: 1.28rem;
border-radius: 50%;
position: absolute;
top: 0.4rem;
left: 0.72rem;
}
.page3 .top3 .no2 .rightlogo {
width: 1.28rem;
height: 1.28rem;
border-radius: 50%;
position: absolute;
top: 0.4rem;
right: 0.72rem;
}
.page3 .top3 .no2 .name {
width: 4.53333rem;
position: absolute;
bottom: -0.45333rem;
left: 50%;
transform: translateX(-50%);
color: #521C98;
font-weight: 400;
font-family: PingFang SC, PingFang SC;
font-size: 0.29333rem;
text-align: center;
}
.page3 .top3 .no2 .name i {
color: #9E82CB;
font-style: normal;
}
.page3 .top3 .no2 .score {
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 500;
background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%);
width: 2.8rem;
height: 0.45333rem;
white-space: nowrap;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -1.01333rem;
text-align: center;
line-height: 0.45333rem;
}
.page3 .top3 .no3 {
width: 4.16rem;
height: 1.92rem;
position: absolute;
top: 6.45333rem;
right: 0.74667rem;
}
.page3 .top3 .no3 .ts {
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
left: 0;
top: 0;
}
.page3 .top3 .no3 .leftlogo {
width: 1.28rem;
height: 1.28rem;
border-radius: 50%;
position: absolute;
top: 0.38667rem;
left: 0.76rem;
}
.page3 .top3 .no3 .rightlogo {
width: 1.28rem;
height: 1.28rem;
border-radius: 50%;
position: absolute;
top: 0.38667rem;
right: 0.74667rem;
}
.page3 .top3 .no3 .name {
width: 4.53333rem;
position: absolute;
bottom: -0.45333rem;
left: 50%;
transform: translateX(-50%);
color: #521C98;
font-weight: 400;
font-family: PingFang SC, PingFang SC;
font-size: 0.29333rem;
text-align: center;
}
.page3 .top3 .no3 .name i {
color: #9E82CB;
font-style: normal;
}
.page3 .top3 .no3 .score {
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 500;
background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%);
width: 2.8rem;
height: 0.45333rem;
white-space: nowrap;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -1.01333rem;
text-align: center;
line-height: 0.45333rem;
}
.page3 ul {
width: 9.57333rem;
margin: 0 auto 2.13333rem;
}
.page3 ul li {
width: 100%;
height: 1.86667rem;
background: url(../images/page3Li.png) no-repeat;
background-size: 100% 100%;
margin-bottom: 0.16rem;
position: relative;
box-sizing: border-box;
padding: 0 0.64rem;
}
.page3 ul li .num {
width: 0.96rem;
height: 0.96rem;
float: left;
margin-top: 0.45333rem;
text-align: center;
line-height: 0.96rem;
color: #521C98;
font-size: 0.37333rem;
font-weight: 500;
background: url(../images/love_z.png) no-repeat;
background-size: 100% 100%;
}
.page3 ul li .leftTx {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 50%;
position: absolute;
left: 1.81333rem;
top: 0.4rem;
border: 0.02667rem solid #fff;
z-index: 2;
box-sizing: border-box;
}
.page3 ul li .rightTx {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 50%;
position: absolute;
left: 2.66667rem;
top: 0.4rem;
border: 0.02667rem solid #fff;
box-sizing: border-box;
}
.page3 ul li .leftName {
width: 2.13333rem;
color: #521C98;
font-size: 0.34667rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 3.94667rem;
top: 0.48rem;
}
.page3 ul li .rightName {
width: 2.13333rem;
color: #521C98;
font-size: 0.34667rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 3.94667rem;
top: 0.98667rem;
}
.page3 ul li .score {
float: right;
height: 100%;
line-height: 1.86667rem;
color: #521C98;
font-size: 0.42667rem;
font-weight: 500;
}
.page3 .my {
position: fixed;
width: 10rem;
height: 2.2rem;
left: 50%;
transform: translateX(-50%);
bottom: 0rem;
z-index: 99;
background: url(../images/myBg2.png) no-repeat;
background-size: 100% 100%;
transition: all .4s;
}
.page3 .my .icon {
width: 0.85333rem;
height: 1.22667rem;
position: absolute;
right: 0.42667rem;
top: -0.54667rem;
}
.page3 .my .scroll {
overflow: hidden;
height: 7.74667rem;
margin-top: 0.4rem;
}
.page3 .my .myBox {
width: 100%;
height: 1.86667rem;
margin-bottom: 0.16rem;
position: relative;
box-sizing: border-box;
padding: 0 0.64rem;
}
.page3 .my .myBox .num {
width: 0.96rem;
height: 0.96rem;
float: left;
margin-top: 0.45333rem;
text-align: center;
line-height: 0.96rem;
color: #663803;
font-size: 0.37333rem;
font-weight: 500;
background: url(../images/love_h.png) no-repeat;
background-size: 100% 100%;
white-space: nowrap;
}
.page3 .my .myBox .leftTx {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 50%;
position: absolute;
left: 1.81333rem;
top: 0.4rem;
border: 0.02667rem solid #fff;
z-index: 2;
box-sizing: border-box;
}
.page3 .my .myBox .rightTx {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 50%;
position: absolute;
left: 2.66667rem;
top: 0.4rem;
border: 0.02667rem solid #fff;
box-sizing: border-box;
}
.page3 .my .myBox .leftName {
width: 2.13333rem;
color: #521C98;
font-size: 0.34667rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 3.94667rem;
top: 0.48rem;
}
.page3 .my .myBox .rightName {
width: 2.13333rem;
color: #521C98;
font-size: 0.34667rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 3.94667rem;
top: 0.98667rem;
}
.page3 .my .myBox .score {
float: right;
height: 100%;
line-height: 1.86667rem;
color: #521C98;
font-size: 0.42667rem;
font-weight: 500;
}
.buyRecords {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99;
}
.buyRecords .buyRecords_in {
width: 10rem;
height: 13.86667rem;
background: url(../images/page1_bg2.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.buyRecords .buyRecords_in .title {
width: 3.73333rem;
height: 0.66667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.44rem;
}
.buyRecords .buyRecords_in ul {
width: 9.14667rem;
height: 9.5rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.2rem;
overflow-y: scroll;
}
.buyRecords .buyRecords_in ul::-webkit-scrollbar {
width: 0;
display: none;
}
.buyRecords .buyRecords_in ul li {
width: 100%;
height: 0.96rem;
line-height: 0.94667rem;
display: flex;
justify-content: space-between;
}
.buyRecords .buyRecords_in ul li div {
width: 50%;
text-align: center;
color: #521C98;
font-weight: 400;
}
.buyRecords .buyRecords_in ul li .left {
line-height: normal;
}
.buyRecords .buyRecords_in ul li .left p {
color: #521C98;
font-size: 0.32rem;
margin-bottom: 0.02667rem;
}
.buyRecords .buyRecords_in ul li .left span {
font-size: 0.26667rem;
}
.buyRecords .buyRecords_in ul .liTitle div {
font-size: 0.37333rem;
font-weight: 500;
color: #521C98;
}
.buyRecords .buyRecords_in ul .null {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 0.37333rem;
font-weight: 500;
color: #521C98;
text-align: center;
width: 100%;
}
.buyRecords .buyRecords_in ul .null div {
width: 100%;
}
.rule {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99;
}
.rule .rule_in {
width: 10rem;
height: 13.86667rem;
background: url(../images/page1_bg2.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.rule .rule_in .title {
width: 3.73333rem;
height: 0.66667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.44rem;
}
.rule .rule_in ul {
width: 9.14667rem;
height: 9.5rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.2rem;
overflow-y: scroll;
}
.rule .rule_in ul::-webkit-scrollbar {
width: 0;
display: none;
}
.rule .rule_in ul li {
width: 100%;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
line-height: 0.37333rem;
margin-bottom: 0.13333rem;
box-sizing: border-box;
padding: 0 0.61333rem;
}
.end {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99;
}
.end .end_in {
width: 9.36rem;
height: 6rem;
background: url(../images/end.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.end .end_in .title {
width: 4.26667rem;
height: 0.66667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.26667rem;
}
.end .end_in .but {
width: 4.8rem;
height: 1.06667rem;
text-align: center;
line-height: 1.06667rem;
color: #FFFFFF;
font-size: 0.42667rem;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.85333rem;
background: url(../images/close.png) no-repeat;
background-size: 100% 100%;
}
.failureBuy {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99;
}
.failureBuy .failureBuy_in {
width: 9.36rem;
height: 6rem;
background: url(../images/end.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.failureBuy .failureBuy_in .title {
width: 3.73333rem;
height: 0.66667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.33333rem;
}
.failureBuy .failureBuy_in .text {
width: 100%;
text-align: center;
color: #521C98;
font-size: 0.4rem;
position: absolute;
top: 2.75rem;
left: 0;
}
.failureBuy .failureBuy_in .but {
width: 3.68rem;
height: 1.06667rem;
text-align: center;
line-height: 1.06667rem;
font-size: 0.42667rem;
font-weight: 500;
position: absolute;
bottom: 0.85333rem;
}
.failureBuy .failureBuy_in .close {
left: 0.85333rem;
background: url(../images/close.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
.failureBuy .failureBuy_in .ok {
right: 0.85333rem;
background: url(../images/ok.png) no-repeat;
background-size: 100% 100%;
color: #663803;
}
.success {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99;
}
.success .success_in {
width: 9.36rem;
height: 9.2rem;
background: url(../images/buyBgPub.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.success .success_in .title {
width: 3.73333rem;
height: 0.66667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.49333rem;
}
.success .success_in .text {
width: 100%;
text-align: center;
color: #521C98;
font-size: 0.37333rem;
position: absolute;
top: 5.94667rem;
left: 0;
font-weight: 500;
}
.success .success_in .giftListSuccess {
width: 2.08rem;
height: 2.08rem;
position: absolute;
top: 2.53333rem;
left: 50%;
transform: translateX(-50%);
}
.success .success_in .giftListSuccess .qp {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0;
top: 0;
background: url(../images/qp.png) no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.success .success_in .giftListSuccess .gift {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.24rem;
}
.success .success_in .giftListSuccess .giftName {
width: 100%;
height: 0.45333rem;
line-height: 0.45333rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.65333rem;
color: #fff;
font-size: 0.32rem;
font-weight: 500;
background: url(../images/giftNameBg.png) no-repeat;
background-size: 100% 100%;
z-index: 3;
}
.success .success_in .giftListSuccess .giftVAlue {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.45rem;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
}
.success .success_in .but {
width: 4.8rem;
height: 1.06667rem;
text-align: center;
line-height: 1.06667rem;
color: #FFFFFF;
font-size: 0.42667rem;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.85333rem;
background: url(../images/close.png) no-repeat;
background-size: 100% 100%;
}
.sure {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99;
}
.sure .sure_in {
width: 9.36rem;
height: 9.2rem;
background: url(../images/buyBgPub.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.sure .sure_in .title {
width: 3.73333rem;
height: 0.66667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.33333rem;
}
.sure .sure_in .text {
width: 100%;
text-align: center;
color: #521C98;
font-size: 0.37333rem;
position: absolute;
top: 6.21333rem;
left: 0;
font-weight: 500;
}
.sure .sure_in .giftListSuccess {
width: 2.08rem;
height: 2.08rem;
position: absolute;
top: 2.53333rem;
left: 50%;
transform: translateX(-50%);
}
.sure .sure_in .giftListSuccess .qp {
width: 2.08rem;
height: 2.08rem;
position: absolute;
left: 0;
top: 0;
background: url(../images/qp.png) no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.sure .sure_in .giftListSuccess .gift {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.24rem;
}
.sure .sure_in .giftListSuccess .giftName {
width: 100%;
height: 0.45333rem;
line-height: 0.45333rem;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.65333rem;
color: #fff;
font-size: 0.32rem;
font-weight: 500;
background: url(../images/giftNameBg.png) no-repeat;
background-size: 100% 100%;
z-index: 3;
}
.sure .sure_in .giftListSuccess .giftVAlue {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.45rem;
color: #521C98;
font-size: 0.32rem;
font-weight: 500;
}
.sure .sure_in .but {
width: 3.68rem;
height: 1.06667rem;
text-align: center;
line-height: 1.06667rem;
font-size: 0.42667rem;
font-weight: 500;
position: absolute;
bottom: 0.85333rem;
}
.sure .sure_in .close {
left: 0.85333rem;
background: url(../images/close.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
.sure .sure_in .ok {
right: 0.85333rem;
background: url(../images/ok.png) no-repeat;
background-size: 100% 100%;
color: #663803;
}
.page3Rule {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99;
}
.page3Rule .page3Rule_in {
width: 10rem;
height: 13.86667rem;
background: url(../images/page3RuleBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.page3Rule .page3Rule_in .title {
width: 4.90667rem;
height: 0.66667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.44rem;
}
.page3Rule .page3Rule_in .box {
width: 8.74667rem;
height: 9.2rem;
margin: 2.58667rem auto 0;
overflow-y: scroll;
}
.page3Rule .page3Rule_in .box::-webkit-scrollbar {
display: none;
}
.page3Rule .page3Rule_in .box img {
display: block;
width: 8.74667rem;
margin: 0 auto 0.26667rem;
}