style: fix style
parent
fafb4028c5
commit
8347f97a2a
|
@ -4,7 +4,10 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
|
||||
/>
|
||||
<title>%VITE_GLOB_APP_TITLE%</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</head>
|
||||
|
@ -69,7 +72,8 @@
|
|||
.app-loading .app-loading-logo {
|
||||
display: block;
|
||||
width: 90px;
|
||||
margin: 0 auto 20px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
|
|
|
@ -221,7 +221,7 @@ function handleClose() {
|
|||
padding-left: 14px;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: @text-color-base;
|
||||
// color: @text-color-base;
|
||||
cursor: pointer;
|
||||
background-color: var(--component-background);
|
||||
border-radius: 4px;
|
||||
|
|
|
@ -96,7 +96,6 @@ export default defineComponent({
|
|||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
font-size: 14px;
|
||||
color: @text-color-help-dark;
|
||||
cursor: pointer;
|
||||
|
||||
&__wrap {
|
||||
|
|
|
@ -50,7 +50,6 @@ const getClass = computed(() => [
|
|||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
// color: @text-color-base;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
|
|
|
@ -159,7 +159,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
&:not(.ant-menu-item-disabled):hover {
|
||||
color: @text-color-base;
|
||||
color: @text-color;
|
||||
background-color: @item-hover-bg;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -109,7 +109,14 @@ watch(
|
|||
|
||||
<template>
|
||||
<div ref="wrapperRef" :class="getClass">
|
||||
<PageHeader v-if="getShowHeader" v-bind="omit($attrs, 'class')" ref="headerRef" :ghost="ghost" :title="title">
|
||||
<PageHeader
|
||||
v-if="getShowHeader"
|
||||
v-bind="omit($attrs, 'class')"
|
||||
ref="headerRef"
|
||||
style="margin: 1rem; border-radius: 1rem;"
|
||||
:ghost="ghost"
|
||||
:title="title"
|
||||
>
|
||||
<template #default>
|
||||
<template v-if="content">
|
||||
{{ content }}
|
||||
|
@ -143,12 +150,14 @@ watch(
|
|||
position: relative;
|
||||
|
||||
.@{prefix-cls}-content {
|
||||
margin: 12px;
|
||||
margin: 1rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.ant-page-header {
|
||||
&:empty {
|
||||
padding: 0;
|
||||
margin: 1rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -68,7 +68,7 @@
|
|||
&-light {
|
||||
.@{menu-prefix-cls}-item,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
color: @text-color-base;
|
||||
color: @text-color;
|
||||
|
||||
&-selected {
|
||||
z-index: 2;
|
||||
|
@ -88,7 +88,7 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-base;
|
||||
color: @text-color;
|
||||
list-style: none;
|
||||
outline: none;
|
||||
|
||||
|
|
|
@ -18,15 +18,7 @@ html {
|
|||
|
||||
@content-bg: #f4f7f9;
|
||||
|
||||
@text-color: fade(@black, 85%);
|
||||
|
||||
@text-color-secondary: fade(@black, 45%);
|
||||
|
||||
@text-color-inverse: @white;
|
||||
|
||||
@icon-color: inherit;
|
||||
|
||||
@icon-color-hover: fade(@black, 75%);
|
||||
@text-color: var(--text-color);
|
||||
|
||||
@component-background: #fff;
|
||||
|
||||
|
@ -49,33 +41,6 @@ html {
|
|||
// }
|
||||
@iconify-bg-color: #5551;
|
||||
|
||||
// =================================
|
||||
// ==============border-color=======
|
||||
// =================================
|
||||
@border-color-base: #fff;
|
||||
|
||||
// Dark-dark
|
||||
@border-color-dark: #b6b7b9;
|
||||
|
||||
// Dark-light
|
||||
@border-color-shallow-dark: #cececd;
|
||||
|
||||
// Light-dark
|
||||
@border-color-light: @border-color-base;
|
||||
|
||||
// =================================
|
||||
// ==============message==============
|
||||
// =================================
|
||||
|
||||
// success-bg-color
|
||||
@success-background-color: #f1f9ec;
|
||||
// info-bg-color
|
||||
@info-background-color: #e8eff8;
|
||||
// warn-bg-color
|
||||
@warning-background-color: #fdf6ed;
|
||||
// danger-bg-color
|
||||
@danger-background-color: #fef0f0;
|
||||
|
||||
// =================================
|
||||
// ==============Header=============
|
||||
// =================================
|
||||
|
@ -100,46 +65,3 @@ html {
|
|||
// trigger
|
||||
@trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
|
||||
@trigger-dark-bg-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
// =================================
|
||||
// ==============tree============
|
||||
// =================================
|
||||
// tree item hover background
|
||||
@tree-hover-background-color: #f5f7fa;
|
||||
// tree item hover font color
|
||||
@tree-hover-font-color: #f5f7fa;
|
||||
|
||||
// =================================
|
||||
// ==============link============
|
||||
// =================================
|
||||
// =================================
|
||||
// ==============Text color-=============
|
||||
// =================================
|
||||
|
||||
// Main text color
|
||||
@text-color-base: @text-color;
|
||||
|
||||
// Label color
|
||||
@text-color-call-out: #606266;
|
||||
|
||||
// Auxiliary information color-dark
|
||||
@text-color-help-dark: #909399;
|
||||
|
||||
// =================================
|
||||
// ==============breadcrumb=========
|
||||
// =================================
|
||||
@breadcrumb-item-normal-color: #999;
|
||||
// =================================
|
||||
// ==============button=============
|
||||
// =================================
|
||||
|
||||
@button-ghost-color: @white;
|
||||
@button-ghost-hover-color: lighten(@white, 10%);
|
||||
@button-ghost-hover-bg-color: #e1ebf6;
|
||||
@button-ghost-active-color: darken(@white, 10%);
|
||||
|
||||
@button-cancel-color: @text-color-call-out;
|
||||
|
||||
@button-cancel-bg-color: @white;
|
||||
@button-cancel-border-color: @border-color-shallow-dark;
|
||||
|
||||
|
|
|
@ -21,9 +21,8 @@
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
// background: rgba(0, 0, 0, 0.6);
|
||||
background: rgb(0 0 0 60%);
|
||||
background-color: rgb(144 147 153 / 30%);
|
||||
// background-color: rgba(144, 147, 153, 0.3);
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
|
|
@ -159,7 +159,7 @@ function getIcon(route) {
|
|||
|
||||
&--light {
|
||||
.ant-breadcrumb-link {
|
||||
color: @breadcrumb-item-normal-color;
|
||||
color: #999;
|
||||
|
||||
a {
|
||||
color: rgb(0 0 0 / 65%);
|
||||
|
@ -167,7 +167,7 @@ function getIcon(route) {
|
|||
}
|
||||
|
||||
.ant-breadcrumb-separator {
|
||||
color: @breadcrumb-item-normal-color;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -137,7 +137,7 @@ function handleMenuClick(e: MenuInfo) {
|
|||
}
|
||||
|
||||
.@{prefix-cls}__name {
|
||||
color: @text-color-base;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.@{prefix-cls}__desc {
|
||||
|
|
|
@ -141,7 +141,7 @@
|
|||
border-left: 1px solid @header-light-bottom-border-color;
|
||||
|
||||
.@{header-prefix-cls}-logo {
|
||||
color: @text-color-base;
|
||||
color: @text-color;
|
||||
|
||||
&:hover {
|
||||
background-color: @header-light-bg-hover-color;
|
||||
|
@ -150,7 +150,7 @@
|
|||
|
||||
.@{header-prefix-cls}-action {
|
||||
&__item {
|
||||
color: @text-color-base;
|
||||
color: @text-color;
|
||||
|
||||
.app-iconify {
|
||||
padding: 0 10px;
|
||||
|
@ -164,7 +164,7 @@
|
|||
|
||||
&-icon,
|
||||
span[role="img"] {
|
||||
color: @text-color-base;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -132,7 +132,7 @@ const getTrigger = h(LayoutTrigger)
|
|||
// box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
||||
|
||||
.ant-layout-sider-trigger {
|
||||
color: @text-color-base;
|
||||
color: @text-color;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
.ant-tabs.ant-tabs-card {
|
||||
.ant-tabs-nav {
|
||||
height: @multiple-height;
|
||||
padding-left: 10px;
|
||||
// padding-left: 10px;
|
||||
margin: 0;
|
||||
background-color: var(--component-background);
|
||||
border: 0;
|
||||
|
@ -28,7 +28,7 @@
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
height: @multiple-height;
|
||||
padding: 0 16px;
|
||||
padding: 0 6px;
|
||||
margin: 0 -14px 0 0 !important;
|
||||
line-height: @multiple-height;
|
||||
color: var(--text-color);
|
||||
|
@ -45,7 +45,7 @@
|
|||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
padding: 0 22px;
|
||||
padding: 0 12px;
|
||||
|
||||
.ant-tabs-tab-remove .anticon-close {
|
||||
opacity: 1;
|
||||
|
@ -85,38 +85,43 @@
|
|||
}
|
||||
}
|
||||
|
||||
// > div {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// }
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: @text-color-base;
|
||||
fill: @text-color;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding: 0 16px !important;
|
||||
padding: 0 6px !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
padding: 0 16px !important;
|
||||
padding: 0 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
padding: 0 16px;
|
||||
padding: 0 6px;
|
||||
font-weight: inherit;
|
||||
background: #d4ebff;
|
||||
background: #004b89;
|
||||
border: 0;
|
||||
|
||||
.ant-tabs-tab-btn {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ant-tabs-tab-remove .anticon-close {
|
||||
opacity: 1;
|
||||
|
||||
svg {
|
||||
width: 0.6em;
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -130,7 +135,7 @@
|
|||
padding: 0 6px;
|
||||
|
||||
.ant-tabs-tab {
|
||||
margin-right: -20px !important;
|
||||
margin-right: -6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -175,7 +180,7 @@
|
|||
border-left: 1px solid var(--border-color);
|
||||
|
||||
&:hover {
|
||||
color: @text-color-base;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
span[role="img"] {
|
||||
|
|
|
@ -23,8 +23,6 @@ import { listenerRouteChange } from '@/logics/mitt/routeChange'
|
|||
|
||||
defineOptions({ name: 'MultipleTabs' })
|
||||
|
||||
const TabPane = Tabs.TabPane
|
||||
|
||||
const affixTextList = initAffixTabs()
|
||||
const activeKeyRef = ref('')
|
||||
|
||||
|
@ -101,11 +99,11 @@ function handleEdit(targetKey: string) {
|
|||
@edit="handleEdit"
|
||||
>
|
||||
<template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
|
||||
<TabPane :closable="!(item && item.meta && item.meta.affix)">
|
||||
<Tabs.TabPane :closable="!(item && item.meta && item.meta.affix)">
|
||||
<template #tab>
|
||||
<TabContent :tab-item="item" />
|
||||
</template>
|
||||
</TabPane>
|
||||
</Tabs.TabPane>
|
||||
</template>
|
||||
|
||||
<template v-if="getShowRedo || getShowQuick" #rightExtra>
|
||||
|
|
|
@ -50,6 +50,6 @@ onBeforeUnmount(() => {
|
|||
z-index: 9999999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @component-background;
|
||||
background: var(--component-background);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -195,7 +195,7 @@ html[data-theme='dark'] {
|
|||
|
||||
.ant-divider-inner-text {
|
||||
font-size: 12px;
|
||||
color: @text-color-secondary;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue