.page-wrap { padding-top: 82.42rpx; } .tabs-panel { position: fixed; left: 0; top: 0; right: 0; height: 82.42rpx; background: #fff; display: flex; z-index: 1; &::before, &::after { content: ''; position: absolute; left: 0; right: 0; height: 1rpx; background: #e0e0e0; } &::before { top: 0; } &::after { bottom: 0; } .item { flex: 1; text-align: center; font-size: 27.47rpx; color: #999; line-height: 82.42rpx; position: relative; & + .item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1rpx; background: #e0e0e0; } } .active { color: #00bcd2; &::after { content: ''; position: absolute; left: 0%; right: 0%; bottom: 0%; height: 5.49rpx; background: #00bcd2; z-index: 1; } } } .order-panel { padding: 13.74rpx 0; .item { background: #fff; & + .item { margin-top: 13.74rpx; } } .head { display: flex; align-items: center; padding: 0 27.47rpx; height: 82.42rpx; border-bottom: 1rpx solid #e0e0e0; .icon { width: 35.71rpx; height: 35.71rpx; } .business { margin: 0 13.74rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; font-size: 27.47rpx; color: #333; } .state { font-size: 27.47rpx; color: #f97631; } } .content { position: relative; height: 206.04rpx; padding: 27.47rpx 219.78rpx 27.47rpx 27.47rpx; box-sizing: border-box; .name { font-size: 32.97rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10.99rpx; } .text { font-size: 27.47rpx; color: #999; } .money { font-size: 27.47rpx; color: #666; white-space: nowrap; position: absolute; top: 96.15rpx; right: 27.47rpx; } .sub { position: absolute; right: 27.47rpx; top: 54.95rpx; font-size: 27.47rpx; color: #666; } } }