<template>
  <div class="container">
    <el-steps :active="activeIndex" align-center>
      <el-step title="填写手机号或邮箱">123</el-step>
      <el-step title="验证身份"></el-step>
      <el-step title="设置新密码"></el-step>
    </el-steps>
    <div v-if="activeIndex === 0" class="account-input">
      <el-tabs>
        <el-tab-pane label="通过手机找回">
          <el-input placeholder="请输入电话号码"></el-input>
        </el-tab-pane>
        <el-tab-pane label="通过邮箱找回">
          <el-input placeholder="请输入电子邮箱"></el-input>
        </el-tab-pane>
      </el-tabs>
      <el-button
        style="width: 50%; margin-top: 20px"
        type="primary"
        @click="activeIndex = 1"
        >下一步</el-button
      >
    </div>
    <div v-else-if="activeIndex === 1">验证身份</div>
    <div v-else-if="activeIndex === 2">第三部</div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const activeIndex = ref(0);
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 120px 240px 0;

  :deep(.el-steps) {
    width: 100%;

    .el-step__title {
      &.is-process {
        color: #0c77ff;
      }
    }

    .el-step__head {
      .el-step__line {
        background-color: #c9d2de;
      }

      .el-step__icon {
        border-radius: 2px;
        transform: rotate(45deg);
        background-color: #c9d2de;
        border: none;

        .el-step__icon-inner {
          transform: rotate(-45deg);
          color: #ffffff;
        }
      }

      &.is-process,
      &.is-finish {
        .el-step__icon {
          background-color: #0c77ff;
        }
      }
    }
  }

  .account-input {
    margin-top: 120px;
    width: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    :deep(.el-tabs) {
      width: 100%;

      .el-tabs__nav-wrap::after {
        display: none;
      }

      .el-tabs__nav-scroll {
        .el-tabs__nav {
          width: 100%;

          .el-tabs__active-bar {
            width: 50%;
          }

          .el-tabs__item {
            width: 50%;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
