sso-ssr/components/mobile/validation/phoneValidationFail.vue

<template>
  <div class="validation">
    <div class="content">
      <div class="content-bottom">
        <p class="passed"><img src="/images/all/times.png" alt=""/>链接已失效</p>
        <span class="close-tip">邮箱链接因超时未点击或其他原因已失效，请重新验证！</span>
        <div class="close-btn" @click="goCloudCenter">返回云中心</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'validation',
    methods: {
//      跳转至云中心页面
      goCloudCenter () {
        if (this.$route.query.returnURL) {
          window.location.href = decodeURIComponent(this.$route.query.returnURL)
        } else {
          this.$router.push('/cloudcenter')
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .validation {
    margin: 0 auto;
    width: 100%;
    background: #eee;
  .content {
    padding: 0 .5rem;
    margin: .5rem auto 0;
    width: 100%;
    text-align: center;
    background: #fff;

  .content-bottom {
    margin: 0 auto;
    padding-bottom: .5rem;
    width: 3.6rem;

  div.warp {
    padding-bottom: .65rem;
  }

  p {
    font-size: .24rem;
    color: #323232;

  img {
    margin-right: .2rem;
    width: .3rem;
    height: .28rem;
  }

  }
  p.pass {
    font-size: .24rem;
    color: #e77405;

  img {
    height: .3rem;
  }

  }
  p.passed {
    padding-top: .5rem;
    color: #e77405;

  img {
    height: .3rem;
  }

  }
  span {
    display: inline-block;
    text-align: left;
    font-size: .2rem;
    color: #8b8b8b;
  }

  span.close-tip {
    margin: .25rem 0 1rem 0;
  }

  .close-btn {
    margin: 0 auto;
    width: 1.7rem;
    height: .38rem;
    line-height: .38rem;
    font-size: .18rem;
    text-align: center;
    color: #323232;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    cursor: pointer;
  }

  }
  }
  }
</style>