From 7c40b18777f9ef3f5ad6a98732fe40b10a10dbe5 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Mon, 5 Jan 2026 17:44:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E7=BB=84=E4=BB=B6):=20=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E5=9B=BE=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=94=A8=E4=BA=8E?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8img=E6=A0=87=E7=AD=BE=E6=9B=BF=E4=BB=A3backIm?=
 =?UTF-8?q?age=E7=9A=84=E7=94=A8=E6=B3=95=EF=BC=8C=E4=BB=A5=E4=BE=BF?=
 =?UTF-8?q?=E4=BA=8E=E4=BD=BF=E7=94=A8v-smart-img=E6=8C=87=E4=BB=A4?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BackgroundLayer.vue | 76 ++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/components/BackgroundLayer.vue

diff --git a/src/components/BackgroundLayer.vue b/src/components/BackgroundLayer.vue
new file mode 100644
index 0000000..f57feb0
--- /dev/null
+++ b/src/components/BackgroundLayer.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="bg-layer" :style="layerStyle">
+    <img
+      v-for="(imgSrc, index) in backgroundImages"
+      :key="index"
+      v-smart-img
+      :src="imgSrc"
+      :alt="`background-${index}`"
+      :class="['bg-image', imageClass]"
+      :style="imageStyle"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  // 背景图片数组
+  backgroundImages: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+
+  // 层级样式
+  layerStyle: {
+    type: Object,
+    default: () => ({
+      width: '100vw',
+      minHeight: '100vh',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      zIndex: 0,
+      pointerEvents: 'none',
+    }),
+  },
+
+  // 图片样式
+  imageStyle: {
+    type: Object,
+    default: () => ({
+      width: '100vw',
+      objectFit: 'cover',
+      objectPosition: 'center top',
+      display: 'block',
+    }),
+  },
+
+  // 图片类名
+  imageClass: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<style scoped>
+.bg-layer {
+  width: 100vw;
+  min-height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.bg-image {
+  width: 100vw;
+  object-fit: cover;
+  object-position: center top;
+  display: block;
+}
+</style>