twong329/view/xcx/pages/order_details/index.wxss

.order-details .header {
    padding: 0 30rpx;
    height: 150rpx;
}

.order-details .header.on {
    background-color: #666 !important;
}

.order-details .header .pictrue {
    width: 110rpx;
    height: 110rpx;
}

.order-details .header .pictrue image {
    width: 100%;
    height: 100%;
}

.order-details .header .data {
    color: rgba(255, 255, 255, 0.8);
    font-size: 24rpx;
    margin-left: 27rpx;
}

.order-details .header .data.on {
    margin-left: 0;
}

.order-details .header .data .state {
    font-size: 30rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 7rpx;
}

.order-details .header .data .time {
    margin-left: 20rpx;
}

.order-details .nav {
    background-color: #fff;
    font-size: 26rpx;
    color: #282828;
    padding: 25rpx 0;
}

.order-details .nav .navCon {
    padding: 0 40rpx;
}

.order-details .nav .on {
    color: #e93323;
}

.order-details .nav .progress {
    padding: 0 65rpx;
    margin-top: 10rpx;
}

.order-details .nav .progress .line {
    width: 100rpx;
    height: 2rpx;
    background-color: #939390;
}

.order-details .nav .progress .iconfont {
    font-size: 25rpx;
    color: #939390;
    margin-top: -2rpx;
}

.order-details .address {
    font-size: 26rpx;
    color: #868686;
    background-color: #fff;
    margin-top: 13rpx;
    padding: 35rpx 30rpx;
}

.order-details .address .name {
    font-size: 30rpx;
    color: #282828;
    margin-bottom: 15rpx;
}

.order-details .address .name .phone {
    margin-left: 40rpx;
}

.order-details .line {
    width: 100%;
    height: 3rpx;
}

.order-details .line image {
    width: 100%;
    height: 100%;
    display: block;
}

.order-details .wrapper {
    background-color: #fff;
    margin-top: 12rpx;
    padding: 30rpx;
}

.order-details .wrapper .item {
    font-size: 28rpx;
    color: #282828;
}

.order-details .wrapper .item~.item {
    margin-top: 20rpx;
}

.order-details .wrapper .item .conter {
    color: #868686;
    width: 460rpx;
    text-align: right;
}

.order-details .wrapper .item .conter .copy {
    font-size: 20rpx;
    color: #333;
    border-radius: 3rpx;
    border: 1rpx solid #666;
    padding: 3rpx 15rpx;
    margin-left: 24rpx;
}

.order-details .wrapper .actualPay {
    border-top: 1rpx solid #eee;
    margin-top: 30rpx;
    padding-top: 30rpx;
}

.order-details .wrapper .actualPay .money {
    font-weight: bold;
    font-size: 30rpx;
}

.order-details .footer {
    width: 100%;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.order-details .footer .bnt {
    width: 158rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    border-radius: 50rpx;
    color: #fff;
    font-size: 27rpx;
}

.order-details .footer .bnt.cancel {
    color: #aaa;
    border: 1rpx solid #ddd;
}

.order-details .footer .bnt~.bnt {
    margin-left: 18rpx;
}

.order-details .writeOff {
    background-color: #fff;
    margin-top: 13rpx;
    padding-bottom: 30rpx;
}

.order-details .writeOff .title {
    font-size: 30rpx;
    color: #282828;
    height: 87rpx;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 30rpx;
    line-height: 87rpx;
}

.order-details .writeOff .grayBg {
    background-color: #f2f5f7;
    width: 590rpx;
    height: 384rpx;
    border-radius: 20rpx 20rpx 0 0;
    margin: 50rpx auto 0 auto;
    padding-top: 55rpx;
}

.order-details .writeOff .grayBg .pictrue {
    width: 290rpx;
    height: 290rpx;
    margin: 0 auto;
}

.order-details .writeOff .grayBg .pictrue image {
    width: 100%;
    height: 100%;
    display: block;
}

.order-details .writeOff .gear {
    width: 590rpx;
    height: 30rpx;
    margin: 0 auto;
}

.order-details .writeOff .gear image {
    width: 100%;
    height: 100%;
    display: block;
}

.order-details .writeOff .num {
    background-color: #f0c34c;
    width: 590rpx;
    height: 84rpx;
    color: #282828;
    font-size: 48rpx;
    margin: 0 auto;
    border-radius: 0 0 20rpx 20rpx;
    text-align: center;
    padding-top: 4rpx;
}

.order-details .writeOff .rules {
    margin: 46rpx 30rpx 0 30rpx;
    border-top: 1px solid #f0f0f0;
    padding-top: 10rpx;
}

.order-details .writeOff .rules .item {
    margin-top: 20rpx;
}

.order-details .writeOff .rules .item .rulesTitle {
    font-size: 28rpx;
    color: #282828;
}

.order-details .writeOff .rules .item .rulesTitle .iconfont {
    font-size: 30rpx;
    color: #333;
    margin-right: 8rpx;
    margin-top: 5rpx;
}

.order-details .writeOff .rules .item .info {
    font-size: 28rpx;
    color: #999;
    margin-top: 7rpx;
}

.order-details .writeOff .rules .item .info .time {
    margin-left: 20rpx;
}

.order-details .map {
    height: 86rpx;
    font-size: 30rpx;
    color: #282828;
    line-height: 86rpx;
    border-bottom: 1px solid #f0f0f0;
    margin-top: 13rpx;
    background-color: #fff;
    padding: 0 30rpx;
}

.order-details .map .place {
    font-size: 26rpx;
    width: 176rpx;
    height: 50rpx;
    border-radius: 25rpx;
    line-height: 50rpx;
    text-align: center;
}

.order-details .map .place .iconfont {
    font-size: 27rpx;
    height: 27rpx;
    line-height: 27rpx;
    margin: 2rpx 3rpx 0 0;
}

.order-details .address .name .iconfont {
    font-size: 34rpx;
    margin-left: 10rpx;
}

.order-details .contactCustomer {
    width: 100%;
    height: 86rpx;
    font-size: 30rpx;
    text-align: center;
    line-height: 86rpx;
    background-color: #fff;
}

.order-details .contactCustomer .iconfont {
    font-size: 34rpx;
    margin-right: 14rpx;
}