完成中间页面跳转

src/router/routes.ts

@@ -84,6 +84,12 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('@/views/compliance-registration/index.vue'),
     meta: { title: '页面跳转中', requiresAuth: false },
   },
+  {
+    path: '/training-entry',
+    name: 'TrainingEntry',
+    component: () => import('@/views/training-entry/index.vue'),
+    meta: { title: '页面跳转中', requiresAuth: false },
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: '/login',

src/views/training-entry/index.vue

@@ -0,0 +1,233 @@
+<template>
+  <main class="redirect-page">
+    <div class="glow glow-top" aria-hidden="true"></div>
+    <div class="glow glow-bottom" aria-hidden="true"></div>
+
+    <section class="redirect-card" aria-labelledby="redirect-title" aria-live="polite">
+      <div class="icon-wrap" aria-hidden="true">
+        <van-icon name="records-o" />
+      </div>
+
+      <h1 id="redirect-title">正在前往培训页面</h1>
+      <p class="description">培训页面即将打开，请稍候</p>
+
+      <div class="loading-status">
+        <van-loading type="spinner" size="18px" color="#1677ff" />
+        <span>正在安全跳转...</span>
+      </div>
+
+      <button type="button" class="redirect-button" @click="redirectToTrainingEntry">
+        立即前往
+        <van-icon name="arrow" />
+      </button>
+
+      <p class="fallback-tip">若未自动跳转，请点击上方按钮</p>
+    </section>
+
+    <footer class="page-footer">
+      <van-icon name="shield-o" aria-hidden="true" />
+      <span>安全跳转 · 请放心访问</span>
+    </footer>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue'
+
+const TRAINING_ENTRY_URL = 'https://c.yaoyi.net/h5/#/pages/artile/training-entry'
+const REDIRECT_DELAY = 1000
+
+let redirectTimer: number | undefined
+
+const redirectToTrainingEntry = (): void => {
+  window.location.replace(`${TRAINING_ENTRY_URL}${window.location.search}`)
+}
+
+onMounted(() => {
+  redirectTimer = window.setTimeout(redirectToTrainingEntry, REDIRECT_DELAY)
+})
+
+onBeforeUnmount(() => {
+  if (redirectTimer !== undefined) {
+    window.clearTimeout(redirectTimer)
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.redirect-page {
+  position: relative;
+  display: flex;
+  min-height: 100vh;
+  min-height: 100dvh;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: calc(28px + env(safe-area-inset-top, 0px)) 22px
+    calc(68px + env(safe-area-inset-bottom, 0px));
+  background: linear-gradient(160deg, #f7faff 0%, #edf5ff 54%, #f7fbff 100%);
+  color: #1f2937;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  box-sizing: border-box;
+}
+
+.glow {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.glow-top {
+  top: -92px;
+  right: -76px;
+  width: 238px;
+  height: 238px;
+  background: radial-gradient(circle, rgba(39, 133, 255, 0.18) 0%, transparent 70%);
+}
+
+.glow-bottom {
+  bottom: -116px;
+  left: -90px;
+  width: 286px;
+  height: 286px;
+  background: radial-gradient(circle, rgba(80, 173, 255, 0.14) 0%, transparent 70%);
+}
+
+.redirect-card {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 360px;
+  padding: 38px 24px 26px;
+  border: 1px solid rgba(255, 255, 255, 0.92);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 18px 48px rgba(49, 98, 157, 0.12);
+  text-align: center;
+  box-sizing: border-box;
+  backdrop-filter: blur(12px);
+
+  h1,
+  p {
+    margin: 0;
+  }
+
+  h1 {
+    margin-top: 22px;
+    color: #172033;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.4;
+  }
+}
+
+.icon-wrap {
+  position: relative;
+  display: flex;
+  width: 68px;
+  height: 68px;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  border-radius: 22px;
+  background: linear-gradient(145deg, #1677ff 0%, #39a5ff 100%);
+  box-shadow: 0 12px 28px rgba(22, 119, 255, 0.26);
+  color: #fff;
+  font-size: 31px;
+
+  &::after {
+    position: absolute;
+    inset: -7px;
+    border: 1px solid rgba(22, 119, 255, 0.12);
+    border-radius: 27px;
+    content: '';
+  }
+}
+
+.redirect-card .description {
+  margin-top: 8px;
+  color: #7a8495;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.loading-status {
+  display: flex;
+  min-height: 46px;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  margin-top: 24px;
+  border-radius: 12px;
+  background: #f4f8fd;
+  color: #526176;
+  font-size: 13px;
+}
+
+.redirect-button {
+  display: flex;
+  width: 100%;
+  height: 46px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  margin-top: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 23px;
+  background: linear-gradient(90deg, #1677ff 0%, #2998ff 100%);
+  box-shadow: 0 9px 20px rgba(22, 119, 255, 0.22);
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+
+  &:active {
+    opacity: 0.86;
+    transform: translateY(1px);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #1677ff;
+    outline-offset: 3px;
+  }
+}
+
+.redirect-card .fallback-tip {
+  margin-top: 13px;
+  color: #a0a8b4;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.page-footer {
+  position: absolute;
+  right: 0;
+  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  color: #9ba8b8;
+  font-size: 12px;
+}
+
+@media (max-width: 360px) {
+  .redirect-page {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .redirect-card {
+    padding: 32px 20px 23px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .redirect-button:active {
+    transform: none;
+  }
+}
+</style>