<template>
    <div class="icon_other" :style="{ 'flex-direction': props.specialCondition?.flexDir || 'row' }">
        <!-- 上海页面icon图标配置 -->
        <i class="icon iconfont-colour" :class="'icon-' + 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
    },
    specialCondition: {
        type: JSON,
        default: () => ({})
    }
})

</script>

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

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