动态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()},