
.top {
    display: flex;
    align-items: center;
    margin: .48rem 1.2rem 1.2rem;

}

.nowTime,
.nowWeek,
.nowDate {
    display: flex;
}

.nowTime::after {
    content: attr(data-time);
    color: #BBC0D3;
    font-size: .56rem;
    font-family: number;
}

.nowWeek::after {
    content: attr(data-week);
    color: #BBC0D3;
    font-size: .26rem;
    font-family: number;
}

.nowDate::after {
    content: attr(data-date);
    color: #BBC0D3;
    font-size: .26rem;
    font-family: number;
}

.bigTitle {
    font-size: .4rem;
    color: #FFFFFF;
}

.columnPersent1 {
    display: flex;
    height: .2rem;
}

.columnPersent1>span {
    width: 100%;
}

.columnPersent1:before {
    content: '';
    border: solid;
    border-width: .1rem .05rem;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.columnPersent1:after {
    content: '';
    border: solid;
    border-width: .1rem .05rem;
    border-top-color: transparent;
    border-right-color: transparent;
}

.columnPersent1:first-child>span {
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem;
}

.columnPersent1:first-child:before {
    display: none;
}

.columnPersent1:last-child>span {
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem;
}

.columnPersent1:last-child:after {
    display: none;
}

.circleIcon {
    display: flex;
    background-color: #000000;
    width: .24rem;
    height: .24rem;
    border-radius: 50%;
    border: .04rem solid;
    border-color: #3644E6;
}

.numberIcon {
    height: .5rem;
    width: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .4rem;
    font-weight: bold;
    border-radius: .06rem;
    color: #FFFFFF;
}

.orderItem {
    height: .62rem;
    width: 100%;
    padding: 0 .2rem;
    margin-top: .05rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.differenceQuantity {
    display: flex;
    position: relative;
}

.differenceQuantity.more::before {
    content: '';
    display: flex;
    border: solid;
    border-color: transparent transparent #51FF01 transparent;
    border-width: .08rem .1rem;
    position: absolute;
    bottom: .05rem;
    left: -.3rem;
}

.differenceQuantity.less::before {
    content: '';
    display: flex;
    border: solid;
    border-color: #DD382F transparent transparent transparent;
    border-width: .08rem .1rem;
    position: absolute;
    bottom: .05rem;
    left: -.25rem;
}

.differenceQuantity.more::after {
    content: attr(data-value);
    color: #51FF01;
    font-family: number;
    font-size: .3rem;
}

.differenceQuantity.less::after {
    content: attr(data-value);
    color: #DD382F;
    font-family: number;
    font-size: .3rem;
}

.inStockIcon {
    display: flex;
    width: .24rem;
    height: .24rem;
    border-radius: 50%;
    box-sizing: border-box;
    border: #9243EC solid .04rem;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: .3rem;
}

.inStockIcon:before {
    content: '';
    border: #9243EC solid .02rem;
    display: flex;
    height: 0.04rem;
    width: .1rem;
    box-sizing: border-box;
    position: absolute;
    top: calc(50% - .02rem);
    left: -.1rem;
}

.inStockIcon:after {
    content: '';
    border: #9243EC solid .02rem;
    display: flex;
    height: 0.04rem;
    width: .1rem;
    box-sizing: border-box;
    position: absolute;
    top: calc(50% - .02rem);
    right: -.1rem;
}

.outStockIcon {
    display: flex;
    width: .24rem;
    height: .24rem;
    border-radius: 50%;
    box-sizing: border-box;
    border: #E84571 solid .04rem;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: .3rem;
}

.outStockIcon:before {
    content: '';
    border: #E84571 solid .02rem;
    display: flex;
    height: 0.04rem;
    width: .1rem;
    box-sizing: border-box;
    position: absolute;
    top: calc(50% - .02rem);
    left: -.1rem;
}

.outStockIcon:after {
    content: '';
    border: #E84571 solid .02rem;
    display: flex;
    height: 0.04rem;
    width: .1rem;
    box-sizing: border-box;
    position: absolute;
    top: calc(50% - .02rem);
    right: -.1rem;
}