cardsystem/pages/order/order.wxss

/*
 * 亿时代
 */

 .order-tab {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    height: 80rpx;
    line-height: 80rpx;
    z-index: 9;
    background: white;
}

.order-tab-item {
    font-size: 28rpx;
    width: 25%;
    text-align: center;
    border-bottom: solid 2rpx #f7f7f7;
    color: #464854;
    background: white;
    position: relative;
}

.order-tab-item.active {
    color: #f57e32;
}

.order-tab-item::after {
    content: '';
    position: absolute;
    width: 30rpx;
    height: 4rpx;
    background: transparent;
    left: calc(50% - 15rpx);
    bottom: -2rpx;
}

.order-tab-item.active::after {
    background: #f57e32;
}

.state-tips {
    position: absolute;
    top: 10rpx;
    right: 14rpx;
    background: #e92706;
    color: #fff;
    font-size: 24rpx;
    transform: scale(.7, .7);
    border-radius: 60rpx 60rpx 60rpx 0;
    width: 48rpx;
    height: 34rpx;
    line-height: 34rpx;
}

/* 订单列表 */

.order-content {
    padding: 80rpx 0 20rpx 0;
}

.order-content-li {
    background: white;
    margin-top: 20rpx;
    position: relative;
}

.order-name {
    background: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    border-bottom: solid 1rpx #f3f3f3;
    display: flex;
}

.order-name image {
    background: linear-gradient(#000, #000);
    background-blend-mode: lighten;
    background-size: cover;
    width: 26rpx;
    height: 26rpx;
    border-radius: 50%;
    margin: 8rpx 14rpx 0 0;
}

.order-store {
    padding: 20rpx;
    border-bottom: solid 1rpx #f3f3f3;
    display: flex;
}

.order-goods-tips {
    display: flex;
}

.order-goods-tips text {
    display: inline-block;
    background: #e92706;
    color: #fff;
    border-radius: 20rpx;
    padding: 0 20rpx;
    height: 42rpx;
    line-height: 42rpx;
    font-size: 24rpx;
    transform: scale(.8, .8);
}

text.order-goods-tips-color {
    background: #e6b329;
}

.order-store-stateText {
    color: #e6b329;
    font-size: 26rpx;
}

.order-store-stateText.red {
    color: #e92344;
}

.order-store-stateText.green {
    color: #79b300;
}

.order-store-title {
    flex: 1;
    color: #999;
    font-size: 28rpx;
}

.order-store-orderid {
    color: #747788;
    font-size: 25rpx;
}

.order-store-title text {
    color: white;
    font-size: 24rpx;
    background: #e92344;
    margin-right: 10rpx;
    padding: 0 10rpx;
}

.order-goods {
    padding: 20rpx;
    box-sizing: border-box;
    position: relative;
}

.order-goods-cover {
    width: 150rpx;
    height: 150rpx;
    vertical-align: top;
    border-radius: 4rpx;
}

.order-goods-content {
    position: absolute;
    left: 190rpx;
    top: 20rpx;
    right: 20rpx;
    width: calc(100% - 210rpx);
}

.order-goods-content-name {
    margin-bottom: 10rpx;
    font-size: 30rpx;
    font-weight: 600;
}

.order-goods-content-price {
    color: #747788;
    display: flex;
    margin-top: 10rpx;
    font-size: 28rpx;
}

.order-goods-content-price text {
    color: #f57e32;
    display: inline-block;
    margin-right: 10rpx;
    font-size: 30rpx;
}

.order-total {
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 26rpx;
    line-height: 50rpx;
    color: #747788;
    display: flex;
}

.order-total view {
    margin-right: 30rpx;
}

.order-total text {
    color: #e92344;
    font-weight: bold;
}

.order-btns {
    font-size: 25rpx;
    display: flex;
    padding: 20rpx;
    box-sizing: border-box;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.order-btn {
    margin-left: 20rpx;
    height: 52rpx;
    line-height: 50rpx;
    box-sizing: border-box;
    border: solid 1rpx #747788;
    padding: 0 20rpx;
    border-radius: 30rpx;
}

.order-btn-back {
    border-color: #f57e32;
    color: #f57e32;
}

.orderVirtual {
    background: #f57e32;
    color: #fff;
    border-radius: 4rpx;
    display: inline-block;
    font-size: 24rpx;
    padding: 2rpx 8rpx
}

.orderVirtual.active {
    background: #88be2d;
}