充值弹窗暂存
This commit is contained in:
Dragon
@@ -1,53 +1,60 @@
|
||||
@import url("../../../common/css/flex.scss");
|
||||
body {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0.5333333333rem;
|
||||
padding-bottom: 0.53333rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 10rem;
|
||||
height: 7.4666666667rem;
|
||||
height: 7.46667rem;
|
||||
margin: 0 auto -5.9rem;
|
||||
position: relative;
|
||||
background: url(../images/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.2666666667rem;
|
||||
padding-top: 0.26667rem;
|
||||
}
|
||||
|
||||
.header .box {
|
||||
width: 100%;
|
||||
height: 0.8533333333rem;
|
||||
height: 0.85333rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.header .box .left {
|
||||
position: absolute;
|
||||
left: 0.5333333333rem;
|
||||
left: 0.53333rem;
|
||||
top: 0;
|
||||
height: 0.8533333333rem;
|
||||
line-height: 0.8533333333rem;
|
||||
height: 0.85333rem;
|
||||
line-height: 0.85333rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header .box .left .logo {
|
||||
display: inline-block;
|
||||
width: 0.8533333333rem;
|
||||
height: 0.8533333333rem;
|
||||
margin-right: 0.2133333333rem;
|
||||
width: 0.85333rem;
|
||||
height: 0.85333rem;
|
||||
margin-right: 0.21333rem;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
.header .box .left b {
|
||||
color: #1F1B4F;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header .box .right {
|
||||
position: absolute;
|
||||
right: 0.5333333333rem;
|
||||
right: 0.53333rem;
|
||||
top: 0;
|
||||
height: 0.8533333333rem;
|
||||
line-height: 0.8533333333rem;
|
||||
height: 0.85333rem;
|
||||
line-height: 0.85333rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header .box .right .didianIcon {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
@@ -55,41 +62,45 @@ body {
|
||||
margin-right: 0.16rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header .box .right i {
|
||||
font-style: normal;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.3733333333rem;
|
||||
margin-right: 0.0533333333rem;
|
||||
font-size: 0.37333rem;
|
||||
margin-right: 0.05333rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header .box .right .moreIcon {
|
||||
width: 0.32rem;
|
||||
height: 0.2133333333rem;
|
||||
height: 0.21333rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bindingBox {
|
||||
width: 9.7333333333rem;
|
||||
height: 1.6533333333rem;
|
||||
width: 9.73333rem;
|
||||
height: 1.65333rem;
|
||||
background: url(../images/inputBG.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
margin: 0 auto 0.3333333333rem;
|
||||
margin: 0 auto 0.33333rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bindingBox .binding {
|
||||
width: 9.1466666667rem;
|
||||
height: 1.0666666667rem;
|
||||
width: 9.14667rem;
|
||||
height: 1.06667rem;
|
||||
background: #FAFBFC;
|
||||
border: 0.0266666667rem solid #fff;
|
||||
border: 0.02667rem solid #fff;
|
||||
margin: 0.29rem auto 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.08rem 0 0.4266666667rem;
|
||||
border-radius: 1.0666666667rem;
|
||||
padding: 0 0.08rem 0 0.42667rem;
|
||||
border-radius: 1.06667rem;
|
||||
}
|
||||
|
||||
.bindingBox .binding input {
|
||||
border: none;
|
||||
background: none;
|
||||
@@ -97,72 +108,78 @@ body {
|
||||
height: 100%;
|
||||
width: 6.4rem;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bindingBox .binding input::placeholder {
|
||||
color: #B3B3C3;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.bindingBox .binding .but {
|
||||
width: 1.92rem;
|
||||
height: 0.9066666667rem;
|
||||
height: 0.90667rem;
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
border-radius: 0.9066666667rem;
|
||||
border-radius: 0.90667rem;
|
||||
text-align: center;
|
||||
line-height: 0.9066666667rem;
|
||||
line-height: 0.90667rem;
|
||||
color: #fff;
|
||||
margin-top: 0.0533333333rem;
|
||||
margin-top: 0.05333rem;
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
width: 9.36rem;
|
||||
height: 1.6533333333rem;
|
||||
height: 1.65333rem;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 0.3733333333rem;
|
||||
margin: 0 auto 0.3333333333rem;
|
||||
border-radius: 0.37333rem;
|
||||
margin: 0 auto 0.33333rem;
|
||||
}
|
||||
|
||||
.userinfo img {
|
||||
position: absolute;
|
||||
width: 1.28rem;
|
||||
height: 1.28rem;
|
||||
border-radius: 50%;
|
||||
left: 0.4266666667rem;
|
||||
top: 0.1866666667rem;
|
||||
left: 0.42667rem;
|
||||
top: 0.18667rem;
|
||||
}
|
||||
|
||||
.userinfo .name {
|
||||
width: 4rem;
|
||||
position: absolute;
|
||||
left: 1.92rem;
|
||||
top: 0.32rem;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.userinfo .id {
|
||||
width: 4rem;
|
||||
position: absolute;
|
||||
left: 1.92rem;
|
||||
bottom: 0.2933333333rem;
|
||||
bottom: 0.29333rem;
|
||||
color: #8A8CAB;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.userinfo .but {
|
||||
width: 1.9733333333rem;
|
||||
height: 0.8533333333rem;
|
||||
border-radius: 0.8533333333rem;
|
||||
line-height: 0.8533333333rem;
|
||||
width: 1.97333rem;
|
||||
height: 0.85333rem;
|
||||
border-radius: 0.85333rem;
|
||||
line-height: 0.85333rem;
|
||||
text-align: center;
|
||||
color: #9168FA;
|
||||
border: 0.0266666667rem solid #9168FA;
|
||||
border: 0.02667rem solid #9168FA;
|
||||
position: absolute;
|
||||
right: 0.4266666667rem;
|
||||
right: 0.42667rem;
|
||||
top: 0.4rem;
|
||||
}
|
||||
|
||||
@@ -174,30 +191,34 @@ body {
|
||||
margin: 0 auto 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab div {
|
||||
width: 50%;
|
||||
height: 1.0666666667rem;
|
||||
line-height: 1.1733333333rem;
|
||||
height: 1.06667rem;
|
||||
line-height: 1.17333rem;
|
||||
text-align: center;
|
||||
color: #6D6B89;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab div span {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -0.0533333333rem;
|
||||
width: 0.4266666667rem;
|
||||
height: 0.1066666667rem;
|
||||
border-radius: 0.1066666667rem;
|
||||
bottom: -0.05333rem;
|
||||
width: 0.42667rem;
|
||||
height: 0.10667rem;
|
||||
border-radius: 0.10667rem;
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab .active {
|
||||
color: #1F1B4F;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab .active span {
|
||||
display: block;
|
||||
}
|
||||
@@ -215,17 +236,18 @@ body {
|
||||
.tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabs i {
|
||||
position: absolute;
|
||||
width: 0.96rem;
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
border-radius: 2.6666666667rem 2.6666666667rem 2.6666666667rem 0.0533333333rem;
|
||||
border-radius: 2.66667rem 2.66667rem 2.66667rem 0.05333rem;
|
||||
top: 0;
|
||||
right: 0.64rem;
|
||||
background: linear-gradient(127deg, #895BFF 0%, #BC76FF 100%);
|
||||
color: #fff;
|
||||
font-size: 0.2666666667rem;
|
||||
font-size: 0.26667rem;
|
||||
}
|
||||
|
||||
.page1 {
|
||||
@@ -235,38 +257,43 @@ body {
|
||||
margin: 0 auto 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page1 h3 {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.4266666667rem;
|
||||
padding-left: 0.42667rem;
|
||||
margin-bottom: 0.32rem;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
}
|
||||
|
||||
.page1 .way {
|
||||
width: 9.1466666667rem;
|
||||
margin: 0 auto 0.5333333333rem;
|
||||
width: 9.14667rem;
|
||||
margin: 0 auto 0.53333rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page1 .way div {
|
||||
width: 2.9333333333rem;
|
||||
height: 2.1333333333rem;
|
||||
width: 2.93333rem;
|
||||
height: 2.13333rem;
|
||||
background: rgba(245, 246, 250, 0.8);
|
||||
border-radius: 0.2133333333rem;
|
||||
border-radius: 0.21333rem;
|
||||
position: relative;
|
||||
margin-bottom: 0.2666666667rem;
|
||||
margin-bottom: 0.26667rem;
|
||||
box-sizing: border-box;
|
||||
margin-right: 0.17rem;
|
||||
}
|
||||
|
||||
.page1 .way div img {
|
||||
display: block;
|
||||
width: 1.12rem;
|
||||
height: 1.12rem;
|
||||
margin: 0.24rem auto 0.1066666667rem;
|
||||
margin: 0.24rem auto 0.10667rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.page1 .way div p {
|
||||
font-weight: bold;
|
||||
color: #1F1B4F;
|
||||
@@ -274,57 +301,64 @@ body {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page1 .way div span {
|
||||
width: 0.96rem;
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
background: linear-gradient(127deg, #895BFF 0%, #BC76FF 100%);
|
||||
border-radius: 2.6666666667rem 2.6666666667rem 2.6666666667rem 0.0533333333rem;
|
||||
border-radius: 2.66667rem 2.66667rem 2.66667rem 0.05333rem;
|
||||
position: absolute;
|
||||
right: -0.16rem;
|
||||
top: -0.16rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.2666666667rem;
|
||||
font-size: 0.26667rem;
|
||||
}
|
||||
|
||||
.page1 .way .active {
|
||||
box-sizing: border-box;
|
||||
border: 0.0266666667rem solid #9168FA;
|
||||
border: 0.02667rem solid #9168FA;
|
||||
}
|
||||
|
||||
.page1 .position {
|
||||
width: 9.1466666667rem;
|
||||
margin: 0 auto 0.5333333333rem;
|
||||
width: 9.14667rem;
|
||||
margin: 0 auto 0.53333rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page1 .position div {
|
||||
width: 2.9333333333rem;
|
||||
height: 1.8666666667rem;
|
||||
width: 2.93333rem;
|
||||
height: 1.86667rem;
|
||||
background: rgba(245, 246, 250, 0.8);
|
||||
border-radius: 0.2133333333rem;
|
||||
border-radius: 0.21333rem;
|
||||
position: relative;
|
||||
margin-bottom: 0.2666666667rem;
|
||||
margin-bottom: 0.26667rem;
|
||||
box-sizing: border-box;
|
||||
margin-right: 0.17rem;
|
||||
}
|
||||
|
||||
.page1 .position div p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 0.4266666667rem;
|
||||
margin-top: 0.42667rem;
|
||||
vertical-align: middle;
|
||||
color: #1F1B4F;
|
||||
font-weight: bold;
|
||||
font-size: 0.4266666667rem;
|
||||
margin-bottom: 0.1066666667rem;
|
||||
font-size: 0.42667rem;
|
||||
margin-bottom: 0.10667rem;
|
||||
}
|
||||
|
||||
.page1 .position div p img {
|
||||
width: 0.5333333333rem;
|
||||
width: 0.53333rem;
|
||||
height: 0.56rem;
|
||||
display: inline-block;
|
||||
margin-right: 0.0533333333rem;
|
||||
margin-right: 0.05333rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page1 .position div span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@@ -332,9 +366,11 @@ body {
|
||||
font-size: 0.32rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page1 .position .active {
|
||||
border: 0.0266666667rem solid #9168FA;
|
||||
border: 0.02667rem solid #9168FA;
|
||||
}
|
||||
|
||||
.page1 .payButBox {
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
@@ -343,17 +379,18 @@ body {
|
||||
transform: translateX(-50%);
|
||||
width: 10rem;
|
||||
height: 2.2rem;
|
||||
box-shadow: 0px 0px 0.2133333333rem 0px rgba(201, 208, 218, 0.32);
|
||||
border-radius: 0.4266666667rem 0.4266666667rem 0px 0px;
|
||||
box-shadow: 0px 0px 0.21333rem 0px rgba(201, 208, 218, 0.32);
|
||||
border-radius: 0.42667rem 0.42667rem 0px 0px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.page1 .payButBox .payBut {
|
||||
width: 8.08rem;
|
||||
height: 1.28rem;
|
||||
line-height: 1.28rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
border-radius: 1.28rem;
|
||||
@@ -367,66 +404,75 @@ body {
|
||||
margin: 0 auto 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page2 .rule {
|
||||
width: 9.1466666667rem;
|
||||
width: 9.14667rem;
|
||||
color: #B3B3C3;
|
||||
font-size: 0.32rem;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page2 .rule p {
|
||||
margin-bottom: 0.0533333333rem;
|
||||
margin-bottom: 0.05333rem;
|
||||
line-height: 0.45rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page2 h3 {
|
||||
width: 9.1466666667rem;
|
||||
width: 9.14667rem;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
margin: 0.32rem auto 0.32rem;
|
||||
}
|
||||
|
||||
.page2 ul {
|
||||
width: 9.6rem;
|
||||
margin: 0 auto 0.6133333333rem;
|
||||
margin: 0 auto 0.61333rem;
|
||||
}
|
||||
|
||||
.page2 ul li {
|
||||
width: 100%;
|
||||
height: 1.8933333333rem;
|
||||
height: 1.89333rem;
|
||||
background: rgba(245, 246, 250, 0.8);
|
||||
border-radius: 0.3733333333rem;
|
||||
border-radius: 0.37333rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.32rem 0 0.4266666667rem;
|
||||
padding: 0 0.32rem 0 0.42667rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.2666666667rem;
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.page2 ul li .left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.page2 ul li .left .name {
|
||||
width: 5rem;
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.page2 ul li .left .name b {
|
||||
color: #1F1B4F;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
height: 0.4266666667rem;
|
||||
border-radius: 0.4266666667rem;
|
||||
line-height: 0.4266666667rem;
|
||||
height: 0.42667rem;
|
||||
border-radius: 0.42667rem;
|
||||
line-height: 0.42667rem;
|
||||
float: left;
|
||||
margin-right: 0.16rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.page2 ul li .left .name span {
|
||||
width: 1.0133333333rem;
|
||||
height: 0.4266666667rem;
|
||||
border-radius: 0.4266666667rem;
|
||||
line-height: 0.4266666667rem;
|
||||
width: 1.01333rem;
|
||||
height: 0.42667rem;
|
||||
border-radius: 0.42667rem;
|
||||
line-height: 0.42667rem;
|
||||
background: rgba(110, 115, 151, 0.5);
|
||||
color: #FFFFFF;
|
||||
font-size: 0.2666666667rem;
|
||||
font-size: 0.26667rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@@ -434,18 +480,20 @@ body {
|
||||
text-indent: 6px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.page2 ul li .left .name span i {
|
||||
width: 0.1066666667rem;
|
||||
height: 0.1066666667rem;
|
||||
width: 0.10667rem;
|
||||
height: 0.10667rem;
|
||||
border-radius: 50%;
|
||||
background: #21EB57;
|
||||
margin-right: 0.1333333333rem;
|
||||
margin-right: 0.13333rem;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0.1333333333rem;
|
||||
left: 0.13333rem;
|
||||
}
|
||||
|
||||
.page2 ul li .left .id {
|
||||
width: 100%;
|
||||
color: #8A8CAB;
|
||||
@@ -453,13 +501,14 @@ body {
|
||||
float: left;
|
||||
margin-top: 0.14rem;
|
||||
}
|
||||
|
||||
.page2 ul li .copy {
|
||||
width: 1.76rem;
|
||||
height: 0.7733333333rem;
|
||||
border-radius: 0.7733333333rem;
|
||||
line-height: 0.7733333333rem;
|
||||
height: 0.77333rem;
|
||||
border-radius: 0.77333rem;
|
||||
line-height: 0.77333rem;
|
||||
text-align: center;
|
||||
border: 0.0266666667rem solid #9168FA;
|
||||
border: 0.02667rem solid #9168FA;
|
||||
background: #F5F6FA;
|
||||
font-size: 0.32rem;
|
||||
color: #9168FA;
|
||||
@@ -467,19 +516,21 @@ body {
|
||||
margin-top: 0.56rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page2 ul li .but {
|
||||
width: 1.76rem;
|
||||
height: 0.7733333333rem;
|
||||
border-radius: 0.7733333333rem;
|
||||
line-height: 0.7733333333rem;
|
||||
height: 0.77333rem;
|
||||
border-radius: 0.77333rem;
|
||||
line-height: 0.77333rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
font-size: 0.32rem;
|
||||
color: #fff;
|
||||
float: right;
|
||||
margin-left: 0.2133333333rem;
|
||||
margin-left: 0.21333rem;
|
||||
margin-top: 0.56rem;
|
||||
}
|
||||
|
||||
.page2 ul .null {
|
||||
margin-top: 1.6rem;
|
||||
width: 100%;
|
||||
@@ -487,17 +538,19 @@ body {
|
||||
height: auto;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.page2 ul .null img {
|
||||
display: block;
|
||||
width: 3.84rem;
|
||||
height: 3.1466666667rem;
|
||||
margin: 0 auto 0.4266666667rem;
|
||||
height: 3.14667rem;
|
||||
margin: 0 auto 0.42667rem;
|
||||
}
|
||||
|
||||
.page2 ul .null p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #8A8CAB;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
}
|
||||
|
||||
.area {
|
||||
@@ -510,9 +563,10 @@ body {
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.area .area_in {
|
||||
width: 10rem;
|
||||
border-radius: 0.7466666667rem 0.7466666667rem 0px 0px;
|
||||
border-radius: 0.74667rem 0.74667rem 0px 0px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
@@ -520,25 +574,28 @@ body {
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.area .area_in h3 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
height: 1.36rem;
|
||||
line-height: 1.36rem;
|
||||
border-bottom: 0.0133333333rem solid #EBEEF5;
|
||||
border-bottom: 0.01333rem solid #EBEEF5;
|
||||
}
|
||||
|
||||
.area .area_in p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 1.36rem;
|
||||
line-height: 1.36rem;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.3733333333rem;
|
||||
border-bottom: 0.0133333333rem solid #EBEEF5;
|
||||
font-size: 0.37333rem;
|
||||
border-bottom: 0.01333rem solid #EBEEF5;
|
||||
}
|
||||
|
||||
.area .area_in .active {
|
||||
color: #9168FA;
|
||||
}
|
||||
@@ -550,18 +607,21 @@ body {
|
||||
font-size: 0.32rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.rule p {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
|
||||
.rule p img {
|
||||
width: 0.3733333333rem;
|
||||
height: 0.3733333333rem;
|
||||
width: 0.37333rem;
|
||||
height: 0.37333rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.16rem;
|
||||
}
|
||||
|
||||
.rule p a {
|
||||
color: #1F1B4F;
|
||||
font-weight: bold;
|
||||
@@ -577,10 +637,11 @@ body {
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.userNull .userNull_in {
|
||||
width: 8.5066666667rem;
|
||||
height: 4.6933333333rem;
|
||||
border-radius: 0.5333333333rem;
|
||||
width: 8.50667rem;
|
||||
height: 4.69333rem;
|
||||
border-radius: 0.53333rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -588,22 +649,24 @@ body {
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.userNull .userNull_in p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.4266666667rem;
|
||||
margin: 1.5466666667rem auto 0.8533333333rem;
|
||||
font-size: 0.42667rem;
|
||||
margin: 1.54667rem auto 0.85333rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.userNull .userNull_in .but {
|
||||
width: 5.9466666667rem;
|
||||
width: 5.94667rem;
|
||||
height: 1.12rem;
|
||||
border-radius: 1.12rem;
|
||||
line-height: 1.12rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -618,10 +681,11 @@ body {
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toastMasge .toastMasge_in {
|
||||
width: 8.5066666667rem;
|
||||
height: 4.6933333333rem;
|
||||
border-radius: 0.5333333333rem;
|
||||
width: 8.50667rem;
|
||||
height: 4.69333rem;
|
||||
border-radius: 0.53333rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -629,22 +693,24 @@ body {
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toastMasge .toastMasge_in p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.4266666667rem;
|
||||
margin: 1.5466666667rem auto 0.8533333333rem;
|
||||
font-size: 0.42667rem;
|
||||
margin: 1.54667rem auto 0.85333rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toastMasge .toastMasge_in .but {
|
||||
width: 5.9466666667rem;
|
||||
width: 5.94667rem;
|
||||
height: 1.12rem;
|
||||
border-radius: 1.12rem;
|
||||
line-height: 1.12rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -659,73 +725,111 @@ body {
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sure .sure_in {
|
||||
width: 8.5066666667rem;
|
||||
height: 7.7333333333rem;
|
||||
width: 8.50667rem;
|
||||
height: 7.73333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #fff;
|
||||
border-radius: 0.5333333333rem;
|
||||
border-radius: 0.53333rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sure .sure_in h3 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
margin: 0.7466666667rem auto 0.4266666667rem;
|
||||
margin: 0.74667rem auto 0.42667rem;
|
||||
}
|
||||
|
||||
.sure .sure_in img {
|
||||
display: block;
|
||||
width: 2.3466666667rem;
|
||||
height: 2.3466666667rem;
|
||||
width: 2.34667rem;
|
||||
height: 2.34667rem;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.16rem;
|
||||
}
|
||||
|
||||
.sure .sure_in p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.4266666667rem;
|
||||
margin: 0 auto 0.1333333333rem;
|
||||
font-size: 0.42667rem;
|
||||
margin: 0 auto 0.13333rem;
|
||||
}
|
||||
|
||||
.sure .sure_in b {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #8A8CAB;
|
||||
font-size: 0.3733333333rem;
|
||||
margin-bottom: 0.5333333333rem;
|
||||
font-size: 0.37333rem;
|
||||
margin-bottom: 0.53333rem;
|
||||
}
|
||||
|
||||
.sure .sure_in b i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.sure .sure_in .close {
|
||||
float: left;
|
||||
width: 3.3066666667rem;
|
||||
width: 3.30667rem;
|
||||
height: 1.12rem;
|
||||
line-height: 1.12rem;
|
||||
border-radius: 1.12rem;
|
||||
margin-left: 0.7466666667rem;
|
||||
margin-left: 0.74667rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
background: #E6E6F0;
|
||||
}
|
||||
|
||||
.sure .sure_in .ok {
|
||||
float: right;
|
||||
width: 3.3066666667rem;
|
||||
width: 3.30667rem;
|
||||
height: 1.12rem;
|
||||
line-height: 1.12rem;
|
||||
border-radius: 1.12rem;
|
||||
margin-right: 0.7466666667rem;
|
||||
margin-right: 0.74667rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
.selectAddress {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.selectAddress .selectAddress_in {
|
||||
width: 8.50667rem;
|
||||
height: 6.50667rem;
|
||||
background: #fff;
|
||||
border-radius: 0.53333rem;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.selectAddress .selectAddress_in .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.74667rem;
|
||||
color: #1F1B4F;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1,81 +1,81 @@
|
||||
@import '../../../common/css/flex.scss';
|
||||
@import url('../../../common/css/flex.scss');
|
||||
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: px2rem(40, );
|
||||
padding-bottom: px2rem(40);
|
||||
}
|
||||
|
||||
.header {
|
||||
width: px2rem(750, );
|
||||
height: px2rem(560, );
|
||||
width: px2rem(750);
|
||||
height: px2rem(560);
|
||||
margin: 0 auto -5.9rem;
|
||||
position: relative;
|
||||
background: url(../images/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: px2rem(20, );
|
||||
padding-top: px2rem(20);
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: px2rem(64, );
|
||||
height: px2rem(64);
|
||||
position: absolute;
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: px2rem(40, );
|
||||
left: px2rem(40);
|
||||
top: 0;
|
||||
height: px2rem(64, );
|
||||
line-height: px2rem(64, );
|
||||
height: px2rem(64);
|
||||
line-height: px2rem(64);
|
||||
vertical-align: middle;
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
width: px2rem(64, );
|
||||
height: px2rem(64, );
|
||||
margin-right: px2rem(16, );
|
||||
border-radius: px2rem(15, );
|
||||
width: px2rem(64);
|
||||
height: px2rem(64);
|
||||
margin-right: px2rem(16);
|
||||
border-radius: px2rem(15);
|
||||
}
|
||||
|
||||
b {
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: px2rem(40, );
|
||||
right: px2rem(40);
|
||||
top: 0;
|
||||
height: px2rem(64, );
|
||||
line-height: px2rem(64, );
|
||||
height: px2rem(64);
|
||||
line-height: px2rem(64);
|
||||
vertical-align: middle;
|
||||
|
||||
.didianIcon {
|
||||
width: px2rem(24, );
|
||||
height: px2rem(24, );
|
||||
width: px2rem(24);
|
||||
height: px2rem(24);
|
||||
display: inline-block;
|
||||
margin-right: px2rem(12, );
|
||||
margin-right: px2rem(12);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(28, );
|
||||
margin-right: px2rem(4, );
|
||||
font-size: px2rem(28);
|
||||
margin-right: px2rem(4);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.moreIcon {
|
||||
width: px2rem(24, );
|
||||
height: px2rem(16, );
|
||||
width: px2rem(24);
|
||||
height: px2rem(16);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -84,25 +84,25 @@ body {
|
||||
}
|
||||
|
||||
.bindingBox {
|
||||
width: px2rem(730, );
|
||||
height: px2rem(124, );
|
||||
width: px2rem(730);
|
||||
height: px2rem(124);
|
||||
background: url(../images/inputBG.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
margin: 0 auto px2rem(25, );
|
||||
margin: 0 auto px2rem(25);
|
||||
overflow: hidden;
|
||||
|
||||
.binding {
|
||||
width: px2rem(686, );
|
||||
height: px2rem(80, );
|
||||
width: px2rem(686);
|
||||
height: px2rem(80);
|
||||
background: #FAFBFC;
|
||||
border: px2rem(2, ) solid #fff;
|
||||
border: px2rem(2) solid #fff;
|
||||
margin: 0.29rem auto 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(6, ) 0 px2rem(32, );
|
||||
border-radius: px2rem(80, );
|
||||
padding: 0 px2rem(6) 0 px2rem(32);
|
||||
border-radius: px2rem(80);
|
||||
|
||||
input {
|
||||
border: none;
|
||||
@@ -111,7 +111,7 @@ body {
|
||||
height: 100%;
|
||||
width: 6.4rem;
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
font-weight: bold;
|
||||
|
||||
&::placeholder {
|
||||
@@ -121,42 +121,42 @@ body {
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(144, );
|
||||
height: px2rem(68, );
|
||||
width: px2rem(144);
|
||||
height: px2rem(68);
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
border-radius: px2rem(68, );
|
||||
border-radius: px2rem(68);
|
||||
text-align: center;
|
||||
line-height: px2rem(68, );
|
||||
line-height: px2rem(68);
|
||||
color: #fff;
|
||||
margin-top: px2rem(4, );
|
||||
margin-top: px2rem(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
width: px2rem(702, );
|
||||
height: px2rem(124, );
|
||||
width: px2rem(702);
|
||||
height: px2rem(124);
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: px2rem(28, );
|
||||
margin: 0 auto px2rem(25, );
|
||||
border-radius: px2rem(28);
|
||||
margin: 0 auto px2rem(25);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: px2rem(96, );
|
||||
height: px2rem(96, );
|
||||
width: px2rem(96);
|
||||
height: px2rem(96);
|
||||
border-radius: 50%;
|
||||
left: px2rem(32, );
|
||||
top: px2rem(14, );
|
||||
left: px2rem(32);
|
||||
top: px2rem(14);
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 4rem;
|
||||
position: absolute;
|
||||
left: px2rem(144, );
|
||||
top: px2rem(24, );
|
||||
left: px2rem(144);
|
||||
top: px2rem(24);
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@@ -165,32 +165,32 @@ body {
|
||||
.id {
|
||||
width: 4rem;
|
||||
position: absolute;
|
||||
left: px2rem(144, );
|
||||
bottom: px2rem(22, );
|
||||
left: px2rem(144);
|
||||
bottom: px2rem(22);
|
||||
color: #8A8CAB;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(148, );
|
||||
height: px2rem(64, );
|
||||
border-radius: px2rem(64, );
|
||||
line-height: px2rem(64, );
|
||||
width: px2rem(148);
|
||||
height: px2rem(64);
|
||||
border-radius: px2rem(64);
|
||||
line-height: px2rem(64);
|
||||
text-align: center;
|
||||
color: #9168FA;
|
||||
border: px2rem(2, ) solid #9168FA;
|
||||
border: px2rem(2) solid #9168FA;
|
||||
position: absolute;
|
||||
right: px2rem(32, );
|
||||
top: px2rem(30, );
|
||||
right: px2rem(32);
|
||||
top: px2rem(30);
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: px2rem(750, );
|
||||
height: px2rem(120, );
|
||||
width: px2rem(750);
|
||||
height: px2rem(120);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto 0;
|
||||
@@ -198,21 +198,21 @@ body {
|
||||
|
||||
div {
|
||||
width: 50%;
|
||||
height: px2rem(80, );
|
||||
line-height: px2rem(88, );
|
||||
height: px2rem(80);
|
||||
line-height: px2rem(88);
|
||||
text-align: center;
|
||||
color: #6D6B89;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(-4, );
|
||||
width: px2rem(32, );
|
||||
height: px2rem(8, );
|
||||
border-radius: px2rem(8, );
|
||||
bottom: px2rem(-4);
|
||||
width: px2rem(32);
|
||||
height: px2rem(8);
|
||||
border-radius: px2rem(8);
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
display: none;
|
||||
}
|
||||
@@ -244,20 +244,20 @@ body {
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
width: px2rem(72, );
|
||||
height: px2rem(36, );
|
||||
line-height: px2rem(36, );
|
||||
border-radius: px2rem(200, ) px2rem(200, ) px2rem(200, ) px2rem(4, );
|
||||
width: px2rem(72);
|
||||
height: px2rem(36);
|
||||
line-height: px2rem(36);
|
||||
border-radius: px2rem(200) px2rem(200) px2rem(200) px2rem(4);
|
||||
top: 0;
|
||||
right: px2rem(48, );
|
||||
right: px2rem(48);
|
||||
background: linear-gradient(127deg, #895BFF 0%, #BC76FF 100%);
|
||||
color: #fff;
|
||||
font-size: px2rem(20, );
|
||||
font-size: px2rem(20);
|
||||
}
|
||||
}
|
||||
|
||||
.page1 {
|
||||
width: px2rem(750, );
|
||||
width: px2rem(750);
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin: 0 auto 0;
|
||||
@@ -267,101 +267,101 @@ body {
|
||||
h3 {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: px2rem(32, );
|
||||
margin-bottom: px2rem(24, );
|
||||
padding-left: px2rem(32);
|
||||
margin-bottom: px2rem(24);
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
}
|
||||
|
||||
.way {
|
||||
width: px2rem(686, );
|
||||
margin: 0 auto px2rem(40, );
|
||||
width: px2rem(686);
|
||||
margin: 0 auto px2rem(40);
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
div {
|
||||
width: px2rem(220, );
|
||||
height: px2rem(160, );
|
||||
width: px2rem(220);
|
||||
height: px2rem(160);
|
||||
background: rgba(245, 246, 250, .8);
|
||||
border-radius: px2rem(16, );
|
||||
border-radius: px2rem(16);
|
||||
position: relative;
|
||||
margin-bottom: px2rem(20, );
|
||||
margin-bottom: px2rem(20);
|
||||
box-sizing: border-box;
|
||||
margin-right: 0.17rem;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: px2rem(84, );
|
||||
height: px2rem(84, );
|
||||
margin: px2rem(18, ) auto px2rem(8, );
|
||||
width: px2rem(84);
|
||||
height: px2rem(84);
|
||||
margin: px2rem(18) auto px2rem(8);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: bold;
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
width: px2rem(72, );
|
||||
height: px2rem(36, );
|
||||
line-height: px2rem(36, );
|
||||
width: px2rem(72);
|
||||
height: px2rem(36);
|
||||
line-height: px2rem(36);
|
||||
background: linear-gradient(127deg, #895BFF 0%, #BC76FF 100%);
|
||||
border-radius: px2rem(200, ) px2rem(200, ) px2rem(200, ) px2rem(4, );
|
||||
border-radius: px2rem(200) px2rem(200) px2rem(200) px2rem(4);
|
||||
position: absolute;
|
||||
right: px2rem(-12, );
|
||||
top: px2rem(-12, );
|
||||
right: px2rem(-12);
|
||||
top: px2rem(-12);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(20, );
|
||||
font-size: px2rem(20);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
box-sizing: border-box;
|
||||
border: px2rem(2, ) solid #9168FA;
|
||||
border: px2rem(2) solid #9168FA;
|
||||
}
|
||||
}
|
||||
|
||||
.position {
|
||||
width: px2rem(686, );
|
||||
margin: 0 auto px2rem(40, );
|
||||
width: px2rem(686);
|
||||
margin: 0 auto px2rem(40);
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
div {
|
||||
width: px2rem(220, );
|
||||
height: px2rem(140, );
|
||||
width: px2rem(220);
|
||||
height: px2rem(140);
|
||||
background: rgba(245, 246, 250, .8);
|
||||
border-radius: px2rem(16, );
|
||||
border-radius: px2rem(16);
|
||||
position: relative;
|
||||
margin-bottom: px2rem(20, );
|
||||
margin-bottom: px2rem(20);
|
||||
box-sizing: border-box;
|
||||
margin-right: 0.17rem;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: px2rem(32, );
|
||||
margin-top: px2rem(32);
|
||||
vertical-align: middle;
|
||||
color: #1F1B4F;
|
||||
// font-weight: 500;
|
||||
font-weight: bold;
|
||||
font-size: px2rem(32, );
|
||||
margin-bottom: px2rem(8, );
|
||||
font-size: px2rem(32);
|
||||
margin-bottom: px2rem(8);
|
||||
|
||||
img {
|
||||
width: px2rem(40, );
|
||||
height: px2rem(42, );
|
||||
width: px2rem(40);
|
||||
height: px2rem(42);
|
||||
display: inline-block;
|
||||
margin-right: px2rem(4, );
|
||||
margin-right: px2rem(4);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -371,13 +371,13 @@ body {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #8A8CAB;
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: px2rem(2, ) solid #9168FA;
|
||||
border: px2rem(2) solid #9168FA;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -387,22 +387,22 @@ body {
|
||||
bottom: 0rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: px2rem(750, );
|
||||
width: px2rem(750);
|
||||
height: 2.2rem;
|
||||
box-shadow: 0px 0px px2rem(16, ) 0px rgba(201, 208, 218, 0.32);
|
||||
border-radius: px2rem(32, ) px2rem(32, ) 0px 0px;
|
||||
box-shadow: 0px 0px px2rem(16) 0px rgba(201, 208, 218, 0.32);
|
||||
border-radius: px2rem(32) px2rem(32) 0px 0px;
|
||||
background: #fff;
|
||||
|
||||
.payBut {
|
||||
width: px2rem(606, );
|
||||
height: px2rem(96, );
|
||||
line-height: px2rem(96, );
|
||||
width: px2rem(606);
|
||||
height: px2rem(96);
|
||||
line-height: px2rem(96);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
font-weight: bold;
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
border-radius: px2rem(96, );
|
||||
border-radius: px2rem(96);
|
||||
margin: 0.45rem auto 0.4rem;
|
||||
|
||||
}
|
||||
@@ -410,76 +410,76 @@ body {
|
||||
}
|
||||
|
||||
.page2 {
|
||||
width: px2rem(750, );
|
||||
width: px2rem(750);
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin: 0 auto 0;
|
||||
display: none;
|
||||
|
||||
.rule {
|
||||
width: px2rem(686, );
|
||||
width: px2rem(686);
|
||||
color: #B3B3C3;
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
|
||||
p {
|
||||
margin-bottom: px2rem(4, );
|
||||
margin-bottom: px2rem(4);
|
||||
line-height: 0.45rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
width: px2rem(686, );
|
||||
width: px2rem(686);
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
font-weight: bold;
|
||||
margin: px2rem(24, ) auto px2rem(24, );
|
||||
margin: px2rem(24) auto px2rem(24);
|
||||
}
|
||||
|
||||
ul {
|
||||
width: px2rem(720, );
|
||||
margin: 0 auto px2rem(46, );
|
||||
width: px2rem(720);
|
||||
margin: 0 auto px2rem(46);
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: px2rem(142, );
|
||||
height: px2rem(142);
|
||||
background: rgba(245, 246, 250, .8);
|
||||
border-radius: px2rem(28, );
|
||||
border-radius: px2rem(28);
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(24, ) 0 px2rem(32, );
|
||||
padding: 0 px2rem(24) 0 px2rem(32);
|
||||
overflow: hidden;
|
||||
margin-bottom: px2rem(20, );
|
||||
margin-bottom: px2rem(20);
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
|
||||
.name {
|
||||
width: 5rem;
|
||||
margin-top: px2rem(30, );
|
||||
margin-bottom: px2rem(15, );
|
||||
margin-top: px2rem(30);
|
||||
margin-bottom: px2rem(15);
|
||||
|
||||
b {
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
font-weight: bold;
|
||||
height: px2rem(32, );
|
||||
border-radius: px2rem(32, );
|
||||
line-height: px2rem(32, );
|
||||
height: px2rem(32);
|
||||
border-radius: px2rem(32);
|
||||
line-height: px2rem(32);
|
||||
float: left;
|
||||
margin-right: px2rem(12, );
|
||||
margin-right: px2rem(12);
|
||||
float: left;
|
||||
}
|
||||
|
||||
span {
|
||||
width: px2rem(76, );
|
||||
height: px2rem(32, );
|
||||
border-radius: px2rem(32, );
|
||||
line-height: px2rem(32, );
|
||||
width: px2rem(76);
|
||||
height: px2rem(32);
|
||||
border-radius: px2rem(32);
|
||||
line-height: px2rem(32);
|
||||
background: rgba(110, 115, 151, .5);
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(20, );
|
||||
font-size: px2rem(20);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@@ -488,16 +488,16 @@ body {
|
||||
float: left;
|
||||
|
||||
i {
|
||||
width: px2rem(8, );
|
||||
height: px2rem(8, );
|
||||
width: px2rem(8);
|
||||
height: px2rem(8);
|
||||
border-radius: 50%;
|
||||
background: #21EB57;
|
||||
margin-right: px2rem(10, );
|
||||
margin-right: px2rem(10);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: px2rem(10, );
|
||||
left: px2rem(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -505,61 +505,61 @@ body {
|
||||
.id {
|
||||
width: 100%;
|
||||
color: #8A8CAB;
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
float: left;
|
||||
margin-top: 0.14rem;
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
width: px2rem(132, );
|
||||
height: px2rem(58, );
|
||||
border-radius: px2rem(58, );
|
||||
line-height: px2rem(58, );
|
||||
width: px2rem(132);
|
||||
height: px2rem(58);
|
||||
border-radius: px2rem(58);
|
||||
line-height: px2rem(58);
|
||||
text-align: center;
|
||||
border: px2rem(2, ) solid #9168FA;
|
||||
border: px2rem(2) solid #9168FA;
|
||||
background: #F5F6FA;
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
color: #9168FA;
|
||||
float: right;
|
||||
margin-top: px2rem(42, );
|
||||
margin-top: px2rem(42);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(132, );
|
||||
height: px2rem(58, );
|
||||
border-radius: px2rem(58, );
|
||||
line-height: px2rem(58, );
|
||||
width: px2rem(132);
|
||||
height: px2rem(58);
|
||||
border-radius: px2rem(58);
|
||||
line-height: px2rem(58);
|
||||
text-align: center;
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
color: #fff;
|
||||
float: right;
|
||||
margin-left: px2rem(16, );
|
||||
margin-top: px2rem(42, );
|
||||
margin-left: px2rem(16);
|
||||
margin-top: px2rem(42);
|
||||
}
|
||||
}
|
||||
|
||||
.null {
|
||||
margin-top: px2rem(120, );
|
||||
margin-top: px2rem(120);
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
height: auto;
|
||||
margin-bottom: px2rem(120, );
|
||||
margin-bottom: px2rem(120);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: px2rem(288, );
|
||||
height: px2rem(236, );
|
||||
margin: 0 auto px2rem(32, );
|
||||
width: px2rem(288);
|
||||
height: px2rem(236);
|
||||
margin: 0 auto px2rem(32);
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #8A8CAB;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -576,8 +576,8 @@ body {
|
||||
display: none;
|
||||
|
||||
.area_in {
|
||||
width: px2rem(750, );
|
||||
border-radius: px2rem(56, ) px2rem(56, ) 0px 0px;
|
||||
width: px2rem(750);
|
||||
border-radius: px2rem(56) px2rem(56) 0px 0px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
@@ -589,21 +589,21 @@ body {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
font-weight: bold;
|
||||
height: px2rem(102, );
|
||||
line-height: px2rem(102, );
|
||||
border-bottom: px2rem(1, ) solid #EBEEF5;
|
||||
height: px2rem(102);
|
||||
line-height: px2rem(102);
|
||||
border-bottom: px2rem(1) solid #EBEEF5;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: px2rem(102, );
|
||||
line-height: px2rem(102, );
|
||||
height: px2rem(102);
|
||||
line-height: px2rem(102);
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(28, );
|
||||
border-bottom: px2rem(1, ) solid #EBEEF5;
|
||||
font-size: px2rem(28);
|
||||
border-bottom: px2rem(1) solid #EBEEF5;
|
||||
}
|
||||
|
||||
.active {
|
||||
@@ -616,20 +616,20 @@ body {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #B3B3C3;
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
margin-bottom: 3rem;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
margin-bottom: px2rem(12, );
|
||||
margin-bottom: px2rem(12);
|
||||
|
||||
img {
|
||||
width: px2rem(28, );
|
||||
height: px2rem(28, );
|
||||
width: px2rem(28);
|
||||
height: px2rem(28);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: px2rem(12, );
|
||||
margin-right: px2rem(12);
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -651,9 +651,9 @@ body {
|
||||
display: none;
|
||||
|
||||
.userNull_in {
|
||||
width: px2rem(638, );
|
||||
height: px2rem(352, );
|
||||
border-radius: px2rem(40, );
|
||||
width: px2rem(638);
|
||||
height: px2rem(352);
|
||||
border-radius: px2rem(40);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -665,24 +665,25 @@ body {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(32, );
|
||||
margin: px2rem(116, ) auto px2rem(64, );
|
||||
font-size: px2rem(32);
|
||||
margin: px2rem(116) auto px2rem(64);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(446, );
|
||||
height: px2rem(84, );
|
||||
border-radius: px2rem(84, );
|
||||
line-height: px2rem(84, );
|
||||
width: px2rem(446);
|
||||
height: px2rem(84);
|
||||
border-radius: px2rem(84);
|
||||
line-height: px2rem(84);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toastMasge {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@@ -694,9 +695,9 @@ body {
|
||||
display: none;
|
||||
|
||||
.toastMasge_in {
|
||||
width: px2rem(638, );
|
||||
height: px2rem(352, );
|
||||
border-radius: px2rem(40, );
|
||||
width: px2rem(638);
|
||||
height: px2rem(352);
|
||||
border-radius: px2rem(40);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -708,19 +709,19 @@ body {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(32, );
|
||||
margin: px2rem(116, ) auto px2rem(64, );
|
||||
font-size: px2rem(32);
|
||||
margin: px2rem(116) auto px2rem(64);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(446, );
|
||||
height: px2rem(84, );
|
||||
border-radius: px2rem(84, );
|
||||
line-height: px2rem(84, );
|
||||
width: px2rem(446);
|
||||
height: px2rem(84);
|
||||
border-radius: px2rem(84);
|
||||
line-height: px2rem(84);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -738,39 +739,39 @@ body {
|
||||
display: none;
|
||||
|
||||
.sure_in {
|
||||
width: px2rem(638, );
|
||||
height: px2rem(580, );
|
||||
width: px2rem(638);
|
||||
height: px2rem(580);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #fff;
|
||||
border-radius: px2rem(40, );
|
||||
border-radius: px2rem(40);
|
||||
overflow: hidden;
|
||||
|
||||
h3 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
font-weight: bold;
|
||||
margin: px2rem(56, ) auto px2rem(32, );
|
||||
margin: px2rem(56) auto px2rem(32);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: px2rem(176, );
|
||||
height: px2rem(176, );
|
||||
width: px2rem(176);
|
||||
height: px2rem(176);
|
||||
border-radius: 50%;
|
||||
margin: 0 auto px2rem(12, );
|
||||
margin: 0 auto px2rem(12);
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(32, );
|
||||
margin: 0 auto px2rem(10, );
|
||||
font-size: px2rem(32);
|
||||
margin: 0 auto px2rem(10);
|
||||
}
|
||||
|
||||
b {
|
||||
@@ -778,8 +779,9 @@ body {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #8A8CAB;
|
||||
font-size: px2rem(28, );
|
||||
margin-bottom: px2rem(40, );
|
||||
font-size: px2rem(28);
|
||||
margin-bottom: px2rem(40);
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -787,28 +789,60 @@ body {
|
||||
|
||||
.close {
|
||||
float: left;
|
||||
width: px2rem(248, );
|
||||
height: px2rem(84, );
|
||||
line-height: px2rem(84, );
|
||||
border-radius: px2rem(84, );
|
||||
margin-left: px2rem(56, );
|
||||
width: px2rem(248);
|
||||
height: px2rem(84);
|
||||
line-height: px2rem(84);
|
||||
border-radius: px2rem(84);
|
||||
margin-left: px2rem(56);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
background: #E6E6F0;
|
||||
}
|
||||
|
||||
.ok {
|
||||
float: right;
|
||||
width: px2rem(248, );
|
||||
height: px2rem(84, );
|
||||
line-height: px2rem(84, );
|
||||
border-radius: px2rem(84, );
|
||||
margin-right: px2rem(56, );
|
||||
width: px2rem(248);
|
||||
height: px2rem(84);
|
||||
line-height: px2rem(84);
|
||||
border-radius: px2rem(84);
|
||||
margin-right: px2rem(56);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectAddress {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
z-index: 9;
|
||||
|
||||
.selectAddress_in {
|
||||
width: px2rem(638);
|
||||
height: px2rem(488);
|
||||
background: #fff;
|
||||
border-radius: px2rem(40);
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: px2rem(56);
|
||||
color: #1F1B4F;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -140,6 +140,16 @@
|
||||
<div class="but">確認</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 首次选择弹窗 -->
|
||||
<div class="selectAddress">
|
||||
<div class="selectAddress_in">
|
||||
<div class="title">請確認儲值地區</div>
|
||||
<select class="selectAddressList">
|
||||
<option value="TW">台湾</option>
|
||||
<option value="XJP">新加坡</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user