动态loading中转页

动态loading中转页

template

    <div class="loading">
      <div class="wavy">
        <!-- --i是自定义属性，可通过var函数调用 -->
        <span style="--i: 1">登</span>
        <span style="--i: 2">录</span>
        <span style="--i: 3">中</span>
        <span style="--i: 4">请</span>
        <span style="--i: 5">稍</span>
        <span style="--i: 6">等</span>
        <span style="--i: 7">.</span>
        <span style="--i: 8">.</span>
        <span style="--i: 9">.</span>
      </div>
    </div>

css

<style lang="scss" scoped>
  .loading {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wavy {
    position: relative;
    -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  }

  .wavy span {
    position: relative;
    display: inline-block;
    color: rgb(21, 144, 214);
    font-size: 50px;
    text-transform: uppercase;
    letter-spacing: 8px;
    /* 执行动画：动画名 时长 加速后减速 无限次播放 */
    animation: wavyAnimate 1s ease-in-out infinite;
    /* 通过var函数调用自定义属性--i，在计算出动画延迟时间 */
    animation-delay: calc(0.1s * var(--i));
  }

  @keyframes wavyAnimate {
    0% {
      transform: translateY(0);
    }

    20% {
      transform: translateY(-20px);
    }

    40%,
    100% {
      transform: translateY(0);
    }
  }
  .button-copy {
    margin-top: 100px;
    width: 100vw;
    height: 100px;
    background: $base-color-main;
    color: #fff;
    text-align: center;
    line-height: 100px;
  }
</style>

路由拦截到中转页关闭当前窗口 写在中转页

注意:在首页的路由meta标签里面要写入
close:true

    beforeRouteEnter(to, form, next) {
      if (form.meta.close == true) {
        next((vm) => {
          vm.$ww.closeWindow()
          next()
        })
      }
      next()
    },