html,
body {
margin: 0;
border: none;
padding: 0;
height: 100%;
}
.about_pic {
display: block;
width: 100%;
}
.buy_btn {
width: 6.7rem;
height: 1rem;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
bottom: .5rem;
border-radius: 1rem;
overflow: hidden;
display: flex;
.left {
width: 3.35rem;
height: 1rem;
background: #fcd758;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: .3rem;
color: #995916;
.top {
margin-bottom: .1rem;
}
}
.right {
width: 3.35rem;
height: 1rem;
background: #ff6a67;
line-height: 1rem;
color: #fff;
font-size: .4rem;
text-align: center;
}
.none {
background: #929292;
}
}
.container {
width: 100%;
height: 100%;
background: #eee;
.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;
}
.mobile_input {
width: 100%;
height: 0.82rem;
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: .16rem;
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;
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.3rem;
color: #fff;
}
}
.info_box {
width: 6.8rem;
height: 2.2rem;
border-radius: .1rem;
margin: 0 auto;
background: #fff;
padding: .3rem;
box-sizing: border-box;
.head {
font-size: .3rem;
color: #1a1a1a;
font-weight: 500;
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: lightblue;
display: flex;
flex-direction: row-reverse;
align-items: center;
span{
font-size: .3rem;
color: #fd4141;
margin-right: .3rem;
}
}
#buy_btn{
font-size: .3rem;
color: #fff;
background: #f65d5d;
text-align: center;
line-height: .82rem;
width: 2.38rem;
height: 0.82rem;
border-radius: .1rem;
position: absolute;
bottom: 1rem;
right: 0.8rem;
}
}
.buy-dialog {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
display: none;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
.box {
width: 5.5rem;
height: 3.54rem;
background: rgba(255, 255, 255, 1);
border-radius: .2rem;
.title {
width: 100%;
height: 0.56rem;
color: #434343;
font-size: .4rem;
text-align: center;
margin-top: .63rem;
}
.bottom {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin-top: .98rem;
.yes {
width: 2.51rem;
height: .84rem;
background: rgba(245, 136, 13, 1);
border-radius: .47rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: .36rem;
}
.no {
width: 2.51rem;
height: .84rem;
background: rgba(61, 173, 254, 1);
border-radius: .47rem;
display: flex;
align-items: center;
text-align: center;
color: #fff;
font-size: .36rem;
justify-content: center;
}
}
}
}