Vue项目中重写element-ui组件样式
Vue项目中重写element-ui组件样式在类名前面加个/deep/就可以了在类名前面加个/deep/就可以了如:<style lang="less" scoped>/deep/.el-form-item__content {line-height: 19px;margin-left: 0px;}/deep/.el-button {height: 51px;width: 352px;
·
Vue项目中重写element-ui组件样式
在类名前面加个/deep/就可以了
https://www.cnblogs.com/my466879168/p/12091439.html
如:
<style lang="less" scoped>
/deep/.el-form-item__content {
line-height: 19px;
margin-left: 0px;
}
/deep/.el-button {
height: 51px;
width: 352px;
}
/deep/.el-button--primary {
background-color: #63c7bb;
border-color: #63c7bb;
width: 352px;
height: 51px;
}
.login_container {
min-height: 689px;
width: 100%;
min-width: 1200px;
.nav {
width: 100%;
height: 90px;
background: rgba(37, 40, 45, 1);
padding-top: 11px;
box-sizing: border-box;
.w1200 {
width: 1200px;
margin: 0 auto;
img {
width: 208px;
height: 67px;
}
}
}
.main {
width: 100%;
height: 1082px;
background-image: url("../../../static/images/login_bg.png");
background-size: 100% 100%;
padding-top: 202px;
box-sizing: border-box;
.bgCenter {
width: 1205px;
height: 746px;
background-image: url("../../../static/images/login_bgCenter.png");
background-size: 100% 100%;
margin: 0 auto;
padding-top: 77px;
padding-left: 97px;
box-sizing: border-box;
position: relative;
}
.more {
width: 534px;
height: 689px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 30px 5px rgba(222, 255, 253, 0.46);
border-radius: 30px;
position: absolute;
right: 55px;
top: -63px;
.twoImg {
margin-left: 300px;
position: relative;
div {
font-size: 14px;
color: rgba(101, 101, 101, 1);
position: absolute;
left: 30px;
top: 23px;
.goewm {
cursor: pointer;
}
}
}
.tabs {
width: 378px;
height: 36px;
margin: 70px auto 36px;
display: flex;
justify-content: center;
align-items: flex-start;
border-bottom: 1px solid #e8e8e8;
.tab {
width: 135px;
height: 36px;
font-size:28px;
color:rgba(102,102,102,1);
line-height:4px;
font-weight:500;
box-sizing: border-box;
text-align: center;
}
.line {
width: 1px;
height: 36px;
background-color: #e8e8e8;
margin: 0 29px;
}
.active {
color: #63c7bb;
border-bottom: 2px solid #63c7bb;
}
}
.demo-ruleForm {
width: 352px;
margin: 0 auto;
position: relative;
/deep/.el-input__inner {
height: 43px;
background: rgba(243, 245, 248, 1);
}
/deep/.el-input--suffix .el-input__inner {
padding-right: 90px;
}
.getCode {
width: 55px;
height: 24px;
background: rgba(99, 199, 187, 1);
box-shadow: 0px 0px 14px 1px rgba(99, 199, 187, 0.15);
border-radius: 6px;
text-align: center;
color: #fff;
font-size: 12px;
line-height: 24px;
position: absolute;
right: 24px;
top: 10px;
}
.ty {
margin-top: 29px;
margin-bottom:8px;
}
.ruleForm_gologin{
font-size: 14px;
text-align: right;
color: #63c7bb;
cursor: pointer;
padding-bottom: 40px;
span{
font-weight:500;
border-bottom: 1px solid #63c7bb;
}
}
.loginBox {
span {
font-size: 12px;
a {
color: #63c7bb;
}
}
}
}
}
}
</style>
为了避免全局影响,要在前面加上最外层盒子的类名
更多推荐
已为社区贡献13条内容
所有评论(0)