1.尺寸大小设置
设置宽高需要把尺寸改为最小给el-button加size=“mini” 就可以设置宽高了width height
2.背景颜色 ( 默然样色类型 type=“primary” )
(1) 想要改变背景颜色 style="background: #fb435f"
就出现背景颜色 ,但是本身有默认颜色边框他的primary
el-button外面div加个名 .bg_btn >>> .el-button--primary { border: none; }
加这个就可以去掉默认边框
(2) 加背景颜色方法:
.bg_btn button { width: 41px; height: 18px; background: #fb435f; }
.bg_btnbutton:first-child { background: #0cc87e; }
3.字体大小
.bg_btn span { position: relative; bottom: 5px; right: 5.2px; }
有默认边框
去掉后
4.去掉圆角度,加这个样式.el-button–mini这个class名在f12审查元素可查看
.bg_btn .el-button--mini {
border-radius: inherit;
}
去掉前
去掉后
5.源码
<div class="bg_btn">
<el-button size="mini" type="primary" @click="ignore(item, index)"><span>忽略</span></el-button>
<el-button size="mini" style="background: #fb435f" type="primary" @click="buy(item, index)"><span>购买</span></el-button>
</div>
.bg_btn {
display: flex;
flex-direction: row;
margin-top: 10px;
margin-left: 40%;
width: 50%;
height: 27px;
}
.bg_btn >>> .el-button--primary {
border: none;
}
.bg_btn button {
width: 41px;
height: 18px;
font-family: SourceHanSansCN-Regular;
font-size: 12px;
font-weight: normal;
color: #ffffff;
position: relative;
left: 20%;
background: #fb435f;
}
.bg_btn button:first-child {
background: #0cc87e;
}
.bg_btn span {
position: relative;
bottom: 5px;
right: 5.2px;
}
.bg_btn .el-button--mini {
border-radius: inherit;
}