feat: 样式修改
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 14 KiB |
1
frontend/components.d.ts
vendored
@ -81,6 +81,7 @@ declare module 'vue' {
|
|||||||
InfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
|
InfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
|
||||||
Loading: typeof import('element-plus/es')['ElLoadingDirective']
|
Loading: typeof import('element-plus/es')['ElLoadingDirective']
|
||||||
Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default']
|
Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default']
|
||||||
|
LogoNew: typeof import('./src/components/app-layout/menu/components/logo-new.vue')['default']
|
||||||
Menu: typeof import('./src/components/app-layout/menu/index.vue')['default']
|
Menu: typeof import('./src/components/app-layout/menu/index.vue')['default']
|
||||||
Popover: typeof import('element-plus/es')['ElPopoverDirective']
|
Popover: typeof import('element-plus/es')['ElPopoverDirective']
|
||||||
RouterButton: typeof import('./src/components/router-button/index.vue')['default']
|
RouterButton: typeof import('./src/components/router-button/index.vue')['default']
|
||||||
|
BIN
frontend/src/assets/images/1panel-menu.png
Normal file
After Width: | Height: | Size: 26 KiB |
BIN
frontend/src/assets/images/1panel-small.png
Normal file
After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 35 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 83 KiB |
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<Layout v-loading="loading" :element-loading-text="loadinText" fullscreen>
|
<Layout v-loading="loading" :element-loading-text="loadinText" fullscreen>
|
||||||
<template #menu>
|
<template #menu>
|
||||||
<Menu :panelName="themeConfig.panelName"></Menu>
|
<Menu></Menu>
|
||||||
</template>
|
</template>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="logo flx-center">
|
<div class="logo flx-center">
|
||||||
<span v-show="!isCollapse">{{ panelName }}</span>
|
<img v-show="!isCollapse" src="@/assets/images/1panel-menu.png" />
|
||||||
|
<img v-show="isCollapse" src="@/assets/images/1panel-small.png" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
defineProps<{ isCollapse: boolean; panelName: string }>();
|
defineProps<{ isCollapse: boolean }>();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@ -9,16 +9,17 @@
|
|||||||
.logo {
|
.logo {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 55px;
|
height: 55px;
|
||||||
span {
|
img:first-child {
|
||||||
font-size: 22px;
|
width: 120px;
|
||||||
font-weight: bold;
|
|
||||||
color: $primary-color;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 30px;
|
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
img:nth-child(2) {
|
||||||
|
width: 50px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-scrollbar {
|
.el-scrollbar {
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
element-loading-svg-view-box="-10, -10, 50, 50"
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||||
element-loading-background="rgba(122, 122, 122, 0.01)"
|
element-loading-background="rgba(122, 122, 122, 0.01)"
|
||||||
>
|
>
|
||||||
<Logo :panelName="panelName" :isCollapse="isCollapse"></Logo>
|
<Logo :isCollapse="isCollapse"></Logo>
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="activeMenu"
|
:default-active="activeMenu"
|
||||||
@ -39,7 +39,7 @@ import { ref, computed, onMounted } from 'vue';
|
|||||||
import { RouteRecordRaw, useRoute } from 'vue-router';
|
import { RouteRecordRaw, useRoute } from 'vue-router';
|
||||||
import { MenuStore } from '@/store/modules/menu';
|
import { MenuStore } from '@/store/modules/menu';
|
||||||
import { loadingSvg } from '@/utils/svg';
|
import { loadingSvg } from '@/utils/svg';
|
||||||
import Logo from './components/logo.vue';
|
import Logo from './components/Logo.vue';
|
||||||
import Collapse from './components/Collapse.vue';
|
import Collapse from './components/Collapse.vue';
|
||||||
import SubItem from './components/sub-item.vue';
|
import SubItem from './components/sub-item.vue';
|
||||||
import router, { menuList } from '@/routers/router';
|
import router, { menuList } from '@/routers/router';
|
||||||
@ -58,9 +58,7 @@ const activeMenu = computed((): string => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
const isCollapse = computed((): boolean => menuStore.isCollapse);
|
const isCollapse = computed((): boolean => menuStore.isCollapse);
|
||||||
const panelName = computed(() => {
|
|
||||||
return globalStore.themeConfig.panelName;
|
|
||||||
});
|
|
||||||
const routerMenus = computed((): RouteRecordRaw[] => menuStore.menuList);
|
const routerMenus = computed((): RouteRecordRaw[] => menuStore.menuList);
|
||||||
|
|
||||||
const screenWidth = ref<number>(0);
|
const screenWidth = ref<number>(0);
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<h4>抱歉,您访问的页面不存在~🤷♂️🤷♀️</h4>
|
<h4>抱歉,您访问的页面不存在~🤷♂️🤷♀️</h4>
|
||||||
<!-- <el-button type="primary" @click="tabStore.goHome()"
|
<!-- <el-button type="primary" @click="tabStore.goHome()"
|
||||||
>返回首页</el-button -->
|
>返回首页</el-button -->
|
||||||
>
|
<!-- > -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<template #toolbar>
|
<template #toolbar>
|
||||||
<el-row :gutter="5">
|
<el-row :gutter="5">
|
||||||
<el-col :span="20">
|
<el-col :span="20">
|
||||||
<el-button @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'">
|
<el-button @click="changeTag('all')" type="primary" :link="activeTag !== 'all'">
|
||||||
{{ $t('app.all') }}
|
{{ $t('app.all') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
<div v-for="item in tags" :key="item.key" style="display: inline">
|
<div v-for="item in tags" :key="item.key" style="display: inline">
|
||||||
@ -11,7 +11,7 @@
|
|||||||
class="tag-button"
|
class="tag-button"
|
||||||
@click="changeTag(item.key)"
|
@click="changeTag(item.key)"
|
||||||
type="primary"
|
type="primary"
|
||||||
:plain="activeTag !== item.key"
|
:link="activeTag !== item.key"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</el-button>
|
</el-button>
|
||||||
@ -220,6 +220,6 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tag-button {
|
.tag-button {
|
||||||
margin-left: 10px;
|
margin-left: 30px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|