Jeecg改变主题颜色及页内样式

最新推荐文章于 2024-12-09 08:58:00 发布

大腿不要的腿毛

最新推荐文章于 2024-12-09 08:58:00 发布

阅读量2.2k

点赞数 4

CC 4.0 BY-SA版权

文章标签： html css vue.js

本文链接：https://blog.youkuaiyun.com/qihangVIP4/article/details/120263690

Jeecg改变主题颜色及页内样式

改成黑色背景，显得更有科技感，但是时间选择器和其它表格地样式出现紊乱（不专业，可应急）

GlobalLayout.vue 
.ant-layout-content {
        .content {
          margin: 24px 0 0;
        }
        background-color: #000c17 !important;
      }
      !important:浏览器首先执行这个语句，覆盖父级的样式

表格的字体颜色，聚焦以及表格的背景需要改变

common.less 进行修改
.ant-pagination{
  color: white;
}
.ant-pagination-item a{
  color: white;
}
.ant-pagination-disabled a, .ant-pagination-disabled:hover a, .ant-pagination-disabled:focus a, .ant-pagination-disabled .ant-pagination-item-link, .ant-pagination-disabled:hover .ant-pagination-item-link, .ant-pagination-disabled:focus .ant-pagination-item-link{
  color: white;
}
.ant-pagination-prev a, .ant-pagination-next a{
  color: white;
}
.ant-pagination-item-active{
  background: #181f30;
}
.ant-select{
  color: white;
}
.ant-select-arrow{
  color: white;
}
.ant-select-selection{
  background-color: #181f30;
}
.ant-pagination-options-quick-jumper input{
  color: white;
  background-color: #181f30;
}
.ant-table-tbody > tr.ant-table-row-selected td {
  background: #000c17;
}
.ant-table-tbody > tr:hover {
  background: #000c17 !important;
}
.ant-table-tbody > tr:hover > td {
  background: #000c17 !important;
}
.ant-table-thead > tr.ant-table-row-hover > td{
  background:  #000c17 !important;
}
.ant-table-tbody > tr.ant-table-row-hover > td{
  background: #000c17 !important;
}
一般都是找到class样式进行覆盖原有的父样式