Elemen的卡片el-card使用

el-card可以当做盒子使用

  一 、  默认的插槽结构   提供主体内容

    具名插槽结构   提供头部结构

        <el-card>
            <!-- <h3 slot="header">标题</h3> -->
            <template #header>
                <h3>标题</h3>
            </template>
            盒子
        </el-card>

二、 

调整组件样式

      1.   加类名 这个类名加组件根元素

<style >
.box{
width:420px;
margin:0 auto
}
</style>

       2. 直接利用组件名当成类名 组件库的规范 组件的根元素 一定有一个和组件名相同的类名

       

<style >
.el-card{
width:420px;
margin:0 auto
}
</style>

样式不生效如图背景颜色没有

<style lang="scss"  scoped>
.el-card{
width:420px;
margin:0 auto;
 .el-card__header{
    background-color:aqua;
    text-align:center;
    color:#fff
}
}
</style>

解决方案

 scoped 希望样式只作用于当前组件内的结构 
如果是组件内使用了其它组件 那么其它组件结构scoped不负责
解决方案：深度选择器 继续向下渗透影响组件内的结构 在选择器钱加 ::v-deep
scss  ::v-deep
less   /deep/
css    >>>

<style lang="scss" scoped >
.el-card{
width:420px;
margin:0 auto;
::v-deep .el-card__header{
    background-color:aqua;
    text-align:center;
    color:#fff
}
}
</style>