【功能修复】修复装修宫格导航背景图片问题

sheep/components/s-block-item/s-block-item.vue

@@ -9,7 +9,7 @@
     <!-- 基础组件：列表导航 -->
     <s-menu-list v-if="type === 'MenuList'" :data="data" />
     <!-- 基础组件：宫格导航 -->
-    <s-menu-grid v-if="type === 'MenuGrid'" :data="data" />
+    <s-menu-grid v-if="type === 'MenuGrid'" :data="data" :styles="styles" />
     <!-- 基础组件：弹窗广告 -->
     <s-popup-image v-if="type === 'Popover'" :data="data" />
     <!-- 基础组件：悬浮按钮 -->

sheep/components/s-menu-grid/s-menu-grid.vue

@@ -1,18 +1,12 @@
 <!-- 装修基础组件：宫格导航 -->
 <template>
+	<view :style="[style, { marginLeft: `${data.space}px` }]">
 		<uni-grid :showBorder="Boolean(data.border)" :column="data.column">
-    <uni-grid-item
-      v-for="(item, index) in data.list"
-      :key="index"
-      @tap="sheep.$router.go(item.url)"
-    >
+			<uni-grid-item v-for="(item, index) in data.list" :key="index" @tap="sheep.$router.go(item.url)">
 				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
 					<view class="img-box">
-          <view
-            class="tag-box"
-            v-if="item.badge.show"
-            :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
-          >
+						<view class="tag-box" v-if="item.badge.show"
+							:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
 							{{ item.badge.text }}
 						</view>
 						<image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
@@ -29,16 +23,41 @@
 				</view>
 			</uni-grid-item>
 		</uni-grid>
+	</view>
+
 </template>
 
 <script setup>
 	import sheep from '@/sheep';
+	import {
+		computed
+	} from 'vue';
 
 	const props = defineProps({
+		// 装修数据
 		data: {
 			type: Object,
-      default() {},
+			default: () => ({}),
 		},
+		// 装修样式
+		styles: {
+			type: Object,
+			default: () => ({}),
+		},
+	});
+	// 设置背景样式
+	const style = computed(() => {
+		// 直接从 props.styles 解构
+		const {
+			bgType,
+			bgImg,
+			bgColor
+		} = props.styles;
+
+		// 根据 bgType 返回相应的样式
+		return {
+			background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
+		};
 	});
 </script>
 
@@ -47,6 +66,7 @@
 		width: 24px;
 		height: 24px;
 	}
+
 	.grid-item-box {
 		flex: 1;
 		display: flex;
@@ -54,8 +74,10 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
+
 		.img-box {
 			position: relative;
+
 			.tag-box {
 				position: absolute;
 				z-index: 2;