style: 调整系统主题,隐藏不必要的功能
This commit is contained in:
BIN
src/assets/images/logo_geg.png
Normal file
BIN
src/assets/images/logo_geg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@ -5,23 +5,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="anticon" :class="getAppLogoClass" @click="goHome">
|
<div class="anticon" :class="getAppLogoClass" @click="goHome">
|
||||||
<a href="https://www.learun.cn/" target="_blank">
|
<a href="https://www.learun.cn/" target="_blank">
|
||||||
<img :src="logoConfig.menuLogoUrl || logo" width="24" style="height: 30px" />
|
<img :src="logoConfig.menuLogoUrl || logo" width="24" style="height: 36px" />
|
||||||
<div class="truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
|
<div class="truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
|
||||||
・{{ logoConfig.shortName || title }}
|
{{ sysName }}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, unref } from 'vue';
|
import { computed, ref, unref } from 'vue';
|
||||||
import { useGlobSetting } from '/@/hooks/setting';
|
|
||||||
import { useGo } from '/@/hooks/web/usePage';
|
import { useGo } from '/@/hooks/web/usePage';
|
||||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
import { PageEnum } from '/@/enums/pageEnum';
|
import { PageEnum } from '/@/enums/pageEnum';
|
||||||
import { useUserStore } from '/@/store/modules/user';
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
import { useAppStore } from '/@/store/modules/app';
|
import { useAppStore } from '/@/store/modules/app';
|
||||||
import logo from '/@/assets/images/logo.svg';
|
import logo from '/@/assets/images/logo_geg.png';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
/**
|
/**
|
||||||
* The theme of the current parent component
|
* The theme of the current parent component
|
||||||
@ -34,27 +33,23 @@
|
|||||||
/**
|
/**
|
||||||
* The title is also displayed when the menu is collapsed
|
* The title is also displayed when the menu is collapsed
|
||||||
*/
|
*/
|
||||||
alwaysShowTitle: { type: Boolean },
|
alwaysShowTitle: { type: Boolean }
|
||||||
});
|
});
|
||||||
|
|
||||||
const { prefixCls } = useDesign('app-logo');
|
const { prefixCls } = useDesign('app-logo');
|
||||||
const { getCollapsedShowTitle } = useMenuSetting();
|
const { getCollapsedShowTitle } = useMenuSetting();
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const { title } = useGlobSetting();
|
|
||||||
const go = useGo();
|
const go = useGo();
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const logoConfig = appStore.getLogoConfig;
|
const logoConfig = appStore.getLogoConfig;
|
||||||
const getAppLogoClass = computed(() => [
|
const sysName = ref(import.meta.env.VITE_SYSTEM_NAME);
|
||||||
prefixCls,
|
const getAppLogoClass = computed(() => [prefixCls, props.theme, { 'collapsed-show-title': unref(getCollapsedShowTitle) }]);
|
||||||
props.theme,
|
|
||||||
{ 'collapsed-show-title': unref(getCollapsedShowTitle) },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const getTitleClass = computed(() => [
|
const getTitleClass = computed(() => [
|
||||||
`${prefixCls}__title`,
|
`${prefixCls}__title`,
|
||||||
{
|
{
|
||||||
'xs:opacity-0': !props.alwaysShowTitle,
|
'xs:opacity-0': !props.alwaysShowTitle
|
||||||
},
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
function goHome() {
|
function goHome() {
|
||||||
@ -84,7 +79,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.dark &__title {
|
&.dark &__title {
|
||||||
color: #0096df;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
@ -92,6 +87,7 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
@submenu-popup-prefix-cls: ~'@{namespace}-menu-submenu-popup';
|
@submenu-popup-prefix-cls: ~'@{namespace}-menu-submenu-popup';
|
||||||
|
|
||||||
@transition-time: 0.2s;
|
@transition-time: 0.2s;
|
||||||
@menu-dark-subsidiary-color: rgba(255, 255, 255, 0.7);
|
@menu-dark-subsidiary-color: rgba(255, 255, 255, 0.9);
|
||||||
|
|
||||||
.light-border {
|
.light-border {
|
||||||
&::after {
|
&::after {
|
||||||
@ -260,7 +260,7 @@
|
|||||||
color: @menu-dark-subsidiary-color;
|
color: @menu-dark-subsidiary-color;
|
||||||
&-active:not(.@{menu-prefix-cls}-submenu) {
|
&-active:not(.@{menu-prefix-cls}-submenu) {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
background-color: @primary-color !important;
|
background-color: rgb(0 0 0 / 40%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|||||||
@ -5,7 +5,7 @@ html {
|
|||||||
--header-active-menu-bg-color: #273352;
|
--header-active-menu-bg-color: #273352;
|
||||||
|
|
||||||
// sider
|
// sider
|
||||||
--sider-dark-bg-color: #030523;
|
--sider-dark-bg-color: #002f7b;
|
||||||
--sider-dark-darken-bg-color: #273352;
|
--sider-dark-darken-bg-color: #273352;
|
||||||
--sider-dark-lighten-bg-color: #273352;
|
--sider-dark-lighten-bg-color: #273352;
|
||||||
}
|
}
|
||||||
@ -65,7 +65,7 @@ html {
|
|||||||
|
|
||||||
// let -menu
|
// let -menu
|
||||||
@sider-dark-bg-color: var(--sider-dark-bg-color);
|
@sider-dark-bg-color: var(--sider-dark-bg-color);
|
||||||
@sider-dark-darken-bg-color: var(--sider-dark-darken-bg-color);
|
@sider-dark-darken-bg-color: var(--sider-dark-bg-color);
|
||||||
@sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color);
|
@sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color);
|
||||||
|
|
||||||
// trigger
|
// trigger
|
||||||
|
|||||||
@ -21,12 +21,11 @@
|
|||||||
<div :class="`${prefixCls}-action`">
|
<div :class="`${prefixCls}-action`">
|
||||||
<LayoutBreadcrumb :theme="getHeaderTheme" v-if="getShowTopMenu && !getIsMobile" />
|
<LayoutBreadcrumb :theme="getHeaderTheme" v-if="getShowTopMenu && !getIsMobile" />
|
||||||
<AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
|
<AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
|
||||||
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
|
|
||||||
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
|
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
|
||||||
|
|
||||||
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
|
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
|
||||||
|
|
||||||
<UserPostChange />
|
<UserPostChange v-if="false" />
|
||||||
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" ref="drawer" />
|
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" ref="drawer" />
|
||||||
<UserDropDown @menu-click="onMenuClick" :theme="getHeaderTheme" :show-settings="getShowSetting" />
|
<UserDropDown @menu-click="onMenuClick" :theme="getHeaderTheme" :show-settings="getShowSetting" />
|
||||||
</div>
|
</div>
|
||||||
@ -52,7 +51,7 @@
|
|||||||
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
|
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
|
||||||
import { UserPostChange } from '/@/components/Application';
|
import { UserPostChange } from '/@/components/Application';
|
||||||
|
|
||||||
import { LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
|
import { LayoutBreadcrumb, Notify, ErrorAction } from './components';
|
||||||
import UserDropDown from '/@/layouts/default/header/components/user-dropdown/DropDown.vue';
|
import UserDropDown from '/@/layouts/default/header/components/user-dropdown/DropDown.vue';
|
||||||
import { useAppInject } from '/@/hooks/web/useAppInject';
|
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
@ -69,7 +68,6 @@
|
|||||||
LayoutBreadcrumb,
|
LayoutBreadcrumb,
|
||||||
LayoutMenu,
|
LayoutMenu,
|
||||||
UserDropDown,
|
UserDropDown,
|
||||||
FullScreen,
|
|
||||||
Notify,
|
Notify,
|
||||||
AppSearch,
|
AppSearch,
|
||||||
ErrorAction,
|
ErrorAction,
|
||||||
|
|||||||
@ -5,46 +5,10 @@ export const prefixCls = 'vben';
|
|||||||
export const darkMode = ThemeEnum.LIGHT;
|
export const darkMode = ThemeEnum.LIGHT;
|
||||||
|
|
||||||
// app theme preset color
|
// app theme preset color
|
||||||
export const APP_PRESET_COLOR_LIST: string[] = [
|
export const APP_PRESET_COLOR_LIST: string[] = ['#5e95ff', '#0960bd', '#0084f4', '#009688', '#536dfe', '#ff5c93', '#ee4f12', '#0096c7', '#9c27b0', '#ff9800'];
|
||||||
'#5e95ff',
|
|
||||||
'#0960bd',
|
|
||||||
'#0084f4',
|
|
||||||
'#009688',
|
|
||||||
'#536dfe',
|
|
||||||
'#ff5c93',
|
|
||||||
'#ee4f12',
|
|
||||||
'#0096c7',
|
|
||||||
'#9c27b0',
|
|
||||||
'#ff9800',
|
|
||||||
];
|
|
||||||
|
|
||||||
// header preset color
|
// header preset color
|
||||||
export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
|
export const HEADER_PRESET_BG_COLOR_LIST: string[] = ['#07093E', '#ffffff', '#151515', '#009688', '#5172DC', '#018ffb', '#409eff', '#e74c3c', '#24292e', '#394664', '#001529', '#383f45'];
|
||||||
'#07093E',
|
|
||||||
'#ffffff',
|
|
||||||
'#151515',
|
|
||||||
'#009688',
|
|
||||||
'#5172DC',
|
|
||||||
'#018ffb',
|
|
||||||
'#409eff',
|
|
||||||
'#e74c3c',
|
|
||||||
'#24292e',
|
|
||||||
'#394664',
|
|
||||||
'#001529',
|
|
||||||
'#383f45',
|
|
||||||
];
|
|
||||||
|
|
||||||
// sider preset color
|
// sider preset color
|
||||||
export const SIDE_BAR_BG_COLOR_LIST: string[] = [
|
export const SIDE_BAR_BG_COLOR_LIST: string[] = ['#002F7B', '#212121', '#273352', '#ffffff', '#191b24', '#191a23', '#304156', '#001628', '#28333E', '#344058', '#383f45'];
|
||||||
'#07093E',
|
|
||||||
'#212121',
|
|
||||||
'#273352',
|
|
||||||
'#ffffff',
|
|
||||||
'#191b24',
|
|
||||||
'#191a23',
|
|
||||||
'#304156',
|
|
||||||
'#001628',
|
|
||||||
'#28333E',
|
|
||||||
'#344058',
|
|
||||||
'#383f45',
|
|
||||||
];
|
|
||||||
|
|||||||
@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<transition>
|
|
||||||
<div :class="prefixCls">
|
<div :class="prefixCls">
|
||||||
<Login sessionTimeout />
|
<Login sessionTimeout />
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||||
import Login from './Login.vue';
|
import Login from '/@/views/secondDev/Login.vue';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
import { useUserStore } from '/@/store/modules/user';
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
import { usePermissionStore } from '/@/store/modules/permission';
|
import { usePermissionStore } from '/@/store/modules/permission';
|
||||||
|
|||||||
Reference in New Issue
Block a user