bt-xtgxq-population-bigdata/src/components/card/PersonPercent.vue

<template>
    <div class="container">
        <img class="icon" :src="iconSrc">
        <div class="value">{{ props.value }}%</div>
    </div>    
</template>

<script setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
    value: {
        type: Number,
        default: 0
    },
    type: {
        type: String,
        default: 'man'
    }
});
const color = ref('#00bab4');
const iconSrc = ref('assets/imgs/icon/man.png');
if(props.type != 'man') {
    color.value = '#ff5329';
    iconSrc.value = 'assets/imgs/icon/woman.png';
}
</script>

<style lang="stylus" scoped>
.container
    width 150px
    height 100px
    padding 20px 10px
    position relative
    &:after
        content ' '
        width 40px
        height 2px
        background-color v-bind(color)
        position absolute
        top 22px
        left 48px
    .icon
        width 40px
    .value
        font-size 20px
        font-weight bold
        color v-bind(color)
        position absolute
        top 6px
        left 92px
</style>