633 lines
14 KiB
SCSS
633 lines
14 KiB
SCSS
@function px2rem($px, $rem:75) {
|
|
@return $px / $rem+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
background: #F3F5FA;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
z-index: 9;
|
|
width: px2rem(56, );
|
|
height: px2rem(56, );
|
|
left: px2rem(40, );
|
|
top: 0.2rem;
|
|
// display: none;
|
|
}
|
|
|
|
.butBig {
|
|
width: px2rem(606, );
|
|
height: px2rem(96, );
|
|
background: linear-gradient(90deg, #EEDCFF 0%, #DEE4FF 50%, #CCF8F9 100%);
|
|
border-radius: px2rem(96, );
|
|
line-height: px2rem(96, );
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32, );
|
|
margin: 0 auto px2rem(50, );
|
|
}
|
|
|
|
.butBigActive {
|
|
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
|
;
|
|
}
|
|
|
|
.myInfo {
|
|
width: px2rem(690, );
|
|
height: px2rem(136, );
|
|
margin: px2rem(60, ) auto px2rem(32, );
|
|
|
|
img {
|
|
display: block;
|
|
width: px2rem(136, );
|
|
height: px2rem(136, );
|
|
border-radius: 50%;
|
|
float: left;
|
|
}
|
|
|
|
div {
|
|
float: left;
|
|
margin-left: px2rem(22, );
|
|
overflow: hidden;
|
|
|
|
p {
|
|
color: #1F1B4F;
|
|
font-size: px2rem(36, );
|
|
font-weight: bold;
|
|
margin-bottom: px2rem(12, );
|
|
margin-top: px2rem(30, );
|
|
width: 6.5rem;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
b {
|
|
color: #8A8CAB;
|
|
font-size: px2rem(24, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.income {
|
|
width: px2rem(686, );
|
|
height: px2rem(216, );
|
|
background: url(../images/withdrawal/bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(8, );
|
|
position: relative;
|
|
|
|
.rule {
|
|
color: #9168FA;
|
|
font-size: px2rem(24, );
|
|
position: absolute;
|
|
right: px2rem(32, );
|
|
top: px2rem(18, );
|
|
}
|
|
|
|
img {
|
|
width: px2rem(56, );
|
|
height: px2rem(56, );
|
|
position: absolute;
|
|
left: px2rem(40, );
|
|
top: px2rem(80, );
|
|
|
|
}
|
|
|
|
span {
|
|
color: #FFFFFF;
|
|
font-size: px2rem(28, );
|
|
position: absolute;
|
|
left: px2rem(40, );
|
|
top: px2rem(32, );
|
|
}
|
|
|
|
p {
|
|
color: #FFFFFF;
|
|
font-size: px2rem(48, );
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: px2rem(104, );
|
|
top: px2rem(88, );
|
|
}
|
|
}
|
|
|
|
.account {
|
|
width: px2rem(686, );
|
|
height: px2rem(120, );
|
|
line-height: px2rem(120, );
|
|
background: #fff;
|
|
border-radius: px2rem(20, );
|
|
margin: 0 auto px2rem(32, );
|
|
position: relative;
|
|
|
|
.icon_account {
|
|
position: absolute;
|
|
left: px2rem(40, );
|
|
top: px2rem(40, );
|
|
width: px2rem(40, );
|
|
height: px2rem(40, );
|
|
}
|
|
|
|
.arrow_right {
|
|
position: absolute;
|
|
right: px2rem(40, );
|
|
top: px2rem(40, );
|
|
width: px2rem(40, );
|
|
height: px2rem(40, );
|
|
}
|
|
|
|
div {
|
|
height: 100%;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32, );
|
|
font-weight: bold;
|
|
position: absolute;
|
|
top: 0;
|
|
left: px2rem(92, );
|
|
}
|
|
|
|
span {
|
|
height: 100%;
|
|
color: #B3B3C3;
|
|
font-size: px2rem(24, );
|
|
position: absolute;
|
|
top: 0;
|
|
right: px2rem(80, );
|
|
}
|
|
|
|
.active {
|
|
color: #1F1B4F;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.withdrawal {
|
|
width: px2rem(686, );
|
|
height: px2rem(572, );
|
|
margin: 0 auto px2rem(40, );
|
|
background: #fff;
|
|
border-radius: px2rem(20, );
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.gold {
|
|
width: px2rem(40, );
|
|
height: px2rem(40, );
|
|
position: absolute;
|
|
top: px2rem(40, );
|
|
left: px2rem(40, );
|
|
}
|
|
|
|
.title {
|
|
margin-top: px2rem(40, );
|
|
margin-left: px2rem(92, );
|
|
font-size: px2rem(32, );
|
|
color: #1F1B4F;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input {
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(40, );
|
|
width: px2rem(606, );
|
|
height: px2rem(96, );
|
|
margin: px2rem(32, ) auto px2rem(48, );
|
|
background: #F3F5FA;
|
|
display: block;
|
|
border-radius: px2rem(16, );
|
|
|
|
&::placeholder {
|
|
font-size: px2rem(28, );
|
|
color: #B3B3C3;
|
|
}
|
|
}
|
|
|
|
.withdrawalBox {
|
|
width: px2rem(606, );
|
|
height: px2rem(96, );
|
|
position: absolute;
|
|
left: 0.55rem;
|
|
top: 1.3rem;
|
|
}
|
|
|
|
.numBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(40, );
|
|
margin: 0 auto px2rem(56, );
|
|
|
|
span {
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32, );
|
|
// float: left;
|
|
}
|
|
|
|
b {
|
|
color: #B3B3C3;
|
|
font-size: px2rem(28, );
|
|
float: right;
|
|
}
|
|
|
|
.active {
|
|
color: #9168FA;
|
|
font-size: px2rem(35, );
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-bottom: px2rem(12, );
|
|
color: #8A8CAB;
|
|
font-size: px2rem(24, );
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(40, );
|
|
|
|
i {
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.accountPub {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .6);
|
|
display: none;
|
|
|
|
.accountPub_in {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
border-radius: px2rem(56, ) px2rem(56, ) 0 0;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
height: px2rem(666, );
|
|
|
|
h3 {
|
|
height: px2rem(136, );
|
|
line-height: px2rem(136, );
|
|
border-bottom: px2rem(1, ) solid #EBEEF5;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(36, );
|
|
font-weight: bold;
|
|
}
|
|
|
|
ul {
|
|
width: 100%;
|
|
height: 7rem;
|
|
overflow-y: scroll;
|
|
|
|
li {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28, );
|
|
height: px2rem(104, );
|
|
line-height: px2rem(104, );
|
|
border-bottom: px2rem(1, ) solid #EBEEF5;
|
|
}
|
|
|
|
.active {
|
|
color: #9168FA;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.goldPub {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.goldPub_in {
|
|
width: px2rem(638, );
|
|
height: px2rem(548, );
|
|
background: #fff;
|
|
border-radius: px2rem(40, );
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.title {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: px2rem(32, );
|
|
font-weight: bold;
|
|
color: #1F1B4F;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(48, );
|
|
}
|
|
|
|
.num {
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
text-align: center;
|
|
top: px2rem(140, );
|
|
left: 0;
|
|
font-size: px2rem(56, );
|
|
font-weight: bold;
|
|
}
|
|
|
|
img {
|
|
position: absolute;
|
|
left: px2rem(240, );
|
|
top: px2rem(205, );
|
|
width: px2rem(40, );
|
|
height: px2rem(40, );
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
top: px2rem(210, );
|
|
left: px2rem(288, );
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28, );
|
|
}
|
|
|
|
input {
|
|
width: px2rem(510, );
|
|
height: px2rem(96, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(272, );
|
|
text-align: center;
|
|
background: #F3F5FA;
|
|
outline: none;
|
|
border: none;
|
|
border-radius: px2rem(16, );
|
|
font-size: px2rem(28, );
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(526, );
|
|
height: px2rem(92, );
|
|
line-height: px2rem(92, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(408, );
|
|
text-align: center;
|
|
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
|
border-radius: px2rem(92, );
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.withDrawalPub {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.withDrawalPub_in {
|
|
width: px2rem(638, );
|
|
height: px2rem(436, );
|
|
background: #fff;
|
|
border-radius: px2rem(40, );
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.title {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32, );
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(48, );
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28, );
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(140, );
|
|
|
|
b {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
span {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28, );
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(204, );
|
|
|
|
b {
|
|
color: #9168FA;
|
|
font-size: px2rem(32, );
|
|
}
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(526, );
|
|
height: px2rem(92, );
|
|
line-height: px2rem(92, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(296, );
|
|
text-align: center;
|
|
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
|
border-radius: px2rem(92, );
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.binding {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .6);
|
|
display: none;
|
|
|
|
.pub_in {
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #fff;
|
|
border-radius: px2rem(40, );
|
|
width: px2rem(638, );
|
|
height: px2rem(372, );
|
|
|
|
.title {
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
font-weight: bold;
|
|
font-size: px2rem(32, );
|
|
top: px2rem(48, );
|
|
left: 0;
|
|
}
|
|
|
|
p {
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28, );
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
left: 0;
|
|
top: px2rem(130, );
|
|
|
|
b {
|
|
color: #9168FA;
|
|
font-weight: bold;
|
|
font-size: px2rem(32, );
|
|
}
|
|
}
|
|
|
|
.close {
|
|
width: px2rem(248, );
|
|
height: px2rem(88, );
|
|
border-radius: px2rem(88, );
|
|
line-height: px2rem(88, );
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(32, );
|
|
background: #E6E6F0;
|
|
position: absolute;
|
|
left: px2rem(56, );
|
|
bottom: px2rem(48, );
|
|
}
|
|
|
|
.ok {
|
|
width: px2rem(248, );
|
|
height: px2rem(88, );
|
|
border-radius: px2rem(88, );
|
|
line-height: px2rem(88, );
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(32, );
|
|
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
|
position: absolute;
|
|
right: px2rem(56, );
|
|
bottom: px2rem(48, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.switch {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .6);
|
|
display: none;
|
|
|
|
.pub_in {
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #fff;
|
|
border-radius: px2rem(40, );
|
|
width: px2rem(638, );
|
|
height: px2rem(372, );
|
|
|
|
.title {
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
font-weight: bold;
|
|
font-size: px2rem(32, );
|
|
top: px2rem(48, );
|
|
left: 0;
|
|
}
|
|
|
|
p {
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28, );
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
left: 0;
|
|
top: px2rem(130, );
|
|
|
|
b {
|
|
color: #9168FA;
|
|
font-weight: bold;
|
|
font-size: px2rem(32, );
|
|
}
|
|
}
|
|
|
|
.close {
|
|
width: px2rem(248, );
|
|
height: px2rem(88, );
|
|
border-radius: px2rem(88, );
|
|
line-height: px2rem(88, );
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(32, );
|
|
background: #E6E6F0;
|
|
position: absolute;
|
|
left: px2rem(56, );
|
|
bottom: px2rem(48, );
|
|
}
|
|
|
|
.ok {
|
|
width: px2rem(248, );
|
|
height: px2rem(88, );
|
|
border-radius: px2rem(88, );
|
|
line-height: px2rem(88, );
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(32, );
|
|
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
|
position: absolute;
|
|
right: px2rem(56, );
|
|
bottom: px2rem(48, );
|
|
}
|
|
}
|
|
} |