@page
@model xxtsoft.Web.Entry.Pages.hr.regModel
@{
    Layout = null;
}

<link href="~/vue/index.css" rel="stylesheet" />
<script src="~/vue/vue.global.js"></script>
<script src="~/vue/index.full.js"></script>

<div id="app">   
   
    <el-steps               
              :active="2"
              finish-status="success"
             
              simple>
        <el-step title="Done"></el-step>
        <el-step title="Processing"></el-step>
        <el-step title="Step 3"></el-step>
    </el-steps>
</div>
<script>
    const App = {
      data() {
        return {
        
        };
      },
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
<style scoped>
    /* 1️⃣ 隐藏 Element Plus 默认箭头（三角形伪元素） */
    .el-steps--simple .el-step__arrow::before,
    .el-steps--simple .el-step__arrow::after {
        display: none !important;
    }

    /* 2️⃣ 用横线代替箭头 */
    .el-steps--simple .el-step__arrow {
        position: relative;
        width: 40px; /* 控制横线长度 */
        height: 2px;
        background-color: var(--el-border-color);
        margin: 0 8px;
        top: 10px; /* 调整垂直位置 */
    }

    /* 3️ 激活或已完成状态的横线颜色 */
    .el-steps--simple .is-process + .el-step__arrow,
    .el-steps--simple .is-finish + .el-step__arrow {
        background-color: var(--el-color-primary);
    }

    .el-steps--simple .el-step__arrow {
        height: 1px;
        opacity: 0.7;
    }
</style>