59 lines
1.0 KiB
Vue
59 lines
1.0 KiB
Vue
<template>
|
|
<t-icon
|
|
v-if="value && iconName"
|
|
:name="iconName"
|
|
:size="size"
|
|
:class="['gender-icon', `gender-icon--${tone}`]"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
size?: string;
|
|
value?: string | null;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: "1rem",
|
|
value: ""
|
|
});
|
|
|
|
const normalizedValue = computed(() => (props.value || "").trim());
|
|
const iconName = computed(() => {
|
|
if (normalizedValue.value === "MALE" || normalizedValue.value === "男") {
|
|
return "gender-male";
|
|
}
|
|
if (normalizedValue.value === "FEMALE" || normalizedValue.value === "女") {
|
|
return "gender-female";
|
|
}
|
|
return "";
|
|
});
|
|
const tone = computed(() => normalizedValue.value === "FEMALE" || normalizedValue.value === "女" ? "female" : "male");
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.gender-icon {
|
|
flex: none;
|
|
|
|
&--male {
|
|
color: #2563eb;
|
|
}
|
|
|
|
&--female {
|
|
color: #db2777;
|
|
}
|
|
}
|
|
|
|
:global(html.theme-dark) {
|
|
.gender-icon {
|
|
&--male {
|
|
color: #93c5fd;
|
|
}
|
|
|
|
&--female {
|
|
color: #f9a8d4;
|
|
}
|
|
}
|
|
}
|
|
</style>
|