<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;
}
实现的类似效果