1097 lines
26 KiB
SCSS
1097 lines
26 KiB
SCSS
// @import url('../../../common/css/flex.scss');
|
|
|
|
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
body {
|
|
width: 100%;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding-bottom: px2rem(40);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header {
|
|
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);
|
|
|
|
.box {
|
|
width: 100%;
|
|
height: px2rem(64);
|
|
position: absolute;
|
|
|
|
.left {
|
|
position: absolute;
|
|
left: px2rem(40);
|
|
top: 0;
|
|
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);
|
|
}
|
|
|
|
b {
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
position: absolute;
|
|
right: px2rem(40);
|
|
top: 0;
|
|
height: px2rem(64);
|
|
line-height: px2rem(64);
|
|
vertical-align: middle;
|
|
|
|
.didianIcon {
|
|
width: px2rem(24);
|
|
height: px2rem(24);
|
|
display: inline-block;
|
|
margin-right: px2rem(12);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28);
|
|
margin-right: px2rem(4);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.moreIcon {
|
|
width: px2rem(24);
|
|
height: px2rem(16);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bindingBox {
|
|
width: px2rem(730);
|
|
height: px2rem(124);
|
|
background: url(../images/inputBG.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin: 0 auto px2rem(25);
|
|
overflow: hidden;
|
|
|
|
.binding {
|
|
width: px2rem(686);
|
|
height: px2rem(80);
|
|
background: #FAFBFC;
|
|
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);
|
|
|
|
input {
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
height: 100%;
|
|
width: 6.4rem;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28);
|
|
font-weight: bold;
|
|
|
|
&::placeholder {
|
|
color: #B3B3C3;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(144);
|
|
height: px2rem(68);
|
|
background: linear-gradient( 270deg, #500FFF 0%, #F854FC 100%);
|
|
border-radius: px2rem(68);
|
|
text-align: center;
|
|
line-height: px2rem(68);
|
|
color: #fff;
|
|
margin-top: px2rem(4);
|
|
}
|
|
}
|
|
}
|
|
|
|
.userinfo {
|
|
width: px2rem(702);
|
|
height: px2rem(124);
|
|
position: relative;
|
|
background: #fff;
|
|
border-radius: px2rem(28);
|
|
margin: 0 auto px2rem(25);
|
|
|
|
img {
|
|
position: absolute;
|
|
width: px2rem(96);
|
|
height: px2rem(96);
|
|
border-radius: 50%;
|
|
left: px2rem(32);
|
|
top: px2rem(14);
|
|
}
|
|
|
|
.name {
|
|
width: 4rem;
|
|
position: absolute;
|
|
left: px2rem(144);
|
|
top: px2rem(24);
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.id {
|
|
width: 4rem;
|
|
position: absolute;
|
|
left: px2rem(144);
|
|
bottom: px2rem(22);
|
|
color: #8A8CAB;
|
|
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);
|
|
text-align: center;
|
|
color: #C859FF;
|
|
border: px2rem(2) solid #C859FF;
|
|
position: absolute;
|
|
right: px2rem(32);
|
|
top: px2rem(30);
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
width: px2rem(750);
|
|
height: px2rem(120);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 auto 0;
|
|
position: relative;
|
|
|
|
div {
|
|
width: 50%;
|
|
height: px2rem(80);
|
|
line-height: px2rem(88);
|
|
text-align: center;
|
|
color: #6D6B89;
|
|
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);
|
|
background: linear-gradient( 270deg, #500FFF 0%, #F854FC 100%);
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
color: #1F1B4F;
|
|
font-weight: bold;
|
|
|
|
span {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.tab1 {
|
|
background: url(../images/tab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2 {
|
|
background: url(../images/tab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tabs {
|
|
position: relative;
|
|
|
|
i {
|
|
position: absolute;
|
|
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);
|
|
background: linear-gradient(127deg, #895BFF 0%, #BC76FF 100%);
|
|
color: #fff;
|
|
font-size: px2rem(20);
|
|
}
|
|
}
|
|
|
|
.page1 {
|
|
width: px2rem(750);
|
|
position: relative;
|
|
background: #fff;
|
|
margin: 0 auto 0;
|
|
position: relative;
|
|
// display: none;
|
|
|
|
h3 {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-left: px2rem(32);
|
|
margin-bottom: px2rem(24);
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32);
|
|
}
|
|
|
|
.way {
|
|
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);
|
|
background: rgba(245, 246, 250, .8);
|
|
border-radius: px2rem(16);
|
|
position: relative;
|
|
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);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
p {
|
|
font-weight: bold;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(24);
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
span {
|
|
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);
|
|
position: absolute;
|
|
right: px2rem(-12);
|
|
top: px2rem(-12);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(20);
|
|
}
|
|
}
|
|
|
|
.active {
|
|
box-sizing: border-box;
|
|
border: px2rem(2) solid #C859FF;
|
|
}
|
|
}
|
|
|
|
.position {
|
|
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);
|
|
background: rgba(245, 246, 250, .8);
|
|
border-radius: px2rem(16);
|
|
position: relative;
|
|
margin-bottom: px2rem(20);
|
|
box-sizing: border-box;
|
|
margin-right: 0.17rem;
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: px2rem(32);
|
|
vertical-align: middle;
|
|
color: #1F1B4F;
|
|
// font-weight: 500;
|
|
font-weight: bold;
|
|
font-size: px2rem(32);
|
|
margin-bottom: px2rem(8);
|
|
|
|
img {
|
|
width: px2rem(40);
|
|
height: px2rem(40);
|
|
display: inline-block;
|
|
margin-right: px2rem(4);
|
|
vertical-align: middle;
|
|
margin-top: px2rem(-10);
|
|
}
|
|
|
|
}
|
|
|
|
span {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #8A8CAB;
|
|
font-size: px2rem(24);
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
border: px2rem(2) solid #C859FF;
|
|
}
|
|
}
|
|
|
|
.payButBox {
|
|
position: fixed;
|
|
z-index: 2;
|
|
bottom: 0rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
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;
|
|
background: #fff;
|
|
|
|
.payBut {
|
|
width: px2rem(606);
|
|
height: px2rem(96);
|
|
line-height: px2rem(96);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: bold;
|
|
background: linear-gradient( 270deg, #500FFF 0%, #F854FC 100%);
|
|
border-radius: px2rem(96);
|
|
margin: 0.45rem auto 0.4rem;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.page2 {
|
|
width: px2rem(750);
|
|
position: relative;
|
|
background: #fff;
|
|
margin: 0 auto 0;
|
|
display: none;
|
|
|
|
.rule {
|
|
width: px2rem(686);
|
|
color: #B3B3C3;
|
|
font-size: px2rem(24);
|
|
margin: 0 auto;
|
|
text-align: left;
|
|
|
|
p {
|
|
margin-bottom: px2rem(4);
|
|
line-height: 0.45rem;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
width: px2rem(686);
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32);
|
|
font-weight: bold;
|
|
margin: px2rem(24) auto px2rem(24);
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(720);
|
|
margin: 0 auto px2rem(46);
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(142);
|
|
background: rgba(245, 246, 250, .8);
|
|
border-radius: px2rem(28);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(24) 0 px2rem(32);
|
|
overflow: hidden;
|
|
margin-bottom: px2rem(20);
|
|
position: relative;
|
|
|
|
.left {
|
|
float: left;
|
|
|
|
.name {
|
|
width: 5rem;
|
|
margin-top: px2rem(20);
|
|
margin-bottom: px2rem(10);
|
|
|
|
b {
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28);
|
|
font-weight: bold;
|
|
height: px2rem(32);
|
|
border-radius: px2rem(32);
|
|
line-height: px2rem(32);
|
|
float: left;
|
|
margin-right: px2rem(12);
|
|
float: left;
|
|
}
|
|
|
|
span {
|
|
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);
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: inline-block;
|
|
text-align: center;
|
|
text-indent: 6px;
|
|
float: left;
|
|
|
|
i {
|
|
width: px2rem(8);
|
|
height: px2rem(8);
|
|
border-radius: 50%;
|
|
background: #21EB57;
|
|
margin-right: px2rem(10);
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: px2rem(10);
|
|
}
|
|
}
|
|
}
|
|
|
|
.id {
|
|
width: 100%;
|
|
color: #8A8CAB;
|
|
font-size: px2rem(24);
|
|
float: left;
|
|
margin-top: 0.14rem;
|
|
}
|
|
|
|
.starLevel {
|
|
height: px2rem(30);
|
|
line-height: px2rem(30);
|
|
display: flex;
|
|
float: left;
|
|
position: absolute;
|
|
bottom: 0.2rem;
|
|
left: 0.3rem;
|
|
|
|
span {
|
|
height: px2rem(30);
|
|
margin-right: px2rem(8);
|
|
color: #8A8CAB;
|
|
font-size: px2rem(24);
|
|
}
|
|
|
|
img {
|
|
width: px2rem(30);
|
|
height: px2rem(30);
|
|
display: block;
|
|
margin: 0 px2rem(3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.copy {
|
|
width: px2rem(132);
|
|
height: px2rem(58);
|
|
border-radius: px2rem(58);
|
|
line-height: px2rem(58);
|
|
text-align: center;
|
|
border: px2rem(2) solid #C859FF;
|
|
background: #F5F6FA;
|
|
font-size: px2rem(24);
|
|
color: #C859FF;
|
|
float: right;
|
|
margin-top: px2rem(42);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(132);
|
|
height: px2rem(58);
|
|
border-radius: px2rem(58);
|
|
line-height: px2rem(58);
|
|
text-align: center;
|
|
background: linear-gradient( 270deg, #500FFF 0%, #F854FC 100%);
|
|
font-size: px2rem(24);
|
|
color: #fff;
|
|
float: right;
|
|
margin-left: px2rem(16);
|
|
margin-top: px2rem(42);
|
|
}
|
|
}
|
|
|
|
.null {
|
|
margin-top: px2rem(120);
|
|
width: 100%;
|
|
background: #fff;
|
|
height: auto;
|
|
margin-bottom: px2rem(120);
|
|
|
|
img {
|
|
display: block;
|
|
width: px2rem(288);
|
|
height: px2rem(236);
|
|
margin: 0 auto px2rem(32);
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #8A8CAB;
|
|
font-size: px2rem(28);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.area {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .4);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.area_in {
|
|
width: px2rem(650);
|
|
border-radius: px2rem(56);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #fff;
|
|
// overflow: hidden;
|
|
height: 10rem;
|
|
overflow-y: scroll;
|
|
|
|
h3 {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28);
|
|
font-weight: bold;
|
|
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);
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28);
|
|
border-bottom: px2rem(1) solid #EBEEF5;
|
|
}
|
|
|
|
.active {
|
|
color: #C859FF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #B3B3C3;
|
|
font-size: px2rem(24);
|
|
margin-bottom: 3rem;
|
|
|
|
p {
|
|
width: 100%;
|
|
vertical-align: middle;
|
|
margin-bottom: px2rem(12);
|
|
|
|
img {
|
|
width: px2rem(28);
|
|
height: px2rem(28);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: px2rem(12);
|
|
}
|
|
|
|
a {
|
|
color: #1F1B4F;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.userNull {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .4);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.userNull_in {
|
|
width: px2rem(638);
|
|
height: px2rem(352);
|
|
border-radius: px2rem(40);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #fff;
|
|
overflow: hidden;
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
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);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
background: linear-gradient( 270deg, #500FFF 0%, #F854FC 100%);
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toastMasge {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .4);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.toastMasge_in {
|
|
width: px2rem(638);
|
|
height: px2rem(352);
|
|
border-radius: px2rem(40);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #fff;
|
|
overflow: hidden;
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
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);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
background: linear-gradient( 270deg, #500FFF 0%, #F854FC 100%);
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sure {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .4);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.sure_in {
|
|
width: px2rem(638);
|
|
height: px2rem(580);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #fff;
|
|
border-radius: px2rem(40);
|
|
overflow: hidden;
|
|
|
|
h3 {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32);
|
|
font-weight: bold;
|
|
margin: px2rem(56) auto px2rem(32);
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: px2rem(176);
|
|
height: px2rem(176);
|
|
border-radius: 50%;
|
|
margin: 0 auto px2rem(12);
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32);
|
|
margin: 0 auto px2rem(10);
|
|
}
|
|
|
|
b {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #8A8CAB;
|
|
font-size: px2rem(28);
|
|
margin-bottom: px2rem(40);
|
|
|
|
i {
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.close {
|
|
float: left;
|
|
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);
|
|
background: #E6E6F0;
|
|
}
|
|
|
|
.ok {
|
|
float: right;
|
|
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);
|
|
background: linear-gradient( 270deg, #500FFF 0%, #F854FC 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.selectAddress {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 9;
|
|
display: none;
|
|
|
|
.selectAddress_in {
|
|
width: px2rem(638);
|
|
height: px2rem(400);
|
|
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;
|
|
}
|
|
|
|
.selectAddressList {
|
|
appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
position: absolute;
|
|
width: px2rem(526);
|
|
height: px2rem(100);
|
|
line-height: px2rem(100);
|
|
background: #F5F6FA;
|
|
border-radius: px2rem(100);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(148);
|
|
border: none;
|
|
box-sizing: border-box;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
padding: 0 px2rem(48);
|
|
|
|
img {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: px2rem(40);
|
|
width: px2rem(30);
|
|
height: px2rem(20);
|
|
}
|
|
|
|
option::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
option {
|
|
padding: 0;
|
|
margin: 0;
|
|
float: left;
|
|
/*当时解决输入框光标顶满input框的问题是这么解决的 如果设置了行高就会顶满没有行高的话光标高度=文字的font-size */
|
|
border: none;
|
|
outline: none;
|
|
padding-left: 20px;
|
|
color: #6d6d6d;
|
|
-webkit-appearance: none;
|
|
/*去除系统默认的样式*/
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
/* 点击去除高亮的颜色*/
|
|
/*当input框禁止输入的时候会有一个灰色的底色 项目需要我设置了 白色底 跟页面背景一个颜色。*/
|
|
}
|
|
|
|
}
|
|
|
|
/*清除iIE的默认选择框样式*/
|
|
select::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(446);
|
|
height: px2rem(84);
|
|
line-height: px2rem(84);
|
|
border-radius: px2rem(86);
|
|
position: absolute;
|
|
top: px2rem(288);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
background: linear-gradient( 270deg, #500FFF 0%, #F854FC 100%);
|
|
}
|
|
|
|
.list_in {
|
|
width: px2rem(526);
|
|
height: 0;
|
|
// height: auto;
|
|
box-sizing: border-box;
|
|
padding: px2rem(0);
|
|
// padding: 0.2rem 0.53333rem;
|
|
background: #F5F6FA;
|
|
border-radius: px2rem(32);
|
|
position: absolute;
|
|
top: px2rem(264);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1;
|
|
overflow-y: scroll;
|
|
transition: all .3s;
|
|
// display: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
height: px2rem(100);
|
|
line-height: px2rem(100);
|
|
border-bottom: px2rem(1) dashed #cbbbbb;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28);
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.guidd {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 9;
|
|
display: none;
|
|
|
|
img {
|
|
position: absolute;
|
|
top: px2rem(10);
|
|
right: px2rem(20);
|
|
width: px2rem(476);
|
|
height: px2rem(294);
|
|
}
|
|
}
|
|
|
|
.pub {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.pub_in {
|
|
width: px2rem(600);
|
|
max-height: px2rem(800);
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
padding: px2rem(70) px2rem(20) px2rem(20);
|
|
background: #fff;
|
|
border: px2rem(2) solid #a39d9d;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: px2rem(25);
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.close {
|
|
width: px2rem(44);
|
|
height: px2rem(44);
|
|
position: absolute;
|
|
right: px2rem(20);
|
|
top: px2rem(20);
|
|
}
|
|
|
|
p {
|
|
font-size: px2rem(26);
|
|
color: #575757;
|
|
margin-bottom: px2rem(10);
|
|
line-height: px2rem(40);
|
|
|
|
b {
|
|
color: #272525;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.copy {
|
|
display: inline-block;
|
|
width: px2rem(30);
|
|
margin-top: px2rem(4);
|
|
}
|
|
}
|
|
}
|
|
|
|
.english {
|
|
.page1 .way div i {
|
|
width: 2rem;
|
|
}
|
|
}
|
|
|
|
.arabic {
|
|
|
|
.page2 .rule {
|
|
p {
|
|
text-align: right;
|
|
font-size: px2rem(21);
|
|
}
|
|
}
|
|
|
|
.tab1 {
|
|
background: url(../images/tab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2 {
|
|
background: url(../images/tab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.page1 h3 {
|
|
padding-left: 0;
|
|
padding-right: 0.42667rem;
|
|
}
|
|
|
|
.page2 ul li {
|
|
direction: ltr;
|
|
|
|
.id {
|
|
text-align-last: left;
|
|
}
|
|
}
|
|
} |