<template>
  <div class="itembody">
   <div class="centers">
     <div class="box">
       <i class="el-icon-check"></i>
     </div>
     <p>提交成功，感谢您的建议</p>
     <p style="margin-top: 10px;width: 225px">将于 <i style="color: #1b7cff">{{time}}s </i>后跳转到首页
       <el-button type="text" style="font-size: 16px" @click="tiaozhuan">立即跳转</el-button>
     </p>
   </div>
  </div>

</template>

<script>
  export default {
    data(){
      return{
        time:3      //几秒后跳转设置几秒
      }
    },
    mounted() {
      //设置定时器（每隔1s执行一次）
     let time = setInterval(()=>{
        this.go()
      },1000)

      //设置定时器（3s后清除 setInterval 这个定时器 并且执行跳转页面）
      setTimeout(()=>{
        clearInterval(time)  //清除定时器
        this.tiaozhuan()      // 跳转页面
      },3000)
    },
    methods:{
      go(){
        if (this.time <= 0){
          this.time = 0
        }else {
          this.time = this.time - 1
        }
      },
      tiaozhuan(){
        this.$router.push("/")
      },
    }
  };
</script>

<style scoped>
  i{
    font-style: normal;
  }
  .itembody {
    position: relative;
    height: 100%;
  }
 .itembody .centers {
   position: absolute;
   top: 36%;
   left: 52%;
   transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
    align-items: center;
 }
 .centers p{
   margin-top: 20px;
   color: #c2c2c2;
 }

  .box {
    width: 120px;
    height: 120px;
    background: #1b7cff;
    border-radius: 50%;
    position: relative;
  }

  .box i {
    position: absolute;
    font-size: 60px;
    font-weight: 700;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }
</style>