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%; } } }