|
|
@@ -1,11 +1,11 @@
|
|
|
<template>
|
|
|
<div class="login-root">
|
|
|
|
|
|
- <!-- 视频背景 -->
|
|
|
- <video class="bg-video" autoplay muted loop playsinline @error="videoBgFailed = true">
|
|
|
+ <!-- 视频背景:图片常驻底层,视频加载完成后盖在上面;失败/预加载期间图片直接可见 -->
|
|
|
+ <div class="bg-image"></div>
|
|
|
+ <video class="bg-video" autoplay muted loop playsinline>
|
|
|
<source src="@/assets/login/login-bg.mp4" type="video/mp4" />
|
|
|
</video>
|
|
|
- <div v-if="videoBgFailed" class="bg-fallback"></div>
|
|
|
|
|
|
<!-- 顶部居中 Logo -->
|
|
|
<header class="top-bar">
|
|
|
@@ -53,7 +53,6 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
brand,
|
|
|
- videoBgFailed: false,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -75,6 +74,12 @@ export default {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
+.bg-image {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: url('@/assets/login/login-bg.jpg') no-repeat center / cover;
|
|
|
+ z-index: 0;
|
|
|
+}
|
|
|
.bg-video {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
@@ -83,13 +88,7 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
- z-index: 0;
|
|
|
-}
|
|
|
-.bg-fallback {
|
|
|
- position: absolute;
|
|
|
- inset: 0;
|
|
|
- background: url('@/assets/images/login-background.png') no-repeat center / cover;
|
|
|
- z-index: 0;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
|
|
|
.top-bar {
|