|
|
@@ -1,13 +1,14 @@
|
|
|
-$theme-color: #1fe4dc;
|
|
|
+$theme-color: rgba(22, 155, 213, 1);
|
|
|
$font-color: #2d2d2d;
|
|
|
$anima-time:0.2s;
|
|
|
$anima-delay:0.15s;
|
|
|
$border-color: #e7e7e7;
|
|
|
|
|
|
-.fdcheck{
|
|
|
+.fdcheck {
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
- &::before{
|
|
|
+
|
|
|
+ &::before {
|
|
|
content: '';
|
|
|
border: #CCCCCC 1px solid;
|
|
|
width: 14px;
|
|
|
@@ -20,18 +21,19 @@ $border-color: #e7e7e7;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.check_active{
|
|
|
- &::before{
|
|
|
+.check_active {
|
|
|
+ &::before {
|
|
|
content: '';
|
|
|
- background: #1fe4dc;
|
|
|
- border: #1fe4dc 1px solid;
|
|
|
+ background: #169bd5;
|
|
|
+ border: #169bd5 1px solid;
|
|
|
}
|
|
|
- &::after{
|
|
|
+
|
|
|
+ &::after {
|
|
|
left: -17px;
|
|
|
top: 50%;
|
|
|
position: absolute;
|
|
|
display: table;
|
|
|
- border: 2px solid #000;
|
|
|
+ border: 2px solid #fff;
|
|
|
border-top: 0;
|
|
|
border-left: 0;
|
|
|
transform: rotate(45deg) translate(-50%, -50%);
|
|
|
@@ -55,13 +57,20 @@ $border-color: #e7e7e7;
|
|
|
line-height: 34px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.primary {
|
|
|
- background: $theme-color;
|
|
|
+ background: rgba(22, 155, 213, 1);
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
+
|
|
|
.cancel {
|
|
|
background: #e6e6e6;
|
|
|
margin-left: 10px;
|
|
|
+ display: none;
|
|
|
}
|
|
|
+
|
|
|
.toast-layout {
|
|
|
display: none;
|
|
|
position: fixed;
|
|
|
@@ -71,9 +80,10 @@ $border-color: #e7e7e7;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
margin: 0;
|
|
|
- opacity:0;
|
|
|
+ opacity: 0;
|
|
|
z-index: 88888888;
|
|
|
transition: all $anima-time linear;
|
|
|
+
|
|
|
.loading {
|
|
|
svg {
|
|
|
position: absolute;
|
|
|
@@ -88,6 +98,7 @@ $border-color: #e7e7e7;
|
|
|
animation-iteration-count: infinite;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.toast-con {
|
|
|
position: absolute;
|
|
|
padding: 20px 0;
|
|
|
@@ -97,16 +108,19 @@ $border-color: #e7e7e7;
|
|
|
background: #fff;
|
|
|
border-radius: 6px;
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
+
|
|
|
.t-line {
|
|
|
width: 100%;
|
|
|
background: #e4e4e4;
|
|
|
height: 1px;
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
+
|
|
|
.iconfont {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .t-header{
|
|
|
+
|
|
|
+ .t-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
@@ -115,10 +129,12 @@ $border-color: #e7e7e7;
|
|
|
height: 54px;
|
|
|
padding: 0 30px;
|
|
|
}
|
|
|
+
|
|
|
.pay-con {
|
|
|
background: #fff;
|
|
|
padding: 24px 30px;
|
|
|
max-width: 95%;
|
|
|
+
|
|
|
.capacity,
|
|
|
.device,
|
|
|
.mid,
|
|
|
@@ -126,35 +142,43 @@ $border-color: #e7e7e7;
|
|
|
.amount {
|
|
|
display: flex;
|
|
|
padding-bottom: 32px;
|
|
|
+
|
|
|
.attr {
|
|
|
font-size: 14px;
|
|
|
color: $font-color;
|
|
|
}
|
|
|
+
|
|
|
.attren {
|
|
|
min-width: 140px;
|
|
|
}
|
|
|
+
|
|
|
.val {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-left: 20px;
|
|
|
- .time{
|
|
|
+
|
|
|
+ .time {
|
|
|
color: #f9082a;
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
- .a-price{
|
|
|
+
|
|
|
+ .a-price {
|
|
|
color: #ff0000;
|
|
|
font-size: 32px;
|
|
|
- span{
|
|
|
+
|
|
|
+ span {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
- .dec{
|
|
|
+
|
|
|
+ .dec {
|
|
|
color: #2d2d2d;
|
|
|
font-size: 12px;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
+
|
|
|
.tag {
|
|
|
height: 100%;
|
|
|
font-size: 0;
|
|
|
@@ -164,6 +188,7 @@ $border-color: #e7e7e7;
|
|
|
border: 1px solid #e7e7e7;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
.year {
|
|
|
min-width: 82px;
|
|
|
height: 48px;
|
|
|
@@ -175,6 +200,7 @@ $border-color: #e7e7e7;
|
|
|
font-size: 14px;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
+
|
|
|
.price {
|
|
|
background: #fff;
|
|
|
height: 48px;
|
|
|
@@ -184,11 +210,13 @@ $border-color: #e7e7e7;
|
|
|
font-size: 18px;
|
|
|
color: #ff0000;
|
|
|
text-align: center;
|
|
|
+
|
|
|
.per {
|
|
|
font-size: 12px;
|
|
|
color: #777777;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
@@ -196,11 +224,13 @@ $border-color: #e7e7e7;
|
|
|
width: 14px;
|
|
|
}
|
|
|
}
|
|
|
- .tag-renew{
|
|
|
+
|
|
|
+ .tag-renew {
|
|
|
width: 140px;
|
|
|
box-sizing: border-box;
|
|
|
height: 40px;
|
|
|
- .tag-item{
|
|
|
+
|
|
|
+ .tag-item {
|
|
|
width: 100%;
|
|
|
background: #f4f4f9;
|
|
|
color: #2d2d2d;
|
|
|
@@ -213,10 +243,12 @@ $border-color: #e7e7e7;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
- img{
|
|
|
+
|
|
|
+ img {
|
|
|
display: none;
|
|
|
}
|
|
|
- .iconfont{
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
color: #777;
|
|
|
vertical-align: middle;
|
|
|
font-size: 30px;
|
|
|
@@ -224,16 +256,20 @@ $border-color: #e7e7e7;
|
|
|
margin-right: 13px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.tag-active {
|
|
|
border: 1px solid $theme-color;
|
|
|
box-sizing: border-box;
|
|
|
- img{
|
|
|
+
|
|
|
+ img {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.body {
|
|
|
margin-left: 20px;
|
|
|
+
|
|
|
.pay-tag {
|
|
|
cursor: pointer;
|
|
|
border: 1px solid #e7e7e7;
|
|
|
@@ -242,18 +278,22 @@ $border-color: #e7e7e7;
|
|
|
height: 36px;
|
|
|
margin-bottom: 20px;
|
|
|
position: relative;
|
|
|
- &:last-of-type{
|
|
|
+
|
|
|
+ &:last-of-type {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
+
|
|
|
span {
|
|
|
margin-left: 36px;
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
padding-left: 60px;
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
.t-icon {
|
|
|
width: 36px;
|
|
|
height: 35px;
|
|
|
@@ -261,17 +301,21 @@ $border-color: #e7e7e7;
|
|
|
left: 0;
|
|
|
border-right: 1px solid #e7e7e7;
|
|
|
}
|
|
|
+
|
|
|
.t-click {
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
- .paypal-con{
|
|
|
+
|
|
|
+ .paypal-con {
|
|
|
position: relative;
|
|
|
- .form-con{
|
|
|
+
|
|
|
+ .form-con {
|
|
|
opacity: 0;
|
|
|
- input[type='text']{
|
|
|
+
|
|
|
+ input[type='text'] {
|
|
|
width: 1px;
|
|
|
height: 1px;
|
|
|
position: absolute;
|
|
|
@@ -279,73 +323,86 @@ $border-color: #e7e7e7;
|
|
|
left: 0;
|
|
|
opacity: 0;
|
|
|
}
|
|
|
- input[type='submit']{
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- height: 100%;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+
|
|
|
+ input[type='submit'] {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.tag-active {
|
|
|
border: 1px solid $theme-color;
|
|
|
+
|
|
|
span {
|
|
|
color: #000;
|
|
|
}
|
|
|
+
|
|
|
.t-icon {
|
|
|
border-right: 1px solid $theme-color;
|
|
|
}
|
|
|
+
|
|
|
.t-click {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .amount{
|
|
|
- .val{
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ .val {
|
|
|
display: block;
|
|
|
position: relative;
|
|
|
top: -16px;
|
|
|
- .price-img{
|
|
|
+
|
|
|
+ .price-img {
|
|
|
width: 180px;
|
|
|
- box-shadow: 0 0 10px rgba(0,0,0,0.2);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
|
margin: 18px 0 12px;
|
|
|
}
|
|
|
- .scanicon{
|
|
|
+
|
|
|
+ .scanicon {
|
|
|
position: absolute;
|
|
|
left: 210px;
|
|
|
width: 200px;
|
|
|
top: 30px;
|
|
|
height: auto;
|
|
|
}
|
|
|
- .dec{
|
|
|
+
|
|
|
+ .dec {
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .binding-con{
|
|
|
+
|
|
|
+ .binding-con {
|
|
|
position: relative;
|
|
|
height: 295px;
|
|
|
border-top: 1px solid #e4e4e4;
|
|
|
border-bottom: 1px solid #e4e4e4;
|
|
|
- .binding-body{
|
|
|
+
|
|
|
+ .binding-body {
|
|
|
position: absolute;
|
|
|
top: 32px;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 420px;
|
|
|
|
|
|
- .toclient{
|
|
|
+ .toclient {
|
|
|
color: #202020;
|
|
|
margin-bottom: 24px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
- .b-input{
|
|
|
+
|
|
|
+ .b-input {
|
|
|
width: 100%;
|
|
|
- input{
|
|
|
+
|
|
|
+ input {
|
|
|
width: 100%;
|
|
|
color: #969696;
|
|
|
height: 40px;
|
|
|
@@ -354,63 +411,76 @@ $border-color: #e7e7e7;
|
|
|
font-size: 14px;
|
|
|
border: solid 1px #e7e7e7;
|
|
|
}
|
|
|
- .notbing{
|
|
|
+
|
|
|
+ .notbing {
|
|
|
border: 1px solid #ff0000;
|
|
|
}
|
|
|
}
|
|
|
- .bind-error{
|
|
|
+
|
|
|
+ .bind-error {
|
|
|
color: #ff0000;
|
|
|
font-size: 14px;
|
|
|
text-align: center;
|
|
|
height: 30px;
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
- p{
|
|
|
+
|
|
|
+ p {
|
|
|
color: $font-color;
|
|
|
font-size: 14px;
|
|
|
line-height: 2;
|
|
|
}
|
|
|
}
|
|
|
- .cooperation{
|
|
|
- top: 0!important;
|
|
|
+
|
|
|
+ .cooperation {
|
|
|
+ top: 0 !important;
|
|
|
width: 670px;
|
|
|
- .toclient{
|
|
|
+
|
|
|
+ .toclient {
|
|
|
margin-top: 15px;
|
|
|
margin-bottom: 7px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
- .auth-list{
|
|
|
+
|
|
|
+ .auth-list {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
margin-left: 20px;
|
|
|
- >li{
|
|
|
+
|
|
|
+ >li {
|
|
|
margin-bottom: 10px;
|
|
|
width: 25%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .binding-success{
|
|
|
+
|
|
|
+ .binding-success {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
width: 420px;
|
|
|
text-align: center;
|
|
|
- img{
|
|
|
+
|
|
|
+ img {
|
|
|
width: 64px;
|
|
|
}
|
|
|
- p{
|
|
|
+
|
|
|
+ p {
|
|
|
font-size: 16px;
|
|
|
- &:first-of-type{
|
|
|
+
|
|
|
+ &:first-of-type {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .bind-btn{
|
|
|
+
|
|
|
+ .bind-btn {
|
|
|
text-align: center;
|
|
|
- span{
|
|
|
+
|
|
|
+ span {
|
|
|
display: inline-block;
|
|
|
margin: 18px auto;
|
|
|
background: $theme-color;
|
|
|
@@ -420,36 +490,44 @@ $border-color: #e7e7e7;
|
|
|
line-height: 34px;
|
|
|
font-size: 14px;
|
|
|
cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
- .coo-btn{
|
|
|
+
|
|
|
+ .coo-btn {
|
|
|
text-align: right;
|
|
|
padding-right: 30px;
|
|
|
- >span{
|
|
|
+
|
|
|
+ >span {
|
|
|
text-align: center;
|
|
|
}
|
|
|
- .default{
|
|
|
+
|
|
|
+ .default {
|
|
|
background-color: #E6E6E6;
|
|
|
}
|
|
|
}
|
|
|
- .invoice-con{
|
|
|
+
|
|
|
+ .invoice-con {
|
|
|
background: #fff;
|
|
|
padding: 30px;
|
|
|
+
|
|
|
input {
|
|
|
appearance: none;
|
|
|
line-height: 36px;
|
|
|
height: 36px;
|
|
|
border: solid 1px $border-color;
|
|
|
padding-left: 10px;
|
|
|
+
|
|
|
&:focus {
|
|
|
border: solid 1px $theme-color;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.btn {
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.parmary {
|
|
|
background-color: $theme-color;
|
|
|
width: 126px;
|
|
|
@@ -457,6 +535,7 @@ $border-color: #e7e7e7;
|
|
|
line-height: 36px;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
+
|
|
|
.choose {
|
|
|
background-color: #ddd;
|
|
|
color: #fff;
|
|
|
@@ -466,6 +545,7 @@ $border-color: #e7e7e7;
|
|
|
font-size: 12px;
|
|
|
margin: 12px 0 20px;
|
|
|
}
|
|
|
+
|
|
|
.edit-invoice {
|
|
|
.select-con {
|
|
|
div {
|
|
|
@@ -479,6 +559,7 @@ $border-color: #e7e7e7;
|
|
|
color: #a0a0a0;
|
|
|
padding: 0 10px;
|
|
|
display: inline-block;
|
|
|
+
|
|
|
img {
|
|
|
display: none;
|
|
|
position: absolute;
|
|
|
@@ -486,14 +567,17 @@ $border-color: #e7e7e7;
|
|
|
right: 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.tag-active {
|
|
|
border: solid 1px $theme-color;
|
|
|
color: #000;
|
|
|
+
|
|
|
img {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.input-con {
|
|
|
input {
|
|
|
width: 316px;
|
|
|
@@ -503,32 +587,40 @@ $border-color: #e7e7e7;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .open-edu{
|
|
|
+
|
|
|
+ .open-edu {
|
|
|
margin-bottom: 10px;
|
|
|
- span{
|
|
|
+
|
|
|
+ span {
|
|
|
font-size: 14px;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .show-invoice{
|
|
|
+
|
|
|
+ .show-invoice {
|
|
|
background: #fff;
|
|
|
padding: 30px;
|
|
|
- .invoice-p,.address-p{
|
|
|
- p{
|
|
|
+
|
|
|
+ .invoice-p,
|
|
|
+ .address-p {
|
|
|
+ p {
|
|
|
font-size: 14px;
|
|
|
color: #969696;
|
|
|
margin-bottom: 8px;
|
|
|
- &:first-of-type{
|
|
|
+
|
|
|
+ &:first-of-type {
|
|
|
margin-bottom: 10px;
|
|
|
color: $font-color;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .address-p{
|
|
|
+
|
|
|
+ .address-p {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.edit-address {
|
|
|
.input-con {
|
|
|
input {
|
|
|
@@ -538,38 +630,47 @@ $border-color: #e7e7e7;
|
|
|
margin: 10px 25px 10px 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.address-input {
|
|
|
input {
|
|
|
width: 660px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.t-line {
|
|
|
width: 100%;
|
|
|
background: #e4e4e4;
|
|
|
height: 1px;
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
+
|
|
|
.top {
|
|
|
padding: 0 36px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
color: #969696;
|
|
|
+
|
|
|
span {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
+
|
|
|
.iconfont {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.detail {
|
|
|
padding: 0 36px;
|
|
|
+
|
|
|
img {
|
|
|
width: 30px;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
+ display: none;
|
|
|
}
|
|
|
+
|
|
|
span {
|
|
|
margin-left: 10px;
|
|
|
font-size: 16px;
|
|
|
@@ -578,28 +679,34 @@ $border-color: #e7e7e7;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.bottom {
|
|
|
padding: 0 36px;
|
|
|
- float: right;
|
|
|
+ float: none !important;
|
|
|
}
|
|
|
+
|
|
|
.mid-bottom {
|
|
|
float: none;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
- .recharge-con,.bind-con{
|
|
|
+
|
|
|
+ .recharge-con,
|
|
|
+ .bind-con {
|
|
|
padding: 0;
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
top: 50%;
|
|
|
}
|
|
|
- .bind-con{
|
|
|
- .t-header{
|
|
|
+
|
|
|
+ .bind-con {
|
|
|
+ .t-header {
|
|
|
background: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.toast-active{
|
|
|
- display: block!important;
|
|
|
- opacity: 1!important;
|
|
|
-}
|
|
|
+
|
|
|
+.toast-active {
|
|
|
+ display: block !important;
|
|
|
+ opacity: 1 !important;
|
|
|
+}
|