<!-- muz-item-atom-button v1.0.0.210303 -->
<template>
    <div class="muz-item-atom-button" :class="color" v-if="text" type="default" size="mini" @click.stop="onClick()" >{{text}}</div>
</template>

<script>
    export default {
        name: 'muz-item-atom',
        props:{
            text: {
                type: [String, Number],
                default: ""
            },
            color: {
                type: String,
                default: ""
            },
        },
        data: function() {
        	return {}
        },
        methods: {
            onClick: function(){
                this.$emit('click')
            }
        },
    }
</script>

<style>

/*----------------------------xItem查看详细-------------------------------*/
.muz-item-atom-button{display: flex; margin: 0 5px 5px 0; padding: 0 10px; height: 22px; border-radius: 10px; line-height: 1; font-size: 12px; align-items: center;}

.muz-item-atom-button.indigo{background-color: rgba(0,112,173,1); color: #FFF;}
.muz-item-atom-button.indigo.button-hover{background-color: rgba(0,112,173,0.8);}
.muz-item-atom-button.red{background-color: rgba(192,0,0,1); color: #FFF;}
.muz-item-atom-button.red.button-hover{background-color: rgba(192,0,0,0.8);}
.muz-item-atom-button.orange{background-color: rgba(234,85,20,1); color: #FFF;}
.muz-item-atom-button.orange.button-hover{background-color: rgba(234,85,20,0.8);}
.muz-item-atom-button.green{background-color: rgba(0,128,0,1); color: #FFF;}
.muz-item-atom-button.green.button-hover{background-color: rgba(0,128,0,0.8);}
.muz-item-atom-button.blue{background-color: rgba(0,112,192,1); color: #FFF;}
.muz-item-atom-button.blue.button-hover{background-color: rgba(0,112,192,0.8);}
.muz-item-atom-button.purple{background-color: rgba(112,48,160,1); color: #FFF;}
.muz-item-atom-button.purple.button-hover{background-color: rgba(112,48,160,0.8);}

</style>
