<template>
    <view class="im--box">
        <text class="im--text" :class="guest ? 'right': 'left'">{{msg}}</text>
    </view>
</template>

<script>
    export default {
        name:"im",
        data() {
            return {
                
            };
        },
        props:{
            msg : {
                type   : String,
                default: '文字消息'
            },
            guest: {
                type: Boolean,
                default: true
            }
        }
    }
</script>

<style scoped>
    .im--text{
        max-width: 400rpx;
        padding: 20rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        min-height: 40rpx;
        min-width: 50rpx;
    }
    
    .im--text.left{
        border-radius: 0 20rpx 20rpx 20rpx;
        background: white;
    }
    
    .im--text.right{
        border-radius: 20rpx 0 20rpx 20rpx;
        background: #34CE98;
        color: white;
    }
</style>
