page { background: #f6f6f6; padding-bottom: 148rpx; } .box { background: #ffffff; margin: 30rpx; padding: 30rpx; border-radius: 30rpx; .order-times { width: 90%; background: #FFFFFF; border: 1rpx solid #FFE300; border-radius: 30rpx; margin: 20rpx 5%; display: flex; justify-content: space-between; padding: 10rpx 30rpx; .order-date { display: flex; .date { margin-right: 20rpx; } } .price { color: red; } } .order-number { display: flex; justify-content: space-between; .number { font-size: 30rpx; } .state { font-size: 30rpx; } } .order-txt { display: flex; margin: 20rpx 0rpx 0 0; .order-image { width: 240rpx; height: 180rpx; margin-right: 20rpx; } .order-name { margin-top: 5rpx; .name { overflow: hidden; //一定要写 text-overflow: ellipsis; //超出省略号 display: -webkit-box; //一定要写 -webkit-line-clamp: 1; //控制行数 -webkit-box-orient: vertical; //一定要写 } .order-price { color: red; margin-top: 20rpx; } .order-time { margin-top: 20rpx; } } } .order-order { display: flex; justify-content: flex-end; margin-top: 20rpx; .bu { border: 1rpx solid #BBBBBB !important; border-radius: 24rpx !important; font-size: 30rpx !important; padding: 0rpx 20rpx !important; margin-right: 20rpx !important; background: #ffffff !important; } .service { border: 1rpx solid #BBBBBB; border-radius: 24rpx; font-size: 30rpx; padding: 20rpx 20rpx; margin-right: 20rpx; } .pay { // border: 1rpx solid #BBBBBB; border-radius: 24rpx; font-size: 30rpx; padding: 20rpx 0; width: 180rpx; text-align: center; background: #46a9a4; } } }