添加底部背景图片

src/components/Tools/MobileToolbar.vue

@@ -1,5 +1,14 @@
+<script setup>
+import FooterContent from './Tools/FooterContent.vue'
+</script>
+
 <template>
-  <div id="mobilebarroot"></div>
+  <div id="mobilebarroot">
+    <div id="barcontent"></div>
+    <div id="barbottom">
+      <FooterContent></FooterContent>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -14,10 +23,41 @@ export default {
 @import "node_modules/bootstrap/scss/_mixins.scss";
 
 #mobilebarroot{
-  background-color: black;
   @include media-breakpoint-between(xs, md) {
+    background-color: black;
+    display: flex;
+    //position: -webkit-fixed;
+    position: fixed;
+    z-index: 10;
+    width: 100%;
+    flex-direction: column;
+    height: 100vh;
+    visibility: collapse;
   }
   @include media-breakpoint-up(md) {
+    visibility: collapse;!important;
+  }
+}
+
+#barcontent{
+  @include media-breakpoint-between(xs, md) {
+    display: flex;
+    position: relative;
+    flex:1;
+    width: 100%;
+    min-height: 100%;
+  }
+  @include media-breakpoint-up(md) {
+    visibility: collapse;!important;
+  }
+}
+
+#barbottom{
+  @include media-breakpoint-between(xs, md) {
+    width: 100%;
+  }
+  @include media-breakpoint-up(md) {
+    visibility: collapse;!important;
   }
 }
 </style>