violet/web-view-antd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: change tab style

Browse Source
This commit is contained in:
zzs 2025-02-24 15:18:30 +08:00
parent 8e577189e8
commit 335421c423
4 changed files with 64 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/design/color.less
View File

@ -1,13 +1,25 @@
//html {
// // header
// --header-bg-color: #394664;
// --header-bg-hover-color: #273352;
// --header-active-menu-bg-color: #273352;
//
// // sider
// --sider-dark-bg-color: #273352;
// --sider-dark-darken-bg-color: #273352;
// --sider-dark-lighten-bg-color: #273352;
//}
html {
// header
--header-bg-color: #394664;
--header-bg-hover-color: #273352;
--header-active-menu-bg-color: #273352;
--header-bg-color: #f5f5f5; /* 浅灰背景 */
--header-bg-hover-color: #e8e8e8; /* 悬停浅灰色 */
--header-active-menu-bg-color: #e0e0e0; /* 活动菜单浅灰色 */
// sider
--sider-dark-bg-color: #273352;
--sider-dark-darken-bg-color: #273352;
--sider-dark-lighten-bg-color: #273352;
--sider-dark-bg-color: #f8f9fa; /* 侧边栏浅灰白 */
--sider-dark-darken-bg-color: #e9ecef; /* 稍深灰白 */
--sider-dark-lighten-bg-color: #f8f9fa; /* 保持与基础色一致 */
}
@font-size-base: 14;

2
src/design/var/index.less
View File

@ -5,7 +5,7 @@
@namespace: xingyuv;
// tabs
@multiple-height: 30px;
@multiple-height: 40px;
// headers
@header-height: 48px;

73
src/layouts/default/tabs/index.less
View File

@ -50,54 +50,64 @@
position: relative;
z-index: 1;
height: @multiple-height;
padding: 0 6px;
padding: 8px 0 8px 8px;
margin: 0 -14px 0 0 !important;
line-height: @multiple-height;
border-radius: 8px 8px 0 0;
border-radius: 0;
/* stylelint-disable-next-line function-url-quotes */
mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
//mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
transition: padding 0.3s;
mask-size: 100% 100%;
//mask-size: 100% 100%;
&:hover {
z-index: 2;
padding: 0 12px;
//padding: 0 12px;
.ant-tabs-tab-remove .anticon-close {
box-sizing: border-box;
opacity: 1;
&:hover {
color: #fff;
color: @text-color;
background-color: #c0c4cc;
border: 1px solid gray;
}
}
}
.ant-tabs-tab-remove {
top: 4px;
left: 10px;
margin-right: -10px;
margin-left: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
height: 150%;
padding: 0 6px;
//top: 4px;
//left: 10px;
//margin-right: -10px;
//margin-left: 0;
margin: 0;
//width: 26px;
.anticon-close {
position: relative;
width: 14px;
height: 14px;
//position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
padding: 1px 4px;
margin: 0 auto;
//width: 16px;
//height: 16px;
overflow: hidden;
font-size: 18px;
line-height: 10px;
color: inherit;
vertical-align: middle;
border: 1px solid transparent;
//line-height: 10px;
//color: inherit;
//vertical-align: middle;
border-radius: 100%;
opacity: 0;
//opacity: 0;
transition: opacity 0.15s;
transform-origin: 100% 50%;
&:hover {
svg {
fill: #fff;
}
}
}
}
@ -112,18 +122,19 @@
}
&:first-child {
padding: 0 6px !important;
}
&:active {
padding: 0 6px !important;
//padding: 0 6px !important;
padding-right: 8px;
}
//
//&:active {
// padding: 0 6px !important;
//}
}
.ant-tabs-tab-active {
position: relative;
z-index: 3;
padding: 0 6px;
//padding: 0 6px;
font-weight: inherit;
background: #004b89;
border: 0;
@ -148,7 +159,7 @@
}
.ant-tabs-nav > div:nth-child(1) {
padding: 0 6px;
//padding: 0 6px;
.ant-tabs-tab {
margin-right: 2px !important;

6
src/settings/projectSetting.ts
View File

@ -1,5 +1,5 @@
import { primaryColor } from '../../build/config/themeConfig'
import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from './designSetting'
import { HEADER_PRESET_BG_COLOR_LIST } from './designSetting'
import type { ProjectConfig } from '@/types/config'
import { MenuModeEnum, MenuTypeEnum, MixSidebarTriggerEnum, TriggerEnum } from '@/enums/menuEnum'
import { CacheTypeEnum } from '@/enums/cacheEnum'
@ -75,7 +75,7 @@ const setting: ProjectConfig = {
// 菜单配置
menuSetting: {
// 背景色
bgColor: SIDE_BAR_BG_COLOR_LIST[0],
bgColor: '#ffffff',
// 是否固定住菜单
fixed: true,
// 菜单折叠
@ -111,7 +111,7 @@ const setting: ProjectConfig = {
// 左侧混合菜单模块切换触发方式
mixSideTrigger: MixSidebarTriggerEnum.CLICK,
// 是否固定左侧混合菜单
mixSideFixed: false,
mixSideFixed: true,
},
// 多标签
multiTabsSetting: {