2024-02-01 14:18:56 +08:00
|
|
|
@function px2rem($px) {
|
|
|
|
@return $px / 75+rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
html,
|
|
|
|
body {
|
|
|
|
width: 100%;
|
|
|
|
background: linear-gradient(0deg, #FB88A9 0%, #FFBECE 61%);
|
|
|
|
}
|
|
|
|
|
|
|
|
// 返回按钮
|
|
|
|
.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(630);
|
|
|
|
position: relative;
|
|
|
|
margin: 0 auto 0;
|
|
|
|
background: url(../images/header.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
.rule_icon {
|
|
|
|
width: px2rem(47);
|
|
|
|
height: px2rem(130);
|
|
|
|
position: absolute;
|
|
|
|
top: px2rem(193);
|
|
|
|
right: px2rem(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
width: px2rem(600);
|
|
|
|
height: px2rem(88);
|
|
|
|
line-height: px2rem(88);
|
|
|
|
margin: px2rem(8) auto px2rem(44);
|
|
|
|
background: #fff;
|
|
|
|
border-radius: px2rem(88);
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
div {
|
|
|
|
color: #BB4A56;
|
|
|
|
font-size: px2rem(30);
|
|
|
|
text-align: center;
|
|
|
|
width: px2rem(300);
|
|
|
|
height: px2rem(88);
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab1 {
|
|
|
|
background: url(../images/tab1.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
color: rgba(0, 0, 0, .0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab2 {
|
|
|
|
background: url(../images/tab2.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
color: rgba(0, 0, 0, .0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.page1 {
|
2024-02-05 21:27:57 +08:00
|
|
|
// display: none;
|
2024-02-01 14:18:56 +08:00
|
|
|
|
|
|
|
.pageImg1 {
|
|
|
|
display: block;
|
|
|
|
width: px2rem(690);
|
|
|
|
height: px2rem(1544);
|
|
|
|
margin: 0 auto px2rem(26);
|
|
|
|
}
|
|
|
|
|
|
|
|
.pageImg2 {
|
|
|
|
display: block;
|
|
|
|
width: px2rem(690);
|
|
|
|
height: px2rem(1225);
|
|
|
|
margin: 0 auto px2rem(35);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.page2 {
|
2024-02-05 21:27:57 +08:00
|
|
|
display: none;
|
|
|
|
|
2024-02-01 14:18:56 +08:00
|
|
|
.box {
|
|
|
|
width: px2rem(690);
|
|
|
|
height: px2rem(1286);
|
|
|
|
background: url(../images/page2Bg.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
margin: 0 auto px2rem(36);
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
.listTab {
|
|
|
|
width: px2rem(554);
|
|
|
|
height: px2rem(88);
|
|
|
|
line-height: px2rem(88);
|
|
|
|
border-radius: px2rem(88);
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
margin: px2rem(44) auto px2rem(155);
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
div {
|
|
|
|
width: px2rem(279);
|
|
|
|
color: #BB4A56;
|
|
|
|
font-size: px2rem(30);
|
|
|
|
font-weight: 500;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.listTab1 {
|
|
|
|
background: url(../images/listTab1.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
color: rgba(0, 0, 0, .0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.listTab2 {
|
|
|
|
background: url(../images/listTab2.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
;
|
|
|
|
color: rgba(0, 0, 0, .0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.topBox {
|
|
|
|
position: relative;
|
|
|
|
width: px2rem(620);
|
|
|
|
height: px2rem(400);
|
|
|
|
margin: 0 auto px2rem(-60);
|
|
|
|
|
|
|
|
.top1 {
|
|
|
|
width: px2rem(191);
|
|
|
|
height: px2rem(209);
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
top: px2rem(-94);
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
width: px2rem(169);
|
|
|
|
height: px2rem(164);
|
|
|
|
position: absolute;
|
|
|
|
top: px2rem(4);
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.name {
|
|
|
|
width: 100%;
|
|
|
|
height: px2rem(84);
|
|
|
|
line-height: px2rem(84);
|
|
|
|
text-align: center;
|
|
|
|
color: #FFFFFF;
|
|
|
|
font-size: px2rem(24);
|
|
|
|
font-weight: 400;
|
|
|
|
background: url(../images/name1.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
position: absolute;
|
|
|
|
top: px2rem(200);
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
//超出省略号
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
|
|
|
|
.score {
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
color: #AD4868;
|
|
|
|
font-size: px2rem(22);
|
|
|
|
font-weight: 400;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 3.9rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.top2 {
|
|
|
|
width: px2rem(157);
|
|
|
|
height: px2rem(171);
|
|
|
|
position: absolute;
|
|
|
|
left: px2rem(25);
|
|
|
|
top: px2rem(-28);
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
width: px2rem(135);
|
|
|
|
height: px2rem(132);
|
|
|
|
position: absolute;
|
|
|
|
top: px2rem(4);
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.name {
|
|
|
|
width: 100%;
|
|
|
|
height: px2rem(84);
|
|
|
|
line-height: px2rem(84);
|
|
|
|
text-align: center;
|
|
|
|
color: #FFFFFF;
|
|
|
|
font-size: px2rem(24);
|
|
|
|
font-weight: 400;
|
|
|
|
background: url(../images/name2.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
position: absolute;
|
|
|
|
top: px2rem(170);
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
//超出省略号
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
|
|
|
|
.score {
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
color: #AD4868;
|
|
|
|
font-size: px2rem(22);
|
|
|
|
font-weight: 400;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 3.5rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.top3 {
|
|
|
|
width: px2rem(157);
|
|
|
|
height: px2rem(171);
|
|
|
|
position: absolute;
|
|
|
|
right: px2rem(25);
|
|
|
|
top: px2rem(-28);
|
|
|
|
|
|
|
|
.ts {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
width: px2rem(135);
|
|
|
|
height: px2rem(132);
|
|
|
|
position: absolute;
|
|
|
|
top: px2rem(4);
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.name {
|
|
|
|
width: 100%;
|
|
|
|
height: px2rem(84);
|
|
|
|
line-height: px2rem(84);
|
|
|
|
text-align: center;
|
|
|
|
color: #FFFFFF;
|
|
|
|
font-size: px2rem(24);
|
|
|
|
font-weight: 400;
|
|
|
|
background: url(../images/name3.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
position: absolute;
|
|
|
|
top: px2rem(170);
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
//超出省略号
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
|
|
|
|
.score {
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
color: #AD4868;
|
|
|
|
font-size: px2rem(22);
|
|
|
|
font-weight: 400;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 3.5rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ul {
|
|
|
|
width: px2rem(642);
|
|
|
|
margin: 0 auto px2rem(138);
|
2024-02-05 21:27:57 +08:00
|
|
|
overflow-y: scroll;
|
|
|
|
height: 6.6rem;
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
2024-02-01 14:18:56 +08:00
|
|
|
|
|
|
|
li {
|
|
|
|
width: 100%;
|
|
|
|
height: px2rem(120);
|
|
|
|
line-height: px2rem(120);
|
|
|
|
margin-bottom: px2rem(15);
|
|
|
|
background: #FFF7F9;
|
|
|
|
border-radius: px2rem(12);
|
|
|
|
|
|
|
|
.num {
|
|
|
|
width: px2rem(60);
|
|
|
|
height: 100%;
|
|
|
|
text-align: center;
|
|
|
|
color: #AD4868;
|
|
|
|
font-size: px2rem(36);
|
|
|
|
font-weight: bold;
|
|
|
|
float: left;
|
|
|
|
margin-right: px2rem(22);
|
|
|
|
}
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
width: px2rem(82);
|
|
|
|
height: px2rem(82);
|
|
|
|
box-sizing: border-box;
|
|
|
|
border: px2rem(1) solid #FE71B8;
|
|
|
|
float: left;
|
|
|
|
margin-top: px2rem(19);
|
|
|
|
margin-right: px2rem(17);
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.name {
|
|
|
|
width: px2rem(155);
|
|
|
|
height: 100%;
|
|
|
|
color: #AD4868;
|
|
|
|
font-size: px2rem(26);
|
|
|
|
font-weight: 500;
|
|
|
|
//超出省略号
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
.score {
|
|
|
|
float: right;
|
|
|
|
color: #AD4868;
|
|
|
|
font-size: px2rem(22);
|
|
|
|
font-weight: 400;
|
|
|
|
margin-right: px2rem(28);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.my {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: px2rem(138);
|
|
|
|
line-height: px2rem(138);
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
background: url(../images/my.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.num {
|
|
|
|
width: px2rem(60);
|
|
|
|
height: 100%;
|
|
|
|
text-align: center;
|
|
|
|
color: #AD4868;
|
|
|
|
font-size: px2rem(20);
|
|
|
|
font-weight: 400;
|
|
|
|
float: left;
|
|
|
|
margin-right: px2rem(22);
|
|
|
|
margin-left: px2rem(24);
|
|
|
|
}
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
width: px2rem(82);
|
|
|
|
height: px2rem(82);
|
|
|
|
box-sizing: border-box;
|
|
|
|
border: px2rem(1) solid #FE71B8;
|
|
|
|
float: left;
|
|
|
|
margin-top: px2rem(29);
|
|
|
|
margin-right: px2rem(17);
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.name {
|
|
|
|
width: px2rem(155);
|
|
|
|
height: 100%;
|
|
|
|
color: #AD4868;
|
|
|
|
font-size: px2rem(26);
|
|
|
|
font-weight: 500;
|
|
|
|
//超出省略号
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
.score {
|
|
|
|
float: right;
|
|
|
|
color: #AD4868;
|
|
|
|
font-size: px2rem(22);
|
|
|
|
font-weight: 400;
|
|
|
|
margin-right: px2rem(28);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.bootom {
|
|
|
|
margin-bottom: px2rem(20);
|
|
|
|
|
|
|
|
p {
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
color: #7E0033;
|
|
|
|
font-size: px2rem(24);
|
|
|
|
font-weight: 400;
|
|
|
|
margin-bottom: px2rem(15);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.rule {
|
2024-02-05 21:27:57 +08:00
|
|
|
display: none;
|
2024-02-01 14:18:56 +08:00
|
|
|
position: fixed;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
background: rgba(0, 0, 0, .8);
|
|
|
|
z-index: 99;
|
|
|
|
|
|
|
|
.rule_in {
|
|
|
|
width: px2rem(614);
|
|
|
|
height: px2rem(1015);
|
|
|
|
background: url(../images/rule_bg.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
position: relative;
|
|
|
|
left: 50%;
|
|
|
|
top: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
2024-02-05 21:27:57 +08:00
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.tabRule {
|
|
|
|
width: px2rem(488);
|
|
|
|
height: px2rem(76);
|
|
|
|
line-height: px2rem(76);
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
border-radius: px2rem(48);
|
|
|
|
background: #fff;
|
|
|
|
margin: px2rem(45) auto px2rem(19);
|
|
|
|
|
|
|
|
div {
|
|
|
|
text-align: center;
|
|
|
|
color: #CA5987;
|
|
|
|
font-size: px2rem(28);
|
|
|
|
font-weight: 500;
|
|
|
|
width: px2rem(244);
|
|
|
|
}
|
|
|
|
|
|
|
|
.act {
|
|
|
|
background: url(../images/rule_act.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.box1 {
|
|
|
|
width: px2rem(551);
|
|
|
|
height: 11.4rem;
|
|
|
|
overflow-y: scroll;
|
|
|
|
margin: 0 auto;
|
|
|
|
// display: none;
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
img {
|
|
|
|
display: block;
|
|
|
|
width: px2rem(544);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.box2 {
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
.box2Tab {
|
|
|
|
width: px2rem(356);
|
|
|
|
height: px2rem(60);
|
|
|
|
margin: 0 auto px2rem(20);
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
div {
|
|
|
|
width: px2rem(176);
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab1 {
|
|
|
|
background: url(../images/box2tab1.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab2 {
|
|
|
|
background: url(../images/box2tab2.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.act1 {
|
|
|
|
background: url(../images/box2tabAct1.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.act2 {
|
|
|
|
background: url(../images/box2tabAct2.png) no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgBox {
|
|
|
|
width: px2rem(564);
|
|
|
|
height: 10rem;
|
|
|
|
margin: 0 auto;
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2024-02-01 14:18:56 +08:00
|
|
|
}
|
|
|
|
}
|