Sfoglia il codice sorgente

背景视频加载失败/预加载兜底:登录页 + 主页面常驻背景图层

画安 1 mese fa
parent
commit
07b5ddfc06
4 ha cambiato i file con 19 aggiunte e 12 eliminazioni
  1. BIN
      src/assets/login/login-bg.jpg
  2. BIN
      src/assets/main/main-bg.jpg
  3. 10 11
      src/views/Login.vue
  4. 9 1
      src/views/Main.vue

BIN
src/assets/login/login-bg.jpg


BIN
src/assets/main/main-bg.jpg


+ 10 - 11
src/views/Login.vue

@@ -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 {

+ 9 - 1
src/views/Main.vue

@@ -1,6 +1,8 @@
 <template>
   <LoginLayout>
     <template #background>
+      <!-- 视频背景:图片常驻底层,视频加载完成后盖在上面;失败/预加载期间图片直接可见 -->
+      <div class="bg-image"></div>
       <video class="bg-video" autoplay muted loop playsinline>
         <source src="@/assets/main/main-bg.mp4" type="video/mp4" />
       </video>
@@ -199,6 +201,12 @@ export default {
 
 <style scoped>
 /* ================= 全局与背景层 ================= */
+.bg-image {
+  position: absolute;
+  inset: 0;
+  background: url('@/assets/main/main-bg.jpg') no-repeat center / cover;
+  z-index: 0;
+}
 .bg-video {
   position: absolute;
   top: 50%;
@@ -207,7 +215,7 @@ export default {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  z-index: 0;
+  z-index: 1;
 }
 
 /* ================= 菜单整体布局 ================= */