2024-03-04 11:46:11 +08:00
|
|
|
@function px2rem($px) {
|
|
|
|
|
@return $px / 75+rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: #FBABAD;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 返回按钮
|
|
|
|
|
.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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
width: px2rem(750);
|
|
|
|
|
height: px2rem(1092);
|
|
|
|
|
background: url(../images/header.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 0 auto px2rem(18);
|
|
|
|
|
|
|
|
|
|
.rule_icon {
|
|
|
|
|
width: px2rem(86);
|
|
|
|
|
height: px2rem(255);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(0);
|
|
|
|
|
top: px2rem(469);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabBox {
|
|
|
|
|
width: px2rem(575);
|
|
|
|
|
height: px2rem(85);
|
|
|
|
|
margin: 0 auto px2rem(17);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(269);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab1 {
|
|
|
|
|
background: url(../images/tab1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab2 {
|
|
|
|
|
background: url(../images/tab2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabAct1 {
|
|
|
|
|
background: url(../images/tabAct1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabAct2 {
|
|
|
|
|
background: url(../images/tabAct2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page1 {
|
|
|
|
|
// display: none;
|
|
|
|
|
width: px2rem(708);
|
|
|
|
|
height: px2rem(1395);
|
|
|
|
|
margin: 0 auto px2rem(26);
|
|
|
|
|
background: url(../images/page1Bg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page2 {
|
|
|
|
|
display: none;
|
|
|
|
|
width: px2rem(708);
|
|
|
|
|
height: px2rem(1382);
|
|
|
|
|
background: url(../images/page2Bg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin: 0 auto px2rem(155);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.tablist {
|
|
|
|
|
width: px2rem(368);
|
|
|
|
|
height: px2rem(53);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin: px2rem(38) auto px2rem(70);
|
|
|
|
|
background: url(../images/tabListBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(184);
|
|
|
|
|
height: px2rem(53);
|
|
|
|
|
line-height: px2rem(53);
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(29);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.act {
|
|
|
|
|
background: url(../images/tabListAct.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top3Box {
|
|
|
|
|
width: px2rem(625);
|
|
|
|
|
height: px2rem(235);
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 0 auto px2rem(25);
|
|
|
|
|
|
|
|
|
|
.no1 {
|
|
|
|
|
width: px2rem(205);
|
|
|
|
|
height: px2rem(262);
|
|
|
|
|
background: url(../images/no1Bg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
|
width: px2rem(117);
|
|
|
|
|
height: px2rem(119);
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(147);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(91);
|
|
|
|
|
height: px2rem(91);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(158);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
width: 100%;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-size: px2rem(23);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(104);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-size: px2rem(20);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(53);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(20);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(18);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no2 {
|
|
|
|
|
width: px2rem(205);
|
|
|
|
|
height: px2rem(235);
|
|
|
|
|
background: url(../images/no23Bg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0%;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
|
width: px2rem(117);
|
|
|
|
|
height: px2rem(119);
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(129);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(91);
|
|
|
|
|
height: px2rem(91);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(142);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
width: 100%;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-size: px2rem(23);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(95);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-size: px2rem(20);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(54);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(20);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(20);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no3 {
|
|
|
|
|
width: px2rem(205);
|
|
|
|
|
height: px2rem(235);
|
|
|
|
|
background: url(../images/no23Bg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0%;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
|
width: px2rem(117);
|
|
|
|
|
height: px2rem(119);
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(129);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(91);
|
|
|
|
|
height: px2rem(91);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(142);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
width: 100%;
|
|
|
|
|
//超出省略号
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-size: px2rem(23);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(95);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-size: px2rem(20);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(54);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(20);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(20);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
width: px2rem(695);
|
|
|
|
|
height: 12.6rem;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
margin: 0 auto 0;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: px2rem(115);
|
|
|
|
|
background: url(../images/liBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin-bottom: px2rem(2);
|
|
|
|
|
|
|
|
|
|
.num {
|
|
|
|
|
width: px2rem(35);
|
|
|
|
|
height: px2rem(115);
|
|
|
|
|
line-height: px2rem(115);
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-size: px2rem(30);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: px2rem(29);
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-right: px2rem(45);
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(87);
|
|
|
|
|
height: px2rem(87);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: px2rem(2) solid #AE3E4E;
|
|
|
|
|
margin-top: px2rem(15);
|
|
|
|
|
margin-right: px2rem(28);
|
|
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
width: 3rem;
|
|
|
|
|
height: px2rem(115);
|
|
|
|
|
line-height: px2rem(115);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-size: px2rem(27);
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
float: right;
|
|
|
|
|
height: px2rem(115);
|
|
|
|
|
line-height: px2rem(115);
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-right: px2rem(42);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.my {
|
|
|
|
|
position: fixed;
|
|
|
|
|
width: px2rem(750);
|
|
|
|
|
height: px2rem(155);
|
|
|
|
|
background: url(../images/my.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin-bottom: px2rem(2);
|
2024-03-04 14:44:11 +08:00
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
2024-03-04 11:46:11 +08:00
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
|
|
.num {
|
|
|
|
|
width: px2rem(100);
|
|
|
|
|
height: px2rem(155);
|
|
|
|
|
line-height: px2rem(155);
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-size: px2rem(30);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-left: px2rem(29);
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-right: px2rem(19);
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(87);
|
|
|
|
|
height: px2rem(87);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: px2rem(2) solid #AE3E4E;
|
|
|
|
|
margin-top: px2rem(32);
|
|
|
|
|
margin-right: px2rem(28);
|
|
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
width: 3rem;
|
|
|
|
|
height: px2rem(155);
|
|
|
|
|
line-height: px2rem(155);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-size: px2rem(27);
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
float: right;
|
|
|
|
|
height: px2rem(155);
|
|
|
|
|
line-height: px2rem(155);
|
|
|
|
|
color: #AE3E4E;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-right: px2rem(42);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rule {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
background: rgba(0, 0, 0, .6);
|
|
|
|
|
|
|
|
|
|
.rule_in {
|
|
|
|
|
width: px2rem(657);
|
|
|
|
|
height: px2rem(985);
|
|
|
|
|
background: url(../images/ruleBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
|
|
|
|
.rulebox {
|
|
|
|
|
width: px2rem(605);
|
|
|
|
|
height: 11.5rem;
|
|
|
|
|
margin: px2rem(104) auto 0;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
