.payorder .container { border: 0; display: block; min-height: 100vh; padding-bottom: 17.6vw; } .payorder .section { background-color: #fff; margin-bottom: 2.667vw; padding: 0 4vw; } .payorder .order-time { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-pack: center; -ms-flex-pack: center; background-color: #06acb3; box-sizing: border-box; color: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; font-size: 3.733vw; height: 26.4vw; justify-content: center; text-align: center; } .payorder .order-time .time { font-size: 8vw; font-weight: 700; } .payorder .user-info { color: #2a2a2a; font-size: 3.467vw; line-height: 4.533vw; padding: 4vw 0; } .payorder .user-info .top { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-size: 4vw; } .payorder .user-info .top+view { margin-top: 2.133vw; } .payorder .user-info .name { padding-right: 6.667vw; } .payorder .user-info .tel { -webkit-box-flex: 1; flex: 1; } .payorder .goods-info { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 3.733vw 0; } .payorder .goods-info .lt { -webkit-box-flex: 16vw; border-radius: 1.067vw; flex: 16vw 0 0; margin-right: 3.2vw; width: 16vw; } .payorder .goods-info .lt_pic { overflow: hidden; padding-top: 100%; position: relative; } .payorder .goods-info .lt_pic image { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .payorder .goods-info .rt { -webkit-box-flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; flex: 1; flex-direction: column; } .payorder .goods-info .rt,.payorder .goods-info .rt ._btm { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .payorder .goods-info .rt ._btm { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .payorder .goods-info .rt_tit { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #2a2a2a; display: -webkit-box; font-size: 3.733vw; line-height: 5.067vw; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .payorder .goods-info .rt_price { font-size: 3.733vw; } .payorder .goods-info .rt_num { font-size: 3.2vw; } .payorder .goods-attr { padding: 2.667vw 0; } .payorder .goods-attr .title { color: #2a2a2a; font-size: 3.733vw; margin-bottom: 2.133vw; } .payorder .goods-attr .item { -webkit-box-pack: justify; -ms-flex-pack: justify; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-size: 3.467vw; justify-content: space-between; line-height: 6.4vw; } .payorder .goods-attr .it_name { color: #787878; } .payorder .goods-attr .it_name .text { color: #2a2a2a; margin-left: 2.667vw; } .payorder .goods-attr .it_price { color: #787878; } .payorder .order-area { border-top: 1px solid #eee; padding: 2.667vw 0; } .payorder .order-item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-size: 3.733vw; line-height: 7.467vw; } .payorder .order-item .van-field__label { line-height: 24px; } .payorder .order-item .hd,.payorder .order-item .van-field__label { -webkit-box-flex: 21.333vw; flex: 21.333vw 0 0; width: 21.333vw; } .payorder .order-item .bd { -webkit-box-flex: 1; flex: 1; } .van-cell { align-items: flex-start; background-color: #fff; box-sizing: border-box; color: #323233; display: flex; font-size: 14px; line-height: 24px; overflow: hidden; padding: 10px 16px; position: relative; width: 100%; } .van-cell__value { word-wrap: break-word; color: #969799; display: inline-flex; flex: 1; overflow: visible; position: relative; text-align: right; vertical-align: middle; } .van-field__body { -webkit-box-align: center; align-items: center; display: block; width: 100%; } .van-field__control { background-color: initial; border: 0; box-sizing: border-box; color: #323233; display: block; font-size: 14px; line-height: 24px; margin: 0; min-width: 0; resize: none; text-align: left; width: 100%; } .van-cell__title { line-height: 24px; } .payorder .order-item .item_input { height: 7.467vw; line-height: 7.467vw; } .payorder .jifen-area { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: row-reverse; height: 8vw; } .payorder .jifen-area .van-checkbox__label { -webkit-box-flex: 1; flex: 1; } .payorder .jifen-area .hd { color: #06a2b3; font-size: 3.733vw; font-weight: 500; } .payorder .jifen-area .bd { -webkit-box-flex: 1; flex: 1; } .payorder .section-money { -webkit-box-orient: vertical; -webkit-box-direction: normal; background-color: #fff; flex-direction: column; padding-left: 4vw; padding-top: 4.8vw; } .payorder .section-money,.payorder .section-money>.money__row { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .payorder .section-money>.money__row { -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: justify; -ms-flex-pack: justify; align-items: center; justify-content: space-between; margin-bottom: 4vw; padding-right: 4vw; } .payorder .money__row>.title { color: #2a2a2a; font-size: 3.733vw; } .payorder .money__row>.title--big { font-size: 3.733vw; } .payorder .money__row>.money { color: #eb5252; font-family: DIN; font-size: 3.733vw; } .payorder .money__row>.money--black { color: #2a2a2a; } .payorder .section-money>.money__total { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid #eee; color: #2a2a2a; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-size: 3.733vw; font-weight: 500; height: 14.4vw; justify-content: flex-end; padding-right: 4vw; } .payorder .section-money>.money__total>span { color: #eb5252; font-size: 3.467vw; line-height: 3.467vw; } .payorder .section-money>.money__total>.money { color: #eb5252; font-size: 4.8vw; line-height: 4vw; margin-left: .533vw; } .payorder .pay-btn { background-color: #fff; bottom: 0; left: 0; position: fixed; right: 0; } .payorder .pay-btn .area { padding: 2.667vw 4vw; } .payorder .pay-btn .btn { background-color: #06acb3; border-radius: 4.8vw; color: #fff; font-size: 4vw; height: 100%; line-height: 9.6vw; text-align: center; width: 100%; } .payorder .section-block { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: row-reverse; font-size: 4vw; margin-top: 2.667vw; padding: 4vw; } .payorder .section-block .van-checkbox__label { -webkit-box-flex: 1; flex: 1; } .payorder .checkbox .wx-checkbox-input { background-color: #ddd; border: 0; border-radius: 50%; height: 4vw; overflow: hidden; width: 4vw; } .payorder .checkbox .wx-checkbox-input.wx-checkbox-input-checked { background: #ddd!important; } .payorder .checkbox .wx-checkbox-input.wx-checkbox-input-checked:before { background-color: #7fc167; border: 0; border-radius: 50%; content: ""; height: 100%; transform: translate(-51%,-51%) scale(.6); width: 100%; } .payorder .popbox { background: #fff; border-radius: 4vw; height: 65.467vw; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-70%); width: 72vw; } .payorder .popbox .title { color: #2a2a2a; font-size: 4.8vw; font-weight: 600; height: 17.333vw; line-height: 17.333vw; text-align: center; } .payorder .popbox .mesbox { color: #2a2a2a; font-size: 4vw; line-height: 6.4vw; padding: 7.6vw 0 12.267vw; text-align: center; } .payorder .popbox .btnbox { -webkit-box-pack: justify; -ms-flex-pack: justify; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; padding: 0 5.6vw; } .payorder .popbox .btnbox .btn { border-color: #2a2a2a; border-radius: 12vw; color: #2a2a2a; font-size: 3.733vw; height: 9.333vw; line-height: 9.333vw; text-align: center; width: 28vw; } .placeholder { line-height: 24px; }