<!--this.$router.push('/driveCabin')-->
<template>
  <div style="background: #fff; height: 100vh">
    <div class="errPage-container">
      <el-row>
        <el-col :span="14">
          <img
            src="@/assets/img/icon-success.png"
            style="width: 100%"
            alt="授权成功"
          />
        </el-col>
        <el-col :span="10">
          <div class="text-jumbo text-ginormous">授权成功!</div>
          <h2>{{ timeNum }} 秒后页面将自动返回到首页</h2>
          <p style="padding-top: 30px">或者，你可以</p>
          <p>
            <el-button type="text" @click="$router.push('/driveCabin')">
              立即回首页
            </el-button>
          </p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timeNum: 10,
      };
    },
    created() {
      // <!--this.$router.push('/driveCabin')-->
      let times = setInterval(() => {
        this.timeNum = this.timeNum - 1;
        if (this.timeNum === 0) {
          clearInterval(times);
          this.$router.push("/");
        }
      }, 1000);
    },
    methods: {},
  };
</script>

<style scoped>
  .text-ginormous {
    margin: 40px 0;
  }
  .errPage-container {
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 150px;
  }
  .errPage-container .pan-back-btn {
    background: #409eff;
    color: #fff;
    border: none !important;
  }
  .errPage-container .pan-gif {
    margin: 0 auto;
    display: block;
  }
  .errPage-container .pan-img {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  .errPage-container .text-jumbo {
    font-size: 60px;
    color: #484848;
  }
  .errPage-container .list-unstyled {
    font-size: 14px;
    padding-left: 40px;
  }
  .errPage-container .list-unstyled li {
    padding-bottom: 5px;
    list-style: outside;
  }
  .errPage-container .list-unstyled a {
    color: #409eff;
    text-decoration: none;
  }
  .errPage-container .list-unstyled a:hover {
    text-decoration: underline;
  }
</style>
