<template> <view class="box"> <view style="text-align: center;padding: 10rpx;"> <image class="image" src="../../static/images/icons/male.png" mode="scaleToFill" /> <view style="font-size: 24rpx;color: #a6a8ac;">男生</view> </view> <view class="mid"> <view class="flex" style="justify-content: space-between;"> <view class="males">{{ malePercent }}%</view> <view class="females">{{ femalePercent }}%</view> </view> <view class="progress-bar"> <view class="male" :style="{ width: malePercent + '%' }"></view> <view class="progress"> <view class="progress-bar-inner" :style="{ width: percent + '%' }"></view> </view> <view class="female" :style="{ width: femalePercent + '%' }"></view> </view> </view> <view style="text-align: center;padding: 10rpx;"> <image class="image" src="../../static/images/icons/female.png" mode="scaleToFill" /> <view style="font-size: 24rpx;color: #a6a8ac;">女生</view> </view> </view> </template> <script setup> import { computed } from 'vue' const props = defineProps({ male: { type: Number, requirde: true }, female: { type: Number, requirde: true }, }) // 总比例 const percent = computed(() => { return props.male / (props.male + props.female) * 100 }) // 男生比例 const malePercent = computed(() => { return Math.round(props.male / (props.male + props.female) * 100) }) // 女生比例 const femalePercent = computed(() => { return Math.round(props.female / (props.male + props.female) * 100) }) </script> <style lang="scss" scoped> .progress-bar { display: flex; align-items: center; height: 30rpx; width: 100%; border: 1px solid #ccc; border-radius: 30rpx; overflow: hidden; } .progress-bar .male, .progress-bar .female { display: flex; justify-content: center; align-items: center; height: 100%; color: #fff; font-size: 14px; font-weight: bold; } .progress-bar .male { flex: 0 0 auto; background-color: #007bff; } .progress-bar .progress { flex: 1 1 auto; height: 100%; position: relative; } .progress-bar .progress .progress-bar-inner { height: 100%; background-color: #28a745; position: absolute; top: 0; left: 0; } .progress-bar .female { flex: 0 0 auto; background-color: #dc3545; } .content { justify-content: space-between; } .males { color: #007bff; font-size: 24rpx; } .females { color: #dc3545; font-size: 24rpx; } .box { display: flex; justify-content: space-around; align-items: center; margin-top: 50rpx; margin-bottom: 50rpx; .mid { width: 70%; } } .image { height: 60rpx; width: 60rpx; } </style> 帮我把上述代码改成只传male一个值就可以显示出male和female两个的比例出来

好的，可以这样修改代码：

<template>
<view class="box">
<view style="text-align: center;padding: 10rpx;">
<image class="image" src="../../static/images/icons/male.png" mode="scaleToFill" />
<view style="font-size: 24rpx;color: #a6a8ac;">男生</view>
</view>
<view class="mid">
<view class="flex" style="justify-content: space-between;">
<view class="males">{{ malePercent }}%</view>
<view class="females">{{ femalePercent }}%</view>
</view>
<view class="progress-bar">
<view class="male" :style="{ width: malePercent + '%' }"></view>
<view class="progress">
<view class="progress-bar-inner" :style="{ width: percent + '%' }"></view>
</view>
<view class="female" :style="{ width: femalePercent + '%' }"></view>
</view>
</view>
<view style="text-align: center;padding: 10rpx;">
<image class="image" src="../../static/images/icons/female.png" mode="scaleToFill" />
<view style="font-size: 24rpx;color: #a6a8ac;">女生</view>
</view>
</view>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
male: { type: Number, requirde: true },
})

// 总人数
const total = computed(() => {
return props.male * 2
})

// 总比例
const percent = computed(() => {
return props.male / total.value * 100
})

// 男生比例
const malePercent = computed(() => {
return Math.round(props.male / total.value * 100)
})

// 女生比例
const femalePercent = computed(() => {
return Math.round((total.value - props.male) / total.value * 100)
})
</script>

<style lang="scss" scoped>
.progress-bar {
display: flex;
align-items: center;
height: 30rpx;
width: 100%;
border: 1px solid #ccc;
border-radius: 30rpx;
overflow: hidden;

.male,
.female {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
font-size: 14px;
font-weight: bold;
}

.male {
flex: 0 0 auto;
background-color: #007bff;
}

.progress {
flex: 1 1 auto;
height: 100%;
position: relative;
}

.progress .progress-bar-inner {
height: 100%;
background-color: #28a745;
position: absolute;
top: 0;
left: 0;
}

.female {
flex: 0 0 auto;
background-color: #dc3545;
}
}

.content {
justify-content: space-between;
}

.males {
color: #007bff;
font-size: 24rpx;
}

.females {
color: #dc3545;
font-size: 24rpx;
}

.box {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 50rpx;
margin-bottom: 50rpx;

.mid {
width: 70%;
}
}

.image {
height: 60rpx;
width: 60rpx;
}
</style>

这样在调用组件的时候，只需要传入一个male的值即可，组件会自动计算出总人数和男女比例。