From 48493477c644a852f29b8c76193d2e16cf13428c Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Tue, 29 Apr 2025 18:15:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3css=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue               | 22 ++++++++++++++++++++--
 src/components/Footer.vue | 13 ++++++++-----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b748248..738910b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,33 @@
 <script setup>
 // import HelloWorld from './components/HelloWorld.vue'
 // import TheWelcome from './components/TheWelcome.vue'
+import Footer from './components/Footer.vue'
 </script>
 
 <template>
 <div id="contentPane">
   <div id="content"></div>
-  <div id="footer"></div>
+  <div id="footer">
+    <Footer></Footer>
+  </div>
 </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@import "node_modules/bootstrap/scss/_functions.scss";
+@import "node_modules/bootstrap/scss/_variables.scss";
+@import "node_modules/bootstrap/scss/_mixins.scss";
 
+#contentPane{
+
+}
+#content{
+  position: relative;
+}
+
+@include media-breakpoint-between(xs, sm) {
+}
+
+@include media-breakpoint-between(md, xl) {
+}
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 536fb20..7374677 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -27,9 +27,12 @@ export default {
 
 }
 
-@include media-breakpoint-between(xs, sm) {
+@include media-breakpoint-between(xs, md) {
   #footerroot
   {
+    background-color: black;
+    width:100%;
+    justify-content: center;
     height:806px;
   }
   #footercontent
@@ -38,9 +41,12 @@ export default {
   }
 }
 
-@include media-breakpoint-between(md, xl) {
+@include media-breakpoint-up(md) {
   #footerroot
   {
+    background-color: black;
+    width:100%;
+    justify-content: center;
     height: 759px;
   }
   #footercontent
@@ -50,7 +56,4 @@ export default {
   }
 }
 
-@media screen {
-
-}
 </style>