<template>
    <div class='explain-task'>
        <div class='content'>
            <div class='content-head'>
                <img src="~imgPath/fissionTask/explain-right.png" alt="">
                <span>活动介绍</span>
                <img src="~imgPath/fissionTask/explain-left.png" alt="">
            </div>
            <div class='content-text'>
                {{explain}}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        explain:''
    }
}
</script>

<style scoped lang='scss'>
.explain-task{
    width:100%;
    display: flex;
    justify-content: center;
    .content{
        width:6.7rem;
        background: #FFF7EB;
        border-radius: 0.24rem;
        box-sizing: border-box;
        border: 0.02rem solid #F8AE1A;
        padding:0.32rem 0.22rem 0.24rem 0.22rem;
        .content-head{
            font-size: 0.28rem;
            color: #FF8A22;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width:0.26rem;
                height:0.16rem;
                margin:0 0.12rem;
            }
        }
        .content-text{
            font-size: 0.24rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FF5D21;
margin-top:0.16rem;
        }
    }
}
</style>