dz-app/pages/test-center/mbti/components/results/recommend-major-group.vue

<template>
    <view class="flex flex-col recommend-major-group px-15 py-10 rounded-lg">
        <view class="flex items-center gap-10 py-10">
            <uv-image src="/static/test-center/recommend-head.png" width="20" height="20"/>
            <text class="text-xs text-content">{{ group.category }}</text>
        </view>
        <view class="flex flex-col bg-white rounded gap-5 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-image: url("~@/static/test-center/recommend-head-bg.png");
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: 145px -10px;
    background-color: #DAFEEC;
    min-width: 155px;
}

.recommend-major-group + .recommend-major-group {
    margin-left: 10px;
}

.major-item {

}

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