uniProject/pages/game/components/goose.vue

<template>
	<view>
    <up-line-progress :percentage="progress" activeColor="#54e1fe" class="game-progress-box"></up-line-progress>
		<image :src="imgUrl" class="goose-img-box"></image>
	</view>
</template>

<script setup>
	import {gooseGrowthTypeList} from "./constantConfig.js"
	import { ref,computed } from "vue";
	import upLineProgress from "uview-plus/components/u-line-progress/u-line-progress.vue";  
	
	const props = defineProps({
    growthType: {
			type: [String,Number]
		},
		progress: {
			type: [String,Number],
			default: 0
		}
	})
	
	const imgUrl = computed(() => {
		const active = gooseGrowthTypeList.find(item => item.id == props.growthType)
		return active ? active.imgUrl: ''
	})
</script>

<style>
</style>