Article directory
Description of Requirement
The following styles are all
ant design vuestyle adjustments, and some interface optimizations are carried out
Modify the left navigation bar to change the color (selected and suspended)
如果你想修改左侧导航选中后 以及鼠标悬浮在某个菜单栏上改变样式时，把下面的三段代码复制到under your projectpublic文件夹下的index.html文件里，注意要把这段代码放到<style></style>标签里
Change background color after mouse click on menu
.ant-menu-item-selected{
background: linear-gradient(270.00deg, rgba(125,178,217,0.50),rgba(196,196,196,0.00) 100%) !important;
}
Change color after mouse selection
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{
background-color: rgb(239, 242, 245) !important;
}
.ant-menu-inline .ant-menu-item::after{
border-right: 3px solid rgb(18, 92, 179)!important;
}
Change font color after mouse click menu
src--->components--->layouts--->TabLayout.vueMake changes in the files under your project
.ant-menu-item-selected > a, .ant-menu-item-selected > a:hover{
color: #125CB3 !important;
}
Change the font color of the mouse hover menu
src--->components--->layouts--->TabLayout.vueMake changes in the files under your project
.ant-menu-inline > a, .ant-menu-item > a:hover{
color: #125CB3 !important;
}
Modify the font color in the a-table table
.ant-table-tbody > tr > td {
color: white;
background: #3071b9 !important;
}
Modify the page number color
.ant-pagination-item-active a{
color: #125CB3 !important;
}