<!--
   @description: 账户安全 账号密码 主页
   @author: XWl
-->
<template>
  <div class="setep">
    <el-steps :active="active" simple finish-status="success" process-status="finish">
      <el-step title="1.验证身份" />
      <el-step title="2.设置新密码" />
      <el-step title="3.完成" />
    </el-steps>
    <!--内容-->
    <div class="myverify_main">
      <div style="width: 364px;margin: 0 auto">
        <myverify v-if="active===0" />
        <myverify2 v-if="active===1" />
        <myverify3 v-if="active===2" />
      </div>
    </div>
  </div>
</template>

<script>
import myverify from '@/views/shopmall/tabcenter.js/myverify'
import myverify2 from '@/views/shopmall/tabcenter.js/myverify2'
import myverify3 from '@/views/shopmall/tabcenter.js/myverify3'
export default {
  name: 'MyverifyIndex',
  components: {
    myverify,
    myverify2,
    myverify3
  },
  data() {
    return {
      active: 0
    }
  },
  created() {
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 2
    }
  }
}
</script>

<style scoped lang="less">
  .setep{
    margin-top: 20px;
  }
  .setepThis{
    border: 1px solid #e4e4e4;
  }
  .myverify_main{
    margin-top: 10px;
    border: 1px solid #e4e4e4;;
    padding: 40px 0px;
  }

</style>
