<template>
<div>
<el-card class="boxStyle2" >
<div style="color:#FFF;font-weight: bold; font-size: 16px;margin: -9px">标题1</div>
</el-card>
<el-card class="boxStyle1" style="min-height:200px">
<span>标题2</span>
<div class="xx_head_container">
//这里可以放个插槽
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: 'DouCard'
}
</script>
<style scoped>
.boxStyle1{
/*top: 30px;*/
width: 26%;
margin-top: 32px;
border-radius: 12px;
position: absolute;
background-color: #ffffff;
box-shadow: -2px 2px 2px #a4a4a4;
}
.boxStyle2{
position: absolute;
width: 26%;
border-radius: 12px;
height:70px;
background-color: #20b2aa;
border: #20b2aa solid 1px;
}
.boxStyle3{
/*top: 30px;*/
margin-top: 32px;
width: 40%;
border-radius: 12px;
position: absolute;
background-color: #ffffff;
box-shadow: -2px 2px 2px #a4a4a4;
}
.boxStyle4{
position: absolute;
width: 40%;
border-radius: 12px;
height:70px;
background-color: #20b2aa;
border: #20b2aa solid 1px;
}
.xx_head_container{
overflow-y: auto;
min-height:280px;
}
</style>
vue自封的卡面小组件,卡片容器
于 2023-12-04 14:19:10 首次发布