【功能修复】修复装修菜单导航背景图片问题

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

@@ -1,61 +1,31 @@
 <!-- 装修基础组件：菜单导航（金刚区） -->
 <template>
 	<!-- 包裹层 -->
-  <view
+	<view class="ui-swiper" :class="[props.mode, props.ui]"
-    class="ui-swiper"
+		:style="[bgStyle, { height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]">
-    :class="[props.mode, props.bg, props.ui]"
-    :style="[{ height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]"
-  >
 		<!-- 轮播 -->
-    <swiper
+		<swiper :circular="props.circular" :current="state.cur" :autoplay="props.autoplay" :interval="props.interval"
-      :circular="props.circular"
+			:duration="props.duration" :style="[{ height: swiperHeight + 'rpx' }]" @change="swiperChange">
-      :current="state.cur"
+			<swiper-item v-for="(arr, index) in menuList" :key="index" :class="{ cur: state.cur == index }">
-      :autoplay="props.autoplay"
-      :interval="props.interval"
-      :duration="props.duration"
-      :style="[{ height: swiperHeight + 'rpx' }]"
-      @change="swiperChange"
-    >
-      <swiper-item
-        v-for="(arr, index) in menuList"
-        :key="index"
-        :class="{ cur: state.cur == index }"
-      >
 				<!-- 宫格 -->
 				<view class="grid-wrap">
-          <view
+					<view v-for="(item, index) in arr" :key="index"
-            v-for="(item, index) in arr"
-            :key="index"
 						class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
-            :style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
+						:style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]" hover-class="ss-hover-btn"
-            hover-class="ss-hover-btn"
+						@tap="sheep.$router.go(item.url)">
-            @tap="sheep.$router.go(item.url)"
-          >
 						<view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center">
-              <view
+							<view v-if="item.badge.show" class="tag-box"
-                v-if="item.badge.show"
+								:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
-                class="tag-box"
-                :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
-              >
 								{{ item.badge.text }}
 							</view>
-              <image
+							<image v-if="item.iconUrl" class="menu-icon" :style="[
-                v-if="item.iconUrl"
-                class="menu-icon"
-                :style="[
                   {
                     width: props.iconSize + 'rpx',
                     height: props.iconSize + 'rpx',
                   },
-                ]"
+                ]" :src="sheep.$url.cdn(item.iconUrl)" mode="aspectFill"></image>
-                :src="sheep.$url.cdn(item.iconUrl)"
+							<view v-if="data.layout === 'iconText'" class="menu-title"
-                mode="aspectFill"
+								:style="[{ color: item.titleColor }]">
-              ></image>
-              <view
-                v-if="data.layout === 'iconText'"
-                class="menu-title"
-                :style="[{ color: item.titleColor }]"
-              >
 								{{ item.title }}
 							</view>
 						</view>
@@ -66,12 +36,8 @@
 		<!-- 指示点 -->
 		<template v-if="menuList.length > 1">
 			<view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'">
-        <view
+				<view class="line-box" v-for="(item, index) in menuList.length" :key="index"
-          class="line-box"
+					:class="[state.cur == index ? 'cur' : '', props.dotCur]"></view>
-          v-for="(item, index) in menuList.length"
-          :key="index"
-          :class="[state.cur == index ? 'cur' : '', props.dotCur]"
-        ></view>
 			</view>
 			<view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle == 'tag'">
 				<view class="ui-tag radius" :class="[props.dotCur]" style="pointer-events: none">
@@ -111,7 +77,10 @@
 	 *
 	 */
 
-  import { reactive, computed } from 'vue';
+	import {
+		reactive,
+		computed
+	} from 'vue';
 	import sheep from '@/sheep';
 
 	// 数据
@@ -122,13 +91,15 @@
 	// 接收参数
 
 	const props = defineProps({
+		// 装修数据
 		data: {
 			type: Object,
-      default() {},
+			default: () => ({}),
 		},
+		// 装修样式
 		styles: {
 			type: Object,
-      default() {},
+			default: () => ({}),
 		},
 		circular: {
 			type: Boolean,
@@ -146,7 +117,6 @@
 			type: Number,
 			default: 500,
 		},
-
 		ui: {
 			type: String,
 			default: '',
@@ -164,15 +134,10 @@
 			type: String,
 			default: 'ui-BG-Main',
 		},
-    bg: {
-      type: String,
-      default: 'bg-none',
-    },
 		height: {
 			type: Number,
 			default: 300,
 		},
-
 		// 是否有边框
 		hasBorder: {
 			type: Boolean,
@@ -206,6 +171,22 @@
 		},
 	});
 
+	// 设置背景样式
+	const bgStyle = computed(() => {
+		console.log(props.styles)
+		// 直接从 props.styles 解构
+		const {
+			bgType,
+			bgImg,
+			bgColor
+		} = props.styles;
+
+		// 根据 bgType 返回相应的样式
+		return {
+			background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
+		};
+	});
+
 	// 生成数据
 	const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
 	const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180));
@@ -244,6 +225,7 @@
 		flex-wrap: wrap;
 		align-items: center;
 	}
+
 	.menu-box {
 		position: relative;
 		z-index: 1;
@@ -332,8 +314,7 @@
 					opacity: 1;
 				}
 
-        &.cur::after {
+				&.cur::after {}
-        }
 			}
 
 			&.line {