45 lines
979 B
Vue
45 lines
979 B
Vue
<template>
|
|
<view class="info_gender" :style="{ backgroundColor: data.gender === GenderType.boy ? '#6AC7FC' : '#FF9FC2', padding }">
|
|
<image v-if="data.gender === GenderType.girl" class="gender_icon" mode="aspectFill" src="@/static/images/common/girl.png" />
|
|
<image v-else class="gender_icon" mode="aspectFill" src="@/static/images/common/boy.png" />
|
|
<view>{{ data.age || 0 }}岁</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { GenderType } from '@/enum/indexEnum'
|
|
|
|
export default {
|
|
name: 'genderBox',
|
|
computed: {
|
|
GenderType() {
|
|
return GenderType
|
|
}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
padding: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.info_gender {
|
|
display: flex;
|
|
padding: 0 8rpx;
|
|
align-items: center;
|
|
color: white;
|
|
font-size: 20rpx;
|
|
border-radius: 6rpx;
|
|
.gender_icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
</style>
|