2024-03-20 16:05:54 +08:00
|
|
|
@function px2rem($px) {
|
|
|
|
|
@return $px / 75+rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
// background: radial-gradient(circle, #32140C 0%, #05040A 100%);
|
|
|
|
|
background: #63063E;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: px2rem(70);
|
|
|
|
|
left: px2rem(34);
|
|
|
|
|
z-index: 99;
|
|
|
|
|
width: px2rem(62);
|
|
|
|
|
height: px2rem(62);
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(32);
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 9rem;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: px2rem(62);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-20 18:37:12 +08:00
|
|
|
.header {
|
2024-03-20 16:05:54 +08:00
|
|
|
width: px2rem(750);
|
|
|
|
|
height: px2rem(990);
|
2024-03-20 18:37:12 +08:00
|
|
|
position: relative;
|
|
|
|
|
margin: 0 auto px2rem(23);
|
2024-03-20 16:05:54 +08:00
|
|
|
background: url(../images/header.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
2024-03-20 18:37:12 +08:00
|
|
|
|
|
|
|
|
.qualifyGift_icon {
|
|
|
|
|
width: px2rem(50);
|
|
|
|
|
height: px2rem(126);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(200);
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rule_icon {
|
|
|
|
|
width: px2rem(50);
|
|
|
|
|
height: px2rem(126);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(344);
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-25 15:25:46 +08:00
|
|
|
.tabs {
|
2024-03-20 18:37:12 +08:00
|
|
|
width: px2rem(700);
|
|
|
|
|
height: px2rem(86);
|
|
|
|
|
margin: 0 auto px2rem(24);
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(168);
|
|
|
|
|
height: px2rem(86);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab1 {
|
|
|
|
|
background: url(../images/tab1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab2 {
|
|
|
|
|
background: url(../images/tab2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab3 {
|
|
|
|
|
background: url(../images/tab3.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab4 {
|
|
|
|
|
background: url(../images/tab4.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.act1 {
|
|
|
|
|
background: url(../images/tabAct1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.act2 {
|
|
|
|
|
background: url(../images/tabAct2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.act3 {
|
|
|
|
|
background: url(../images/tabAct3.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.act4 {
|
|
|
|
|
background: url(../images/tabAct4.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
2024-03-20 16:05:54 +08:00
|
|
|
}
|
2024-03-20 18:37:12 +08:00
|
|
|
|
|
|
|
|
.page1 {
|
2024-03-25 15:25:46 +08:00
|
|
|
// display: none;
|
|
|
|
|
|
2024-03-20 18:37:12 +08:00
|
|
|
.box1 {
|
|
|
|
|
width: px2rem(690);
|
|
|
|
|
height: px2rem(834);
|
|
|
|
|
background: url(../images/pageBox1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin: 0 auto px2rem(29);
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.pageBox1Rule_icon {
|
|
|
|
|
width: px2rem(134);
|
|
|
|
|
height: px2rem(42);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: px2rem(88);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time {
|
|
|
|
|
width: px2rem(396);
|
|
|
|
|
height: px2rem(58);
|
|
|
|
|
line-height: px2rem(58);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(28);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(112);
|
|
|
|
|
background: url(../images/page1Box1timeBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
border-radius: px2rem(5);
|
|
|
|
|
padding: px2rem(1) px2rem(2);
|
|
|
|
|
color: #BF294A;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
width: px2rem(594);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(209);
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 0.45rem;
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
color: #FBBE47;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.giftBoxs {
|
|
|
|
|
width: px2rem(620);
|
|
|
|
|
height: px2rem(435);
|
|
|
|
|
margin: px2rem(338) auto 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(192);
|
|
|
|
|
height: px2rem(202);
|
|
|
|
|
margin-bottom: px2rem(30);
|
|
|
|
|
background: url(../images/pageBox1qp.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
display: block;
|
|
|
|
|
width: px2rem(128);
|
|
|
|
|
height: px2rem(128);
|
|
|
|
|
margin: px2rem(17) auto px2rem(16);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.act {
|
|
|
|
|
background: url(../images/pageBox1qpAct.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-03-25 15:25:46 +08:00
|
|
|
|
|
|
|
|
.box2 {
|
2024-03-20 18:37:12 +08:00
|
|
|
width: px2rem(690);
|
|
|
|
|
height: px2rem(994);
|
|
|
|
|
background: url(../images/page1Box2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin: 0 auto px2rem(138);
|
2024-03-25 15:25:46 +08:00
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.top3 {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: px2rem(667);
|
|
|
|
|
height: px2rem(236);
|
|
|
|
|
margin: px2rem(272) auto px2rem(-5);
|
|
|
|
|
background: url(../images/page1Box2TopBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
.no1 {
|
|
|
|
|
width: px2rem(159);
|
|
|
|
|
height: px2rem(174);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: -1.4rem;
|
|
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(142);
|
|
|
|
|
height: px2rem(142);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: px2rem(2) solid #FFCD45;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(30);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-align: center;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 2.6rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 3.2rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no2 {
|
|
|
|
|
width: px2rem(141);
|
|
|
|
|
height: px2rem(154);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(33);
|
|
|
|
|
top: -0.6rem;
|
|
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(122);
|
|
|
|
|
height: px2rem(122);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: px2rem(2) solid #6284FA;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(30);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-align: center;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 2.1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 2.7rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no3 {
|
|
|
|
|
width: px2rem(141);
|
|
|
|
|
height: px2rem(154);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(33);
|
|
|
|
|
top: -0.6rem;
|
|
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(122);
|
|
|
|
|
height: px2rem(122);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: px2rem(2) solid #FF4748;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(30);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-align: center;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 2.1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 2.7rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
width: px2rem(662);
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
height: 6.3rem;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: px2rem(124);
|
|
|
|
|
background: url(../images/page1LiBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin-bottom: px2rem(8);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 px2rem(28);
|
|
|
|
|
|
|
|
|
|
.num {
|
|
|
|
|
width: 0.6rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(40);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-right: px2rem(24);
|
|
|
|
|
float: left;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(124);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(98);
|
|
|
|
|
height: px2rem(98);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
margin-top: px2rem(13);
|
|
|
|
|
margin-right: px2rem(23);
|
|
|
|
|
border: px2rem(2) solid #FED353;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: px2rem(234);
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(124);
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(28);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
float: right;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(124);
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(22);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.my {
|
|
|
|
|
width: px2rem(750);
|
|
|
|
|
height: px2rem(133);
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: url(../images/page1Box2My.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 0 px2rem(76) 0 px2rem(30);
|
|
|
|
|
z-index: 3;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
.num {
|
|
|
|
|
width: 1.4rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(32);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-right: px2rem(24);
|
|
|
|
|
float: left;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(133);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(98);
|
|
|
|
|
height: px2rem(98);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
margin-top: px2rem(17);
|
|
|
|
|
margin-right: px2rem(23);
|
|
|
|
|
border: px2rem(2) solid #FED353;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: px2rem(234);
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(133);
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(28);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
float: right;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(133);
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(22);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page2 {
|
|
|
|
|
display: none;
|
|
|
|
|
width: px2rem(702);
|
|
|
|
|
height: px2rem(1496);
|
|
|
|
|
margin: 0 auto px2rem(0);
|
|
|
|
|
background: url(../images/pag2bg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
overflow: hidden;
|
2024-03-26 15:22:57 +08:00
|
|
|
position: relative;
|
|
|
|
|
.upDate{
|
|
|
|
|
width: px2rem(32);
|
|
|
|
|
height: px2rem(32);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(55);
|
|
|
|
|
right: px2rem(38);
|
|
|
|
|
}
|
2024-03-25 15:25:46 +08:00
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
|
width: px2rem(522);
|
|
|
|
|
height: px2rem(68);
|
|
|
|
|
line-height: px2rem(68);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: px2rem(68);
|
|
|
|
|
margin: px2rem(37) auto px2rem(60);
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: 50%;
|
|
|
|
|
height: px2rem(68);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #64042E;
|
|
|
|
|
font-size: px2rem(28);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.act1 {
|
|
|
|
|
background: url(../images/page2TabAct1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
text-indent: 4rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.act2 {
|
|
|
|
|
background: url(../images/page2TabAct2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
text-indent: 4rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topRoom {
|
|
|
|
|
width: px2rem(630);
|
|
|
|
|
height: px2rem(160);
|
|
|
|
|
margin: px2rem(0) auto px2rem(15);
|
|
|
|
|
background: url(../images/page2RoomTop.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(120);
|
|
|
|
|
height: px2rem(120);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(21);
|
|
|
|
|
top: px2rem(20);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.roomName {
|
|
|
|
|
width: 6rem;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #000000;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(51);
|
|
|
|
|
left: px2rem(157);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
color: #333333;
|
|
|
|
|
font-size: px2rem(20);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(157);
|
|
|
|
|
top: px2rem(91);
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
color: #63063E;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topLine {
|
|
|
|
|
width: px2rem(621);
|
|
|
|
|
height: px2rem(30);
|
|
|
|
|
line-height: px2rem(30);
|
|
|
|
|
border-radius: px2rem(30);
|
|
|
|
|
background: #FF994E;
|
|
|
|
|
border: px2rem(4) solid #FED353;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 0 auto px2rem(54);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: 10%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(90deg, #DB4A00 0%, #FB712A 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(16);
|
|
|
|
|
line-height: px2rem(30);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(18);
|
|
|
|
|
margin: 0 auto px2rem(12);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page2ToRoomBut {
|
|
|
|
|
width: px2rem(276);
|
|
|
|
|
height: px2rem(113);
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 0 auto px2rem(55);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page2NotTopTitle {
|
|
|
|
|
width: px2rem(632);
|
|
|
|
|
height: px2rem(78);
|
|
|
|
|
line-height: px2rem(78);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(28);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin: 0 auto px2rem(64);
|
|
|
|
|
background: url(../images/page2NotTopTitle.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
width: px2rem(630);
|
|
|
|
|
height: 9.6rem;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
margin: 0 auto 0;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
|
|
|
|
|
width: px2rem(630);
|
|
|
|
|
height: px2rem(160);
|
|
|
|
|
margin: px2rem(0) auto px2rem(15);
|
|
|
|
|
background: url(../images/page2RoomTop.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin-bottom: px2rem(20);
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(120);
|
|
|
|
|
height: px2rem(120);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(21);
|
|
|
|
|
top: px2rem(20);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.roomName {
|
|
|
|
|
width: 6rem;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #000000;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(30);
|
|
|
|
|
left: px2rem(157);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
color: #333333;
|
|
|
|
|
font-size: px2rem(20);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(157);
|
|
|
|
|
top: px2rem(69);
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
color: #63063E;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line_in {
|
|
|
|
|
width: px2rem(314);
|
|
|
|
|
height: px2rem(26);
|
|
|
|
|
line-height: px2rem(26);
|
|
|
|
|
border-radius: px2rem(26);
|
|
|
|
|
background: #FF994E;
|
|
|
|
|
border: px2rem(4) solid #FED353;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(147);
|
|
|
|
|
top: px2rem(104);
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: 10%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(90deg, #DB4A00 0%, #FB712A 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(16);
|
|
|
|
|
line-height: px2rem(30);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.live {
|
|
|
|
|
width: px2rem(72);
|
|
|
|
|
height: px2rem(24);
|
|
|
|
|
line-height: px2rem(24);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: linear-gradient(0deg, #DC4D04 0%, #F1A356 100%);
|
|
|
|
|
border-radius: px2rem(24);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(44);
|
|
|
|
|
bottom: px2rem(17);
|
|
|
|
|
font-size: px2rem(14);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.notGo,
|
|
|
|
|
.go {
|
|
|
|
|
width: px2rem(114);
|
|
|
|
|
height: px2rem(54);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(14);
|
|
|
|
|
top: px2rem(53);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page3 {
|
|
|
|
|
display: none;
|
|
|
|
|
width: px2rem(750);
|
|
|
|
|
height: px2rem(2836);
|
|
|
|
|
margin: 0 auto px2rem(20);
|
|
|
|
|
background: url(../images/page3.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page4 {
|
|
|
|
|
display: none;
|
|
|
|
|
width: px2rem(690);
|
|
|
|
|
height: px2rem(1856);
|
|
|
|
|
margin: 0 auto px2rem(132);
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.page4_tab {
|
|
|
|
|
width: px2rem(576);
|
|
|
|
|
height: px2rem(82);
|
|
|
|
|
margin: 0 auto px2rem(0);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dayTab {
|
|
|
|
|
width: px2rem(198);
|
|
|
|
|
height: px2rem(50);
|
|
|
|
|
margin: 0.5rem auto px2rem(28);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(90);
|
|
|
|
|
height: px2rem(50);
|
|
|
|
|
line-height: px2rem(50);
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
background: url(../images/day.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.act {
|
|
|
|
|
color: #FED353;
|
|
|
|
|
background: url(../images/dayAct.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.timeTab {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: px2rem(44);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(190);
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(80);
|
|
|
|
|
height: px2rem(44);
|
|
|
|
|
line-height: px2rem(55);
|
|
|
|
|
background: url(../images/timeTab.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(18);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-right: px2rem(-10);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.act {
|
|
|
|
|
line-height: px2rem(44);
|
|
|
|
|
background: url(../images/timeTabAct.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
color: #FED353;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top3 {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: px2rem(667);
|
|
|
|
|
height: px2rem(236);
|
|
|
|
|
margin: px2rem(227) auto px2rem(-5);
|
|
|
|
|
background: url(../images/page1Box2TopBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
.no1 {
|
|
|
|
|
width: px2rem(159);
|
|
|
|
|
height: px2rem(174);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: -1.4rem;
|
|
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(142);
|
|
|
|
|
height: px2rem(142);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: px2rem(2) solid #FFCD45;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(30);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-align: center;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 2.6rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 3.2rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no2 {
|
|
|
|
|
width: px2rem(141);
|
|
|
|
|
height: px2rem(154);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(33);
|
|
|
|
|
top: -0.6rem;
|
|
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(122);
|
|
|
|
|
height: px2rem(122);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: px2rem(2) solid #6284FA;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(30);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-align: center;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 2.1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 2.7rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no3 {
|
|
|
|
|
width: px2rem(141);
|
|
|
|
|
height: px2rem(154);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(33);
|
|
|
|
|
top: -0.6rem;
|
|
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(122);
|
|
|
|
|
height: px2rem(122);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: px2rem(2) solid #FF4748;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(30);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-align: center;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 2.1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 2.7rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
width: px2rem(662);
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
height: 16.2rem;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: px2rem(124);
|
|
|
|
|
background: url(../images/page1LiBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin-bottom: px2rem(8);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 px2rem(28);
|
|
|
|
|
|
|
|
|
|
.num {
|
|
|
|
|
width: 0.6rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(40);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-right: px2rem(24);
|
|
|
|
|
float: left;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(124);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(98);
|
|
|
|
|
height: px2rem(98);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
margin-top: px2rem(13);
|
|
|
|
|
margin-right: px2rem(23);
|
|
|
|
|
border: px2rem(2) solid #FED353;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: px2rem(234);
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(124);
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(28);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
float: right;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(124);
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(22);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.my {
|
|
|
|
|
width: px2rem(750);
|
|
|
|
|
height: px2rem(133);
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: url(../images/page1Box2My.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 0 px2rem(76) 0 px2rem(30);
|
|
|
|
|
z-index: 3;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
.num {
|
|
|
|
|
width: 1.4rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(32);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-right: px2rem(24);
|
|
|
|
|
float: left;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(133);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(98);
|
|
|
|
|
height: px2rem(98);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
margin-top: px2rem(17);
|
|
|
|
|
margin-right: px2rem(23);
|
|
|
|
|
border: px2rem(2) solid #FED353;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: px2rem(234);
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(133);
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(28);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
float: right;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: px2rem(133);
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(22);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page41 {
|
|
|
|
|
background: url(../images/page4Bg1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page42 {
|
|
|
|
|
background: url(../images/page4Bg2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.MagicBoxRule {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 99;
|
|
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
|
|
.MagicBoxRule_in {
|
|
|
|
|
width: px2rem(670);
|
|
|
|
|
height: px2rem(1060);
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
|
width: px2rem(366);
|
|
|
|
|
height: px2rem(86);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 0.45rem;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(168);
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.MagicBoxRulePage1 {
|
|
|
|
|
// display: none;
|
|
|
|
|
width: px2rem(610);
|
|
|
|
|
height: px2rem(820);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(162);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.MagicBoxRulePage2 {
|
|
|
|
|
display: none;
|
|
|
|
|
width: px2rem(610);
|
|
|
|
|
height: px2rem(840);
|
|
|
|
|
background: url(../images/MagicBoxRule2Bg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(164);
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
width: px2rem(535);
|
|
|
|
|
height: 9rem;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(110);
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: px2rem(40);
|
|
|
|
|
margin-bottom: px2rem(31);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: 33.3333333%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #666666;
|
|
|
|
|
font-size: px2rem(18);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
height: px2rem(40);
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
margin-bottom: px2rem(5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
img {
|
|
|
|
|
width: px2rem(24);
|
|
|
|
|
height: px2rem(24);
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.centen {
|
|
|
|
|
line-height: px2rem(40);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
p {
|
|
|
|
|
color: #BC294A;
|
|
|
|
|
margin-bottom: px2rem(3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
color: #BC294A;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.not {
|
|
|
|
|
width: px2rem(535);
|
|
|
|
|
height: 90%;
|
|
|
|
|
line-height: 9rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.MagicBoxRule1 {
|
|
|
|
|
background: url(../images/MagicBoxRule1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.MagicBoxRule2 {
|
|
|
|
|
background: url(../images/MagicBoxRule2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rule {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 99;
|
|
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
|
|
.rule_in {
|
|
|
|
|
width: px2rem(670);
|
|
|
|
|
height: px2rem(1060);
|
|
|
|
|
background: url(../images/rule.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
width: px2rem(614);
|
|
|
|
|
height: 11.6rem;
|
|
|
|
|
margin: px2rem(163) auto 0;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: px2rem(7235);
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.limitedGift {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 99;
|
|
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
|
|
.limitedGift_in {
|
|
|
|
|
width: px2rem(682);
|
|
|
|
|
height: px2rem(1071);
|
|
|
|
|
background: url(../images/limitedGift.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
width: px2rem(570);
|
|
|
|
|
height: 11.6rem;
|
|
|
|
|
margin: px2rem(171) auto 0;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
2024-03-26 15:22:57 +08:00
|
|
|
height: px2rem(911);
|
2024-03-25 15:25:46 +08:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-03-20 18:37:12 +08:00
|
|
|
}
|
|
|
|
|
}
|
