manager/my-spring
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页切换标签重构

Browse Source
This commit is contained in:
gaoxq
2026-04-24 17:57:59 +08:00
parent 3c337f13ef
commit 564acbc91e
2 changed files with 37 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web-vue/packages/biz/views/biz/myDocker/index.vue
View File

@@ -342,7 +342,7 @@
systemInfo.value = res; systemInfo.value = res;
} }
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} finally { } finally {
if (accountId === selectedAccountId.value) { if (accountId === selectedAccountId.value) {
metricLoading.value = false; metricLoading.value = false;
@@ -417,9 +417,6 @@
height: 100%; height: 100%;
min-height: 0; min-height: 0;
padding: 0 !important; padding: 0 !important;
width: calc(100% + 10px);
margin-left: -5px !important;
margin-right: -5px !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
overflow: hidden !important; overflow: hidden !important;
background: transparent !important; background: transparent !important;

53
web-vue/packages/core/layouts/default/tabs/index3.less
View File

@@ -4,39 +4,49 @@
* @author Vben、ThinkGem * @author Vben、ThinkGem
*/ */
@prefix-cls-3: ~'jeesite-multiple-tabs-3'; // Tabs style @prefix-cls-3: ~'jeesite-multiple-tabs-3'; // Tabs style
@multiple-height-large: 40px; // TABS_HEIGHT_LARGE @multiple-height-large: 36px; // TABS_HEIGHT_LARGE
.@{prefix-cls-3} { .@{prefix-cls-3} {
z-index: 10; z-index: 10;
height: @multiple-height-large + 2; height: @multiple-height-large + 8;
line-height: @multiple-height-large + 2; line-height: @multiple-height-large + 8;
background: rgb(240, 242, 245);
border-top: 1px solid rgb(226 232 240);
overflow: hidden;
.ant-tabs.ant-tabs-card { .ant-tabs.ant-tabs-card {
.ant-tabs-nav { .ant-tabs-nav {
height: @multiple-height-large; height: @multiple-height-large;
background-color: @content-bg; background-color: rgb(255, 255, 255);
margin: 0; margin: 4px 12px 0;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
border-radius: 12px;
padding: 0 8px;
&::before { &::before {
border-bottom: 0; border-bottom: 0;
} }
.ant-tabs-tab { .ant-tabs-tab {
height: calc(@multiple-height-large - 15px); height: calc(@multiple-height-large - 13px);
line-height: calc(@multiple-height-large - 13px); line-height: normal;
color: @text-color-base; color: @text-color-base;
background-color: @component-background; background-color: @component-background;
transition: none; transition: none;
border-radius: 7px !important; border-radius: 7px !important;
margin: 12px 0 0; margin: 4px 0 0;
padding-left: 10px; padding-left: 7px;
padding-right: 11px; padding-right: 8px;
border: 0 !important; border: 0 !important;
display: inline-flex;
align-items: center;
.ant-tabs-tab-btn { .ant-tabs-tab-btn {
transition: none; transition: none;
display: inline-flex;
align-items: center;
line-height: 1;
} }
&:hover, &:hover,
@@ -46,9 +56,9 @@
.anticon { .anticon {
opacity: 0.8; opacity: 0.8;
font-size: 13px; font-size: 12px;
text-align: center; text-align: center;
margin-right: 5px; margin-right: 3px;
svg { svg {
fill: @text-color-base; fill: @text-color-base;
@@ -57,13 +67,13 @@
.ant-tabs-tab-remove { .ant-tabs-tab-remove {
width: 12px; width: 12px;
height: 23px; height: 18px;
color: inherit; color: inherit;
transition: none; transition: none;
padding: 0; padding: 0;
.anticon { .anticon {
font-size: 16px; font-size: 14px;
svg { svg {
width: 0.6em; width: 0.6em;
@@ -105,10 +115,10 @@
} }
.ant-tabs-nav > div:nth-child(1) { .ant-tabs-nav > div:nth-child(1) {
margin-left: 13px; margin-left: 8px;
.ant-tabs-tab { .ant-tabs-tab {
margin-right: 6px !important; margin-right: 8px !important;
&:nth-last-child(2) { &:nth-last-child(2) {
margin-right: 20px !important; margin-right: 20px !important;
@@ -206,9 +216,18 @@
html[data-theme='dark'] { html[data-theme='dark'] {
.@{prefix-cls-3} { .@{prefix-cls-3} {
background: rgb(20, 20, 20);
border-top: 1px solid rgb(51 65 85);
overflow: hidden;
.ant-tabs.ant-tabs-card { .ant-tabs.ant-tabs-card {
.ant-tabs-nav { .ant-tabs-nav {
background: #000; background: rgb(20, 20, 20);
border-radius: 12px;
padding: 0 8px;
margin: 4px 12px 0;
height: @multiple-height-large;
box-shadow: inset 0 0 0 1px rgb(51 65 85);
&::before { &::before {
border-bottom: 0; border-bottom: 0;