【Mena】Vue实现小卡片形式的组件

<a id="component-a"  @click="fun" >
    <div id="component-header">
        <p id="component-content">卡片名称</p>
    </div>
    <div id="component-body">
        
    </div>
</a>


 #component-a{
        list-style: none;

    }

    #component-header{
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        text-align: center;
        height: 25%;
        border-bottom: 1px solid gray;
        background-image: linear-gradient(0deg,#ffc927,#ffa403);
        font-size: 21px;
        color: white;
        vertical-align:middle;
        
    }
    #header-content{
        line-height: 37.5px;
        
    }

    #component-body{
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        height: 75%;
        background-color: white;
        color: black;
    }

实现的类似效果