<style scoped>
    .source{
        padding:20px; width: 400px !important;
    }
</style>
<script>
    import avatar from '../../logo-hexagon.png'
    export default {
        data() {
            return {
                cardList: [{
                    title       : '春暖花开',
                    imgUrl      : avatar,
                    text        : '春光竞媚江两岸，暖风轻舞花艳彩。花开花落年年复，开门不见古人来。',
                    status      : '正常',

                }, {
                    title       : '生查子·元夕',
                    imgUrl      : avatar,
                    text        : '去年元夜时，花市灯如昼。月上柳梢头，人约黄昏后。今年元夜时，月与灯依旧。不见去年人，泪湿春衫袖。',
                    status      : 'error',
                }]
            }
        },
        methods: {
            CardClick(){

            },
            filterBreadthDataC(item){
                return {
                    title     : item.title,
                    text      : item.text,
                    status    : item.status
                }
            },
        }
    }
</script>
## Card 卡片容器

## 基础用法
:::demo
```html
<mc-row :gutter="8">
    <mc-col v-for="item in cardList">
        <mc-card-breadth
                v-bind="filterBreadthDataC(item)"
                @click="CardClick"
        >
        </mc-card-breadth>
    </mc-col>
</mc-row>
```
:::