<template>
    <div class="eqData_title">
        <div class="eqData_title_center">{{ title }}</div>
        <div class="backHome"  v-if="backTo" @click="$router.push(backTo)">
            <i class="icon iconfont icon-leftArrow back_icon"></i>
            <div>返回流程选择页 </div>
        </div>

        <!-- 左右箭头 -->
        <div class="arrows_container">
            <div class="arrow_left" @click="$router.push('/flowSelect/m1')" v-if="title == 'M2流程'">
                <i class="icon iconfont icon-leftArrow arrow_icon"> </i>
                <div class="arrow_text">M1流程</div>
            </div>

            <div class="arrow_right" @click="$router.push('/flowSelect/m2')" v-if="title == 'M1流程'">
                <i class="icon iconfont icon-rightArrow arrow_icon"> </i>
                <div class="arrow_text">M2流程</div>
            </div>

        </div>
    </div>
</template>

<script setup>
defineProps({
    title: {
        type: String,
        required: true
    },
    backTo: {
        type: String,
        default: ''
    }
})
</script>

<style scoped lang="scss">
.eqData_title {
    background-image: url('@/assets/dcs/header.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // width: 1919.5px;
    width: 100%;
    height: 74.5px;
    flex-shrink: 0;
    position: relative;

    .backHome {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 6px;
        left: 40px;
        color: chartreuse;
        .back_icon {
            font-size: 50px;
            color: chartreuse;

        }

    }

    .eqData_title_center {
        font-family: PangMenZhengDao;
        font-size: 36px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 7.2px;
        background: linear-gradient(180deg, #FFF 32.33%, #00ABFF 130.49%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        // margin-top: 10px;
    }

    .arrows_container {

        .arrow_left,
        .arrow_right {
            .arrow_text {
                font-size: 20px;
                color: #FFF;
            }

            .arrow_icon {
                font-size: 70px;
                color: #00ABFF;
            }
        }

        .arrow_left {
            position: absolute;
            top: 450px;
            left: 30px;
        }

        .arrow_right {
            position: absolute;
            top: 450px;
            right: 30px;
        }
    }

}
</style>