3319 lines
93 KiB
SCSS
3319 lines
93 KiB
SCSS
@function px2rem($px, $rem:75) {
|
|
@return $px / $rem+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
// height: 100%;
|
|
background: #C0AAFF;
|
|
padding-bottom: px2rem(44, );
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
top: px2rem(70, );
|
|
left: px2rem(34, );
|
|
z-index: 9;
|
|
width: px2rem(62, );
|
|
height: px2rem(62, );
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
width: px2rem(750, );
|
|
height: px2rem(1010, );
|
|
background: url(../images/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(-199, );
|
|
position: relative;
|
|
|
|
.rules {
|
|
width: px2rem(48, );
|
|
height: px2rem(140, );
|
|
position: absolute;
|
|
right: 0;
|
|
top: px2rem(301, );
|
|
}
|
|
}
|
|
|
|
.ruleContent {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
|
|
img {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: px2rem(600, );
|
|
height: px2rem(995, );
|
|
}
|
|
}
|
|
|
|
.limitGift {
|
|
width: px2rem(690, );
|
|
height: px2rem(288, );
|
|
background: url(../images/limitGift.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(40, );
|
|
position: relative;
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
padding-top: px2rem(84, );
|
|
|
|
.swiper {
|
|
width: px2rem(595, );
|
|
height: px2rem(180, );
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
|
|
.swiper-slide {
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabBox {
|
|
width: px2rem(690, );
|
|
height: px2rem(67, );
|
|
margin: 0 auto px2rem(40, );
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tab {
|
|
width: px2rem(165, );
|
|
height: px2rem(67, );
|
|
}
|
|
|
|
.tab1 {
|
|
background: url(../images/tab1_active.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2 {
|
|
background: url(../images/tab2_active.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab3 {
|
|
background: url(../images/tab3_active.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab4 {
|
|
background: url(../images/tab4_active.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab1_active {
|
|
background: url(../images/tab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2_active {
|
|
background: url(../images/tab3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab3_active {
|
|
background: url(../images/tab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab4_active {
|
|
background: url(../images/tab4.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.page1 {
|
|
.desire {
|
|
width: px2rem(690, );
|
|
height: px2rem(2061, );
|
|
margin: 0 auto px2rem(0, );
|
|
background: url(../images/desire.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.rule1_but {
|
|
width: 2rem;
|
|
height: 0.7rem;
|
|
position: absolute;
|
|
right: 0.4rem;
|
|
top: 2.6rem;
|
|
}
|
|
|
|
.clock {
|
|
color: #FE447F;
|
|
font-size: px2rem(26, );
|
|
position: absolute;
|
|
left: px2rem(172, );
|
|
top: px2rem(208, );
|
|
font-weight: bold;
|
|
}
|
|
|
|
.speed {
|
|
width: px2rem(642, );
|
|
height: px2rem(110, );
|
|
border: px2rem(1, ) solid #FFFFFF;
|
|
background: linear-gradient(0deg, #FFC9BA 0%, #FF8D9F 96%);
|
|
border-radius: px2rem(16, );
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(264, );
|
|
|
|
.line {
|
|
position: relative;
|
|
width: 7.8rem;
|
|
height: px2rem(20, );
|
|
border-radius: px2rem(8, );
|
|
left: 50%;
|
|
top: px2rem(31, );
|
|
transform: translateX(-50%);
|
|
background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
|
span {
|
|
width: 10%;
|
|
height: 100%;
|
|
border-radius: px2rem(8, );
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: #FF6686;
|
|
}
|
|
|
|
.gift1,
|
|
.gift2,
|
|
.gift3 {
|
|
position: absolute;
|
|
left: 1.1rem;
|
|
top: 90%;
|
|
transform: translateY(-50%);
|
|
width: px2rem(130, );
|
|
|
|
img {
|
|
display: block;
|
|
width: px2rem(92, );
|
|
height: px2rem(67, );
|
|
margin: 0 auto;
|
|
}
|
|
|
|
p {
|
|
color: #FFFFFF;
|
|
font-size: px2rem(22, );
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.gift2 {
|
|
left: px2rem(306, );
|
|
}
|
|
|
|
.gift3 {
|
|
left: px2rem(484, );
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.card {
|
|
width: px2rem(300, );
|
|
height: px2rem(388, );
|
|
position: absolute;
|
|
z-index: 1;
|
|
|
|
.clicks {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: px2rem(300, );
|
|
height: px2rem(388, );
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
.notObtained {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: url(../images/notObtained.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
|
|
.but {
|
|
width: px2rem(175, );
|
|
height: px2rem(60, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 2.15rem;
|
|
}
|
|
}
|
|
|
|
.obtained {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: url(../images/obtained.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
|
|
.but1 {
|
|
width: px2rem(210, );
|
|
height: px2rem(68, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 1.1rem;
|
|
}
|
|
|
|
.but2 {
|
|
width: px2rem(210, );
|
|
height: px2rem(68, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 2.45rem;
|
|
}
|
|
}
|
|
|
|
.acquired {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: px2rem(1, );
|
|
width: px2rem(160, );
|
|
height: px2rem(60, );
|
|
}
|
|
|
|
.cardNum {
|
|
position: absolute;
|
|
width: px2rem(64, );
|
|
height: px2rem(64, );
|
|
line-height: px2rem(74, );
|
|
text-align: center;
|
|
color: #FE447F;
|
|
font-size: px2rem(26, );
|
|
right: px2rem(11, );
|
|
bottom: px2rem(99, );
|
|
background: url(../images/cardNum.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.card1 {
|
|
left: px2rem(24, );
|
|
top: px2rem(397, );
|
|
}
|
|
|
|
.card2 {
|
|
right: px2rem(24, );
|
|
top: px2rem(397, );
|
|
}
|
|
|
|
.card3 {
|
|
left: px2rem(24, );
|
|
top: px2rem(808, );
|
|
}
|
|
|
|
.card4 {
|
|
right: px2rem(24, );
|
|
top: px2rem(808, );
|
|
}
|
|
|
|
.card5 {
|
|
left: px2rem(24, );
|
|
top: px2rem(1221, );
|
|
}
|
|
|
|
.card6 {
|
|
right: px2rem(24, );
|
|
top: px2rem(1221, );
|
|
}
|
|
|
|
.card7 {
|
|
left: px2rem(24, );
|
|
bottom: px2rem(40, );
|
|
}
|
|
|
|
.card8 {
|
|
right: px2rem(24, );
|
|
bottom: px2rem(40, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.page2 {
|
|
.redTree {
|
|
width: px2rem(690, );
|
|
height: px2rem(887, );
|
|
background: url(../images/redTree.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(46, );
|
|
position: relative;
|
|
|
|
.redTree_bag {
|
|
position: absolute;
|
|
color: #FE447F;
|
|
font-size: px2rem(26, );
|
|
height: px2rem(44, );
|
|
left: px2rem(180, );
|
|
top: px2rem(102, );
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: px2rem(44, );
|
|
height: px2rem(44, );
|
|
background: url(../images/redTree_bag_span.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-right: px2rem(10, );
|
|
float: left;
|
|
}
|
|
|
|
b {
|
|
height: px2rem(44, );
|
|
line-height: px2rem(44, );
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.recordRules {
|
|
width: px2rem(160, );
|
|
height: px2rem(48, );
|
|
line-height: px2rem(48, );
|
|
border-radius: px2rem(20, );
|
|
position: absolute;
|
|
top: px2rem(101, );
|
|
text-align: center;
|
|
color: #FE447F;
|
|
font-size: px2rem(26, );
|
|
right: px2rem(24, );
|
|
background: #fff;
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(642, );
|
|
height: px2rem(480, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(170, );
|
|
// background: #390F27;
|
|
background: url(../images/redTreeBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
border-radius: px2rem(20, );
|
|
position: absolute;
|
|
|
|
.cloud {
|
|
width: px2rem(626, );
|
|
height: px2rem(165, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(5, );
|
|
z-index: 2;
|
|
}
|
|
|
|
.red {
|
|
width: px2rem(150, );
|
|
height: px2rem(160, );
|
|
position: absolute;
|
|
|
|
background: url(../images/nohb.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.red_in {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: none;
|
|
|
|
.gift {
|
|
position: absolute;
|
|
width: px2rem(72, );
|
|
height: px2rem(72, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(16, );
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.gift_img {
|
|
width: 0.9rem;
|
|
height: 0.45rem;
|
|
top: 0.5rem;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(20, );
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(105, );
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: px2rem(129, );
|
|
color: #FEFFA3;
|
|
font-size: px2rem(18, );
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.redBagSvag {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: px2rem(150, );
|
|
height: px2rem(160, );
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.red1 {
|
|
left: px2rem(7, );
|
|
top: px2rem(215, );
|
|
}
|
|
|
|
.red2 {
|
|
left: px2rem(163, );
|
|
top: px2rem(287, );
|
|
}
|
|
|
|
.red3 {
|
|
left: px2rem(238, );
|
|
top: px2rem(104, );
|
|
}
|
|
|
|
.red4 {
|
|
left: px2rem(367, );
|
|
top: px2rem(268, );
|
|
}
|
|
|
|
.red5 {
|
|
left: px2rem(426, );
|
|
top: px2rem(73, );
|
|
}
|
|
|
|
.active {
|
|
background: url(../images/hb.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.box2 {
|
|
width: px2rem(642, );
|
|
height: px2rem(480, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(170, );
|
|
position: absolute;
|
|
z-index: 1;
|
|
display: none;
|
|
|
|
.red {
|
|
width: px2rem(150, );
|
|
height: px2rem(160, );
|
|
position: absolute;
|
|
|
|
.redBagSvag {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: px2rem(150, );
|
|
height: px2rem(160, );
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.red1 {
|
|
left: px2rem(7, );
|
|
top: px2rem(215, );
|
|
}
|
|
|
|
.red2 {
|
|
left: px2rem(163, );
|
|
top: px2rem(287, );
|
|
}
|
|
|
|
.red3 {
|
|
left: px2rem(238, );
|
|
top: px2rem(104, );
|
|
}
|
|
|
|
.red4 {
|
|
left: px2rem(367, );
|
|
top: px2rem(268, );
|
|
}
|
|
|
|
.red5 {
|
|
left: px2rem(426, );
|
|
top: px2rem(73, );
|
|
}
|
|
|
|
.active {
|
|
background: url(../images/hb.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.redTreeBut {
|
|
width: px2rem(400, );
|
|
height: px2rem(98, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(694, );
|
|
}
|
|
|
|
.sx {
|
|
width: px2rem(300, );
|
|
height: 0.5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0.47rem;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.redTreeTakst {
|
|
width: px2rem(690, );
|
|
height: px2rem(809, );
|
|
margin: 0 auto px2rem(40, );
|
|
background: url(../images/redTreeTakst.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.redTreeTakstTab {
|
|
position: absolute;
|
|
width: px2rem(500, );
|
|
height: px2rem(72, );
|
|
line-height: px2rem(72, );
|
|
border-radius: px2rem(72, );
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(107, );
|
|
|
|
div {
|
|
width: px2rem(250, );
|
|
height: 100%;
|
|
border-radius: px2rem(72, );
|
|
text-align: center;
|
|
color: #FE7AA3;
|
|
background: #fff;
|
|
font-size: px2rem(30, );
|
|
font-weight: bold;
|
|
}
|
|
|
|
.active {
|
|
color: #FFFFFF;
|
|
background: linear-gradient(0deg, #FF7489 0%, #FFC1AF 100%);
|
|
}
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(212, );
|
|
font-size: px2rem(22, );
|
|
color: #BB4A56;
|
|
text-align: center;
|
|
}
|
|
|
|
.tabs1 {
|
|
width: px2rem(641, );
|
|
margin: px2rem(46, ) auto 0;
|
|
overflow: hidden;
|
|
|
|
.div {
|
|
width: px2rem(641, );
|
|
position: relative;
|
|
background: linear-gradient(90deg, #FF8894 0%, #FFA2A4 99%);
|
|
border-radius: px2rem(16, );
|
|
margin-bottom: px2rem(16, );
|
|
height: px2rem(94, );
|
|
|
|
p {
|
|
position: absolute;
|
|
color: #fff;
|
|
font-size: px2rem(20, );
|
|
left: px2rem(26, );
|
|
top: px2rem(22, );
|
|
}
|
|
|
|
b {
|
|
position: absolute;
|
|
font-size: px2rem(18, );
|
|
color: #FEFFA3;
|
|
left: px2rem(26, );
|
|
top: px2rem(53, );
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(110, );
|
|
height: px2rem(45, );
|
|
// background: linear-gradient(0deg, #FFEFF6 0%, #FFFCE0 100%);
|
|
background: url(../images/redTreeTakst_but.png);
|
|
background-size: 100% 100%;
|
|
border-radius: px2rem(8, );
|
|
color: #3D001F;
|
|
font-size: px2rem(23, );
|
|
text-align: center;
|
|
line-height: px2rem(40, );
|
|
position: absolute;
|
|
right: px2rem(26, );
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.butOut {
|
|
background: #EBCACB;
|
|
color: #FFF3F9;
|
|
}
|
|
}
|
|
|
|
.div1 {
|
|
height: px2rem(167, );
|
|
margin-top: px2rem(254, );
|
|
|
|
p {
|
|
color: #fff;
|
|
font-size: px2rem(20, );
|
|
position: absolute;
|
|
left: px2rem(26, );
|
|
top: px2rem(14, );
|
|
}
|
|
|
|
.line {
|
|
width: px2rem(439, );
|
|
height: px2rem(27, );
|
|
border-radius: px2rem(27, );
|
|
border: px2rem(1, ) solid #FFE4E7;
|
|
position: absolute;
|
|
left: px2rem(24, );
|
|
top: px2rem(84, );
|
|
// background: #C35053;
|
|
box-sizing: border-box;
|
|
background: #ff6687;
|
|
|
|
b {
|
|
position: absolute;
|
|
z-index: 3;
|
|
color: #fff;
|
|
font-size: px2rem(20, );
|
|
left: px2rem(8, );
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 80%;
|
|
height: px2rem(24.5, );
|
|
background: linear-gradient(90deg, #FFD5A9 0%, #E6FFFC 99%);
|
|
border-radius: px2rem(24.5, );
|
|
}
|
|
|
|
.gift1,
|
|
.gift2,
|
|
.gift3 {
|
|
width: px2rem(80, );
|
|
height: px2rem(100, );
|
|
position: absolute;
|
|
left: px2rem(130, );
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
|
|
b {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FEFFA3;
|
|
font-size: px2rem(18, );
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(15, );
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: px2rem(49, );
|
|
height: px2rem(48, );
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
i {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(20, );
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.gift2 {
|
|
left: px2rem(280, );
|
|
}
|
|
|
|
.gift3 {
|
|
left: px2rem(390, );
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.tabs2 {
|
|
display: none;
|
|
|
|
.redTreeTakstGift {
|
|
width: px2rem(644, );
|
|
height: px2rem(447, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(253, );
|
|
}
|
|
|
|
.redTreeTakstButImg {
|
|
position: absolute;
|
|
width: px2rem(280, );
|
|
height: px2rem(72, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(713, );
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.page3 {
|
|
|
|
// display: none;
|
|
.lovePostOffice {
|
|
width: px2rem(690, );
|
|
height: px2rem(812, );
|
|
background: url(../images/lovePostOffice.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(39, );
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.dm {
|
|
margin: 1.6rem auto 0;
|
|
width: px2rem(600, );
|
|
height: px2rem(450, );
|
|
|
|
.my_containers {
|
|
// width: px2rem(587, );
|
|
height: px2rem(60, );
|
|
line-height: px2rem(60, );
|
|
border-radius: px2rem(60, );
|
|
font-size: px2rem(24, );
|
|
color: #FEFFA3;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
background: rgba(48, 0, 9, 0.5);
|
|
padding: 0 px2rem(14, ) 0 px2rem(120, );
|
|
border: px2rem(2, ) solid #FFF7D0;
|
|
|
|
.l {
|
|
position: absolute;
|
|
left: px2rem(1, );
|
|
top: px2rem(0, );
|
|
width: px2rem(56, );
|
|
height: px2rem(56, );
|
|
border-radius: px2rem(56, );
|
|
}
|
|
|
|
.r {
|
|
position: absolute;
|
|
left: px2rem(48, );
|
|
top: px2rem(0, );
|
|
width: px2rem(56, );
|
|
height: px2rem(56, );
|
|
border-radius: px2rem(56, );
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.zfImg {
|
|
position: absolute;
|
|
right: px2rem(23, );
|
|
top: px2rem(601, );
|
|
width: px2rem(276, );
|
|
height: px2rem(34, );
|
|
}
|
|
|
|
.yw {
|
|
width: px2rem(310, );
|
|
height: px2rem(120, );
|
|
position: absolute;
|
|
left: px2rem(24, );
|
|
top: px2rem(656, );
|
|
}
|
|
|
|
.yx {
|
|
width: px2rem(310, );
|
|
height: px2rem(120, );
|
|
position: absolute;
|
|
right: px2rem(24, );
|
|
top: px2rem(656, );
|
|
}
|
|
|
|
.redDot {
|
|
width: px2rem(16, );
|
|
height: px2rem(16, );
|
|
border-radius: px2rem(16, );
|
|
background: #FF3871;
|
|
z-index: 3;
|
|
position: absolute;
|
|
right: px2rem(42, );
|
|
bottom: px2rem(127, );
|
|
}
|
|
}
|
|
|
|
.twoWayRush {
|
|
width: px2rem(690, );
|
|
height: px2rem(1311, );
|
|
background: url(../images/twoWayRush.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(54, );
|
|
position: relative;
|
|
|
|
.rule_img {
|
|
position: absolute;
|
|
width: 2.2rem;
|
|
height: 0.7rem;
|
|
right: 0.15rem;
|
|
top: 0.2rem;
|
|
}
|
|
|
|
.twoWayRush_qs {
|
|
width: px2rem(158, );
|
|
height: px2rem(84, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(188, );
|
|
background: url(../images/twoWayRush_qs.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.twoWayRush_ax {
|
|
position: absolute;
|
|
width: px2rem(99, );
|
|
height: px2rem(48, );
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 3;
|
|
}
|
|
|
|
.tx_l {
|
|
width: px2rem(80, );
|
|
height: px2rem(80, );
|
|
position: absolute;
|
|
left: px2rem(2, );
|
|
top: px2rem(2, );
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tx_r {
|
|
width: px2rem(80, );
|
|
height: px2rem(80, );
|
|
position: absolute;
|
|
right: px2rem(2, );
|
|
top: px2rem(2, );
|
|
border-radius: 50%;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.twoWayRushline {
|
|
width: px2rem(642, );
|
|
height: px2rem(40, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(273, );
|
|
border-radius: px2rem(40, );
|
|
background: #fff;
|
|
display: flex;
|
|
|
|
.mc {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.c {
|
|
width: px2rem(6, );
|
|
height: px2rem(52, );
|
|
border-radius: px2rem(6, );
|
|
background: #FF4B85;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 3;
|
|
}
|
|
|
|
.left {
|
|
width: 10%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: px2rem(40, );
|
|
background: linear-gradient(90deg, #FF4585 0%, #FF8691 100%);
|
|
flex: 1;
|
|
border-top-left-radius: px2rem(40, );
|
|
border-bottom-left-radius: px2rem(40, );
|
|
}
|
|
|
|
.right {
|
|
width: 10%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
height: px2rem(40, );
|
|
background: linear-gradient(90deg, #89CCFF 0%, #A272F4 100%);
|
|
flex: 1;
|
|
border-top-right-radius: px2rem(40, );
|
|
border-bottom-right-radius: px2rem(40, );
|
|
}
|
|
}
|
|
|
|
.qingshu {
|
|
width: px2rem(642, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(335, );
|
|
|
|
span {
|
|
float: left;
|
|
color: #482F2F;
|
|
font-size: px2rem(26, );
|
|
|
|
b {
|
|
color: #FE447F;
|
|
font-size: px2rem(24, );
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.r {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.twoWayRushRed {
|
|
height: px2rem(44, );
|
|
line-height: px2rem(44, );
|
|
position: absolute;
|
|
top: px2rem(487, );
|
|
left: px2rem(171, );
|
|
|
|
img {
|
|
display: inline-block;
|
|
float: left;
|
|
width: px2rem(44, );
|
|
height: px2rem(44, );
|
|
margin-right: px2rem(9, );
|
|
|
|
}
|
|
|
|
b {
|
|
float: left;
|
|
font-weight: bold;
|
|
color: #FE447F;
|
|
font-size: px2rem(26, );
|
|
line-height: px2rem(50, );
|
|
}
|
|
}
|
|
|
|
.gbdm {
|
|
width: px2rem(643, );
|
|
height: px2rem(553, );
|
|
background: url(../images/gb.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: px2rem(571, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.yqz9999 {
|
|
width: px2rem(139, );
|
|
height: px2rem(133, );
|
|
position: absolute;
|
|
left: 0.28rem;
|
|
top: 0;
|
|
}
|
|
|
|
.yqz12999 {
|
|
width: px2rem(139, );
|
|
height: px2rem(133, );
|
|
position: absolute;
|
|
left: 0.28rem;
|
|
top: 0;
|
|
display: none;
|
|
}
|
|
|
|
.num {
|
|
color: #FE447F;
|
|
font-size: px2rem(24, );
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: px2rem(68, );
|
|
bottom: px2rem(246, );
|
|
font-weight: bold;
|
|
}
|
|
|
|
textarea {
|
|
width: px2rem(507, );
|
|
height: px2rem(72, );
|
|
position: absolute;
|
|
left: px2rem(68, );
|
|
top: px2rem(215, );
|
|
background: none;
|
|
outline: none;
|
|
border: none;
|
|
resize: none;
|
|
overflow: auto;
|
|
color: #482F2F;
|
|
font-weight: bold;
|
|
font-size: px2rem(24, );
|
|
|
|
&::-webkit-input-placeholder {
|
|
color: #FE447F;
|
|
font-size: px2rem(22, );
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
width: px2rem(487, );
|
|
height: px2rem(44, );
|
|
line-height: px2rem(44, );
|
|
border-radius: px2rem(44, );
|
|
text-align: center;
|
|
color: #FE447F;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(345, );
|
|
border: px2rem(1, ) solid #FE447F;
|
|
}
|
|
|
|
.gbdmBut {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(441, );
|
|
width: px2rem(280, );
|
|
height: px2rem(72, );
|
|
}
|
|
|
|
.tx_l {
|
|
width: px2rem(98, );
|
|
height: px2rem(98, );
|
|
border-radius: px2rem(98, );
|
|
top: px2rem(41, );
|
|
left: px2rem(119, );
|
|
position: absolute;
|
|
}
|
|
|
|
.tx_r {
|
|
width: px2rem(98, );
|
|
height: px2rem(98, );
|
|
border-radius: px2rem(98, );
|
|
top: px2rem(40, );
|
|
right: px2rem(130.5, );
|
|
position: absolute;
|
|
}
|
|
|
|
.nice_l {
|
|
width: 2.5rem;
|
|
font-size: 0.3466666667rem;
|
|
color: #FE447F;
|
|
left: 1.2rem;
|
|
top: 2.13rem;
|
|
position: absolute;
|
|
text-align: center;
|
|
}
|
|
|
|
.nice_r {
|
|
width: 2.5rem;
|
|
font-size: 0.3466666667rem;
|
|
color: #FE447F;
|
|
right: 1.2rem;
|
|
top: 2.13rem;
|
|
position: absolute;
|
|
text-align: center;
|
|
}
|
|
|
|
.new {
|
|
width: px2rem(112, );
|
|
height: px2rem(34, );
|
|
position: absolute;
|
|
left: px2rem(510, );
|
|
top: px2rem(460, );
|
|
}
|
|
}
|
|
|
|
.office {
|
|
width: px2rem(642, );
|
|
height: px2rem(140, );
|
|
position: absolute;
|
|
top: px2rem(1146, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/office.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.reduce {
|
|
width: px2rem(48, );
|
|
height: px2rem(36, );
|
|
position: absolute;
|
|
left: px2rem(253, );
|
|
top: px2rem(51, );
|
|
}
|
|
|
|
input {
|
|
background: none;
|
|
outline: none;
|
|
border: none;
|
|
width: px2rem(60, );
|
|
height: px2rem(36, );
|
|
text-align: center;
|
|
color: #482F2F;
|
|
font-weight: bold;
|
|
font-size: px2rem(22, );
|
|
position: absolute;
|
|
left: px2rem(313, );
|
|
top: px2rem(51, );
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(10, );
|
|
}
|
|
|
|
.add {
|
|
width: px2rem(48, );
|
|
height: px2rem(36, );
|
|
position: absolute;
|
|
left: px2rem(385, );
|
|
top: px2rem(51, );
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(110, );
|
|
height: px2rem(44, );
|
|
position: absolute;
|
|
right: px2rem(31, );
|
|
top: px2rem(50, );
|
|
}
|
|
|
|
.p1 {
|
|
color: #fff;
|
|
font-size: px2rem(20, );
|
|
position: absolute;
|
|
left: 53%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(103, );
|
|
}
|
|
|
|
.p2 {
|
|
color: #fff;
|
|
font-size: px2rem(22, );
|
|
position: absolute;
|
|
right: px2rem(25, );
|
|
top: px2rem(14, );
|
|
height: px2rem(30, );
|
|
line-height: px2rem(30, );
|
|
|
|
b {
|
|
font-weight: bold;
|
|
color: #FEF15B;
|
|
font-size: px2rem(24, );
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.rule_roce {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.rule_roce_in {
|
|
width: px2rem(600, );
|
|
height: px2rem(704, );
|
|
background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: px2rem(40, );
|
|
overflow: hidden;
|
|
|
|
.tab {
|
|
width: px2rem(500, );
|
|
height: px2rem(72, );
|
|
border-radius: px2rem(72, );
|
|
margin: px2rem(40, ) auto px2rem(24, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #FFDBE0;
|
|
|
|
div {
|
|
width: px2rem(250, );
|
|
height: 100%;
|
|
line-height: px2rem(72, );
|
|
text-align: center;
|
|
color: #BB4A56;
|
|
font-size: px2rem(30, );
|
|
font-weight: bold;
|
|
}
|
|
|
|
.active {
|
|
background: linear-gradient(0deg, #FF7489 0%, #FFC1AF 100%);
|
|
color: #fff;
|
|
border-radius: px2rem(72, );
|
|
}
|
|
}
|
|
|
|
.tab1 {
|
|
margin: 0 auto 0;
|
|
width: px2rem(540, );
|
|
height: px2rem(528, );
|
|
border-radius: px2rem(10, );
|
|
background: #fff;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.tab2 {
|
|
margin: 0 auto 0;
|
|
width: px2rem(540, );
|
|
height: px2rem(528, );
|
|
border-radius: px2rem(10, );
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: px2rem(15, ) px2rem(17, );
|
|
display: none;
|
|
|
|
p {
|
|
font-size: px2rem(22, );
|
|
color: #3D001F;
|
|
margin-bottom: px2rem(25, );
|
|
line-height: 0.5rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.recipient {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.recipient_in {
|
|
width: 100%;
|
|
height: px2rem(1000, );
|
|
background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
border-radius: px2rem(40, ) px2rem(40, ) 0px 0px;
|
|
overflow: hidden;
|
|
padding: px2rem(0, ) px2rem(33, );
|
|
box-sizing: border-box;
|
|
|
|
.recipient_text {
|
|
display: block;
|
|
width: px2rem(445, );
|
|
height: px2rem(54, );
|
|
margin: px2rem(32, ) auto px2rem(25, );
|
|
}
|
|
|
|
ul {
|
|
width: 100%;
|
|
// background: skyblue;
|
|
height: 11.1rem;
|
|
overflow-y: scroll;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(151, );
|
|
margin-bottom: px2rem(31, );
|
|
|
|
.num {
|
|
width: px2rem(48, );
|
|
height: 100%;
|
|
line-height: px2rem(151, );
|
|
color: #482F2F;
|
|
font-size: px2rem(36, );
|
|
margin-right: px2rem(33, );
|
|
float: left;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
width: px2rem(121, );
|
|
height: px2rem(121, );
|
|
background: url(../images/recipientBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin-right: px2rem(6, );
|
|
text-align: center;
|
|
|
|
.tx {
|
|
width: px2rem(98, );
|
|
height: px2rem(98, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(11, );
|
|
top: px2rem(11, );
|
|
}
|
|
|
|
.nickLeft {
|
|
position: absolute;
|
|
bottom: -0.4rem;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FE447F;
|
|
font-size: px2rem(24, );
|
|
font-weight: bold;
|
|
overflow: hidden; //超出隐藏
|
|
white-space: nowrap; //不折行
|
|
text-overflow: ellipsis; //溢出显示省略号
|
|
}
|
|
}
|
|
|
|
.love {
|
|
float: left;
|
|
width: px2rem(153, );
|
|
height: px2rem(65, );
|
|
margin-top: px2rem(29, );
|
|
margin-right: px2rem(4, );
|
|
display: block;
|
|
}
|
|
|
|
.right {
|
|
float: left;
|
|
width: px2rem(121, );
|
|
height: px2rem(121, );
|
|
background: url(../images/recipientBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin-right: px2rem(6, );
|
|
text-align: center;
|
|
|
|
.tx {
|
|
width: px2rem(98, );
|
|
height: px2rem(98, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(11, );
|
|
top: px2rem(11, );
|
|
}
|
|
|
|
.nickLeft {
|
|
position: absolute;
|
|
bottom: -0.4rem;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FE447F;
|
|
font-size: px2rem(24, );
|
|
font-weight: bold;
|
|
overflow: hidden; //超出隐藏
|
|
white-space: nowrap; //不折行
|
|
text-overflow: ellipsis; //溢出显示省略号
|
|
}
|
|
}
|
|
|
|
.but {
|
|
float: right;
|
|
width: px2rem(160, );
|
|
height: px2rem(60, );
|
|
display: block;
|
|
margin-top: px2rem(39, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.letter {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.letter_in {
|
|
width: px2rem(600, );
|
|
height: px2rem(704, );
|
|
background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: px2rem(40, );
|
|
overflow: hidden;
|
|
|
|
.tab {
|
|
width: px2rem(500, );
|
|
height: px2rem(72, );
|
|
border-radius: px2rem(72, );
|
|
margin: px2rem(40, ) auto px2rem(32, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #FFDBE0;
|
|
|
|
div {
|
|
width: px2rem(250, );
|
|
height: 100%;
|
|
line-height: px2rem(72, );
|
|
text-align: center;
|
|
color: #BB4A56;
|
|
font-size: px2rem(30, );
|
|
}
|
|
|
|
.active {
|
|
background: linear-gradient(0deg, #FF7489 0%, #FFC1AF 100%);
|
|
color: #fff;
|
|
border-radius: px2rem(72, );
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: 100%;
|
|
padding: 0 px2rem(30, );
|
|
box-sizing: border-box;
|
|
margin: 0 auto 0;
|
|
height: 7rem;
|
|
overflow-y: scroll;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(148, );
|
|
background: linear-gradient(90deg, #FF8894 0%, #FFA2A4 99%);
|
|
border-radius: px2rem(10, );
|
|
position: relative;
|
|
margin-bottom: px2rem(16, );
|
|
|
|
p {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: px2rem(17, );
|
|
top: px2rem(17, );
|
|
color: #fff;
|
|
font-size: px2rem(22, );
|
|
}
|
|
|
|
.tx_l {
|
|
width: px2rem(72, );
|
|
height: px2rem(72, );
|
|
border: px2rem(1, ) solid #fff;
|
|
background: #98535B;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(33, );
|
|
top: px2rem(56, );
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.love2 {
|
|
position: absolute;
|
|
width: px2rem(97, );
|
|
height: px2rem(42, );
|
|
top: px2rem(72, );
|
|
left: px2rem(91, );
|
|
}
|
|
|
|
.tx_r {
|
|
width: px2rem(72, );
|
|
height: px2rem(72, );
|
|
border: px2rem(1, ) solid #fff;
|
|
background: #98535B;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(171, );
|
|
top: px2rem(56, );
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.letters {
|
|
width: px2rem(91, );
|
|
height: px2rem(76, );
|
|
position: absolute;
|
|
left: px2rem(275, );
|
|
top: px2rem(52, );
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(111, );
|
|
height: px2rem(44, );
|
|
position: absolute;
|
|
top: px2rem(71, );
|
|
right: px2rem(31, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.capture {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.letter_in1Img {
|
|
width: px2rem(644, );
|
|
height: px2rem(638, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 35%;
|
|
border-radius: px2rem(20, );
|
|
// display: none;
|
|
}
|
|
|
|
.letter_in1 {
|
|
width: px2rem(644, );
|
|
height: px2rem(638, );
|
|
// background: url(../images/letter_in1.png) no-repeat;background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 35%;
|
|
border-radius: px2rem(20, );
|
|
|
|
// background: #FFFAE6;
|
|
.letter_in111111 {
|
|
width: px2rem(644, );
|
|
height: px2rem(638, );
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: px2rem(20, );
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.letter_in222 {
|
|
width: px2rem(54, );
|
|
height: px2rem(54, );
|
|
position: absolute;
|
|
left: px2rem(97, );
|
|
top: 1.5rem;
|
|
border-radius: px2rem(20, );
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
border: px2rem(1, ) solid #FF7489;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.letter_in333 {
|
|
width: px2rem(54, );
|
|
height: px2rem(54, );
|
|
position: absolute;
|
|
right: 2.4rem;
|
|
top: px2rem(385, );
|
|
border-radius: px2rem(20, );
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
border: px2rem(1, ) solid #FF7489;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 95%;
|
|
height: 95%;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border: px2rem(2, ) solid #FFB9C4;
|
|
border-radius: px2rem(30, );
|
|
background: #FFFAE6;
|
|
display: none;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
text-align: center;
|
|
left: 0;
|
|
top: px2rem(58, );
|
|
color: #990D39;
|
|
font-weight: bold;
|
|
font-size: px2rem(33, );
|
|
position: absolute;
|
|
}
|
|
|
|
.to {
|
|
height: px2rem(55, );
|
|
line-height: px2rem(55, );
|
|
position: absolute;
|
|
left: px2rem(52, );
|
|
top: px2rem(108, );
|
|
color: #FE447F;
|
|
font-size: px2rem(24, );
|
|
|
|
.toImg {
|
|
display: inline-block;
|
|
width: px2rem(55, );
|
|
height: px2rem(55, );
|
|
margin: 0 px2rem(4, );
|
|
border-radius: 50%;
|
|
border: px2rem(1, ) solid #FF7489;
|
|
z-index: 5;
|
|
|
|
// img {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// display: block;
|
|
// border-radius: 50%;
|
|
// }
|
|
}
|
|
|
|
// .nick {
|
|
// margin-left: px2rem(71, );
|
|
// }
|
|
}
|
|
|
|
p {
|
|
width: px2rem(390, );
|
|
text-align: center;
|
|
color: #3D001F;
|
|
font-size: px2rem(24, );
|
|
top: px2rem(244, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
line-height: 0.5rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.bg {
|
|
width: px2rem(520, );
|
|
height: px2rem(148, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(206, );
|
|
background: #FFE8E8;
|
|
border-radius: px2rem(20, );
|
|
z-index: 2;
|
|
}
|
|
|
|
.form {
|
|
height: px2rem(55, );
|
|
line-height: px2rem(55, );
|
|
position: absolute;
|
|
right: px2rem(53, );
|
|
bottom: px2rem(199, );
|
|
color: #FE447F;
|
|
font-size: px2rem(24, );
|
|
|
|
.toImg {
|
|
display: inline-block;
|
|
width: px2rem(55, );
|
|
height: px2rem(55, );
|
|
margin: 0 px2rem(4, );
|
|
border-radius: 50%;
|
|
border: px2rem(1, ) solid #FF7489;
|
|
z-index: 5;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
// .nick {
|
|
// margin-left: px2rem(71, );
|
|
// }
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
color: #723E52;
|
|
font-size: px2rem(22, );
|
|
position: absolute;
|
|
right: px2rem(62, );
|
|
bottom: px2rem(168, );
|
|
}
|
|
}
|
|
|
|
.letter_in2 {
|
|
width: px2rem(644, );
|
|
height: px2rem(338, );
|
|
// background: url(../images/letter_in2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 49.9%;
|
|
transform: translateX(-50%);
|
|
top: 53%;
|
|
z-index: 2;
|
|
|
|
.close {
|
|
width: px2rem(220, );
|
|
height: px2rem(65, );
|
|
line-height: px2rem(65, );
|
|
border-radius: px2rem(65, );
|
|
text-align: center;
|
|
color: #482F2F;
|
|
font-weight: bold;
|
|
font-size: px2rem(28, );
|
|
position: absolute;
|
|
left: px2rem(77, );
|
|
bottom: px2rem(25, );
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.ok {
|
|
width: px2rem(220, );
|
|
height: px2rem(72, );
|
|
line-height: px2rem(72, );
|
|
border-radius: px2rem(72, );
|
|
text-align: center;
|
|
color: #482F2F;
|
|
font-weight: bold;
|
|
font-size: px2rem(28, );
|
|
position: absolute;
|
|
right: px2rem(77, );
|
|
bottom: px2rem(22, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.dynamic {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.dynamic_in {
|
|
width: px2rem(600, );
|
|
height: px2rem(421, );
|
|
background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: px2rem(40, );
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
width: px2rem(208, );
|
|
height: px2rem(78, );
|
|
margin: px2rem(33, ) auto px2rem(65, );
|
|
display: block;
|
|
}
|
|
|
|
p {
|
|
color: #3D001F;
|
|
font-size: px2rem(26, );
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
width: px2rem(220, );
|
|
height: px2rem(72, );
|
|
line-height: px2rem(72, );
|
|
border-radius: px2rem(72, );
|
|
text-align: center;
|
|
color: #482F2F;
|
|
font-weight: bold;
|
|
font-size: px2rem(28, );
|
|
background: #fff;
|
|
left: px2rem(60, );
|
|
bottom: px2rem(33, );
|
|
}
|
|
|
|
.ok {
|
|
position: absolute;
|
|
width: px2rem(220, );
|
|
height: px2rem(72, );
|
|
line-height: px2rem(72, );
|
|
border-radius: px2rem(72, );
|
|
text-align: center;
|
|
color: #482F2F;
|
|
font-weight: bold;
|
|
font-size: px2rem(28, );
|
|
background: #fff;
|
|
right: px2rem(60, );
|
|
bottom: px2rem(33, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.desire_pub {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
background: rgba(0, 0, 0, .8);
|
|
|
|
.desire_pub_in {
|
|
width: px2rem(600, );
|
|
height: px2rem(705, );
|
|
background: url(../images/desire_pub.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.desire_pub_in_tab {
|
|
width: px2rem(500, );
|
|
height: px2rem(72, );
|
|
line-height: px2rem(72, );
|
|
border-radius: px2rem(72, );
|
|
background: #fff;
|
|
font-size: px2rem(30, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(40, );
|
|
|
|
div {
|
|
width: px2rem(250, );
|
|
text-align: center;
|
|
color: #FE7AA3;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.active {
|
|
background: linear-gradient(0deg, #FF7489 0%, #FFC1AF 100%);
|
|
border-radius: px2rem(72, );
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(144, );
|
|
width: px2rem(540, );
|
|
height: px2rem(528, );
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
padding: px2rem(16, );
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(88, );
|
|
margin-bottom: px2rem(18, );
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(88, );
|
|
height: px2rem(88, );
|
|
background: #FFADB7;
|
|
float: left;
|
|
margin-right: px2rem(14, );
|
|
border-radius: 50%;
|
|
}
|
|
|
|
div {
|
|
float: left;
|
|
|
|
p {
|
|
margin: px2rem(19, ) 0 px2rem(11, );
|
|
color: #482f2f;
|
|
font-size: px2rem(24, );
|
|
}
|
|
|
|
b {
|
|
color: #fe447f;
|
|
font-size: px2rem(20, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
display: none;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(144, );
|
|
width: px2rem(540, );
|
|
height: px2rem(528, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(16, );
|
|
|
|
p {
|
|
color: #482f2f;
|
|
font-size: px2rem(24, );
|
|
margin-bottom: px2rem(25, );
|
|
line-height: px2rem(40, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.redTree_pub {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
background: rgba(0, 0, 0, .8);
|
|
|
|
.desire_pub_in {
|
|
width: px2rem(600, );
|
|
height: px2rem(705, );
|
|
background: url(../images/desire_pub.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.desire_pub_in_tab {
|
|
width: px2rem(500, );
|
|
height: px2rem(72, );
|
|
line-height: px2rem(72, );
|
|
border-radius: px2rem(72, );
|
|
background: #fff;
|
|
font-size: px2rem(30, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(40, );
|
|
|
|
div {
|
|
width: px2rem(250, );
|
|
text-align: center;
|
|
color: #FE7AA3;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.active {
|
|
background: linear-gradient(0deg, #FF7489 0%, #FFC1AF 100%);
|
|
border-radius: px2rem(72, );
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(144, );
|
|
width: px2rem(540, );
|
|
height: px2rem(528, );
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
padding: px2rem(16, );
|
|
overflow-x: hidden;
|
|
|
|
li {
|
|
width: px2rem(500, );
|
|
margin: 0 auto;
|
|
height: 0.8rem;
|
|
line-height: 0.8rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
flex: 1;
|
|
font-weight: bold;
|
|
color: #3D001F;
|
|
text-align: center;
|
|
font-size: px2rem(24, );
|
|
}
|
|
}
|
|
|
|
.li {
|
|
margin-bottom: px2rem(24, );
|
|
|
|
span {
|
|
width: px2rem(125, );
|
|
height: px2rem(50, );
|
|
|
|
i {
|
|
width: 100%;
|
|
height: 0.25rem;
|
|
text-align: center;
|
|
color: #3D001F;
|
|
font-size: px2rem(22, );
|
|
margin-bottom: px2rem(11, );
|
|
font-style: normal;
|
|
display: block;
|
|
}
|
|
|
|
b {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: px2rem(20, );
|
|
color: #C3646E;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
display: none;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(144, );
|
|
width: px2rem(540, );
|
|
height: px2rem(528, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(16, );
|
|
|
|
p {
|
|
color: #3D001F;
|
|
font-size: px2rem(22, );
|
|
margin-bottom: px2rem(25, );
|
|
font-weight: bold;
|
|
line-height: px2rem(40, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.desire_see {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
background: rgba(0, 0, 0, .8);
|
|
|
|
.desire_see_in {
|
|
width: px2rem(600, );
|
|
height: px2rem(630, );
|
|
background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: px2rem(40, );
|
|
|
|
.title {
|
|
width: px2rem(253, );
|
|
height: px2rem(78, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(29, );
|
|
}
|
|
|
|
.gift {
|
|
width: px2rem(540, );
|
|
height: px2rem(321, );
|
|
background: #fff;
|
|
border-radius: px2rem(10, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(134, );
|
|
}
|
|
|
|
.desire_see_in_but {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(521, );
|
|
width: px2rem(280, );
|
|
height: px2rem(72, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.confirmTheGift {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
background: rgba(0, 0, 0, .8);
|
|
|
|
.confirmTheGift_in {
|
|
width: px2rem(600, );
|
|
height: px2rem(421, );
|
|
background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: px2rem(40, );
|
|
box-sizing: border-box;
|
|
|
|
.confirmTheGift_in_title {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(40, );
|
|
color: #990D39;
|
|
font-size: px2rem(26, );
|
|
font-weight: bold;
|
|
|
|
b {
|
|
color: #503938;
|
|
font-weight: bold;
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.gift {
|
|
width: px2rem(160, );
|
|
height: px2rem(160, );
|
|
background: #FFADB7;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(111, );
|
|
}
|
|
|
|
.but1 {
|
|
text-align: center;
|
|
color: #482F2F;
|
|
font-size: px2rem(28, );
|
|
font-weight: bold;
|
|
line-height: px2rem(72, );
|
|
width: px2rem(220, );
|
|
height: px2rem(72, );
|
|
border-radius: px2rem(72, );
|
|
position: absolute;
|
|
left: px2rem(60, );
|
|
top: px2rem(316, );
|
|
background: #fff;
|
|
}
|
|
|
|
.but2 {
|
|
width: px2rem(220, );
|
|
height: px2rem(72, );
|
|
position: absolute;
|
|
right: px2rem(60, );
|
|
top: px2rem(316, );
|
|
background: url(../images/confirmTheGift_in_but2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page4 {
|
|
.rankTab {
|
|
width: px2rem(500, );
|
|
height: px2rem(86, );
|
|
background: #FFC2CA;
|
|
border: px2rem(3, ) solid #FFE1EC;
|
|
border-radius: px2rem(42, );
|
|
margin: px2rem(40, ) auto 0;
|
|
display: flex;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.rankItem {
|
|
width: 50%;
|
|
height: px2rem(86, );
|
|
color: #D5747E;
|
|
font-size: px2rem(34, );
|
|
text-align: center;
|
|
line-height: px2rem(86, );
|
|
margin-top: -0.02rem;
|
|
}
|
|
|
|
.rankItem_act {
|
|
background: url(../images/rank/rank_act.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.yqListWrap {
|
|
width: px2rem(690, );
|
|
// height: px2rem(2190, );
|
|
height: 39.5rem;
|
|
background: linear-gradient(90deg, #FFE1ED 0%, #FFF6E7 100%);
|
|
border-radius: px2rem(30, );
|
|
margin: -0.6rem auto 2rem;
|
|
position: relative;
|
|
|
|
.rankAward {
|
|
width: px2rem(160, );
|
|
height: px2rem(48, );
|
|
background: #FFFFFF;
|
|
border-radius: px2rem(20, );
|
|
font-size: px2rem(26, );
|
|
color: #FE447F;
|
|
text-align: center;
|
|
line-height: px2rem(48, );
|
|
position: absolute;
|
|
top: 0.8rem;
|
|
right: px2rem(30, );
|
|
}
|
|
|
|
.tips {
|
|
width: 100%;
|
|
font-size: px2rem(24, );
|
|
color: #482F2F;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: px2rem(132, );
|
|
}
|
|
|
|
.dateTab {
|
|
width: px2rem(343, );
|
|
height: px2rem(66, );
|
|
position: absolute;
|
|
top: px2rem(177, );
|
|
left: px2rem(173, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.iteml {
|
|
width: px2rem(170, );
|
|
height: px2rem(66, );
|
|
background: url('../images/rank/date.png') no-repeat;
|
|
background-size: 100%;
|
|
line-height: px2rem(66, );
|
|
text-align: center;
|
|
font-size: px2rem(26, );
|
|
color: #CE5F6B;
|
|
font-weight: 500;
|
|
transform: rotate(180deg);
|
|
|
|
p {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
|
|
.itemr {
|
|
width: px2rem(170, );
|
|
height: px2rem(66, );
|
|
background: url('../images/rank/date.png') no-repeat;
|
|
background-size: 100%;
|
|
line-height: px2rem(66, );
|
|
text-align: center;
|
|
font-size: px2rem(26, );
|
|
color: #CE5F6B;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.iteml_act {
|
|
background: url('../images/rank/date_act.png') no-repeat;
|
|
background-size: 100%;
|
|
transform: rotate(0deg);
|
|
|
|
p {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.itemr_act {
|
|
background: url('../images/rank/date_act.png') no-repeat;
|
|
background-size: 100%;
|
|
transform: rotate(180deg);
|
|
|
|
p {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.time {
|
|
width: 8.75rem;
|
|
height: px2rem(36, );
|
|
line-height: px2rem(36, );
|
|
text-align: center;
|
|
display: flex;
|
|
position: relative;
|
|
left: 5%;
|
|
top: px2rem(266, );
|
|
|
|
overflow-x: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
span {
|
|
min-width: px2rem(72, );
|
|
height: 100%;
|
|
background: #FFD8E5;
|
|
font-size: px2rem(22, );
|
|
color: #3D001F;
|
|
border-radius: px2rem(10, );
|
|
margin-right: px2rem(22, );
|
|
z-index: 2;
|
|
}
|
|
|
|
.active {
|
|
background: linear-gradient(0deg, #FF5A7D 1%, #FFC99E 98%);
|
|
color: #fff;
|
|
}
|
|
|
|
p {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 2%;
|
|
transform: translateY(-50%);
|
|
width: 135%;
|
|
height: px2rem(6, );
|
|
background-color: #FFD8E5;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.yqList {
|
|
width: px2rem(640, );
|
|
height: 34.6rem;
|
|
background: #FFA2AB;
|
|
border-radius: px2rem(12, );
|
|
position: absolute;
|
|
top: px2rem(335, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
// cp榜样式
|
|
.no1 {
|
|
width: px2rem(535, );
|
|
height: px2rem(378, );
|
|
position: absolute;
|
|
top: px2rem(23, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/rank/no1Bg.png) no-repeat;
|
|
background-size: 100%;
|
|
|
|
.bg {
|
|
// width: px2rem(73, );
|
|
width: 1rem;
|
|
height: px2rem(59, );
|
|
background: url(../images/rank/cpLink.png) no-repeat;
|
|
background-size: 100%;
|
|
position: absolute;
|
|
top: px2rem(122, );
|
|
left: 47%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.img1 {
|
|
width: px2rem(120, );
|
|
height: px2rem(120, );
|
|
border: px2rem(2, ) solid #fff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: px2rem(89, );
|
|
left: 1.2rem;
|
|
}
|
|
|
|
.img2 {
|
|
width: px2rem(120, );
|
|
height: px2rem(120, );
|
|
border: px2rem(2, ) solid #fff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: px2rem(89, );
|
|
right: 1.63rem;
|
|
}
|
|
|
|
.name1,
|
|
.name2 {
|
|
width: 1.4rem;
|
|
height: px2rem(34, );
|
|
font-size: px2rem(24, );
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: px2rem(34, );
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.name1 {
|
|
position: absolute;
|
|
left: 1.3rem;
|
|
top: 2.9rem;
|
|
}
|
|
|
|
.name2 {
|
|
position: absolute;
|
|
right: 1.8rem;
|
|
top: 2.9rem;
|
|
}
|
|
|
|
b {
|
|
font-size: px2rem(26, );
|
|
color: #FEFFA3;
|
|
position: absolute;
|
|
bottom: px2rem(78, );
|
|
left: 48%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
}
|
|
|
|
.no2 {
|
|
width: 3.5rem;
|
|
height: px2rem(318, );
|
|
position: absolute;
|
|
top: 5.5rem;
|
|
left: 2.2rem;
|
|
transform: translateX(-50%);
|
|
|
|
.bg {
|
|
width: px2rem(107, );
|
|
height: px2rem(136, );
|
|
background: url(../images/rank/no2.png) no-repeat;
|
|
background-size: 100%;
|
|
position: absolute;
|
|
top: 0.3rem;
|
|
left: 50.5%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.img1 {
|
|
width: px2rem(101, );
|
|
height: px2rem(101, );
|
|
border: px2rem(2, ) solid #fff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 1.1rem;
|
|
left: 0;
|
|
}
|
|
|
|
.img2 {
|
|
width: px2rem(101, );
|
|
height: px2rem(101, );
|
|
border: px2rem(2, ) solid #fff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 1.1rem;
|
|
right: 0;
|
|
}
|
|
|
|
.name1,
|
|
.name2 {
|
|
width: 1.4rem;
|
|
height: px2rem(34, );
|
|
font-size: px2rem(24, );
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: px2rem(34, );
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.name1 {
|
|
position: absolute;
|
|
left: 0rem;
|
|
top: 2.6rem;
|
|
}
|
|
|
|
.name2 {
|
|
position: absolute;
|
|
right: 0rem;
|
|
top: 2.6rem;
|
|
}
|
|
|
|
b {
|
|
font-size: px2rem(26, );
|
|
color: #FEFFA3;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
bottom: 0.7rem;
|
|
left: 48%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
width: 3.5rem;
|
|
height: px2rem(318, );
|
|
position: absolute;
|
|
top: 5.55rem;
|
|
right: 0.4rem;
|
|
|
|
.bg {
|
|
width: px2rem(107, );
|
|
height: px2rem(136, );
|
|
background: url(../images/rank/no3.png) no-repeat;
|
|
background-size: 100%;
|
|
position: absolute;
|
|
top: 0.3rem;
|
|
left: 52%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.img1 {
|
|
width: px2rem(101, );
|
|
height: px2rem(101, );
|
|
border: px2rem(2, ) solid #fff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 1.1rem;
|
|
left: 0;
|
|
}
|
|
|
|
.img2 {
|
|
width: px2rem(101, );
|
|
height: px2rem(101, );
|
|
border: px2rem(2, ) solid #fff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 1.1rem;
|
|
right: 0;
|
|
}
|
|
|
|
.name1,
|
|
.name2 {
|
|
width: 1.4rem;
|
|
height: px2rem(34, );
|
|
font-size: px2rem(24, );
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: px2rem(34, );
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.name1 {
|
|
position: absolute;
|
|
left: 0rem;
|
|
top: 2.6rem;
|
|
}
|
|
|
|
.name2 {
|
|
position: absolute;
|
|
right: 0rem;
|
|
top: 2.6rem;
|
|
}
|
|
|
|
b {
|
|
font-size: px2rem(26, );
|
|
color: #FEFFA3;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
bottom: 0.7rem;
|
|
left: 48%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: 100%;
|
|
height: 25.55rem;
|
|
position: absolute;
|
|
bottom: 0;
|
|
overflow-y: hidden;
|
|
|
|
li {
|
|
width: px2rem(589, );
|
|
height: px2rem(158, );
|
|
margin: 0 auto;
|
|
position: relative;
|
|
border-bottom: 1px solid rgba(247, 189, 189, 0.5);
|
|
|
|
&:nth-child(7) {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.num {
|
|
width: px2rem(80, );
|
|
font-size: px2rem(26, );
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: px2rem(70, );
|
|
left: 0;
|
|
}
|
|
|
|
.img1 {
|
|
width: px2rem(90, );
|
|
height: px2rem(90, );
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
border: 1px solid #fff;
|
|
position: absolute;
|
|
left: px2rem(125, );
|
|
top: px2rem(20, );
|
|
z-index: 1;
|
|
}
|
|
|
|
.img2 {
|
|
width: px2rem(90, );
|
|
height: px2rem(90, );
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
border: 1px solid #fff;
|
|
position: absolute;
|
|
left: px2rem(209, );
|
|
top: px2rem(20, );
|
|
z-index: 2;
|
|
}
|
|
|
|
p {
|
|
width: 3rem;
|
|
font-size: px2rem(22, );
|
|
color: #fff;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
left: 1.25rem;
|
|
top: px2rem(124, );
|
|
}
|
|
|
|
b {
|
|
position: absolute;
|
|
right: 0.1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #FEFFA3;
|
|
font-size: px2rem(26, );
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.myGulp {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: px2rem(188, );
|
|
background: linear-gradient(0deg, #FF97CA 0%, #FFF4E8 99%);
|
|
border-radius: px2rem(16, ) px2rem(16, ) 0px 0px;
|
|
box-sizing: border-box;
|
|
padding: px2rem(42, ) 0;
|
|
z-index: 5;
|
|
transition: all 0.4s;
|
|
|
|
.more {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(11, );
|
|
width: px2rem(25, );
|
|
height: px2rem(19, );
|
|
transition: all 0.4s;
|
|
}
|
|
|
|
.more_act {
|
|
transform: translateX(-50%) rotate(180deg);
|
|
}
|
|
|
|
ul {
|
|
width: 100%;
|
|
height: px2rem(125, );
|
|
// height: 1.7rem;
|
|
overflow: hidden;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
li {
|
|
width: px2rem(650, );
|
|
height: px2rem(125, );
|
|
margin: 0 auto;
|
|
position: relative;
|
|
border-bottom: 1px solid rgb(255, 255, 255, 0.3);
|
|
|
|
.num {
|
|
width: px2rem(80, );
|
|
font-size: px2rem(26, );
|
|
font-weight: 500;
|
|
color: #3D001F;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: px2rem(48, );
|
|
left: 0;
|
|
}
|
|
|
|
.img1 {
|
|
width: px2rem(90, );
|
|
height: px2rem(90, );
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
border: 1px solid #fff;
|
|
position: absolute;
|
|
left: px2rem(125, );
|
|
top: 0.05rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.img2 {
|
|
width: px2rem(90, );
|
|
height: px2rem(90, );
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
border: 1px solid #fff;
|
|
position: absolute;
|
|
left: px2rem(209, );
|
|
top: 0.05rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
p {
|
|
width: 3rem;
|
|
font-size: px2rem(22, );
|
|
color: #fff;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
left: 1.26rem;
|
|
top: 1.3rem;
|
|
}
|
|
|
|
b {
|
|
position: absolute;
|
|
right: 0;
|
|
top: px2rem(40, );
|
|
color: #CF636E;
|
|
font-size: px2rem(26, );
|
|
}
|
|
|
|
}
|
|
|
|
.active {
|
|
text-align: center;
|
|
font-size: px2rem(30, );
|
|
line-height: px2rem(125, );
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mlListWrap {
|
|
display: none;
|
|
width: px2rem(690, );
|
|
height: px2rem(2444, );
|
|
background: linear-gradient(90deg, #FFE1ED 0%, #FFF6E7 100%);
|
|
border-radius: px2rem(30, );
|
|
margin: -0.6rem auto 1.8rem;
|
|
position: relative;
|
|
|
|
|
|
.rankAward {
|
|
width: px2rem(160, );
|
|
height: px2rem(48, );
|
|
background: #FFFFFF;
|
|
border-radius: px2rem(20, );
|
|
font-size: px2rem(26, );
|
|
color: #FE447F;
|
|
text-align: center;
|
|
line-height: px2rem(48, );
|
|
position: absolute;
|
|
top: 0.8rem;
|
|
right: px2rem(30, );
|
|
}
|
|
|
|
.tips {
|
|
width: 100%;
|
|
font-size: px2rem(24, );
|
|
color: #482F2F;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: px2rem(132, );
|
|
}
|
|
|
|
.mlList {
|
|
width: px2rem(640, );
|
|
height: px2rem(2210, );
|
|
background: #FFA2AB;
|
|
border-radius: px2rem(12, );
|
|
position: absolute;
|
|
top: px2rem(202, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.no1 {
|
|
width: px2rem(226, );
|
|
height: px2rem(226, );
|
|
position: absolute;
|
|
top: px2rem(40, );
|
|
left: 50.6%;
|
|
transform: translateX(-50%);
|
|
padding: px2rem(34, ) 0;
|
|
box-sizing: border-box;
|
|
|
|
.bg {
|
|
width: px2rem(372, );
|
|
height: px2rem(292, );
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50.6%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tx {
|
|
display: block;
|
|
width: 2.35rem;
|
|
height: 2.35rem;
|
|
margin: -0.14rem auto 0.4133333333rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.No {
|
|
width: px2rem(226, );
|
|
height: px2rem(226, );
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50.6%;
|
|
transform: translateX(-50%);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
p {
|
|
width: px2rem(215, );
|
|
height: px2rem(45, );
|
|
background: linear-gradient(90deg, rgba(253, 183, 205, 0.02) 1%, rgba(255, 111, 135, 0.96) 41%, rgba(253, 184, 205, 0) 100%);
|
|
font-size: px2rem(24, );
|
|
color: #fff;
|
|
line-height: px2rem(45, );
|
|
text-align: center;
|
|
}
|
|
|
|
b {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FEFFA3;
|
|
font-size: px2rem(22, );
|
|
display: block;
|
|
padding-top: px2rem(12, );
|
|
}
|
|
}
|
|
|
|
.no2,
|
|
.no3 {
|
|
width: px2rem(162, );
|
|
height: px2rem(167, );
|
|
position: absolute;
|
|
top: 1.7rem;
|
|
left: 0.5rem;
|
|
padding: px2rem(16, ) 0;
|
|
box-sizing: border-box;
|
|
|
|
.tx {
|
|
display: block;
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
margin: 0.05rem auto 0.3rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.No {
|
|
width: px2rem(162, );
|
|
height: px2rem(167, );
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50.6%;
|
|
transform: translateX(-50%);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
p {
|
|
width: 2.2rem;
|
|
height: px2rem(45, );
|
|
background: linear-gradient(90deg, rgba(253, 183, 205, 0.02) 1%, rgba(255, 111, 135, 0.96) 41%, rgba(253, 184, 205, 0) 100%);
|
|
font-size: px2rem(24, );
|
|
color: #fff;
|
|
line-height: px2rem(45, );
|
|
text-align: center;
|
|
}
|
|
|
|
b {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FEFFA3;
|
|
font-size: px2rem(22, );
|
|
display: block;
|
|
padding-top: px2rem(12, );
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
left: 6rem;
|
|
}
|
|
|
|
.ul {
|
|
width: px2rem(630, );
|
|
height: 24.3rem;
|
|
border-radius: px2rem(12, );
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
overflow: hidden;
|
|
|
|
li {
|
|
width: px2rem(589, );
|
|
height: px2rem(150, );
|
|
margin: 0 auto;
|
|
border-bottom: 1px solid rgba(247, 189, 189, 0.5);
|
|
|
|
.num {
|
|
width: px2rem(80, );
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(26, );
|
|
margin-left: px2rem(10, );
|
|
margin-top: px2rem(70, );
|
|
margin-right: px2rem(22, );
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
.tx {
|
|
display: block;
|
|
float: left;
|
|
width: px2rem(102, );
|
|
height: px2rem(102, );
|
|
margin-top: px2rem(32, );
|
|
margin-right: px2rem(22, );
|
|
border: 1px solid #fff;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.nick {
|
|
margin-top: px2rem(70, );
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22, );
|
|
float: left;
|
|
}
|
|
|
|
b {
|
|
float: right;
|
|
margin-right: px2rem(10, );
|
|
margin-top: px2rem(70, );
|
|
text-align: right;
|
|
color: #FEFFA3;
|
|
font-size: px2rem(24, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.myList {
|
|
width: 100%;
|
|
height: px2rem(173, );
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(0deg, #FF97CA 0%, #FFF5E7 100%);
|
|
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
|
z-index: 5;
|
|
|
|
.num {
|
|
width: 17%;
|
|
text-align: center;
|
|
height: px2rem(36, );
|
|
margin-left: px2rem(49, );
|
|
margin-right: 0.1rem;
|
|
display: block;
|
|
float: left;
|
|
color: #3D001F;
|
|
font-size: px2rem(30, );
|
|
line-height: px2rem(134, );
|
|
}
|
|
|
|
.tx {
|
|
display: block;
|
|
float: left;
|
|
width: px2rem(90, );
|
|
height: px2rem(90, );
|
|
margin-top: px2rem(24, );
|
|
margin-right: 0.3rem;
|
|
border: 1px solid #fff;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.nick {
|
|
height: 100%;
|
|
width: 25%;
|
|
line-height: px2rem(134, );
|
|
// text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22, );
|
|
float: left;
|
|
}
|
|
|
|
.right {
|
|
width: 25%;
|
|
float: right;
|
|
margin-right: px2rem(52, );
|
|
line-height: px2rem(134, );
|
|
text-align: right;
|
|
color: #CF636E;
|
|
font-size: px2rem(26, );
|
|
}
|
|
}
|
|
|
|
// 弹窗
|
|
.listRule1 {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 9999;
|
|
display: none;
|
|
|
|
.listRule1_in {
|
|
width: px2rem(600, );
|
|
height: px2rem(995, );
|
|
background: url(../images/rank/rankBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
position: absolute;
|
|
width: px2rem(230, );
|
|
height: px2rem(78, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(16, );
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(505, );
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
margin: px2rem(142, ) auto 0;
|
|
height: 10.6rem;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: px2rem(2020, );
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.listRule2 {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 9999;
|
|
display: none;
|
|
|
|
.listRule2_in {
|
|
width: px2rem(600, );
|
|
height: px2rem(995, );
|
|
background: url(../images/rank/rankBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
position: absolute;
|
|
width: px2rem(230, );
|
|
height: px2rem(78, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(16, );
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(505, );
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
margin: 2rem auto 0;
|
|
height: 10.5rem;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: px2rem(999, );
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.jieshu {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 9999;
|
|
display: none;
|
|
|
|
.jieshu_in {
|
|
width: px2rem(634, );
|
|
height: px2rem(365, );
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/rank/jieshu.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
span {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0.68rem;
|
|
width: 5.4rem;
|
|
height: 1.3rem;
|
|
}
|
|
}
|
|
} |