美化footer,使其更有层次感

Web/src/layout/component/main.vue

@@ -1,6 +1,10 @@
 <template>
 	<el-main class="layout-main" :style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
-		<el-scrollbar ref="layoutMainScrollbarRef" class="layout-main-scroll layout-backtop-header-fixed" wrap-class="layout-main-scroll" view-class="layout-main-scroll">
+		<el-scrollbar ref="layoutMainScrollbarRef" 
+            class="layout-main-scroll layout-backtop-header-fixed" 
+            wrap-class="layout-main-scroll" 
+            view-class="layout-main-scroll overflow-bug" 
+        >
 			<LayoutParentView />
 			<LayoutFooter v-if="isFooter" />
 		</el-scrollbar>

Web/src/layout/footer/index.vue

@@ -1,8 +1,8 @@
 <template>
-	<div class="layout-footer pb15">
+	<div class="layout-footer">
 		<div class="layout-footer-warp">
 			<!-- <div>{{ themeConfig.globalTitle }}</div> -->
-			<div class="mt5">{{ themeConfig.copyright }} {{ themeConfig.globalTitle }}</div>
+			<div>{{ themeConfig.copyright }} {{ themeConfig.globalTitle }}</div>
 		</div>
 	</div>
 </template>
@@ -19,6 +19,10 @@ const { themeConfig } = storeToRefs(storesThemeConfig);
 .layout-footer {
 	width: 100%;
 	display: flex;
+    line-height: 30px;
+    height: 30px;
+    background: #fff;
+    border-top: 1px solid var(--el-border-color-light);
 
 	&-warp {
 		margin: auto;

Web/src/theme/app.scss

@@ -97,6 +97,8 @@ body,
 				position: relative;
 				padding: 5px; // 四周间隙
 			}
+
+            .overflow-bug { padding: 1px 0; }  // 不加会在内容未占满时上下有1px的滚动，不知道为什么
 		}
 	}
 	// 用于界面高度自适应