自定义el-dialog的样式

实现效果:

样式代码如下:(可以写在common.scss文件夹中)

复制代码
.el-dialog__header {
  padding: 16px 20px;
  border-bottom: 1px solid #DCDFE6;
  display: flex;
  align-items: center;
  .el-dialog__title {
    font-size: 16px;
    position: relative;
    padding-left: 10px;
    &:after {
      content: ' ';
      position: absolute;
      height: 16px;
      width: 4px;
      top: 4px;
      left: 0;
      background-color: #3377FF;
      border-radius: 4px;
    }
  }
}
复制代码
相关推荐
恋爱绝缘体1几秒前
CSS3 多媒体查询实例【1】
前端·css·css3
写bug的可宋7 分钟前
【Electron】解决Electron使用阿里iconfont不生效问题(react+vite)
javascript·react.js·electron
小二·1 小时前
Python Web 开发进阶实战:无障碍深度集成 —— 构建真正包容的 Flask + Vue 应用
前端·python·flask
niucloud-admin9 小时前
web 端前端
前端
摘星编程12 小时前
React Native for OpenHarmony 实战:Linking 链接处理详解
javascript·react native·react.js
胖者是谁12 小时前
EasyPlayerPro的使用方法
前端·javascript·css
EndingCoder12 小时前
索引类型和 keyof 操作符
linux·运维·前端·javascript·ubuntu·typescript
liux352812 小时前
Web集群管理实战指南:从架构到运维
运维·前端·架构
沛沛老爹12 小时前
Web转AI架构篇 Agent Skills vs MCP:工具箱与标准接口的本质区别
java·开发语言·前端·人工智能·架构·企业开发
摘星编程13 小时前
React Native for OpenHarmony 实战:ImageBackground 背景图片详解
javascript·react native·react.js