179 lines
4.0 KiB
SCSS
179 lines
4.0 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;
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(686, );
|
|
height: px2rem(460, );
|
|
background: url(../images/exchangeGold/bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: px2rem(70, ) auto px2rem(80, );
|
|
position: relative;
|
|
|
|
.golds {
|
|
position: absolute;
|
|
left: px2rem(32, );
|
|
top: px2rem(32, );
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32, );
|
|
font-weight: bold;
|
|
}
|
|
|
|
.diamonds {
|
|
position: absolute;
|
|
left: px2rem(32, );
|
|
top: px2rem(248, );
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32, );
|
|
font-weight: bold;
|
|
}
|
|
|
|
.num {
|
|
position: absolute;
|
|
right: px2rem(28, );
|
|
top: px2rem(96, );
|
|
width: 7.1rem;
|
|
height: px2rem(104, );
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(28, );
|
|
text-align: right;
|
|
font-weight: bold;
|
|
color: #000;
|
|
|
|
&::placeholder {
|
|
font-size: px2rem(32, );
|
|
color: #ADB9D9;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.num2 {
|
|
position: absolute;
|
|
right: px2rem(28, );
|
|
top: px2rem(312, );
|
|
width: 7.1rem;
|
|
height: px2rem(104, );
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(28, );
|
|
text-align: right;
|
|
font-weight: bold;
|
|
color: #000;
|
|
|
|
&::placeholder {
|
|
font-size: px2rem(32, );
|
|
color: #ADB9D9;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(606, );
|
|
height: px2rem(96, );
|
|
line-height: px2rem(96, );
|
|
border-radius: px2rem(96, );
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32, );
|
|
margin: 0 auto 0;
|
|
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
|
}
|
|
|
|
.pub {
|
|
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, );
|
|
}
|
|
}
|
|
} |