修正css错误

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>

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>