常用银行卡

components/empty/empty.vue

@@ -1,20 +1,68 @@
 <template>
 	<view class="emptybox">
-		<up-image  :src="emptyImg" width="176rpx" height="204rpx" ></up-image>
+		<view class="empty-image-wrap" :style="imageWrapStyle">
+			<up-image
+				:src="props.emptyImg || emptyImg"
+				:width="renderWidth"
+				:height="renderHeight"
+				:mode="imgMode"
+			></up-image>
+		</view>
 		<text class="empty-text">{{ emptyDesc }}</text>
 	</view>
 </template>
 
 <script setup>
-	import { ref } from 'vue';
-	import { onShow } from "@dcloudio/uni-app";
+	import { computed } from 'vue';
 	import emptyImg from "@/static/icon_empty.png"
 	const props = defineProps({
+		emptyImg: {
+			type: String,
+			default: ''
+		},
+		imgWidth: {
+			type: [String, Number],
+			default: ''
+		},
+		imgHeight: {
+			type: [String, Number],
+			default: ''
+		},
 		emptyDesc: {
 			type: String,
 			default: '暂无数据'
 		}
 	})
+
+	const normalizeSize = (size) => {
+		if (size === '' || size === null || size === undefined) return '';
+		// 直传字符串（如 50%、206rpx、120px），数字交给 up-image 按组件规则处理
+		return typeof size === 'string' ? size.trim() : size;
+	};
+	const isPercentSize = (size) => typeof size === 'string' && size.endsWith('%');
+
+	const imgWidth = computed(() => {
+		const width = normalizeSize(props.imgWidth);
+		const height = normalizeSize(props.imgHeight);
+		if (width !== '') return width;
+		if (height === '') return '206rpx';
+		return '';
+	});
+	const imgHeight = computed(() => normalizeSize(props.imgHeight));
+	const renderWidth = computed(() => (isPercentSize(imgWidth.value) ? '100%' : imgWidth.value));
+	const renderHeight = computed(() => (isPercentSize(imgHeight.value) ? '100%' : imgHeight.value));
+	const imageWrapStyle = computed(() => {
+		const style = {};
+		if (isPercentSize(imgWidth.value)) style.width = imgWidth.value;
+		if (isPercentSize(imgHeight.value)) style.height = imgHeight.value;
+		return style;
+	});
+	const imgMode = computed(() => {
+		// 只传宽/高时按比例缩放，避免图片被拉伸
+		if (imgWidth.value && !imgHeight.value) return 'widthFix';
+		if (!imgWidth.value && imgHeight.value) return 'heightFix';
+		return 'aspectFit';
+	});
 </script>
 
 <style scoped lang="scss">
@@ -27,6 +75,11 @@
 	 align-items: center;
 	 justify-content: center;
 	 flex-direction: column;
+	 .empty-image-wrap{
+		 width: 100%;
+		 display: flex;
+		 justify-content: center;
+	 }
 	 .empty-text{
 		 font-size: 30rpx;
 		 color:#999;