Element / ElementPlu message 消息提示样式重改

把重写样式放到 vue项目的 App.vue 文件的css样式中

 /* element message 样式重改 */
  .el-message--info,
  .el-message--success,
  .el-message--warning,
  .el-message--error {
    padding: 10px 15px !important;
    background: #fff !important;
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%) !important;
  }

  .el-message--info .el-message__content,
  .el-message--success .el-message__content,
  .el-message--warning .el-message__content,
  .el-message--error .el-message__content {
    color: #000000;
    font-size: 15px !important;
    font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif in !important;
  }

  /* info */
  .el-message--info .el-message-icon--info { color: #3b91ff !important; }
  .el-message--info .el-message__icon { font-size: 18px !important; }
  .el-message--info .el-message__content { color: #000000 !important; }

  /* success */
  .el-message--success .el-message-icon--info { color: #13ce66 !important; }
  .el-message--success .el-message__icon { font-size: 18px !important; }
  .el-message--success .el-message__content { color: #000000 !important; }

  /* warning */
  .el-message--warning .el-message-icon--info { color: #ffae00 !important; }
  .el-message--warning .el-message__icon { font-size: 18px !important; }
  .el-message--warning .el-message__content { color: #000000 !important; }

  /* error */
  .el-message--error .el-message-icon--info { color: #e11617 !important; }
  .el-message--error .el-message__icon { font-size: 18px !important; }
  .el-message--error .el-message__content { color: #000000 !important; }

本文为Jsky原创文章,转载无需和我联系,但请注明来自Jsky博客 www.tjin.link

• 上一篇： 页面滚动条样式重写 (vue html 都可以)
• 下一篇： Vue项目 自动部署打包至服务器