.fictitious { margin-top: 24rpx; background-color: #fff; } .orderGoodsBox { background-color: #fff; } .userRemarkBox { width: 100%; padding: 0 24rpx; padding-bottom: 24rpx; } .refundPrice { font-size: 35rpx; font-weight: bold; } .qs-btn { width: auto; height: 60rpx; text-align: center; line-height: 60rpx; border-radius: 50rpx; color: #fff; font-size: 27rpx; padding: 0 3%; color: #aaa; border: 1px solid #ddd; margin-right: 20rpx; } .text-overflow { width: 392rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shuoming { width: 32rpx; height: 32rpx; } .mp-header { width: 100%; @include main_bg_color(theme); } .goodCall { @include main_color(theme); text-align: center; width: 100%; height: 86rpx; padding: 0 30rpx; border-bottom: 1rpx solid #eee; font-size: 30rpx; line-height: 86rpx; background: #fff; .icon-kefu { font-size: 36rpx; margin-right: 15rpx; } /* #ifdef MP */ button { display: flex; align-items: center; justify-content: center; height: 86rpx; font-size: 30rpx; @include main_color(theme); } /* #endif */ } .justify-between { justify-content: space-between; } .align-center { align-items: center; } .order-details .header { height: 250rpx; padding: 0 30rpx; } .bg_color { @include main_bg_color(theme); } .order-details .header.on { background-color: #666 !important; } .order-details .header .pictrue { width: 110rpx; height: 110rpx; margin-right: 27rpx; } .order-details .header .pictrue image { width: 100%; height: 100%; } .order-details .header .data { color: rgba(255, 255, 255, 0.8); font-size: 24rpx; } .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; } .picTxt { height: 150rpx; } .order-details .nav { background-color: #fff; font-size: 26rpx; color: #282828; padding: 27rpx 0; width: 100%; border-radius: 14rpx; } .order-details .nav .navCon { padding: 0 40rpx; } .order-details .nav .on { @include main_color(theme); } .font_color { @include main_color(theme); } .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; padding: 30rpx 0; .phone { margin-left: 20rpx; } } .order-details .address .name { font-size: 30rpx; color: #333; margin-bottom: 15rpx; } .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: 24rpx; padding: 24rpx; } .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; overflow: hidden; } .mark_show { color: #868686; width: 470rpx; text-align: right; } .order-details .wrapper .item .conter .copy { width: 70rpx; height: 40rpx; border-radius: 20rpx; display: inline-block; color: #333; margin-left: 24rpx; line-height: 40rpx; text-align: center; font-size: 20rpx; background-color: #f5f5f5; } .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; @include price_color(theme); } .order-details .footer { width: 100%; position: fixed; bottom: 0; left: 0; background-color: #fff; padding-right: 30rpx; box-sizing: border-box; height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/ height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/ padding-bottom: calc(0rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/ padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/ } .order-details .footer .bnt { width: 158rpx; height: 54rpx; text-align: center; line-height: 54rpx; 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: 15rpx; padding-bottom: 50rpx; } .order-details .writeOff .title { font-size: 30rpx; color: #282828; height: 87rpx; border-bottom: 1px solid #f0f0f0; padding: 0 24rpx; 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 { font-size: 30rpx; color: #282828; margin-top: 15rpx; background-color: #fff; padding: 0 24rpx; .title { line-height: 86rpx; border-bottom: 1px solid #f0f0f0; } } .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; } .refund { padding: 0 !important; margin-top: 15rpx; background-color: #fff; .title { display: flex; align-items: center; font-size: 30rpx; color: #333; height: 86rpx; border-bottom: 1px solid #f5f5f5; font-weight: 400; padding: 0 24rpx; image { width: 32rpx; height: 32rpx; margin-right: 10rpx; } } .con { font-size: 26rpx; color: #666666; padding: 30rpx 24rpx; } } .userRemark { width: 76%; display: inline-block; word-break: break-all; /* 允许在单词内换行 */ overflow-wrap: break-word; /* 在单词内换行的另一种实现方式 */ white-space: pre-wrap; /* 保持空白符序列,但是允许文本正常地换行 */ } .cor-86 { color: #666666; text-align: right; } .virtual_image { margin-left: 24rpx; width: 106rpx; height: 106rpx; border-radius: 8rpx; margin-right: 10rpx; &:last-child{ margin-right: 0; } }