<template>
    <view class="component-widgets-tips" :style="{ background: backgroundColor }">
        <text class="iconfont icon-tixing" :class="[icon]" :style="{ color: iconColor }"></text>
        <text class="text-container" :style="{ color: textColor }">
            {{ text }}
        </text>
    </view>
</template>

<script>
export default {
    name: "component-widgets-tips",
    data() {
        return {};
    },
    props: {
        backgroundColor: {
            type: String,
            default: "#FFFFFF",
        },
        icon: {
            type: String,
            default: "icon-tixing",
        },
        iconColor: {
            type: String,
            default: "#ffa800",
        },
        text: {
            type: String,
            default: "",
        },
        textColor: {
            type: String,
            default: "#a0a0a0",
        },
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {},
};
</script>

<style lang="less" scoped>
.component-widgets-tips {
    width: 100%;
    // height: 75rpx;
    display: flex;
    // align-items: center;
    align-items: flex-start;
    box-sizing: border-box;
    // padding: 0 10rpx;
    padding: 16rpx 10rpx;
    .iconfont {
        font-size: 40rpx;
        margin-right: 26rpx;
    }
    .text-container {
        font-size: 22rpx;
        // line-height: 22rpx;
        line-height: 40rpx;
    }
}
</style>