<template>
    <view class="component-widget-checkbox" :class="{ active: checked }" :style="{ fontSize: utils.rpx2px(size) + 'px' }">
        <text class="iconfont" :class="[checked ? 'icon-xuanzeyixuanze' : 'icon-xuanzeweixuanze']"></text>
    </view>
</template>

<script>
export default {
    name: "component-widget-checkbox",
    data() {
        return {
            utils: this.$utils,
        };
    },
    props: {
        size: {
            type: Number,
            default: 40,
        },
        checked: {
            type: Boolean,
            default: false,
        },
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {},
};
</script>

<style lang="less" scoped>
.component-widget-checkbox {
    .iconfont {
        color: #c7c7c7;
    }
}
.component-widget-checkbox.active {
    .iconfont {
        color: #8194f2;
    }
}
</style>