1268 lines
30 KiB
SCSS
1268 lines
30 KiB
SCSS
|
@function px2rem($px, $rem:75) {
|
||
|
|
@return $px / $rem+rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
width: 100%;
|
||
|
|
background: #3F197A;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back {
|
||
|
|
position: fixed;
|
||
|
|
top: px2rem(70, );
|
||
|
|
left: px2rem(34, );
|
||
|
|
z-index: 9999;
|
||
|
|
width: px2rem(62, );
|
||
|
|
height: px2rem(62, );
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
width: px2rem(750, );
|
||
|
|
height: px2rem(543, );
|
||
|
|
background: url(../images/header.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.rule_icon {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: px2rem(250, );
|
||
|
|
width: px2rem(120, );
|
||
|
|
height: px2rem(50, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.giftBg {
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(635, );
|
||
|
|
background: url(../images/giftBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: -1rem auto 0;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabBox {
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(72, );
|
||
|
|
line-height: px2rem(72, );
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin: px2rem(46, ) auto 0;
|
||
|
|
|
||
|
|
div {
|
||
|
|
width: px2rem(210, );
|
||
|
|
height: px2rem(72, );
|
||
|
|
text-align: center;
|
||
|
|
color: #FCFCF6;
|
||
|
|
font-size: px2rem(28, );
|
||
|
|
font-family: "PingFang SC";
|
||
|
|
// -webkit-text-stroke: 1px #A676C9;
|
||
|
|
// text-stroke: 1px #A676C9;
|
||
|
|
text-shadow: 1px 1px 0 #A776C9;
|
||
|
|
background: url(../images/tabBut.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active {
|
||
|
|
background: url(../images/tabBut_active.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab1 {
|
||
|
|
|
||
|
|
|
||
|
|
.txs {
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(786, );
|
||
|
|
background: url(../images/txsBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: px2rem(48, ) auto px2rem(45, );
|
||
|
|
// overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-top: px2rem(51, );
|
||
|
|
|
||
|
|
.giftName {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(36, );
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.svga {
|
||
|
|
width: px2rem(576, );
|
||
|
|
height: px2rem(358, );
|
||
|
|
position: absolute;
|
||
|
|
top: px2rem(209, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
z-index: 3;
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
.svga_in {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.line {
|
||
|
|
width: px2rem(579, );
|
||
|
|
height: px2rem(20, );
|
||
|
|
border-radius: px2rem(20, );
|
||
|
|
margin: px2rem(44, ) auto 0;
|
||
|
|
background: #3E0792;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
div {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 0%;
|
||
|
|
height: px2rem(20, );
|
||
|
|
border-radius: px2rem(20, );
|
||
|
|
background: linear-gradient(90deg, #FFF9A0 0%, #F551FF 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: -0.5rem;
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(20, );
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
bottom: -0.5rem;
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(20, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.logosssss {
|
||
|
|
position: absolute;
|
||
|
|
width: px2rem(340, );
|
||
|
|
height: px2rem(340, );
|
||
|
|
top: px2rem(220, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.butsss {
|
||
|
|
width: 8rem;
|
||
|
|
height: px2rem(98, );
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
bottom: px2rem(39, );
|
||
|
|
// margin: 6.6rem auto 0;
|
||
|
|
z-index: 3;
|
||
|
|
|
||
|
|
.css {
|
||
|
|
width: px2rem(258, );
|
||
|
|
height: px2rem(98, );
|
||
|
|
// background: url(../images/cdbut3.png) no-repeat;
|
||
|
|
// background-size: 100% 100%;
|
||
|
|
margin: -0 auto 0;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.but11 {
|
||
|
|
margin: 6.6rem auto 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
width: 8rem;
|
||
|
|
|
||
|
|
.butLeft {
|
||
|
|
// position: absolute;
|
||
|
|
// left: px2rem(63, );
|
||
|
|
// bottom: px2rem(39, );
|
||
|
|
background: url(../images/cdButl.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
width: px2rem(258, );
|
||
|
|
height: px2rem(98, );
|
||
|
|
// z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.butRight {
|
||
|
|
// position: absolute;
|
||
|
|
// right: px2rem(63, );
|
||
|
|
// bottom: px2rem(39, );
|
||
|
|
background: url(../images/cdButr.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
width: px2rem(258, );
|
||
|
|
height: px2rem(98, );
|
||
|
|
// z-index: 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.leftBut_tab1 {
|
||
|
|
width: px2rem(60, );
|
||
|
|
height: px2rem(60, );
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
top: px2rem(360, );
|
||
|
|
left: px2rem(84, );
|
||
|
|
background: url(../images/leftBut_tab1.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightBut_tab1 {
|
||
|
|
width: px2rem(60, );
|
||
|
|
height: px2rem(60, );
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
top: px2rem(360, );
|
||
|
|
right: px2rem(84, );
|
||
|
|
background: url(../images/rightBut_tab1.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.txs_active {
|
||
|
|
background: url(../images/txsBg2.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.butaaa {
|
||
|
|
// z-index: 3;
|
||
|
|
// position: absolute;
|
||
|
|
// left: 50%;
|
||
|
|
// transform: translateX(-50%);
|
||
|
|
// bottom: px2rem(39, );
|
||
|
|
width: px2rem(258, );
|
||
|
|
height: px2rem(98, );
|
||
|
|
background: url(../images/cdbut3.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: -2.6rem auto px2rem(100, );
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toak {
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(1385, );
|
||
|
|
background: url(../images/soka_bg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: 0 auto px2rem(100, );
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
div {
|
||
|
|
width: px2rem(602, );
|
||
|
|
height: px2rem(107, );
|
||
|
|
background: url(../images/tokalisBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: absolute;
|
||
|
|
left: px2rem(50, );
|
||
|
|
|
||
|
|
span {
|
||
|
|
display: block;
|
||
|
|
float: left;
|
||
|
|
margin-top: px2rem(23, );
|
||
|
|
margin-left: px2rem(30, );
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin-bottom: px2rem(15, );
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
}
|
||
|
|
|
||
|
|
strong {
|
||
|
|
font-size: px2rem(20, );
|
||
|
|
color: #E7C9FF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.but {
|
||
|
|
float: right;
|
||
|
|
margin-right: px2rem(30, );
|
||
|
|
margin-top: px2rem(30, );
|
||
|
|
width: px2rem(140, );
|
||
|
|
height: px2rem(48, );
|
||
|
|
background: url(../images/okToka.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.but_active {
|
||
|
|
background: url(../images/noToka.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div:nth-child(1) {
|
||
|
|
top: px2rem(278, );
|
||
|
|
}
|
||
|
|
|
||
|
|
div:nth-child(2) {
|
||
|
|
top: px2rem(419, );
|
||
|
|
}
|
||
|
|
|
||
|
|
div:nth-child(3) {
|
||
|
|
top: px2rem(555, );
|
||
|
|
}
|
||
|
|
|
||
|
|
div:nth-child(4) {
|
||
|
|
top: px2rem(777, );
|
||
|
|
}
|
||
|
|
|
||
|
|
div:nth-child(5) {
|
||
|
|
top: px2rem(913, );
|
||
|
|
}
|
||
|
|
|
||
|
|
div:nth-child(6) {
|
||
|
|
top: px2rem(1049, );
|
||
|
|
}
|
||
|
|
|
||
|
|
div:nth-child(7) {
|
||
|
|
top: px2rem(1180, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.queqiao {
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(633, );
|
||
|
|
background: url(../images/qqBG.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: px2rem(31, ) auto px2rem(44, );
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.myqs {
|
||
|
|
width: px2rem(123, );
|
||
|
|
height: px2rem(42, );
|
||
|
|
position: absolute;
|
||
|
|
top: px2rem(100, );
|
||
|
|
right: px2rem(34, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.barrage_text {
|
||
|
|
width: px2rem(640, );
|
||
|
|
height: 5rem;
|
||
|
|
margin: px2rem(160, ) auto 0;
|
||
|
|
// padding: 0.5rem 0.1rem; box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
img {
|
||
|
|
display: inline-block;
|
||
|
|
width: px2rem(32, );
|
||
|
|
height: px2rem(28, );
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.xw {
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(946, );
|
||
|
|
background: url(../images/xw.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: 0 auto px2rem(100, );
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
div {
|
||
|
|
background: rgba(29, 0, 72, 0.8);
|
||
|
|
width: px2rem(272, );
|
||
|
|
height: px2rem(337, );
|
||
|
|
border-radius: px2rem(10, );
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
.d1 {
|
||
|
|
left: px2rem(60, );
|
||
|
|
top: px2rem(163, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.d2 {
|
||
|
|
right: px2rem(61, );
|
||
|
|
top: px2rem(166, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.d3 {
|
||
|
|
left: px2rem(59, );
|
||
|
|
top: px2rem(538, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.d4 {
|
||
|
|
right: px2rem(61, );
|
||
|
|
top: px2rem(538, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.rule {
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
z-index: 99999;
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
.rule_in {
|
||
|
|
position: relative;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(708, );
|
||
|
|
background: url(../images/rule.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
|
||
|
|
img {
|
||
|
|
position: absolute;
|
||
|
|
top: -0.8rem;
|
||
|
|
right: 0;
|
||
|
|
width: px2rem(68, );
|
||
|
|
height: px2rem(68, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qx_put_out {
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
z-index: 99999;
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
.qx_put_outin {
|
||
|
|
position: relative;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(409, );
|
||
|
|
background: url(../images/qxOutBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
|
||
|
|
img {
|
||
|
|
position: absolute;
|
||
|
|
top: -1rem;
|
||
|
|
right: 0;
|
||
|
|
width: px2rem(68, );
|
||
|
|
height: px2rem(68, );
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
// width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
white-space: nowrap;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0 px2rem(20, );
|
||
|
|
min-width: 5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p1 {
|
||
|
|
top: px2rem(105, );
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(30, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.p2 {
|
||
|
|
top: px2rem(231, );
|
||
|
|
// width: px2rem(, );
|
||
|
|
height: px2rem(56, );
|
||
|
|
border-radius: px2rem(56, );
|
||
|
|
line-height: px2rem(56, );
|
||
|
|
color: #fff;
|
||
|
|
font-size: px2rem(22, );
|
||
|
|
background: rgba(26, 0, 66, 0.5000);
|
||
|
|
border: 1px solid #FFF7A1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qx_put {
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
z-index: 99999;
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
.qx_put_in {
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(737, );
|
||
|
|
background: url(../images/qx_put_bg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: relative;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
|
||
|
|
.update {
|
||
|
|
width: 1.8rem;
|
||
|
|
height: 0.5rem;
|
||
|
|
position: absolute;
|
||
|
|
// background: #fff;
|
||
|
|
top: 5rem;
|
||
|
|
right: 1.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.li {
|
||
|
|
width: px2rem(560, );
|
||
|
|
height: px2rem(59, );
|
||
|
|
line-height: px2rem(59, );
|
||
|
|
border-radius: px2rem(59, );
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
font-size: px2rem(22, );
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background: rgba(26, 0, 66, 0.5);
|
||
|
|
border: 1px solid #FFF7A1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.li1 {
|
||
|
|
top: px2rem(120, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.li2 {
|
||
|
|
top: px2rem(208, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.li3 {
|
||
|
|
top: px2rem(296, );
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
border: none;
|
||
|
|
background: #D3B7FF;
|
||
|
|
outline: none;
|
||
|
|
width: px2rem(604, );
|
||
|
|
height: px2rem(64, );
|
||
|
|
line-height: px2rem(64, );
|
||
|
|
border-radius: px2rem(64, );
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
color: #fff;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0 px2rem(20, );
|
||
|
|
position: absolute;
|
||
|
|
bottom: px2rem(237, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
|
||
|
|
&::-webkit-input-placeholder {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.num {
|
||
|
|
color: #D7BEFF;
|
||
|
|
font-size: px2rem(20, );
|
||
|
|
position: absolute;
|
||
|
|
right: px2rem(68, );
|
||
|
|
bottom: px2rem(182, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.clos {
|
||
|
|
position: absolute;
|
||
|
|
left: 1rem;
|
||
|
|
bottom: 0.6666666667rem;
|
||
|
|
width: 3.3rem;
|
||
|
|
height: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ok {
|
||
|
|
position: absolute;
|
||
|
|
right: 1rem;
|
||
|
|
bottom: 0.6666666667rem;
|
||
|
|
width: 3.3rem;
|
||
|
|
height: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.pubBG {
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
z-index: 99999;
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
.pubBG_in {
|
||
|
|
position: relative;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: px2rem(634, );
|
||
|
|
height: px2rem(447, );
|
||
|
|
background: url(../images/pubBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
|
||
|
|
.close {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
width: px2rem(68, );
|
||
|
|
height: px2rem(68, );
|
||
|
|
top: px2rem(-80, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.giftName {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(30, );
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: px2rem(52, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.giftImg {
|
||
|
|
width: px2rem(165, );
|
||
|
|
height: px2rem(165, );
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
top: 1.62rem;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nick2 {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: px2rem(93, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.num {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #D7BEFF;
|
||
|
|
font-size: px2rem(20, );
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: px2rem(62, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.notPubBG {
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
z-index: 99999;
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
.pubBG_in {
|
||
|
|
position: relative;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: px2rem(634, );
|
||
|
|
height: px2rem(447, );
|
||
|
|
background: url(../images/pubBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
|
||
|
|
.close {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
width: px2rem(68, );
|
||
|
|
height: px2rem(68, );
|
||
|
|
top: px2rem(-80, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.giftName {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(30, );
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: px2rem(52, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.giftImg {
|
||
|
|
width: px2rem(165, );
|
||
|
|
height: px2rem(165, );
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
top: 1.62rem;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nick2 {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: px2rem(93, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.num {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #D7BEFF;
|
||
|
|
font-size: px2rem(20, );
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: px2rem(62, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.getGifts,
|
||
|
|
.notGetGifts {
|
||
|
|
width: px2rem(150, );
|
||
|
|
height: px2rem(90, );
|
||
|
|
position: absolute;
|
||
|
|
top: px2rem(203, );
|
||
|
|
left: px2rem(249, );
|
||
|
|
z-index: 1;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.listBox {
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(2244, );
|
||
|
|
background: url(../images/tab3Bg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: px2rem(40, ) auto px2rem(240, );
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
|
||
|
|
.tab {
|
||
|
|
width: px2rem(315, );
|
||
|
|
height: px2rem(48, );
|
||
|
|
margin: px2rem(104, ) auto px2rem(41, );
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
div {
|
||
|
|
width: px2rem(150, );
|
||
|
|
height: 100%;
|
||
|
|
background: url(../images/allBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
color: #5B3A8D;
|
||
|
|
text-align: center;
|
||
|
|
line-height: px2rem(48, );
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.active1 {
|
||
|
|
background: url(../images/dayBg_active.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
color: #5B3A8D;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active2 {
|
||
|
|
background: url(../images/allBg_active.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
color: #A56400;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active {
|
||
|
|
background: url(../images/dayBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
color: #A56400;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.listRule_icon {
|
||
|
|
position: absolute;
|
||
|
|
right: px2rem(36, );
|
||
|
|
top: px2rem(40, );
|
||
|
|
width: px2rem(123, );
|
||
|
|
height: px2rem(42, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.div1 {
|
||
|
|
width: px2rem(489, );
|
||
|
|
height: px2rem(364, );
|
||
|
|
background: url(../images/div1.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: relative;
|
||
|
|
// top: px2rem(193, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
margin-bottom: px2rem(60, );
|
||
|
|
|
||
|
|
.imgl {
|
||
|
|
position: absolute;
|
||
|
|
left: 15%;
|
||
|
|
bottom: 47%;
|
||
|
|
width: px2rem(112, );
|
||
|
|
height: px2rem(112, );
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imgr {
|
||
|
|
position: absolute;
|
||
|
|
right: 15%;
|
||
|
|
bottom: 47%;
|
||
|
|
width: px2rem(112, );
|
||
|
|
height: px2rem(112, );
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
position: absolute;
|
||
|
|
width: 57%;
|
||
|
|
text-align: center;
|
||
|
|
color: #3F197A;
|
||
|
|
height: px2rem(48, );
|
||
|
|
line-height: px2rem(48, );
|
||
|
|
border-radius: px2rem(48, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
top: px2rem(207, );
|
||
|
|
font-size: px2rem(20, );
|
||
|
|
background: #fff;
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: #ff4fb7;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.b {
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
bottom: px2rem(40, );
|
||
|
|
width: 100%;
|
||
|
|
color: #DF5E00;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.div2 {
|
||
|
|
width: px2rem(282, );
|
||
|
|
height: px2rem(336, );
|
||
|
|
background: url(../images/div2.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: relative;
|
||
|
|
// top: px2rem(193, );
|
||
|
|
left: px2rem(50, );
|
||
|
|
|
||
|
|
.love {
|
||
|
|
position: absolute;
|
||
|
|
width: px2rem(55, );
|
||
|
|
height: px2rem(53, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
top: px2rem(114, );
|
||
|
|
z-index: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imgl {
|
||
|
|
position: absolute;
|
||
|
|
left: 11%;
|
||
|
|
bottom: 41.5%;
|
||
|
|
width: px2rem(112, );
|
||
|
|
height: px2rem(112, );
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 1px solid #EBD7FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imgr {
|
||
|
|
position: absolute;
|
||
|
|
right: 11%;
|
||
|
|
bottom: 41.5%;
|
||
|
|
width: px2rem(112, );
|
||
|
|
height: px2rem(112, );
|
||
|
|
border-radius: 50%;
|
||
|
|
z-index: 2;
|
||
|
|
border: 1px solid #EBD7FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
height: px2rem(48, );
|
||
|
|
line-height: px2rem(48, );
|
||
|
|
border-radius: px2rem(48, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
top: px2rem(207, );
|
||
|
|
font-size: px2rem(20, );
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: #fff;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.b {
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
bottom: px2rem(13, );
|
||
|
|
width: 100%;
|
||
|
|
color: #DF5E00;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.div3 {
|
||
|
|
width: px2rem(282, );
|
||
|
|
height: px2rem(336, );
|
||
|
|
background: url(../images/div3.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: relative;
|
||
|
|
// top: px2rem(193, );
|
||
|
|
right: -4.9rem;
|
||
|
|
top: -4.485rem;
|
||
|
|
|
||
|
|
.love {
|
||
|
|
position: absolute;
|
||
|
|
width: px2rem(55, );
|
||
|
|
height: px2rem(53, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
top: px2rem(114, );
|
||
|
|
z-index: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imgl {
|
||
|
|
position: absolute;
|
||
|
|
left: 11%;
|
||
|
|
bottom: 41.5%;
|
||
|
|
width: px2rem(112, );
|
||
|
|
height: px2rem(112, );
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 1px solid #EBD7FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imgr {
|
||
|
|
position: absolute;
|
||
|
|
right: 11%;
|
||
|
|
bottom: 41.5%;
|
||
|
|
width: px2rem(112, );
|
||
|
|
height: px2rem(112, );
|
||
|
|
border-radius: 50%;
|
||
|
|
z-index: 2;
|
||
|
|
border: 1px solid #EBD7FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
height: px2rem(48, );
|
||
|
|
line-height: px2rem(48, );
|
||
|
|
border-radius: px2rem(48, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
top: px2rem(207, );
|
||
|
|
font-size: px2rem(20, );
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: #fff;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.b {
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
bottom: px2rem(13, );
|
||
|
|
width: 100%;
|
||
|
|
color: #DF5E00;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
width: px2rem(602, );
|
||
|
|
margin: -4rem auto 0;
|
||
|
|
|
||
|
|
li {
|
||
|
|
width: 100%;
|
||
|
|
height: px2rem(137, );
|
||
|
|
background: url(../images/lisBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin-bottom: px2rem(41, );
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.num {
|
||
|
|
height: px2rem(137, );
|
||
|
|
line-height: px2rem(137, );
|
||
|
|
color: #3F197A;
|
||
|
|
font-size: px2rem(34, );
|
||
|
|
font-weight: bold;
|
||
|
|
margin-left: px2rem(14, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.imgl {
|
||
|
|
width: px2rem(76, );
|
||
|
|
height: px2rem(76, );
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
left: 11%;
|
||
|
|
top: 13.5%;
|
||
|
|
border: 1px solid #EBD7FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imgr {
|
||
|
|
width: px2rem(76, );
|
||
|
|
height: px2rem(76, );
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
left: 22.6%;
|
||
|
|
top: 13.5%;
|
||
|
|
z-index: 2;
|
||
|
|
border: 1px solid #EBD7FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
position: absolute;
|
||
|
|
width: 4rem;
|
||
|
|
bottom: 10%;
|
||
|
|
// left: 5%;
|
||
|
|
left: -1%;
|
||
|
|
color: #E7C9FF;
|
||
|
|
font-size: px2rem(16, );
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: #E7C9FF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
position: absolute;
|
||
|
|
right: px2rem(33, );
|
||
|
|
top: 0;
|
||
|
|
height: 100%;
|
||
|
|
line-height: px2rem(137, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.myList {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 5;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: px2rem(210, );
|
||
|
|
background: url(../images/myListBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-top: px2rem(50, );
|
||
|
|
transition: all 0.5s;
|
||
|
|
|
||
|
|
.more {
|
||
|
|
position: absolute;
|
||
|
|
width: px2rem(36, );
|
||
|
|
height: px2rem(33, );
|
||
|
|
top: px2rem(21, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.more_active {
|
||
|
|
transform: translateX(-50%) rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
margin: 0 auto 0;
|
||
|
|
width: px2rem(610, );
|
||
|
|
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active {
|
||
|
|
width: px2rem(610, );
|
||
|
|
height: px2rem(140, );
|
||
|
|
line-height: px2rem(140, );
|
||
|
|
text-align: center;
|
||
|
|
font-size: px2rem(30, );
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
width: px2rem(610, );
|
||
|
|
height: px2rem(140, );
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: px2rem(30, );
|
||
|
|
|
||
|
|
.left {
|
||
|
|
width: px2rem(108, );
|
||
|
|
height: px2rem(108, );
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 1px solid #EBD7FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
width: px2rem(108, );
|
||
|
|
height: px2rem(108, );
|
||
|
|
position: absolute;
|
||
|
|
left: 1.3rem;
|
||
|
|
top: 0;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 1px solid #EBD7FF;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.love {
|
||
|
|
position: absolute;
|
||
|
|
width: px2rem(55, );
|
||
|
|
height: px2rem(53, );
|
||
|
|
z-index: 3;
|
||
|
|
left: px2rem(80, );
|
||
|
|
top: px2rem(33, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
position: absolute;
|
||
|
|
left: -0.3rem;
|
||
|
|
bottom: 0;
|
||
|
|
width: 3.6rem;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
height: px2rem(20, );
|
||
|
|
|
||
|
|
b {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightBox {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: px2rem(35, );
|
||
|
|
text-align: right;
|
||
|
|
|
||
|
|
p {
|
||
|
|
color: #FFECBB;
|
||
|
|
font-size: px2rem(30, );
|
||
|
|
margin-bottom: px2rem(19, );
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
color: #E7C9FF;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.myList_active {
|
||
|
|
height: px2rem(600, );
|
||
|
|
background: url(../images/myListBg2.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listRule {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
top: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
z-index: 99999;
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
.listRule_in {
|
||
|
|
position: relative;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: px2rem(702, );
|
||
|
|
height: px2rem(737, );
|
||
|
|
background: url(../images/listTitleBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-top: 3rem;
|
||
|
|
|
||
|
|
.close {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
width: px2rem(68, );
|
||
|
|
height: px2rem(68, );
|
||
|
|
top: px2rem(-80, );
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
margin: -1.3rem auto 0;
|
||
|
|
overflow-y: scroll;
|
||
|
|
width: px2rem(670, );
|
||
|
|
height: 7.5rem;
|
||
|
|
|
||
|
|
.listRuleBg {
|
||
|
|
width: 100%;
|
||
|
|
// height: 100%;
|
||
|
|
// width: px2rem(670, );
|
||
|
|
height: px2rem(2154, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab2 {
|
||
|
|
display: block;
|
||
|
|
}
|