fix:前台Footer组件没有实现绝对底部的问题

web/src/layouts/frontend/components/footer.vue

@@ -15,9 +15,7 @@ const siteConfig = useSiteConfig()
 
 <style scoped lang="scss">
 .footer {
-    position: fixed;
     display: flex;
-    bottom: 0;
     width: 100%;
     justify-content: center;
     align-items: center;

web/src/layouts/frontend/components/main.vue

@@ -1,25 +1,21 @@
 <template>
     <el-main class="layout-main">
-        <el-scrollbar class="layout-main-scrollbar" ref="mainScrollbarRef">
-            <router-view v-slot="{ Component }">
-                <component :is="Component" :key="Component" />
-            </router-view>
-        </el-scrollbar>
+        <router-view v-slot="{ Component }">
+            <transition :name="config.layout.mainAnimation" mode="out-in">
+                <component :is="Component" />
+            </transition>
+        </router-view>
     </el-main>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useConfig } from '/@/stores/config'
+
+const config = useConfig()
+</script>
 
 <style scoped lang="scss">
-.layout-container .layout-main {
+.layout-main {
     padding: 0 !important;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-}
-.layout-main-scrollbar {
-    width: 100%;
-    position: relative;
-    overflow: hidden;
 }
 </style>

web/src/layouts/frontend/container/default.vue

@@ -1,13 +1,15 @@
 <template>
     <el-container class="is-vertical">
         <Header />
-        <el-row justify="center">
-            <el-col class="user-layouts" :span="16" :xs="24">
-                <Aside />
-                <Main />
-            </el-col>
-        </el-row>
-        <Footer />
+        <el-scrollbar :style="layoutMainScrollbarStyle()" ref="mainScrollbarRef">
+            <el-row class="frontend-footer-brother" justify="center">
+                <el-col class="user-layouts" :span="16" :xs="24">
+                    <Aside />
+                    <Main />
+                </el-col>
+            </el-row>
+            <Footer />
+        </el-scrollbar>
     </el-container>
 </template>
 
@@ -16,11 +18,13 @@ import Header from '/@/layouts/frontend/components/header.vue'
 import Aside from '/@/layouts/frontend/components/aside.vue'
 import Main from '/@/layouts/frontend/components/main.vue'
 import Footer from '/@/layouts/frontend/components/footer.vue'
+import { mainHeight as layoutMainScrollbarStyle } from '/@/utils/layout'
 </script>
 
 <style scoped lang="scss">
 .user-layouts {
     display: flex;
     padding-top: 15px;
+    align-items: flex-start;
 }
 </style>

web/src/layouts/frontend/user.vue

@@ -67,4 +67,8 @@ export default {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style lang="scss">
+.frontend-footer-brother {
+    min-height: calc(100vh - 120px);
+}
+</style>

web/src/utils/common.ts

@@ -53,7 +53,7 @@ export function setTitleFromRoute(t: any = null) {
         if (navTabs.state.activeRoute) {
             webTitle = navTabs.state.activeRoute.title
         } else if (memberCenter.state.activeRoute) {
-            webTitle = memberCenter.state.activeRoute.title
+            webTitle = router.currentRoute.value.meta.title as string
         } else {
             webTitle =
                 t && router.currentRoute.value.meta.title ? t(router.currentRoute.value.meta.title) : (router.currentRoute.value.meta.title as string)

web/src/utils/layout.ts

@@ -1,5 +1,6 @@
 import { CSSProperties } from 'vue'
 import { useNavTabs } from '/@/stores/navTabs'
+import { isAdminApp } from '/@/utils/common'
 
 /**
  * main高度
@@ -7,11 +8,14 @@ import { useNavTabs } from '/@/stores/navTabs'
  * @returns CSSProperties
  */
 export function mainHeight(extra: number = 0): CSSProperties {
-    const navTabs = useNavTabs()
-
     let height = extra
-    if (!navTabs.state.tabFullScreen) {
-        height += 75
+    if (isAdminApp()) {
+        const navTabs = useNavTabs()
+        if (!navTabs.state.tabFullScreen) {
+            height += 75
+        }
+    } else {
+        height += 60
     }
     return {
         height: 'calc(100vh - ' + height.toString() + 'px)',

web/src/views/frontend/index.vue

@@ -101,6 +101,8 @@ index().then((res) => {
 .footer {
     color: var(--color-secondary);
     background-color: transparent;
+    position: fixed;
+    bottom: 0;
 }
 
 @media screen and (max-width: 1024px) {

web/src/views/frontend/user/login.vue

@@ -2,7 +2,7 @@
     <div class="login">
         <el-container class="is-vertical">
             <Header />
-            <el-main>
+            <el-main class="frontend-footer-brother">
                 <el-row justify="center">
                     <el-col :span="16" :xs="24">
                         <div class="login-box">