<template>

    <div class="lineContent">
        <div class="line-item" :class="{active:nowStep>=1}">
            <div class="title">提交订单</div>
            <div class="ball">1</div>
        </div>
        <div class="line-item" :class="{active:nowStep>=2}">
            <div class="title">支付到第三方平台</div>
            <div class="ball">2</div>
        </div>
        <div class="line-item" :class="{active:nowStep>=3}">
            <div class="title">物流发货</div>
            <div class="ball">3</div>
        </div>
        <div class="line-item" :class="{active:nowStep>=4}">
            <div class="title">评价</div>
            <div class="ball">4</div>
        </div>
        <div class="line">
            <div class="line-color" :style="{width:(nowStep*25)+'%'}"></div>
        </div>
    </div>

</template>

<script>
export default {
    name: 'orderStep',
    data() {
        return {
            nowStep: 1,
        }
    },
    watch: {
        $route() {
            this.getStep()
        }
    },
    computed: {
    },
    mounted() {
        this.getStep()
    },
    methods: {
        getStep() {
            if (this.$route.name == 'submit') {
                this.nowStep = 1
            }
            else if (this.$route.name == 'payOrder') {
                this.nowStep = 2
            }
            else if (this.$route.name == 'orderDetail') {
                this.nowStep = 3
            }
        }

    }
}
</script>

<style lang="less" scoped>
.Head {
    height: 70px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 2px 0px rgba(199, 199, 199, 0.5);
    .HeadContent {
        width: 1190px;
        margin: auto;
        height: 70px;
        line-height: 70px;

        img {
            width: 300px;
            height: 54px;
            vertical-align: middle;
        }
    }
}

.lineContent {
    width: 1190px;
    margin: auto;
    padding: 37px 0 41px;
    font-size: 0;
    position: relative;
    .line-item {
        width: 25%;
        display: inline-block;
        z-index: 2;
        position: relative;

        .title {
            font-size: 12px;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            line-height: 16px;
            text-align: center;
        }

        .ball {
            width: 20px;
            height: 20px;
            background: rgba(198, 198, 198, 1);
            border: 2px solid rgba(151, 151, 151, 0.5);
            font-size: 12px;
            font-family: MicrosoftYaHei;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
            text-align: center;
            border-radius: 100%;
            margin: 8px auto 0;
        }

        &.active {
            .title {
                color: #0b9ec0;
            }
            .ball {
                background: #1bb8ac;
                border-color: #0b9ec0;
            }
        }
    }

    .line {
        width: 100%;
        height: 8px;
        background: rgba(204, 204, 204, 1);
        border-radius: 4px;
        position: absolute;
        bottom: 49px;
        left: 0;
        z-index: 1;

        .line-color {
            height: 8px;
            background: linear-gradient(141deg, rgba(27, 184, 172, 1) 0%, rgba(0, 142, 205, 1) 100%);
            border-radius: 4px;
        }
    }
}

.order {
    width: 1190px;
    margin: auto;
}
</style>
