Vue组件开发系列之Card组件

一个圆角并且四周带有阴影的Card卡片组件

演示地址：
http://widget-ui.cn/Card

微信截图_20190807215443.png

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/Card

基本用法：

<wt-cell title="荒岛上，苦楝树开出大美的花——追记开山岛民兵哨所原所长王继才">
             <wt-row slot="bottom">
               <wt-image src='https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin_plus/860.jpg?2' width="100%" height="160px"></wt-image>
             </wt-row>
          </wt-cell>

组件结构：

<template>
    <div class='wt-card'>
        <slot></slot>
    </div>
</template>

css代码：

<style lang='less' rel='stylesheet/less' scoped>
.wt-card {
    margin: 0.4rem;
    background: #fff;
    overflow: hidden;
    border-radius: 0.3rem;
    padding: 0.4rem;
    box-shadow: 0 0 0.2rem #ccc;
    border-bottom: 0.1rem solid #ccc;
}
</style>

演示地址：
http://widget-ui.cn/Card

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/Card