Browse Source

调整footer布局

master
xh 2 days ago
parent
commit
3bd9975b2c
  1. 18
      web/src/layout/components/AppView.vue
  2. 2
      web/src/layout/components/Setting/src/Setting.vue
  3. 13
      web/src/layout/components/Setting/src/components/InterfaceDisplay.vue
  4. 18
      web/src/store/modules/app.ts
  5. 2
      web/src/views/HandDevice/Home/index.vue
  6. 17
      web/src/views/Login/Login.vue

18
web/src/layout/components/AppView.vue

@ -1,17 +1,17 @@
<script lang="ts" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useAppStore } from '@/store/modules/app'
import { Footer } from '@/layout/components/Footer'
// import { Footer } from '@/layout/components/Footer'
defineOptions({ name: 'AppView' })
const appStore = useAppStore()
const layout = computed(() => appStore.getLayout)
// const layout = computed(() => appStore.getLayout)
const fixedHeader = computed(() => appStore.getFixedHeader)
// const fixedHeader = computed(() => appStore.getFixedHeader)
const footer = computed(() => appStore.getFooter)
// const footer = computed(() => appStore.getFooter)
const tagsViewStore = useTagsViewStore()
@ -19,7 +19,7 @@ const getCaches = computed((): string[] => {
return tagsViewStore.getCachedViews
})
const tagsView = computed(() => appStore.getTagsView)
// const tagsView = computed(() => appStore.getTagsView)
//region
const routerAlive = ref(true)
@ -36,11 +36,7 @@ provide('reload', reload)
<template>
<section
:class="[
'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
{
'!min-h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))] pb-0':
footer
}
'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]'
]"
>
<router-view v-if="routerAlive">
@ -51,5 +47,5 @@ provide('reload', reload)
</template>
</router-view>
</section>
<Footer v-if="footer" />
<!-- <Footer v-if="footer" /> -->
</template>

2
web/src/layout/components/Setting/src/Setting.vue

@ -138,8 +138,6 @@ const copyConfig = async () => {
uniqueOpened: ${appStore.getUniqueOpened},
// header
fixedHeader: ${appStore.getFixedHeader},
//
footer: ${appStore.getFooter},
//
greyMode: ${appStore.getGreyMode},
// layout

13
web/src/layout/components/Setting/src/components/InterfaceDisplay.vue

@ -109,11 +109,10 @@ const fixedHeaderChange = (show: boolean) => {
}
//
const footer = ref(appStore.getFooter)
const footerChange = (show: boolean) => {
appStore.setFooter(show)
}
// const footer = ref(appStore.getFooter)
// const footerChange = (show: boolean) => {
// appStore.setFooter(show)
// }
//
const greyMode = ref(appStore.getGreyMode)
@ -213,10 +212,10 @@ watch(
<ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" />
</div>
<div class="flex items-center justify-between">
<!-- <div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.footer') }}</span>
<ElSwitch v-model="footer" @change="footerChange" />
</div>
</div> -->
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.greyMode') }}</span>

18
web/src/store/modules/app.ts

@ -54,11 +54,11 @@ export const useAppStore = defineStore('app', {
title: import.meta.env.VITE_APP_TITLE, // 标题
pageLoading: false, // 路由跳转loading
breadcrumb: false, // 面包屑
breadcrumb: true, // 面包屑
breadcrumbIcon: false, // 面包屑图标
collapse: false, // 折叠菜单
uniqueOpened: true, // 是否只保持一个子菜单的展开
hamburger: false, // 折叠图标
hamburger: true, // 折叠图标
screenfull: true, // 全屏图标
search: false, // 搜索图标
size: false, // 尺寸图标
@ -69,7 +69,7 @@ export const useAppStore = defineStore('app', {
tagsViewIcon: true, // 是否显示标签图标
logo: true, // logo
fixedHeader: true, // 固定toolheader
footer: true, // 显示页脚
footer: false, // 显示页脚
greyMode: false, // 是否开始灰色模式,用于特殊悼念日
fixedMenu: wsCache.get('fixedMenu') || false, // 是否固定菜单
layout: wsCache.get(CACHE_KEY.LAYOUT) || 'top', // layout布局
@ -183,9 +183,9 @@ export const useAppStore = defineStore('app', {
getTheme(): ThemeTypes {
return this.theme
},
getFooter(): boolean {
return this.footer
}
// getFooter(): boolean {
// return this.footer
// }
},
actions: {
setPrimaryLight() {
@ -314,9 +314,9 @@ export const useAppStore = defineStore('app', {
}
this.setPrimaryLight()
},
setFooter(footer: boolean) {
this.footer = footer
}
// setFooter(footer: boolean) {
// this.footer = footer
// }
},
persist: false
})

2
web/src/views/HandDevice/Home/index.vue

@ -1,5 +1,5 @@
<template>
<div class="flex flex-row overflow-auto" style="height: calc(100vh - 160px)">
<div class="flex flex-row overflow-auto" style="height: calc(100vh - 125px)">
<div class="flex-1 h-full position-relative">
<OpenLayerMap
ref="mapRef"

17
web/src/views/Login/Login.vue

@ -3,7 +3,6 @@
:class="prefixCls"
class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
>
<div class="footer">京公网安备 11010702002311 </div>
<div class="relative mx-auto h-full flex">
<div
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
@ -66,10 +65,14 @@
</Transition>
</div>
</div>
<div class="footer">
<Footer />
</div>
</div>
</template>
<script lang="ts" setup>
import { underlineToHump } from '@/utils'
import { Footer } from '@/layout/components/Footer'
import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
@ -119,12 +122,12 @@ $prefix-cls: #{$namespace}-login;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
color: #fff;
font-size: 14px;
padding: 10px 0;
background-color: #000;
opacity: 0.5;
// text-align: center;
// color: #fff;
// font-size: 14px;
// padding: 10px 0;
// background-color: #000;
// opacity: 0.5;
}
}
</style>

Loading…
Cancel
Save