|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="login-root">
|
|
<div class="login-root">
|
|
|
|
|
|
|
|
- <div class="bg-image"></div>
|
|
|
|
|
|
|
+ <div class="bg-image" v-if="!ui.loginBgVideo"></div>
|
|
|
<video v-if="ui.loginBgVideo" class="bg-video" autoplay muted loop playsinline>
|
|
<video v-if="ui.loginBgVideo" class="bg-video" autoplay muted loop playsinline>
|
|
|
<source src="@/assets/login/login-bg.mp4" type="video/mp4" />
|
|
<source src="@/assets/login/login-bg.mp4" type="video/mp4" />
|
|
|
</video>
|
|
</video>
|
|
@@ -39,6 +39,8 @@
|
|
|
import LoginForm from "@/components/ui/LoginForm.vue";
|
|
import LoginForm from "@/components/ui/LoginForm.vue";
|
|
|
import FullscreenToggle from "@/components/ui/FullscreenToggle.vue";
|
|
import FullscreenToggle from "@/components/ui/FullscreenToggle.vue";
|
|
|
import brand, { ui } from "@/utils/brand";
|
|
import brand, { ui } from "@/utils/brand";
|
|
|
|
|
+// webpack 解析为带 hash 的真实 URL,用于在登录页预取主页背景视频
|
|
|
|
|
+import mainBgVideo from "@/assets/main/main-bg.mp4";
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
name: "LoginPage",
|
|
name: "LoginPage",
|
|
@@ -49,10 +51,23 @@ export default {
|
|
|
ui,
|
|
ui,
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ this.prefetchMainBgVideo();
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
methods: {
|
|
|
onLoginSuccess() {
|
|
onLoginSuccess() {
|
|
|
this.$router.push('/main').catch(() => {});
|
|
this.$router.push('/main').catch(() => {});
|
|
|
},
|
|
},
|
|
|
|
|
+ // Login→Main 为固定路径,提前预取主页背景视频,进入主页时即命中缓存。
|
|
|
|
|
+ // 仅在主页视频开启时预取,避免为关闭视频的部署浪费带宽。
|
|
|
|
|
+ prefetchMainBgVideo() {
|
|
|
|
|
+ if (!this.ui.mainBgVideo || !mainBgVideo) return;
|
|
|
|
|
+ const link = document.createElement("link");
|
|
|
|
|
+ link.rel = "prefetch";
|
|
|
|
|
+ link.as = "video";
|
|
|
|
|
+ link.href = mainBgVideo;
|
|
|
|
|
+ document.head.appendChild(link);
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|