1503 lines
39 KiB
SCSS
1503 lines
39 KiB
SCSS
@function px2rem($px, $rem:75) {
|
|
@return $px / $rem+rem;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "iconfont";
|
|
/* Project id 4251627 */
|
|
src: url('//at.alicdn.com/t/c/font_4251627_lsh8i73eps.woff2?t=1694762890271') format('woff2'),
|
|
url('//at.alicdn.com/t/c/font_4251627_lsh8i73eps.woff?t=1694762890271') format('woff'),
|
|
url('//at.alicdn.com/t/c/font_4251627_lsh8i73eps.ttf?t=1694762890271') format('truetype');
|
|
}
|
|
|
|
.iconfont {
|
|
font-family: "iconfont" !important;
|
|
font-size: px2rem(50);
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.icon-tuzi-01:before {
|
|
content: "\e60d";
|
|
}
|
|
|
|
.icon-tuzi3:before {
|
|
content: "\e600";
|
|
}
|
|
|
|
.icon-a-ziyuan412:before {
|
|
content: "\e8bd";
|
|
}
|
|
|
|
.icon-tuzi:before {
|
|
content: "\e648";
|
|
}
|
|
|
|
|
|
|
|
|
|
.rabbit {
|
|
position: absolute;
|
|
z-index: 99;
|
|
// width: px2rem(100);
|
|
}
|
|
|
|
|
|
body {
|
|
width: 100%;
|
|
// height: 100%;
|
|
// overflow-x: hidden;
|
|
// background: linear-gradient(90deg, #9980FF, #EB8FEA);
|
|
background: #0C0C21;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
top: px2rem(70);
|
|
left: px2rem(34);
|
|
z-index: 8;
|
|
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(702);
|
|
background: url(../images/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto -2rem;
|
|
position: relative;
|
|
|
|
.rule_icon {
|
|
position: absolute;
|
|
width: px2rem(50);
|
|
height: px2rem(170);
|
|
top: px2rem(314);
|
|
right: px2rem(10);
|
|
}
|
|
}
|
|
|
|
.giftBox {
|
|
position: relative;
|
|
width: px2rem(679);
|
|
height: px2rem(550);
|
|
margin: 0 auto px2rem(16);
|
|
background: url(../images/giftBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.swiper {
|
|
width: px2rem(543);
|
|
height: px2rem(442);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: px2rem(82);
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
width: px2rem(495);
|
|
height: px2rem(91);
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: px2rem(226);
|
|
height: 100%;
|
|
}
|
|
|
|
.tab1 {
|
|
background: url(../images/tab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2 {
|
|
background: url(../images/tab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab_active1 {
|
|
background: url(../images/tab_acvive1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab_active2 {
|
|
background: url(../images/tab_active2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.page1 {
|
|
// display: none;
|
|
|
|
.play1 {
|
|
// display: none;
|
|
|
|
.playBox {
|
|
width: px2rem(729);
|
|
height: px2rem(892);
|
|
background: url(../images/playBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
|
|
.stab {
|
|
width: px2rem(621);
|
|
height: px2rem(61);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: px2rem(77);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/stab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
div {
|
|
width: 33.3333%;
|
|
}
|
|
}
|
|
|
|
.stab1 {
|
|
background: url(../images/stab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.stab2 {
|
|
background: url(../images/stab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.stab3 {
|
|
background: url(../images/stab3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.h2Title {
|
|
width: px2rem(342);
|
|
height: px2rem(85);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(183);
|
|
}
|
|
|
|
.dividerecords {
|
|
width: px2rem(124);
|
|
height: px2rem(54);
|
|
position: absolute;
|
|
right: px2rem(52);
|
|
top: px2rem(250);
|
|
}
|
|
|
|
.dosBg {
|
|
width: px2rem(433);
|
|
height: px2rem(220);
|
|
background: url(../images/dosBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(293);
|
|
overflow: hidden;
|
|
|
|
.h3Title {
|
|
width: px2rem(212);
|
|
height: px2rem(43);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(26);
|
|
}
|
|
|
|
b {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: px2rem(73);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(40);
|
|
font-weight: bold;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
height: px2rem(56);
|
|
line-height: px2rem(56);
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: px2rem(32);
|
|
text-align: center;
|
|
margin-top: px2rem(6);
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: px2rem(60);
|
|
height: px2rem(56);
|
|
text-align: center;
|
|
background: url(../images/spanIcon.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bRuleBg {
|
|
width: px2rem(743);
|
|
height: 4.7rem;
|
|
background: url(../images/bRuleBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: -3.2rem auto 0;
|
|
position: relative;
|
|
|
|
.guafenBut {
|
|
width: px2rem(295);
|
|
height: px2rem(109);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-60);
|
|
}
|
|
|
|
.goSengBut {
|
|
width: px2rem(235);
|
|
height: px2rem(69);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(250);
|
|
}
|
|
}
|
|
}
|
|
|
|
.play2 {
|
|
display: none;
|
|
|
|
.playBox2 {
|
|
width: px2rem(680);
|
|
height: px2rem(998);
|
|
margin: 0 auto px2rem(37);
|
|
position: relative;
|
|
background: url(../images/palyBg2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.stab {
|
|
width: px2rem(621);
|
|
height: px2rem(61);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: px2rem(77);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/stab2.png) no-repeat;
|
|
background-size: 100%;
|
|
|
|
div {
|
|
width: 33.3333%;
|
|
}
|
|
}
|
|
|
|
.play2Text {
|
|
width: px2rem(613);
|
|
height: px2rem(28);
|
|
position: absolute;
|
|
top: px2rem(168);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.task {
|
|
width: px2rem(653);
|
|
height: px2rem(696);
|
|
background: url(../images/task.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: px2rem(206) auto 0;
|
|
position: relative;
|
|
|
|
.moonSecurities {
|
|
color: #8C492A;
|
|
font-size: px2rem(26);
|
|
position: absolute;
|
|
top: px2rem(102);
|
|
left: px2rem(29);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.dayTask {
|
|
width: px2rem(227);
|
|
height: px2rem(59);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(133);
|
|
}
|
|
|
|
.foeTask {
|
|
width: px2rem(227);
|
|
height: px2rem(59);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(386);
|
|
}
|
|
|
|
.taksli {
|
|
width: px2rem(611);
|
|
height: px2rem(76);
|
|
background: url(../images/taskListBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(201);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: px2rem(76);
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
padding-left: px2rem(30);
|
|
|
|
p {
|
|
color: #8C492A;
|
|
font-size: px2rem(24);
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(146);
|
|
height: px2rem(54);
|
|
margin-top: px2rem(20);
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.taks1 {
|
|
top: px2rem(201);
|
|
}
|
|
|
|
.taks2 {
|
|
top: px2rem(285);
|
|
}
|
|
|
|
.taks3 {
|
|
top: px2rem(459);
|
|
height: px2rem(95);
|
|
line-height: normal;
|
|
background: url(../images/taskListBg2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
p {
|
|
margin-top: px2rem(19);
|
|
|
|
b {
|
|
color: #C7535B;
|
|
margin-top: px2rem(10);
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.taks5 {
|
|
display: none;
|
|
top: px2rem(563);
|
|
height: px2rem(95);
|
|
line-height: normal;
|
|
background: url(../images/taskListBg2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
p {
|
|
margin-top: px2rem(19);
|
|
|
|
b {
|
|
color: #C7535B;
|
|
margin-top: px2rem(10);
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.taks4 {
|
|
top: px2rem(563);
|
|
height: 1.65rem;
|
|
line-height: normal;
|
|
background: url(../images/taskListBg2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
p {
|
|
margin-top: px2rem(19);
|
|
|
|
b {
|
|
color: #C7535B;
|
|
margin-top: px2rem(0);
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.but {
|
|
margin-top: 0.48rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.play3 {
|
|
display: none;
|
|
|
|
.draw {
|
|
width: px2rem(680);
|
|
height: px2rem(736);
|
|
position: relative;
|
|
margin: 0 auto px2rem(0);
|
|
background: url(../images/drawBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.stab {
|
|
width: px2rem(621);
|
|
height: px2rem(61);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: px2rem(77);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/stab3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
div {
|
|
width: 33.3333%;
|
|
}
|
|
}
|
|
|
|
.moom {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: px2rem(29);
|
|
top: px2rem(178);
|
|
color: #FFF0B9;
|
|
font-weight: bold;
|
|
font-size: px2rem(24);
|
|
}
|
|
|
|
.dhjl {
|
|
width: px2rem(136);
|
|
height: px2rem(48);
|
|
position: absolute;
|
|
right: px2rem(17);
|
|
top: px2rem(169);
|
|
position: absolute;
|
|
}
|
|
|
|
.drawBg {
|
|
width: px2rem(659);
|
|
height: px2rem(386);
|
|
background: url(../images/drawInbg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: px2rem(226);
|
|
transform: translateX(-50%);
|
|
|
|
.drawBox {
|
|
width: px2rem(531);
|
|
height: px2rem(170);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(107);
|
|
overflow: hidden;
|
|
|
|
.drawBoxAll {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(0);
|
|
width: px2rem(531);
|
|
height: px2rem(3740);
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: px2rem(1870);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.but1 {
|
|
width: px2rem(222);
|
|
height: px2rem(81);
|
|
position: absolute;
|
|
left: px2rem(102);
|
|
bottom: px2rem(25);
|
|
}
|
|
|
|
.but10 {
|
|
width: px2rem(222);
|
|
height: px2rem(81);
|
|
position: absolute;
|
|
right: px2rem(102);
|
|
bottom: px2rem(25);
|
|
}
|
|
}
|
|
|
|
.drawBoxBg {
|
|
width: px2rem(679);
|
|
height: px2rem(518);
|
|
background: url(../images/drawBoxBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(37);
|
|
overflow: hidden;
|
|
|
|
.swiper {
|
|
width: px2rem(493);
|
|
height: px2rem(405);
|
|
margin: 1.1rem auto 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page2 {
|
|
display: none;
|
|
|
|
.listBox {
|
|
width: px2rem(680);
|
|
height: 31.4rem;
|
|
margin: 0 auto px2rem(160);
|
|
background: url(../images/listBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.listRule_icon {
|
|
position: absolute;
|
|
width: px2rem(50);
|
|
height: px2rem(170);
|
|
right: px2rem(-22);
|
|
top: px2rem(63);
|
|
}
|
|
|
|
.listTab {
|
|
width: px2rem(410);
|
|
height: px2rem(74);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(68);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: px2rem(204);
|
|
}
|
|
|
|
.listTab1 {
|
|
background: url(../images/listTab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.listTab2 {
|
|
background: url(../images/listTab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.listTab_active1 {
|
|
background: url(../images/listTab_active1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.listTab_active2 {
|
|
background: url(../images/listTab_active2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.dayTab {
|
|
width: px2rem(235);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(150);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: px2rem(103);
|
|
}
|
|
|
|
.day1 {
|
|
background: url(../images/day1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.day2 {
|
|
background: url(../images/day2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.day_active1 {
|
|
background: url(../images/day_active1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.day_active2 {
|
|
background: url(../images/day_active2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.listText {
|
|
width: px2rem(604);
|
|
height: px2rem(162);
|
|
position: absolute;
|
|
top: px2rem(217);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.time {
|
|
width: px2rem(650);
|
|
height: px2rem(58);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: px2rem(403);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
div {
|
|
width: px2rem(107);
|
|
height: px2rem(58);
|
|
line-height: px2rem(48);
|
|
background: url(../images/date.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.active {
|
|
background: url(../images/dateAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.noBg {
|
|
width: px2rem(531);
|
|
height: px2rem(178);
|
|
position: absolute;
|
|
top: px2rem(784);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/noBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
|
|
.no1 {
|
|
width: px2rem(221);
|
|
height: px2rem(214);
|
|
position: absolute;
|
|
top: -3.5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.txBg {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(145);
|
|
height: px2rem(145);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(27);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFF6F6;
|
|
font-size: px2rem(18);
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 4.5rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
b {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFF6F6;
|
|
font-size: px2rem(18);
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 4.9rem;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
width: px2rem(159);
|
|
height: px2rem(167);
|
|
position: absolute;
|
|
top: -1.9rem;
|
|
left: 0.9rem;
|
|
transform: translateX(-50%);
|
|
|
|
.txBg {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(115);
|
|
height: px2rem(115);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(22);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFF6F6;
|
|
font-size: px2rem(16);
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 3.2rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
b {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFF6F6;
|
|
font-size: px2rem(16);
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 3.6rem;
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
width: px2rem(159);
|
|
height: px2rem(167);
|
|
position: absolute;
|
|
top: -1.9rem;
|
|
right: -1.2rem;
|
|
transform: translateX(-50%);
|
|
|
|
.txBg {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(115);
|
|
height: px2rem(115);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(22);
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFF6F6;
|
|
font-size: px2rem(16);
|
|
font-weight: bold;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 3.2rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
b {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFF6F6;
|
|
font-size: px2rem(16);
|
|
font-weight: bold;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 3.6rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.noBgB {
|
|
width: px2rem(650);
|
|
height: px2rem(158);
|
|
position: absolute;
|
|
top: px2rem(895);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.ul {
|
|
width: px2rem(659);
|
|
height: px2rem(1873);
|
|
background: url(../images/listUlBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: px2rem(480);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
box-sizing: border-box;
|
|
padding-top: px2rem(548);
|
|
|
|
ul {
|
|
width: px2rem(649);
|
|
height: 16.7rem;
|
|
margin: 0 auto;
|
|
overflow-y: scroll;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(140);
|
|
background: url(../images/liBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(41);
|
|
position: relative;
|
|
|
|
.num {
|
|
width: px2rem(42);
|
|
height: px2rem(42);
|
|
line-height: px2rem(42);
|
|
background: #C1454E;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
float: left;
|
|
margin-right: 1.7rem;
|
|
margin-top: px2rem(48);
|
|
}
|
|
|
|
.txBg {
|
|
width: px2rem(115);
|
|
height: px2rem(110);
|
|
position: absolute;
|
|
left: 1.266667rem;
|
|
top: px2rem(20);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(85);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 1.36rem;
|
|
top: px2rem(27);
|
|
}
|
|
|
|
.name {
|
|
float: left;
|
|
height: px2rem(140);
|
|
line-height: px2rem(140);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 2.4rem;
|
|
}
|
|
|
|
.sore {
|
|
float: right;
|
|
height: px2rem(140);
|
|
line-height: px2rem(140);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.my {
|
|
width: 100%;
|
|
height: px2rem(144);
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: url(../images/myBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(63);
|
|
|
|
.num {
|
|
width: px2rem(80);
|
|
height: px2rem(144);
|
|
line-height: px2rem(144);
|
|
text-align: center;
|
|
color: #3C346D;
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
float: left;
|
|
margin-right: 1.9rem;
|
|
}
|
|
|
|
.txBg {
|
|
width: px2rem(115);
|
|
height: px2rem(110);
|
|
position: absolute;
|
|
left: px2rem(170);
|
|
top: px2rem(20);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(85);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(177);
|
|
top: px2rem(27);
|
|
}
|
|
|
|
.name {
|
|
float: left;
|
|
height: px2rem(144);
|
|
line-height: px2rem(144);
|
|
color: #3C346D;
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 2.5rem;
|
|
}
|
|
|
|
.sore {
|
|
float: right;
|
|
height: px2rem(144);
|
|
line-height: px2rem(144);
|
|
color: #3C346D;
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 9;
|
|
display: none;
|
|
|
|
.rule_in {
|
|
width: px2rem(675);
|
|
height: px2rem(1044);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/rule_in.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
div {
|
|
width: px2rem(605);
|
|
height: 12rem;
|
|
overflow-y: scroll;
|
|
margin: 1.1rem auto 0;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: px2rem(2059);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.dividerecordsBg {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 9;
|
|
display: none;
|
|
|
|
.dividerecordsBg_in {
|
|
width: px2rem(698);
|
|
height: px2rem(707);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/dividerecordsBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
width: 4.4rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 2rem auto 0;
|
|
transform: translateX(3%);
|
|
|
|
div {
|
|
width: px2rem(150);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: px2rem(28);
|
|
}
|
|
}
|
|
|
|
.ul {
|
|
width: 100%;
|
|
height: 5rem;
|
|
overflow-y: scroll;
|
|
margin: 0.3rem auto 0;
|
|
transform: translateX(2%);
|
|
|
|
.list {
|
|
width: 4.4rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 auto 0.2rem;
|
|
|
|
span {
|
|
width: px2rem(150);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(20);
|
|
}
|
|
|
|
p {
|
|
width: px2rem(150);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.duihuanBg {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 9;
|
|
display: none;
|
|
|
|
.dividerecordsBg_in {
|
|
width: px2rem(698);
|
|
height: px2rem(707);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/duihuanBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
width: 4.4rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 2rem auto 0;
|
|
transform: translateX(3%);
|
|
|
|
div {
|
|
width: px2rem(150);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: px2rem(28);
|
|
}
|
|
}
|
|
|
|
.ul {
|
|
width: 100%;
|
|
height: 5rem;
|
|
overflow-y: scroll;
|
|
margin: 0.3rem auto 0;
|
|
transform: translateX(2%);
|
|
|
|
.list {
|
|
width: 4.4rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 auto 0.2rem;
|
|
|
|
span {
|
|
width: px2rem(150);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(20);
|
|
}
|
|
|
|
p {
|
|
width: px2rem(150);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.carveup {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 9;
|
|
display: none;
|
|
|
|
.carveup_in {
|
|
width: px2rem(392);
|
|
height: px2rem(454);
|
|
background: url(../images/carveUp.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.box {
|
|
width: px2rem(220);
|
|
height: px2rem(227);
|
|
position: absolute;
|
|
top: px2rem(76);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: px2rem(250);
|
|
text-align: center;
|
|
left: 0;
|
|
color: #794300;
|
|
font-size: px2rem(20);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.listrule1 {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 9;
|
|
display: none;
|
|
|
|
.listrule1_in {
|
|
width: px2rem(657);
|
|
height: px2rem(1170);
|
|
background: url(../images/listrule1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.box {
|
|
width: px2rem(630);
|
|
height: 14rem;
|
|
overflow-y: scroll;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(106);
|
|
|
|
img {
|
|
width: 100%;
|
|
height: px2rem(2044);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.listrule2 {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 9;
|
|
display: none;
|
|
|
|
.listrule2_in {
|
|
width: px2rem(657);
|
|
height: px2rem(1170);
|
|
background: url(../images/listrule2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.box {
|
|
width: px2rem(630);
|
|
height: 14rem;
|
|
overflow-y: scroll;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(106);
|
|
|
|
img {
|
|
width: 100%;
|
|
height: px2rem(2044);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.exchange {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 9;
|
|
display: none;
|
|
|
|
.box {
|
|
width: px2rem(498);
|
|
height: px2rem(518);
|
|
background: url(../images/exchange.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.h2 {
|
|
width: 100%;
|
|
height: px2rem(28);
|
|
position: absolute;
|
|
top: px2rem(32);
|
|
color: #661F00;
|
|
font-size: px2rem(36);
|
|
font-weight: bold;
|
|
left: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.h3 {
|
|
width: 100%;
|
|
height: px2rem(28);
|
|
position: absolute;
|
|
top: px2rem(80);
|
|
color: #CAB684;
|
|
font-size: px2rem(18);
|
|
left: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(259);
|
|
height: px2rem(55);
|
|
position: absolute;
|
|
top: px2rem(433);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(435);
|
|
height: px2rem(270);
|
|
position: absolute;
|
|
top: px2rem(115);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
overflow-y: scroll;
|
|
|
|
li {
|
|
width: px2rem(129);
|
|
height: px2rem(129);
|
|
background: url(../images/exchangeliBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin-bottom: 0.2rem;
|
|
|
|
img {
|
|
width: px2rem(73);
|
|
height: px2rem(78);
|
|
position: absolute;
|
|
top: px2rem(16);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.type1 {
|
|
width: px2rem(73);
|
|
height: px2rem(73);
|
|
}
|
|
|
|
.type2 {
|
|
width: 1.4rem;
|
|
height: 0.5rem;
|
|
top: 0.55rem;
|
|
}
|
|
|
|
.type3 {
|
|
width: 1.3rem;
|
|
height: 0.7rem;
|
|
top: 0.4rem;
|
|
}
|
|
|
|
.type4 {
|
|
width: 1.3rem;
|
|
height: 0.8rem;
|
|
top: 0.35rem;
|
|
}
|
|
|
|
.type5 {
|
|
width: px2rem(73);
|
|
height: px2rem(78);
|
|
}
|
|
|
|
b {
|
|
color: #794300;
|
|
font-size: px2rem(18);
|
|
position: absolute;
|
|
right: px2rem(10);
|
|
top: px2rem(12);
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #794300;
|
|
font-size: px2rem(16);
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: px2rem(13);
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.endActivity {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, .4);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.endActivity_in {
|
|
width: px2rem(450);
|
|
height: px2rem(357);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/endActivity.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.but {
|
|
position: absolute;
|
|
width: px2rem(240);
|
|
height: px2rem(60);
|
|
left: 50%;
|
|
top: px2rem(250);
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
} |