[vben] 2024/7/6 17:00:53
1. src\design\var\index.less中调整@header-height的值=34px
2. src\layouts\default\header\MultipleHeader.vue中调整HEADER_HEIGHT的值=34。
1. src\design\var\index.less中调整@multiple-height的值 =28px
2. src\layouts\default\header\MultipleHeader.vue中调整TABS_HEIGHT的值=30。
3. TABS_HEIGHT的值要比@multiple-height多设置2px,要包含边框在内。
如果需要更改默认的选项卡的样式,可以直接在src\layouts\default\tabs\index.less中调整修改。
增加表单组件大小的默认设置:
1. 在src\settings\componentSetting.ts中增加form:{ defaultSize: 'small', }
2. 在src\components\Form\src中增加const.ts文件,参考src\components\Table\src\const.ts
3. 在src\components\Form\src\props.ts中引用const.ts,并默认赋值size。同样参考对应的table组件
重写table - small的样式,采用更小的边距:
1. 在src\design\ant中增加tableSamll.less文件,并写入样式:
/*重写table-small的样式,需要在index.less中引用*/ .ant-table-small { .ant-table-thead > tr > th, .ant-table-tbody > tr > td { padding: 2px 8px !important; //更小的内边距 } .ant-table-tbody > .ant-table-measure-row > td { padding: 0 !important; } .ant-table-thead > tr > th { background-color: #f1f1f1 !important; font-size: 14px; //更小的字体 } .ant-table-tbody > tr > td { font-size: 14px; //更小的字体 } } .vben-basic-table .ant-table-wrapper { padding-top: 0 !important; } .vben-basic-table .ant-table-wrapper .ant-table.ant-table-bordered .ant-table-title { padding-bottom: 0 !important; } .ant-table-cell-row-hover { background-color: #e3e8eb !important; /* 设置为你希望的颜色 */ } .ant-table-title button { margin-right: 8px; } .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item, .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title { padding: 3px 12px; }
2. 在src\design\ant\index.less中增加引用:@import './tableSmall.less';