yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: fix style

pull/29/head
xingyu 2023-08-07 00:10:29 +08:00
parent fafb4028c5
commit 8347f97a2a
17 changed files with 55 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -4,7 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" /> <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> <title>%VITE_GLOB_APP_TITLE%</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</head> </head>
@ -69,7 +72,8 @@
.app-loading .app-loading-logo { .app-loading .app-loading-logo {
display: block; display: block;
width: 90px; width: 90px;
margin: 0 auto 20px; margin: 0 auto;
margin-bottom: 20px;
} }
.dot { .dot {

2
src/components/Application/src/search/AppSearchModal.vue
View File

@ -221,7 +221,7 @@ function handleClose() {
padding-left: 14px; padding-left: 14px;
margin-top: 8px; margin-top: 8px;
font-size: 14px; font-size: 14px;
color: @text-color-base; // color: @text-color-base;
cursor: pointer; cursor: pointer;
background-color: var(--component-background); background-color: var(--component-background);
border-radius: 4px; border-radius: 4px;

1
src/components/Basic/src/BasicHelp.vue
View File

@ -96,7 +96,6 @@ export default defineComponent({
display: inline-block; display: inline-block;
margin-left: 6px; margin-left: 6px;
font-size: 14px; font-size: 14px;
color: @text-color-help-dark;
cursor: pointer; cursor: pointer;
&__wrap { &__wrap {

1
src/components/Basic/src/BasicTitle.vue
View File

@ -50,7 +50,6 @@ const getClass = computed(() => [
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
// color: @text-color-base;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;

2
src/components/ContextMenu/src/ContextMenu.vue
View File

@ -159,7 +159,7 @@ export default defineComponent({
} }
&:not(.ant-menu-item-disabled):hover { &:not(.ant-menu-item-disabled):hover {
color: @text-color-base; color: @text-color;
background-color: @item-hover-bg; background-color: @item-hover-bg;
} }
} }

15
src/components/Page/src/PageWrapper.vue
View File

@ -109,7 +109,14 @@ watch(
<template> <template>
<div ref="wrapperRef" :class="getClass"> <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 #default>
<template v-if="content"> <template v-if="content">
{{ content }} {{ content }}
@ -143,12 +150,14 @@ watch(
position: relative; position: relative;
.@{prefix-cls}-content { .@{prefix-cls}-content {
margin: 12px; margin: 1rem;
border-radius: 1rem;
} }
.ant-page-header { .ant-page-header {
&:empty { &:empty {
padding: 0; margin: 1rem;
border-radius: 1rem;
} }
} }

4
src/components/SimpleMenu/src/components/menu.less
View File

@ -68,7 +68,7 @@
&-light { &-light {
.@{menu-prefix-cls}-item, .@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title { .@{menu-prefix-cls}-submenu-title {
color: @text-color-base; color: @text-color;
&-selected { &-selected {
z-index: 2; z-index: 2;
@ -88,7 +88,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: @font-size-base; font-size: @font-size-base;
color: @text-color-base; color: @text-color;
list-style: none; list-style: none;
outline: none; outline: none;

80
src/design/color.less
View File

@ -18,15 +18,7 @@ html {
@content-bg: #f4f7f9; @content-bg: #f4f7f9;
@text-color: fade(@black, 85%); @text-color: var(--text-color);
@text-color-secondary: fade(@black, 45%);
@text-color-inverse: @white;
@icon-color: inherit;
@icon-color-hover: fade(@black, 75%);
@component-background: #fff; @component-background: #fff;
@ -49,33 +41,6 @@ html {
// } // }
@iconify-bg-color: #5551; @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============= // ==============Header=============
// ================================= // =================================
@ -100,46 +65,3 @@ html {
// trigger // trigger
@trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2); @trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
@trigger-dark-bg-color: rgba(255, 255, 255, 0.1); @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;

3
src/design/public.less
View File

@ -21,9 +21,8 @@
} }
::-webkit-scrollbar-thumb { ::-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: rgb(144 147 153 / 30%);
// background-color: rgba(144, 147, 153, 0.3);
border-radius: 2px; border-radius: 2px;
box-shadow: inset 0 0 6px rgb(0 0 0 / 20%); box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
} }

4
src/layouts/default/header/components/Breadcrumb.vue
View File

@ -159,7 +159,7 @@ function getIcon(route) {
&--light { &--light {
.ant-breadcrumb-link { .ant-breadcrumb-link {
color: @breadcrumb-item-normal-color; color: #999;
a { a {
color: rgb(0 0 0 / 65%); color: rgb(0 0 0 / 65%);
@ -167,7 +167,7 @@ function getIcon(route) {
} }
.ant-breadcrumb-separator { .ant-breadcrumb-separator {
color: @breadcrumb-item-normal-color; color: #999;
} }
} }

2
src/layouts/default/header/components/user-dropdown/index.vue
View File

@ -137,7 +137,7 @@ function handleMenuClick(e: MenuInfo) {
} }
.@{prefix-cls}__name { .@{prefix-cls}__name {
color: @text-color-base; color: @text-color;
} }
.@{prefix-cls}__desc { .@{prefix-cls}__desc {

6
src/layouts/default/header/index.less
View File

@ -141,7 +141,7 @@
border-left: 1px solid @header-light-bottom-border-color; border-left: 1px solid @header-light-bottom-border-color;
.@{header-prefix-cls}-logo { .@{header-prefix-cls}-logo {
color: @text-color-base; color: @text-color;
&:hover { &:hover {
background-color: @header-light-bg-hover-color; background-color: @header-light-bg-hover-color;
@ -150,7 +150,7 @@
.@{header-prefix-cls}-action { .@{header-prefix-cls}-action {
&__item { &__item {
color: @text-color-base; color: @text-color;
.app-iconify { .app-iconify {
padding: 0 10px; padding: 0 10px;
@ -164,7 +164,7 @@
&-icon, &-icon,
span[role="img"] { span[role="img"] {
color: @text-color-base; color: @text-color;
} }
} }
} }

2
src/layouts/default/sider/LayoutSider.vue
View File

@ -132,7 +132,7 @@ const getTrigger = h(LayoutTrigger)
// box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
.ant-layout-sider-trigger { .ant-layout-sider-trigger {
color: @text-color-base; color: @text-color;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
} }
} }

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

@ -13,7 +13,7 @@
.ant-tabs.ant-tabs-card { .ant-tabs.ant-tabs-card {
.ant-tabs-nav { .ant-tabs-nav {
height: @multiple-height; height: @multiple-height;
padding-left: 10px; // padding-left: 10px;
margin: 0; margin: 0;
background-color: var(--component-background); background-color: var(--component-background);
border: 0; border: 0;
@ -28,7 +28,7 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
height: @multiple-height; height: @multiple-height;
padding: 0 16px; padding: 0 6px;
margin: 0 -14px 0 0 !important; margin: 0 -14px 0 0 !important;
line-height: @multiple-height; line-height: @multiple-height;
color: var(--text-color); color: var(--text-color);
@ -45,7 +45,7 @@
&:hover { &:hover {
z-index: 2; z-index: 2;
padding: 0 22px; padding: 0 12px;
.ant-tabs-tab-remove .anticon-close { .ant-tabs-tab-remove .anticon-close {
opacity: 1; opacity: 1;
@ -85,38 +85,43 @@
} }
} }
// > div { > div {
// display: flex; display: flex;
// justify-content: center; align-items: center;
// align-items: center; justify-content: center;
// } }
svg { svg {
fill: @text-color-base; fill: @text-color;
} }
&:first-child { &:first-child {
padding: 0 16px !important; padding: 0 6px !important;
} }
&:active { &:active {
padding: 0 16px !important; padding: 0 6px !important;
} }
} }
.ant-tabs-tab-active { .ant-tabs-tab-active {
position: relative; position: relative;
z-index: 3; z-index: 3;
padding: 0 16px; padding: 0 6px;
font-weight: inherit; font-weight: inherit;
background: #d4ebff; background: #004b89;
border: 0; border: 0;
.ant-tabs-tab-btn {
color: #fff;
}
.ant-tabs-tab-remove .anticon-close { .ant-tabs-tab-remove .anticon-close {
opacity: 1; opacity: 1;
svg { svg {
width: 0.6em; width: 0.6em;
fill: #fff;
} }
} }
@ -130,7 +135,7 @@
padding: 0 6px; padding: 0 6px;
.ant-tabs-tab { .ant-tabs-tab {
margin-right: -20px !important; margin-right: -6px !important;
} }
} }
} }
@ -175,7 +180,7 @@
border-left: 1px solid var(--border-color); border-left: 1px solid var(--border-color);
&:hover { &:hover {
color: @text-color-base; color: @text-color;
} }
span[role="img"] { span[role="img"] {

6
src/layouts/default/tabs/index.vue
View File

@ -23,8 +23,6 @@ import { listenerRouteChange } from '@/logics/mitt/routeChange'
defineOptions({ name: 'MultipleTabs' }) defineOptions({ name: 'MultipleTabs' })
const TabPane = Tabs.TabPane
const affixTextList = initAffixTabs() const affixTextList = initAffixTabs()
const activeKeyRef = ref('') const activeKeyRef = ref('')
@ -101,11 +99,11 @@ function handleEdit(targetKey: string) {
@edit="handleEdit" @edit="handleEdit"
> >
<template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path"> <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> <template #tab>
<TabContent :tab-item="item" /> <TabContent :tab-item="item" />
</template> </template>
</TabPane> </Tabs.TabPane>
</template> </template>
<template v-if="getShowRedo || getShowQuick" #rightExtra> <template v-if="getShowRedo || getShowQuick" #rightExtra>

2
src/views/base/login/SessionTimeoutLogin.vue
View File

@ -50,6 +50,6 @@ onBeforeUnmount(() => {
z-index: 9999999; z-index: 9999999;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: @component-background; background: var(--component-background);
} }
</style> </style>

2
src/views/base/login/sso.vue
View File

@ -195,7 +195,7 @@ html[data-theme='dark'] {
.ant-divider-inner-text { .ant-divider-inner-text {
font-size: 12px; font-size: 12px;
color: @text-color-secondary; color: var(--text-color-secondary);
} }
} }
</style> </style>