499 lines
8.7 KiB
CSS
499 lines
8.7 KiB
CSS
html,
|
|
body {
|
|
width: 100%;
|
|
background: #FBABAD;
|
|
}
|
|
|
|
.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: 14.56rem;
|
|
background: url(../images/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin: 0 auto 0.24rem;
|
|
}
|
|
|
|
.header .rule_icon {
|
|
width: 1.14667rem;
|
|
height: 3.4rem;
|
|
position: absolute;
|
|
right: 0rem;
|
|
top: 6.25333rem;
|
|
}
|
|
|
|
.tabBox {
|
|
width: 7.66667rem;
|
|
height: 1.13333rem;
|
|
margin: 0 auto 0.22667rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tabBox div {
|
|
width: 3.58667rem;
|
|
}
|
|
|
|
.tabBox .tab1 {
|
|
background: url(../images/tab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tabBox .tab2 {
|
|
background: url(../images/tab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tabBox .tabAct1 {
|
|
background: url(../images/tabAct1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tabBox .tabAct2 {
|
|
background: url(../images/tabAct2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.page1 {
|
|
width: 9.44rem;
|
|
height: 18.6rem;
|
|
margin: 0 auto 0.34667rem;
|
|
background: url(../images/page1Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.page2 {
|
|
display: none;
|
|
width: 9.44rem;
|
|
height: 18.42667rem;
|
|
background: url(../images/page2Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto 2.06667rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page2 .tablist {
|
|
width: 4.90667rem;
|
|
height: 0.70667rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0.50667rem auto 0.93333rem;
|
|
background: url(../images/tabListBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.page2 .tablist div {
|
|
width: 2.45333rem;
|
|
height: 0.70667rem;
|
|
line-height: 0.70667rem;
|
|
color: #FFFFFF;
|
|
font-size: 0.38667rem;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
}
|
|
|
|
.page2 .tablist .act {
|
|
background: url(../images/tabListAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.page2 .top3Box {
|
|
width: 8.33333rem;
|
|
height: 3.13333rem;
|
|
position: relative;
|
|
margin: 0 auto 0.33333rem;
|
|
}
|
|
|
|
.page2 .top3Box .no1 {
|
|
width: 2.73333rem;
|
|
height: 3.49333rem;
|
|
background: url(../images/no1Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
}
|
|
|
|
.page2 .top3Box .no1 .ts {
|
|
width: 1.56rem;
|
|
height: 1.58667rem;
|
|
z-index: 2;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 1.96rem;
|
|
}
|
|
|
|
.page2 .top3Box .no1 .tx {
|
|
width: 1.21333rem;
|
|
height: 1.21333rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 2.10667rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.page2 .top3Box .no1 .name {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #AE3E4E;
|
|
font-size: 0.30667rem;
|
|
font-weight: 500;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 1.38667rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page2 .top3Box .no1 p {
|
|
width: 100%;
|
|
color: #AE3E4E;
|
|
font-size: 0.26667rem;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0.70667rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page2 .top3Box .no1 .score {
|
|
width: 100%;
|
|
color: #fff;
|
|
font-size: 0.26667rem;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0.24rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page2 .top3Box .no2 {
|
|
width: 2.73333rem;
|
|
height: 3.13333rem;
|
|
background: url(../images/no23Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 0%;
|
|
bottom: 0;
|
|
}
|
|
|
|
.page2 .top3Box .no2 .ts {
|
|
width: 1.56rem;
|
|
height: 1.58667rem;
|
|
z-index: 2;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 1.72rem;
|
|
}
|
|
|
|
.page2 .top3Box .no2 .tx {
|
|
width: 1.21333rem;
|
|
height: 1.21333rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 1.89333rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.page2 .top3Box .no2 .name {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #AE3E4E;
|
|
font-size: 0.30667rem;
|
|
font-weight: 500;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 1.26667rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page2 .top3Box .no2 p {
|
|
width: 100%;
|
|
color: #AE3E4E;
|
|
font-size: 0.26667rem;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0.72rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page2 .top3Box .no2 .score {
|
|
width: 100%;
|
|
color: #fff;
|
|
font-size: 0.26667rem;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0.26667rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page2 .top3Box .no3 {
|
|
width: 2.73333rem;
|
|
height: 3.13333rem;
|
|
background: url(../images/no23Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: 0%;
|
|
bottom: 0;
|
|
}
|
|
|
|
.page2 .top3Box .no3 .ts {
|
|
width: 1.56rem;
|
|
height: 1.58667rem;
|
|
z-index: 2;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 1.72rem;
|
|
}
|
|
|
|
.page2 .top3Box .no3 .tx {
|
|
width: 1.21333rem;
|
|
height: 1.21333rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 1.89333rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.page2 .top3Box .no3 .name {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #AE3E4E;
|
|
font-size: 0.30667rem;
|
|
font-weight: 500;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 1.26667rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page2 .top3Box .no3 p {
|
|
width: 100%;
|
|
color: #AE3E4E;
|
|
font-size: 0.26667rem;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0.72rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page2 .top3Box .no3 .score {
|
|
width: 100%;
|
|
color: #fff;
|
|
font-size: 0.26667rem;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0.26667rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page2 ul {
|
|
width: 9.26667rem;
|
|
height: 12.6rem;
|
|
overflow-y: scroll;
|
|
margin: 0 auto 0;
|
|
}
|
|
|
|
.page2 ul::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.page2 ul li {
|
|
width: 100%;
|
|
height: 1.53333rem;
|
|
background: url(../images/liBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-bottom: 0.02667rem;
|
|
}
|
|
|
|
.page2 ul li .num {
|
|
width: 0.46667rem;
|
|
height: 1.53333rem;
|
|
line-height: 1.53333rem;
|
|
color: #AE3E4E;
|
|
font-size: 0.4rem;
|
|
font-weight: 400;
|
|
margin-left: 0.38667rem;
|
|
text-align: center;
|
|
margin-right: 0.6rem;
|
|
float: left;
|
|
}
|
|
|
|
.page2 ul li .tx {
|
|
width: 1.16rem;
|
|
height: 1.16rem;
|
|
border-radius: 50%;
|
|
border: 0.02667rem solid #AE3E4E;
|
|
margin-top: 0.2rem;
|
|
margin-right: 0.37333rem;
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
.page2 ul li .name {
|
|
width: 3rem;
|
|
height: 1.53333rem;
|
|
line-height: 1.53333rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #AE3E4E;
|
|
font-size: 0.36rem;
|
|
float: left;
|
|
}
|
|
|
|
.page2 ul li .score {
|
|
float: right;
|
|
height: 1.53333rem;
|
|
line-height: 1.53333rem;
|
|
color: #AE3E4E;
|
|
font-weight: 400;
|
|
margin-right: 0.56rem;
|
|
}
|
|
|
|
.page2 .my {
|
|
position: fixed;
|
|
width: 10rem;
|
|
height: 2.06667rem;
|
|
background: url(../images/my.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-bottom: 0.02667rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
}
|
|
|
|
.page2 .my .num {
|
|
width: 1.33333rem;
|
|
height: 2.06667rem;
|
|
line-height: 2.06667rem;
|
|
color: #AE3E4E;
|
|
font-size: 0.4rem;
|
|
font-weight: 400;
|
|
margin-left: 0.38667rem;
|
|
text-align: center;
|
|
margin-right: 0.25333rem;
|
|
float: left;
|
|
}
|
|
|
|
.page2 .my .tx {
|
|
width: 1.16rem;
|
|
height: 1.16rem;
|
|
border-radius: 50%;
|
|
border: 0.02667rem solid #AE3E4E;
|
|
margin-top: 0.42667rem;
|
|
margin-right: 0.37333rem;
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
.page2 .my .name {
|
|
width: 3rem;
|
|
height: 2.06667rem;
|
|
line-height: 2.06667rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #AE3E4E;
|
|
font-size: 0.36rem;
|
|
float: left;
|
|
}
|
|
|
|
.page2 .my .score {
|
|
float: right;
|
|
height: 2.06667rem;
|
|
line-height: 2.06667rem;
|
|
color: #AE3E4E;
|
|
font-weight: 400;
|
|
margin-right: 0.56rem;
|
|
}
|
|
|
|
.rule {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.rule .rule_in {
|
|
width: 8.76rem;
|
|
height: 13.13333rem;
|
|
background: url(../images/ruleBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.rule .rule_in .rulebox {
|
|
width: 8.06667rem;
|
|
height: 11.5rem;
|
|
margin: 1.38667rem auto 0;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.rule .rule_in .rulebox::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.rule .rule_in .rulebox img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|