402 lines
8.4 KiB
SCSS
402 lines
8.4 KiB
SCSS
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
background-image: url(../images/bg.png);
|
|
background-size: 100% px2rem(2996);
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.rabbit {
|
|
z-index: 999;
|
|
width: px2rem(60);
|
|
height: px2rem(60);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.layui-m-layershade {
|
|
background-color: rgba(0, 0, 0, .4) !important;
|
|
}
|
|
|
|
.header {
|
|
width: px2rem(750);
|
|
height: px2rem(750);
|
|
margin: 0 auto -2rem;
|
|
background: url(../images/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab {
|
|
width: px2rem(590);
|
|
height: px2rem(76);
|
|
line-height: px2rem(76);
|
|
margin: 0 auto 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #1D388F;
|
|
border: px2rem(2) solid #8FC5FF;
|
|
box-sizing: border-box;
|
|
border-radius: px2rem(12);
|
|
|
|
div {
|
|
width: px2rem(296);
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: px2rem(28);
|
|
}
|
|
|
|
.atc {
|
|
color: #fff;
|
|
background: url(../images/tabAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
|
|
.boxTab {
|
|
width: px2rem(672);
|
|
height: px2rem(168);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: px2rem(68) auto 0;
|
|
|
|
div {
|
|
width: px2rem(212);
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.top {
|
|
width: px2rem(148);
|
|
height: px2rem(148);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(76);
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #696C70;
|
|
font-size: px2rem(24);
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(94);
|
|
font-weight: 500;
|
|
}
|
|
|
|
span {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: px2rem(22);
|
|
height: px2rem(24);
|
|
line-height: px2rem(24);
|
|
color: #696C70;
|
|
font-weight: 400;
|
|
vertical-align: middle;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(128);
|
|
|
|
.img {
|
|
width: px2rem(24);
|
|
height: px2rem(24);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
background: url(../images/notDiamond.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
b {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box1 {
|
|
background: url(../images/notShow.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.top {
|
|
background: url(../images/notBox1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.box2 {
|
|
background: url(../images/notShow.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.top {
|
|
background: url(../images/notBox2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.box3 {
|
|
background: url(../images/notShow.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.top {
|
|
background: url(../images/notBox3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.act1 {
|
|
background: url(../images/show.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.top {
|
|
background: url(../images/box1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
|
|
p {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
span {
|
|
.img {
|
|
background: url(../images/diamond.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
b {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.act2 {
|
|
background: url(../images/show.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.top {
|
|
background: url(../images/box2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
|
|
p {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
span {
|
|
.img {
|
|
background: url(../images/diamond.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
b {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.act3 {
|
|
background: url(../images/show.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.top {
|
|
background: url(../images/box3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
p {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
span {
|
|
.img {
|
|
background: url(../images/diamond.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
b {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page1 {
|
|
// display: none;
|
|
|
|
.boxList {
|
|
width: px2rem(686);
|
|
display: block;
|
|
margin: px2rem(4) auto 0;
|
|
}
|
|
|
|
.boxList1 {
|
|
height: px2rem(1964);
|
|
}
|
|
|
|
.boxList2 {
|
|
height: px2rem(1554);
|
|
}
|
|
|
|
.boxList3 {
|
|
height: px2rem(1638);
|
|
}
|
|
}
|
|
|
|
.page2 {
|
|
display: none;
|
|
width: px2rem(686);
|
|
height: 8.3rem;
|
|
margin: 0 auto 0;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.div {
|
|
width: px2rem(686);
|
|
height: px2rem(148);
|
|
margin-bottom: px2rem(8);
|
|
background: url(../images/liBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(24);
|
|
|
|
.leftUser {
|
|
float: left;
|
|
width: px2rem(132);
|
|
margin-right: px2rem(16);
|
|
margin-top: px2rem(16);
|
|
|
|
.tx {
|
|
display: block;
|
|
width: px2rem(80);
|
|
height: px2rem(80);
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
margin-top: px2rem(4);
|
|
}
|
|
}
|
|
|
|
.inFo {
|
|
float: left;
|
|
width: 3rem;
|
|
text-align: center;
|
|
margin-top: px2rem(40);
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: px2rem(24);
|
|
margin-bottom: px2rem(15);
|
|
|
|
b {
|
|
color: #FFEF8A;
|
|
}
|
|
}
|
|
|
|
span {
|
|
width: 100%;
|
|
display: block;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: px2rem(24);
|
|
|
|
b {
|
|
color: #7AE9FF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rigtUser {
|
|
float: left;
|
|
width: px2rem(132);
|
|
margin-top: px2rem(16);
|
|
|
|
.tx {
|
|
display: block;
|
|
width: px2rem(80);
|
|
height: px2rem(80);
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
margin-top: px2rem(4);
|
|
}
|
|
}
|
|
|
|
.gift {
|
|
float: right;
|
|
display: block;
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
margin-top: px2rem(14);
|
|
}
|
|
}
|
|
}
|
|
|
|
.disclaimers {
|
|
width: 100%;
|
|
margin-top: px2rem(18);
|
|
margin-bottom: px2rem(20);
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(20);
|
|
margin-bottom: px2rem(10);
|
|
}
|
|
} |