vue学习笔记 修改el-card样式

<template><div style="margin: 50px"><el-card class="box-card"><template #header><div class="card-header"><span>卡片名称span><el-button class="button" type="text">操作按钮el-button>div>template><div style="height: 200px">div>el-card>div>
template>
<script>
export default {name: "DevSort",
};
script>
<style lang="scss" scoped>
.card-header {display: flex;justify-content: space-between;align-items: center;
}.text {font-size: 14px;
}.item {margin-bottom: 0px;margin-top: 10px;
}.box-card {width: 480px;
}style>

显示样式

1、修改header样式

.el-card ::v-deep .el-card__header {padding: 2px 10px;background-color: palegoldenrod;
}

2、修改body样式

.el-card ::v-deep .el-card__body {padding: 0px;background-color: powderblue;
}