github/CRMEB
1
0
Fork 0
mirror of https://github.com/crmeb/CRMEB.git synced 2026-10-30 06:20:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: 样式优化

Browse Source
This commit is contained in:
From-wh 2023-04-01 18:44:23 +08:00
parent 9d6f9dd6a4
commit 0cc4c5b4a7
5 changed files with 65 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
template/admin/src/layout/navBars/breadcrumb/setings.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="layout-breadcrumb-seting">
<el-drawer
title="主题编辑"
:visible.sync="getThemeConfig.isDrawer"
direction="rtl"
destroy-on-close
@ -355,7 +356,7 @@ export default {
},
setLocalTheme(val) {
let themeSelect = themeList[val];
console.log(this.getThemeConfig.layout);
if (['theme-1', 'theme-3', 'theme-5', 'theme-7'].includes(val)) {
// 这几个为黑色背景主题
if (['classic', 'transverse'].includes(this.getThemeConfig.layout)) {
@ -379,6 +380,37 @@ export default {
themeSelect['--prev-bg-menu-hover-ba-color'] = '#feedeb';
themeSelect['--prev-color-primary'] = '#f34d37';
}
} else {
if (val == 'theme-1') {
themeSelect['--prev-bg-menuBar'] = '#282c34';
themeSelect['--prev-bg-menu-hover-ba-color'] = '#1890ff';
themeSelect['--prev-color-primary'] = '#1890ff';
themeSelect['--prev-bg-topBarColor'] = '#282c34';
themeSelect['--prev-bg-topBar'] = '#fff';
themeSelect['--prev-bg-menuBarColor'] = '#fff';
themeSelect['--prev-MenuActiveColor'] = '#fff';
} else if (val == 'theme-3') {
themeSelect['--prev-bg-menuBar'] = '#282c34';
themeSelect['--prev-bg-menu-hover-ba-color'] = '#41b584';
themeSelect['--prev-color-primary'] = '#fff';
themeSelect['--prev-bg-topBarColor'] = '#515a6e';
themeSelect['--prev-bg-menuBarColor'] = '#fff';
themeSelect['--prev-MenuActiveColor'] = '#fff';
} else if (val == 'theme-5') {
themeSelect['--prev-bg-menuBar'] = '#282c34';
themeSelect['--prev-bg-topBarColor'] = '#282c34';
themeSelect['--prev-bg-menu-hover-ba-color'] = '#6954f0';
themeSelect['--prev-color-primary'] = '#fff';
themeSelect['--prev-bg-menuBarColor'] = '#fff';
themeSelect['--prev-MenuActiveColor'] = '#fff';
} else if (val == 'theme-7') {
themeSelect['--prev-bg-menuBar'] = '#282c34';
themeSelect['--prev-bg-topBarColor'] = '#515a6e';
themeSelect['--prev-bg-menu-hover-ba-color'] = '#f34d37';
themeSelect['--prev-color-primary'] = '#fff';
themeSelect['--prev-bg-menuBarColor'] = '#fff';
themeSelect['--prev-MenuActiveColor'] = '#fff';
}
}
} else {
if (this.getThemeConfig.layout === 'columns') {
@ -531,7 +563,7 @@ export default {
.mr5 {
margin-right: 5px;
}
/deep/ .el-radio-button--mini .el-radio-button__inner{
/deep/ .el-radio-button--mini .el-radio-button__inner {
padding: 7px 8px;
}
.layout-breadcrumb-seting-bar {

34
template/admin/src/layout/navBars/breadcrumb/theme.js
View File

@ -3,27 +3,31 @@ export const themeList = {
'--prev-bg-menuBar': '#282c34',
'--prev-bg-menuBarColor': '#fff',
'--prev-color-primary': '#fff',
'--prev-color-text-white': '#515a6e',
'--prev-color-text-white': '#fff',
'--prev-bg-menu-hover-ba-color': '#1890ff',
'--prev-bg-topBar': '#fff', //顶部菜单栏颜色
'--prev-bg-topBarColor': '#282c34',
'--prev-bg-columnsMenuBar': '#282c34',
'--prev-bg-columnsMenuBarColor': '#fff',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-MenuActiveColor': '#1890ff',
'--prev-tag-active-color': '#1890ff',
'--prev-color-primary-light-9': '#e8f4ff',
'--prev-bg-columnsMenuActiveColor': '#fff',
},
'theme-2': {
'--prev-bg-menuBar': '#ffffff',
'--prev-bg-menuBarColor': '#515a6e',
'--prev-color-primary': '#1890ff',
'--prev-color-text-white': '#515a6e',
'--prev-color-text-white': '#fff',
'--prev-bg-menu-hover-ba-color': '#e8f4ff',
'--prev-bg-topBar': '#ffffff',
'--prev-bg-topBarColor': '#515a6e',
'--prev-bg-columnsMenuBar': '#fff',
'--prev-bg-columnsMenuBarColor': '#515a6e',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-MenuActiveColor': '#1890ff',
'--prev-bg-columnsMenuActiveBgColor': '#1890ff',
'--prev-tag-active-color': '#1890ff',
'--prev-color-primary-light-9': '#e8f4ff',
},
@ -31,13 +35,14 @@ export const themeList = {
'--prev-bg-menuBar': '#282c34',
'--prev-bg-menuBarColor': '#fff',
'--prev-color-primary': '#fff',
'--prev-color-text-white': '#515a6e',
'--prev-color-text-white': '#fff',
'--prev-bg-menu-hover-ba-color': '#41b584', // 菜单选中背景色
'--prev-bg-topBar': '#fff', //顶部菜单栏颜色
'--prev-bg-topBarColor': '#282c34',
'--prev-bg-columnsMenuBar': '#282c34',
'--prev-bg-columnsMenuBarColor': '#fff',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-MenuActiveColor': '#41b584',
'--prev-color-primary-light-9': '#ecf8f3',
'--prev-tag-active-color': '#41b584',
'--prev-color-primary-light-9': '#ecf8f3',
@ -46,13 +51,15 @@ export const themeList = {
'--prev-bg-menuBar': '#ffffff',
'--prev-bg-menuBarColor': '#515a6e',
'--prev-color-primary': '#41b584',
'--prev-color-text-white': '#515a6e',
'--prev-color-text-white': '#fff',
'--prev-bg-menu-hover-ba-color': '#ecf8f3',
'--prev-bg-topBar': '#ffffff',
'--prev-bg-topBarColor': '#515a6e',
'--prev-bg-columnsMenuBar': '#fff',
'--prev-bg-columnsMenuBarColor': '#515a6e',
'--prev-bg-columnsMenuActiveColor': '#ecf8f3',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-MenuActiveColor': '#41b584',
'--prev-tag-active-color': '#41b584',
'--prev-color-primary-light-9': '#ecf8f3',
},
@ -60,13 +67,15 @@ export const themeList = {
'--prev-bg-menuBar': '#282c34',
'--prev-bg-menuBarColor': '#fff',
'--prev-color-primary': '#fff',
'--prev-color-text-white': '#515a6e',
'--prev-color-text-white': '#fff',
'--prev-bg-menu-hover-ba-color': '#6954f0', // 菜单选中背景色
'--prev-bg-topBar': '#fff', //顶部菜单栏颜色
'--prev-bg-topBarColor': '#282c34',
'--prev-bg-columnsMenuBar': '#282c34',
'--prev-bg-columnsMenuBarColor': '#fff',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-MenuActiveColor': '#6954f0',
'--prev-color-primary-light-9': '#f0eefe',
'--prev-tag-active-color': '#6954f0',
},
@ -74,13 +83,14 @@ export const themeList = {
'--prev-bg-menuBar': '#ffffff',
'--prev-bg-menuBarColor': '#515a6e',
'--prev-color-primary': '#6954f0',
'--prev-color-text-white': '#515a6e',
'--prev-color-text-white': '#fff',
'--prev-bg-menu-hover-ba-color': '#e8f4ff',
'--prev-bg-topBar': '#ffffff',
'--prev-bg-topBarColor': '#515a6e',
'--prev-bg-columnsMenuBar': '#fff',
'--prev-bg-columnsMenuBarColor': '#515a6e',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-MenuActiveColor': '#6954f0',
'--prev-color-primary-light-9': '#f0eefe',
'--prev-tag-active-color': '#6954f0',
},
@ -88,20 +98,21 @@ export const themeList = {
'--prev-bg-menuBar': '#282c34',
'--prev-bg-menuBarColor': '#fff',
'--prev-color-primary': '#fff',
'--prev-color-text-white': '#515a6e',
'--prev-color-text-white': '#fff',
'--prev-bg-menu-hover-ba-color': '#f34d37', // 菜单选中背景色
'--prev-bg-topBar': '#fff', //顶部菜单栏颜色
'--prev-bg-topBarColor': '#282c34',
'--prev-bg-columnsMenuBar': '#282c34',
'--prev-bg-columnsMenuBarColor': '#fff',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-MenuActiveColor': '#f34d37',
'--prev-tag-active-color': '#f34d37',
},
'theme-8': {
'--prev-bg-menuBar': '#ffffff',
'--prev-bg-menuBarColor': '#515a6e',
'--prev-color-primary': '#f34d37',
'--prev-color-text-white': '#515a6e',
'--prev-color-text-white': '#fff',
'--prev-bg-menu-hover-ba-color': '#feedeb',
'--prev-bg-topBar': '#ffffff',
'--prev-bg-topBarColor': '#515a6e',
@ -109,13 +120,14 @@ export const themeList = {
'--prev-bg-columnsMenuBarColor': '#515a6e',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-color-primary-light-9': '#feedeb',
'--prev-MenuActiveColor': '#f34d37',
'--prev-tag-active-color': '#f34d37',
},
'theme-9': {
'--prev-bg-menuBar': '#ffffff',
'--prev-bg-menuBarColor': '#515a6e',
'--prev-color-primary': '#1890ff',
'--prev-color-text-white': '#515a6e',
'--prev-color-text-white': '#fff',
'--prev-bg-menu-hover-ba-color': '#e8f4ff',
'--prev-bg-topBar': '#ffffff',
'--prev-bg-topBarColor': '#515a6e',

6
template/admin/src/layout/navBars/breadcrumb/user.vue
View File

@ -47,9 +47,8 @@
</div>
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
<i
class="iconfont"
:title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
:class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
:class="!isScreenfull ? 'el-icon-full-screen' : 'el-icon-crop'"
></i>
</div>
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onDropdownCommand">
@ -206,8 +205,9 @@ export default {
removeCookies('expires_time');
removeCookies('uuid');
// window.location.reload()
done();
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);

2
template/admin/src/layout/navBars/tagsView/tagsView.vue
View File

@ -363,7 +363,7 @@ export default {
right: 0;
bottom: 0;
left: 0;
background: var(--prev-color-primary);
background: var(--prev-tag-active-color);
z-index: -1;
opacity: 0;
transform: scale3d(0.7, 1, 1);

8
template/admin/src/theme/element.scss
View File

@ -125,7 +125,7 @@
.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
color: var(--prev-color-primary) !important;
color: var(--prev-MenuActiveColor) !important;
}
.el-menu.el-menu--horizontal {
border-bottom: none !important;
@ -151,10 +151,10 @@
// 默认 hover 时
.el-menu-item:hover,
.el-submenu__title:hover {
color: var(--prev-color-primary) !important;
color: var(--prev-MenuActiveColor) !important;
background-color: var(--prev-bg-menu-hover-ba-color) !important;
i {
color: var(--prev-color-primary) !important;
color: var(--prev-MenuActiveColor) !important;
}
}
// 鼠标 hover 时颜色
@ -163,7 +163,7 @@
}
// 高亮时
.el-menu-item.is-active {
color: var(--prev-color-primary) !important;
color: var(--prev-MenuActiveColor) !important;
// background-color: var(--prev-bg-menu-hover-ba-color) !important;
}
.el-menu-item.is-active,