<template>
    <view class="im--audio" :class="guest ? 'right': 'left'">
        <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
        <text class="audio-text">"60"</text>
        <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
    </view>
</template>

<script>
    export default {
        name:"im",
        props:{
            msg : {
                type   : String,
                default: 'https://images.pexels.com/photos/10266655/pexels-photo-10266655.jpeg'
            },
            guest: {
                type: Boolean,
                default: true
            }
        },
        methods:{
            openImg(){
                uni.previewImage({
                    urls    : [this.msg],
                    current : 1
                })
            }
        }
    }
</script>

<style scoped>
    .im--audio{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 79rpx;
        width: 170rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
    },
    .im--audio.left{
        border-radius: 0 20rpx 20rpx 20rpx;
        background: white;
    }
    
    .im--audio.right{
        border-radius: 20rpx 0 20rpx 20rpx;
        background: #34CE98;
    }
    .audio-mp3{
        width: 38rpx;
        height: 38rpx;
    }
    .audio-text{
        font-size: 30rpx;
    }
    .im--audio.left .audio-text{
        color: #333;
    }
    .im--audio.right .audio-text{
        color: white;
    }
</style>
