From 8b8b519b8e4e9f7f37106a5355ff973a7aaaa795 Mon Sep 17 00:00:00 2001
From: minimaxagent1 <minimaxagent1@gmail.com>
Date: Thu, 31 Jul 2025 14:42:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=E7=89=87=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/base-background/README.md          |  1 +
 .../base-background/base-background.vue       | 54 +++++++++++++++++++
 pages/monk/monkDetail.vue                     | 16 ++----
 3 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 components/base-background/README.md
 create mode 100644 components/base-background/base-background.vue

diff --git a/components/base-background/README.md b/components/base-background/README.md
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/components/base-background/README.md
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/components/base-background/base-background.vue b/components/base-background/base-background.vue
new file mode 100644
index 0000000..1dda93b
--- /dev/null
+++ b/components/base-background/base-background.vue
@@ -0,0 +1,54 @@
+<template>
+  <image 
+    class="background-image" 
+    :src="backgroundSrc" 
+    :mode="mode"
+    :style="customStyle"
+  ></image>
+</template>
+
+<script>
+import CommonEnum from "../../enum/common";
+
+export default {
+  name: 'BaseBackground',
+  props: {
+    // 背景图片源，如果不传则使用默认背景
+    src: {
+      type: String,
+      default: ''
+    },
+    // 图片裁剪模式
+    mode: {
+      type: String,
+      default: 'aspectFill'
+    },
+    // 自定义样式
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    CommonEnum() {
+      return CommonEnum
+    },
+    // 背景图片源，优先使用传入的src，否则使用默认背景
+    backgroundSrc() {
+      return this.src || CommonEnum.BACKGROUND
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  border-radius: 16rpx;
+}
+</style> 
\ No newline at end of file
diff --git a/pages/monk/monkDetail.vue b/pages/monk/monkDetail.vue
index ace497c..58bc0c7 100644
--- a/pages/monk/monkDetail.vue
+++ b/pages/monk/monkDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="page">
     <custom-navbar title="高僧详情" />
-    <image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
+    <base-background />
     <view class="container">
       <view class="header">
         <view class="content">
@@ -49,10 +49,12 @@ import CommonEnum from "../../enum/common";
 import MonkEnum from "../../enum/monk";
 import {getMonkDetail} from "../../api/monk/monkDetail.js";
 import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
+import BaseBackground from "../../components/base-background/base-background.vue";
 
 export default {
   components: {
-    CustomNavbar
+    CustomNavbar,
+    BaseBackground
   },
   computed: {
     MonkEnum() {
@@ -128,15 +130,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.background-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  border-radius: 16rpx;
-}
+
 
 .page {
   width: 100%;