前端工作小结4-vue自定义样式
2024-05-20 08:56:20 阅读次数:25
javascript,vue
<el-radio-group v-model="radio1">
<el-radio-button class="user-radio" label="上海">
<div class="user-radio-div">主标题</div>
<p class="user-radio-p">说明文案</p>
</el-radio-button>
<el-radio-button class="user-radio" label="北京">
<div class="user-radio-div">主标题</div>
<p class="user-radio-p">说明文案</p>
</el-radio-button>
<el-radio-button class="user-radio" label="深证">
<div class="user-radio-div">主标题</div>
<p class="user-radio-p">说明文案</p>
</el-radio-button>
<el-radio-button class="user-radio" label="广东">
<div class="user-radio-div">主标题</div>
<p class="user-radio-p">说明文案</p>
</el-radio-button>
</el-radio-group>
<style lang="scss" scoped>
.user-radio {
margin: 0 10px 20px;
&-div{
font-size: 24px;
}
&-p{
font-size: 20px;
}
// 因为设置了scoped,所以固定的classname要用/deep/操作
/deep/ {
.el-radio-button__inner {
border: none;
border-radius: 4px;
background: #e5e5e5;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: #1e6abc;
}
}
}
</style>
版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.51cto.com/u_15460007/6051104,作者:前端导师歌谣,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。
上一篇:python-if判断的本质
下一篇:一开始屏幕上什么也没有,粘贴板里什么也没有, 你只能在键盘上做如下4种操作中的1种: 输入:在屏幕上已经显示内容的后面加一个A, 全选:把屏幕上已经显示的全部内容选中