//组件调用

<m-card 
    imgSrc="img.png"
    summary="卡片概要"
/>

<m-card     
    imgSrc="img.png"    
    summary="卡片概要">    
    <template v-slot:footer>        
        <div  class="footer">            
            <div class="level">528人报名</div>            
            <div class="price">￥299.00</div>        
        </div>    
    </template>
</m-card>

<m-card     
    imgSrc="img.png" 
    :width="370"
    :imgHeight="90"   
 >    
     插槽类型卡片概要
    <template v-slot:footer>        
        <div  class="footer-spring">            
            <div class="level">528人报名</div>            
            <div class="level">1096收藏</div>          
        </div>    
    </template>
</m-card>

<style>
.footer{
    padding: 0 8px;
    font-size: 12px;
    text-align: left;
}
.level{
    color:#9199a1;
    margin-bottom: 8px;
}
.price{
    color:#f01414;
}
.footer-spring{
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 12px;
}
</style>