html,
body {
margin: 0;
border: none;
padding: 0;
height: 100%;
font-family: "Noto Sans SC";
}
div,
span{
font-family: "Noto Sans SC";
}
.about_pic {
display: block;
width: 100%;
}
.buy_btn {
width: 100%;
height: 1.4rem;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
bottom: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
.left {
width: 3.35rem;
height: 1rem;
background: #fcd758;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: .3rem;
color: #995916;
font-weight: 700;
border-radius: 1rem 0 0 1rem;
}
.right {
width: 3.35rem;
height: 1rem;
background: #ff6a67;
line-height: 1rem;
color: #fff;
font-size: .4rem;
text-align: center;
font-weight: 500;
border-radius: 0 1rem 1rem 0;
}
.none {
background: #929292;
}
}
.container {
width: 100%;
height: 100%;
background: #eef2f5;
padding-top: 1rem;
.input_box {
width: 6.8rem;
height: 3rem;
border-radius: .1rem;
margin: 0 auto;
box-sizing: border-box;
position: relative;
.alert {
font-size: .2rem;
color: #f65d5d;
margin-bottom: .1rem;
}
.mobile_input {
width: 100%;
height: 0.82rem;
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: .16rem;
border-radius: .1rem;
input {
width: 100%;
height: 0.82rem;
border: none;
text-indent: .5rem;
background: url(./img/mobile.png) no-repeat;
background-size: .23rem .35rem;
background-position: .15rem .23rem;
::placeholder {
color: #b8b8b8;
font-size: .28rem;
}
:focus {
outline: none;
border: none;
}
}
}
.sign_input {
width: 3.98rem;
height: 0.82rem;
background: #fff;
border-radius: .1rem;
input {
width: 100%;
height: 0.82rem;
border: none;
text-indent: .5rem;
background: url(./img/sign.png) no-repeat;
background-size: .30rem .35rem;
background-position: .15rem .23rem;
::placeholder {
color: #b8b8b8;
font-size: .28rem;
}
:focus {
outline: none;
border: none;
}
}
}
#sign_btn {
width: 2.56rem;
height: 0.82rem;
background: #f65d5d;
font-size: .28rem;
line-height: .82rem;
text-align: center;
border-radius: .1rem;
position: absolute;
right: 0;
top: 1.4rem;
color: #fff;
}
}
.info_box {
width: 6.8rem;
height: 2.2rem;
border-radius: .1rem .1rem 0 0;
margin: 0 auto;
background: #fff;
padding: .3rem;
box-sizing: border-box;
.head {
font-size: .3rem;
color: #1a1a1a;
font-weight: 400;
margin-bottom: .3rem;
}
.title_row,
.discount_row {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: .3rem;
.title {
font-size: .28rem;
color: #676767;
}
.price {
font-size: .28rem;
color: #000;
font-weight: 500;
}
}
}
.info_bottom {
width: 6.8rem;
height: 0.8rem;
margin: 0 auto;
background: #f8f8f8;
display: flex;
flex-direction: row-reverse;
align-items: center;
border-radius: 0 0 .1rem .1rem ;
span {
font-size: .3rem;
color: #fd4141;
margin-right: .3rem;
}
}
#buy_btn {
font-size: .3rem;
font-weight: 700;
color: #fff;
background: #f65d5d;
text-align: center;
line-height: .82rem;
width: 2.38rem;
height: 0.82rem;
border-radius: .1rem;
position: absolute;
bottom: .5rem;
right: .6rem;
}
}
.buy-dialog {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .1);
display: none;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
.box {
width: 6.6rem;
height: 6rem;
background: rgba(255, 255, 255, 1);
border-radius: .2rem;
position: absolute;
top: 3rem;
left: 0;
right: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
.pay_icon {
display: block;
margin-top: 1.2rem;
width: 1.9rem;
height: 1.9rem;
&.success {
display: block;
}
&.bad {
display: none;
}
}
.pay_type {
margin-top: .8rem;
font-size: .36rem;
color: #fc6168;
}
.pay_type_s {
margin-top: .5rem;
color: #999;
font-size: .26rem;
}
}
.close {
width: 1.2rem;
height: 1.2rem;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 10rem;
overflow: hidden;
z-index: 10;
img {
width: 100%;
height: 100%;
}
}
}