<template>
    <view class="flex flex-col recommend-major-group px-15 py-10 rounded-lg overflow-hidden relative">
        <ie-image is-oss src="/testCenter/career/mbti-recommend-head-bg.png"
                  custom-class="w-80 h-80 absolute -top-20 -right-20"/>
        <view class="flex items-center gap-10 py-10">
            <ie-image is-oss src="/testCenter/career/mbti-recommend-head-icon.png" custom-class="h-40 w-40"/>
            <text class="text-xs text-content">{{ group.category }}</text>
        </view>
        <view class="flex flex-col bg-white rounded gap-10 text-3xs text-content px-15 py-10">
            <text v-for="m in group.majors" :key="m.major" class="major-item">{{ m.major }}</text>
        </view>
    </view>
</template>

<script>
export default {
    name: "recommend-major-group",
    props: {
        group: {
            type: Object,
            default: () => ({})
        }
    }
}
</script>

<style scoped>
.recommend-major-group {
    background-color: #DAFEEC;
    min-width: 140px;
}

.major-item {

}

.major-item::before {
    content: '・';
}
</style>