<template>
    <div class="get-red">
        <i class="icon-red"></i>
        {{info.userNick}}领取了<em>{{info.redFrom}}</em>的一个商家红包
        <em>{{info.money}}</em>
        元
    </div>
</template>

<script>
    export default {
        props: {
            info: {}
        },
    }
</script>

<style lang="less" scoped>
    .get-red{
        display: inline-block;
        max-width: 90%;
        line-height: 20px;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 14px;
        color: #fff;
        background: rgba(0,0,0,0.2);
        text-align: center;

        .icon-red{
            display: inline-block;
            vertical-align: top;
            width: 20px;
            height: 20px;
            background-image: url("./img/icon-red.png");
            background-repeat: no-repeat;
            background-size: 15px auto;
            background-position: center center;
        }
        em{
            color: #d84e43;
        }
    }
</style>