.orderListItem{ width: 100%; position: relative; overflow: hidden; .title{ width: 100%; position: relative; overflow: hidden; align-items: center; &>div:nth-child(1){ width: .5rem; text-align: center; *{ display: inline-block; font-size: .1rem; line-height: .17rem; } i{ font-size: .15rem; } } &>div:nth-child(1).orange{ *{ color: #fc6243; } } &>div:nth-child(1).grey{ *{ color: #ccc; } } &>div:nth-child(1).green{ *{ color: #63c86f; } } &>div:nth-child(2){ margin-right: .1rem; &>div{ width: 100%; position: relative; overflow: hidden; span{ width: 100%; display: block; font-size: .14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } &>span{ font-size: .11rem; color: #666; margin-right: .15rem; } } .line{ width: 100%; height: .2rem; position: relative; overflow: hidden; &>div{ width: 100%; position: absolute; overflow: hidden; left: 0; top: 50%; transform: translateY(-50%) translateX(-.035rem); -webkit-transform: translateY(-50%) translateX(-.035rem); font-size: 0; white-space: nowrap; i{ display: inline-block; width: .07rem; height: .07rem; position: relative; overflow: hidden; border-radius: 100%; background: #eee; margin-right: .1rem; } } } .list{ &>div{ margin: 0 .15rem; &>ul{ margin: .06rem auto; &>li{ font-size: 0; white-space: nowrap; &>*{ display: inline-block; vertical-align: middle; width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &>span{ line-height: .26rem; font-size: .14rem; color: #555; } &>div{ text-align: right; font-size: 0; span{ font-size: .11rem; line-height: .26rem; color: #666; } } } } } } }