<template>
    <div class="icon_other" :style="{ 'flex-direction': flexDirection }">
        <i class="icon iconfont-hnyz-colour" :class="'icon-hnyz-' + iconClass"
            :style="{ 'font-size': props.iconSize + 'px' }"></i>
        <div class="icon_title">{{ props.title }}</div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    title: {
        type: String,
        required: true
    },
    //图标class
    iconClass: {
        type: String,
    },
    //图标大小
    iconSize: {
        type: Number,
        default: 100
    },
    //排布方向 row/column
    flexDirection: {
        type: String,
        default: 'column'
    },
})

</script>

<style scoped lang="scss">
.icon_others {
    .icon_other {
        display: flex;
        align-items: center;

        .iconfont-hnyz-colour {
            font-size: 75px;
        }

        .icon_title {
            font-size: 12px;
            color: aliceblue;
        }
    }
}
</style>